@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/docs/intro.mdx

@@ -25,12 +25,12 @@ Svelte components, SCSS and more you can use in graphics projects.
 pnpm i @reuters-graphics/graphics-components
 ```
 
-2. Checkout the [guides](?path=/docs/guides-using-these-docs--page), if you haven't, or dive straight into the docs to start using components.
+2. Checkout the [guides](?path=/docs/guides-using-these-docs--docs), if you haven't, or dive straight into the docs to start using components.
 
 ```svelte
 <script>
   import { BodyText } from '@reuters-graphics/graphics-components';
 </script>
 
-<BodyText text="{'Hello world!'}" />
+<BodyText text={'Hello world!'} />
 ```

package/dist/docs/styles/intro.mdx

@@ -9,7 +9,7 @@ This library also includes our main SCSS stylesheets with pre-defined classes yo
 
 ### Importing our main stylesheet
 
-Import the SCSS directly in your top-level component. (This is done for you in the Graphics Kit.)
+Import the SCSS directly in your top-level component. (This is done for you in the graphics kit.)
 
 ```svelte
 <!-- pages/index.svelte -->

package/dist/docs/theming/css-variables.mdx

@@ -37,12 +37,12 @@ You can redefine any of the above CSS variables in the `<Theme>` component. Read
 ```svelte
 <Theme
   base="light"
-  theme="{{
+  theme={{
     colour: {
       // This replaces the default text-secondary colour '#666666' for light theme
       'text-secondary': '#213310',
     },
-  }}"
+  }}
 >
   <!-- page stuff -->
 </Theme>
@@ -57,11 +57,11 @@ For example, let's say you want to define a border radius for some card elements
 ```svelte
 <Theme
   base="light"
-  theme="{{
+  theme={{
     style: {
       'border-radius': '22px',
     },
-  }}"
+  }}
 >
   <!-- page stuff -->
 </Theme>
@@ -90,15 +90,15 @@ You can also change a variable's value based on some condition. For example, to
   let windowWidth;
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <Theme
   base="light"
-  theme="{{
+  theme={{
     style: {
       'border-radius': windowWidth > 475 ? '22px' : '11px',
     },
-  }}"
+  }}
 >
   <!-- page stuff -->
 </Theme>

package/dist/docs/utils/css-to-js/index.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function convert(input: any, ...args: any[]): Record<string, string>;

package/dist/docs/utils/css-to-js/index.js

@@ -0,0 +1,388 @@
+/*
+ * Reuters Graphics browser port of:
+ * Copyright 2020 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import css from 'css';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true,
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  const keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    let symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (let i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(
+          target,
+          key,
+          Object.getOwnPropertyDescriptor(source, key)
+        );
+      });
+    }
+  }
+
+  return target;
+}
+
+function _slicedToArray(arr, i) {
+  return (
+    _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest()
+  );
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (
+    !(
+      Symbol.iterator in Object(arr) ||
+      Object.prototype.toString.call(arr) === '[object Arguments]'
+    )
+  ) {
+    return;
+  }
+
+  const _arr = [];
+  let _n = true;
+  let _d = false;
+  let _e;
+
+  try {
+    for (
+      var _i = arr[Symbol.iterator](), _s;
+      !(_n = (_s = _i.next()).done);
+      _n = true
+    ) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i.return != null) _i.return();
+    } finally {
+      // eslint-disable-next-line
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableRest() {
+  throw new TypeError('Invalid attempt to destructure non-iterable instance');
+}
+
+const addProperty = function addProperty(obj, key, value) {
+  const retObj = obj;
+
+  if (retObj[key]) {
+    retObj[key] = _objectSpread2({}, retObj[key], {}, value);
+  } else {
+    retObj[key] = value;
+  }
+
+  return retObj;
+};
+
+const camelize = function camelize(str) {
+  return str.replace(/-([a-z])/g, function (g) {
+    return g[1].toUpperCase();
+  });
+};
+
+const capitalize = function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+const sanitize = function sanitize(name) {
+  return name
+    .replace(/\*/g, 'all-children')
+    .replace(/#/g, '$')
+    .replace(/\s\s+/g, ' ')
+    .replace(/(\d)\\\/(\d)/g, '$1~$2') // Added for escaped slashes like ".w-1/2"
+    .replace(/(\d)\\\.(\d)/g, '$1|$2') // Added for escaped dots like ".mb-0\.5"
+    .replace(/[^a-zA-Z0-9$|~]/g, '_')
+    .replace(/^_+/g, '')
+    .replace(/_+$/g, '')
+    .replace('|', '.') // Replace placeholder
+    .replace('~', '/'); // Replace placeholder
+};
+
+const fontface = function fontface(rule, result) {
+  let name = '';
+  let obj = {};
+  const fontObj = {};
+  rule.declarations.forEach(function (declaration) {
+    const cssProperty = camelize(declaration.property);
+    fontObj[cssProperty] = declaration.value;
+    name = capitalize(camelize(fontObj.fontFamily).replace(/"/g, ''));
+    obj = {
+      '@font-face': fontObj,
+    };
+  });
+  let dupeFlag = false;
+  Object.keys(result).forEach(function (key) {
+    if (key.split('_')[0] === name) {
+      if (JSON.stringify(result[key]) === JSON.stringify(obj)) {
+        dupeFlag = true;
+      }
+    }
+  });
+
+  if (!dupeFlag) {
+    const numVar = Object.entries(result).filter(function (resObj) {
+      return resObj[0].split('_')[0] === name;
+    }).length;
+
+    if (numVar > 0) {
+      name = ''.concat(name, '_').concat(numVar + 1);
+    }
+
+    name = sanitize(name);
+    return [name, obj];
+  }
+
+  return false;
+};
+
+const keyframes = function keyframes(rule) {
+  const keyFrameObj = {};
+  rule.keyframes.forEach(function (keyframe) {
+    keyframe.declarations.forEach(function (decl) {
+      keyFrameObj[keyframe.values[0]] = _objectSpread2(
+        {},
+        keyFrameObj[keyframe.values[0]],
+        _defineProperty({}, decl.property, decl.value)
+      );
+    });
+  });
+  let name = camelize('keyframes-'.concat(rule.name));
+  const obj = {};
+  obj['@keyframes '.concat(rule.name)] = keyFrameObj;
+  name = sanitize(name);
+  return [name, obj];
+};
+
+const standard = function standard(rule, result) {
+  const obj = {};
+  let retObj = {};
+  rule.declarations.forEach(function (declaration) {
+    const cssProperty = camelize(declaration.property);
+    obj[cssProperty] = declaration.value;
+  });
+  rule.selectors.forEach(function (selector) {
+    let name; // Check if selector contains a pseudo selector
+
+    const pseudoSelectorIndex = selector.indexOf(':');
+
+    if (pseudoSelectorIndex !== -1) {
+      // Find end of pseudo selector
+      let endPseudoSelectorIndex = selector.indexOf(' ', pseudoSelectorIndex);
+      if (endPseudoSelectorIndex === -1)
+        endPseudoSelectorIndex = selector.length; // Split selector
+
+      const primarySelector = selector.slice(0, pseudoSelectorIndex);
+      const pseudoSelector = selector.slice(
+        pseudoSelectorIndex,
+        endPseudoSelectorIndex
+      );
+      const secondarySelector = selector.slice(
+        endPseudoSelectorIndex,
+        selector.length
+      );
+      const pseudoObj = {};
+      pseudoObj['&'.concat(pseudoSelector).concat(secondarySelector)] = obj;
+      name = sanitize(primarySelector.trim());
+      retObj = addProperty(result, name, pseudoObj);
+    } else {
+      name = sanitize(selector.trim());
+      retObj = addProperty(result, name, obj);
+    }
+  });
+  return retObj;
+};
+
+const convertRules = function convertRules(rules) {
+  const res =
+    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let result = res;
+  rules.forEach(function (rule) {
+    if (rule.type === 'media') {
+      // Convert @media rules
+      const name = '@media '.concat(rule.media);
+      result[name] = result[name] || {};
+      const media = result[name];
+      convertRules(rule.rules, media);
+    } else if (rule.type === 'font-face') {
+      // Convert @font-face rules
+      const fontProp = fontface(rule, result);
+      if (fontProp) result = addProperty(result, fontProp[0], fontProp[1]);
+    } else if (rule.type === 'keyframes') {
+      // Convert @keyframes rules
+      const keyProp = keyframes(rule);
+      result = addProperty(result, keyProp[0], keyProp[1]);
+    } else if (rule.type === 'rule') {
+      // Convert standard CSS rules
+      const standardProp = standard(rule, result);
+      Object.entries(standardProp).forEach(function (_ref) {
+        const _ref2 = _slicedToArray(_ref, 2);
+        const key = _ref2[0];
+        const value = _ref2[1];
+
+        result = addProperty(result, key, value);
+      });
+    }
+  });
+  return result;
+};
+
+const convertToJS = function convertToJS(input) {
+  // Parse CSS string into rules array
+  try {
+    const parsedCss = css.parse(input);
+    const rules = parsedCss.stylesheet.rules;
+    return convertRules(rules);
+  } catch (err) {
+    throw new Error('Invalid CSS input: '.concat(err));
+  }
+};
+
+const reverseMediaQueries = function reverseMediaQueries(inputData) {
+  const exportObject = {};
+
+  const moveMediaInsideClass = function moveMediaInsideClass(object) {
+    const media =
+      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    Object.entries(object).forEach(function (_ref) {
+      const _ref2 = _slicedToArray(_ref, 2);
+      const key = _ref2[0];
+      const value = _ref2[1];
+
+      if (key.includes('@media')) {
+        moveMediaInsideClass(object[key], key);
+      } else if (media) {
+        const tempObj = {};
+        tempObj[media] = value;
+
+        if (exportObject[key]) {
+          exportObject[key] = _objectSpread2(
+            {},
+            exportObject[key],
+            {},
+            tempObj
+          );
+        } else {
+          exportObject[key] = tempObj;
+        }
+      } else if (exportObject[key]) {
+        exportObject[key] = _objectSpread2({}, exportObject[key], {}, value);
+      } else {
+        exportObject[key] = value;
+      }
+    });
+  };
+
+  moveMediaInsideClass(inputData);
+  return exportObject;
+};
+
+const convertStringToJson = function convertStringToJson(input, mediaReverse) {
+  let contents = convertToJS(input);
+
+  if (mediaReverse) {
+    contents = reverseMediaQueries(contents);
+  }
+
+  return {
+    contents,
+  };
+};
+
+const convert = function convert(input) {
+  const config =
+    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const outputType = config.outputType;
+  const _outputPath = config.outputPath;
+  let mediaReverse = config.mediaReverse;
+  let convertedCss;
+
+  if (outputType === 'splitFile' || outputType === 'shakeFile') {
+    mediaReverse = true;
+  } // If input is a String of CSS
+
+  convertedCss = convertStringToJson(input, mediaReverse);
+
+  if (!outputType) {
+    if (Array.isArray(convertedCss)) {
+      return convertedCss.map(function (obj) {
+        return obj.contents;
+      });
+    } else {
+      return convertedCss.contents;
+    }
+  } else {
+    const writeRecur = function writeRecur(input) {
+      if (Array.isArray(input)) {
+        input.forEach(function (obj) {
+          writeRecur(obj);
+        });
+      }
+    };
+
+    writeRecur(convertedCss);
+  }
+};
+
+export { convert };

package/dist/docs/utils/parseCss.d.ts

@@ -1,3 +1,3 @@
-export function cssStringToTableArray(cssString: any, withInclude?: boolean): string[][];
-export function scssVariablesToTableArray(scssString: any): any[][];
-export function extractCssColourVariables(cssString: any): any[][];
+export declare const cssStringToTableArray: (cssString?: string, withInclude?: boolean) => string[][];
+export declare const scssVariablesToTableArray: (scssString?: string) => string[][];
+export declare const extractCssColourVariables: (cssString?: string) => (string | string[])[][];

package/dist/docs/utils/parseCss.js

@@ -1,48 +1,42 @@
 import { compileString } from 'sass';
-import { convert } from '../../../bin/css-to-js/index.js';
-import { kebabCase } from 'lodash-es';
-
-export const cssStringToTableArray = (cssString, withInclude = false) => {
-  const cssObj = convert(compileString(cssString).css);
-  return Object.entries(cssObj).map(([key, value]) => {
-    const className = key.replace(/_/g, '-');
-    const properties = Object.entries(value)
-      .map(([propName, propValue]) => {
-        // Excludes any media query-ied stuff...
-        if (typeof propValue !== 'string') return '';
-        return `${kebabCase(propName)}: ${propValue.replace(
-          /\s?!important/g,
-          ''
-        )};`;
-      })
-      .join('\n');
-    return withInclude ?
-        [className, className, properties]
-      : [className, properties];
-  });
+import { convert } from './css-to-js/index.js';
+import { kebabCase } from 'es-toolkit';
+export const cssStringToTableArray = (cssString = '', withInclude = false) => {
+    const cssObj = convert(compileString(cssString).css);
+    return Object.entries(cssObj).map(([key, value]) => {
+        const className = key.replace(/_/g, '-');
+        const properties = Object.entries(value)
+            .map(([propName, propValue]) => {
+            // Excludes any media query-ied stuff...
+            if (typeof propValue !== 'string')
+                return '';
+            return `${kebabCase(propName)}: ${propValue.replace(/\s?!important/g, '')};`;
+        })
+            .join('\n');
+        if (withInclude)
+            return [className, className, properties];
+        return [className, properties];
+    });
 };
-
-export const scssVariablesToTableArray = (scssString) => {
-  const regExp = /^(\$[a-zA-Z0-9-_]+):\s*(.+)$/gm;
-  const matches = scssString.matchAll(regExp);
-  return Array.from(matches).map((match) => {
-    return [match[1], match[2]];
-  });
+export const scssVariablesToTableArray = (scssString = '') => {
+    const regExp = /^(\$[a-zA-Z0-9-_]+):\s*(.+)$/gm;
+    const matches = scssString.matchAll(regExp);
+    return Array.from(matches).map((match) => {
+        return [match[1], match[2]];
+    });
 };
-
-export const extractCssColourVariables = (cssString) => {
-  const variableRegexp = /(--[a-zA-Z][a-zA-Z0-9-]+):\s*(.+);/g;
-  const cssVariables = [...cssString.matchAll(variableRegexp)].map(
-    ([_, g1, g2]) => [g2, g1]
-  );
-  const colours = {};
-  for (const variable of cssVariables) {
-    const [colour, css] = variable;
-    if (colours[colour]) {
-      colours[colour].push(css);
-    } else {
-      colours[colour] = [css];
+export const extractCssColourVariables = (cssString = '') => {
+    const variableRegexp = /(--[a-zA-Z][a-zA-Z0-9-]+):\s*(.+);/g;
+    const cssVariables = [...cssString.matchAll(variableRegexp)].map(([_, g1, g2]) => [g2, g1]);
+    const colours = {};
+    for (const variable of cssVariables) {
+        const [colour, css] = variable;
+        if (colours[colour]) {
+            colours[colour].push(css);
+        }
+        else {
+            colours[colour] = [css];
+        }
     }
-  }
-  return Object.keys(colours).map((key) => [key, colours[key]]);
+    return Object.keys(colours).map((key) => [key, colours[key]]);
 };

package/dist/index.d.ts

@@ -1,45 +1,43 @@
-export { default as cssVariables } from "./actions/cssVariables/index.js";
-export { default as resizeObserver } from "./actions/resizeObserver/index.js";
-export { default as Article } from "./components/Article/Article.svelte";
-export { default as AdScripts } from "./components/AdSlot/AdScripts.svelte";
-export { default as BeforeAfter } from "./components/BeforeAfter/BeforeAfter.svelte";
-export { default as Block } from "./components/Block/Block.svelte";
-export { default as BodyText } from "./components/BodyText/BodyText.svelte";
-export { default as Byline } from "./components/Byline/Byline.svelte";
-export { default as DatawrapperChart } from "./components/DatawrapperChart/DatawrapperChart.svelte";
-export { default as DocumentCloud } from "./components/DocumentCloud/DocumentCloud.svelte";
-export { default as EmbedPreviewerLink } from "./components/EmbedPreviewerLink/EmbedPreviewerLink.svelte";
-export { default as FeaturePhoto } from "./components/FeaturePhoto/FeaturePhoto.svelte";
-export { default as Framer } from "./components/Framer/Framer.svelte";
-export { default as GraphicBlock } from "./components/GraphicBlock/GraphicBlock.svelte";
-export { default as Headline } from "./components/Headline/Headline.svelte";
-export { default as HeroHeadline } from "./components/HeroHeadline/Hero.svelte";
-export { default as EndNotes } from "./components/EndNotes/EndNotes.svelte";
-export { default as InfoBox } from "./components/InfoBox/InfoBox.svelte";
-export { default as InlineAd } from "./components/AdSlot/InlineAd.svelte";
-export { default as LeaderboardAd } from "./components/AdSlot/LeaderboardAd.svelte";
-export { default as Markdown } from "./components/Markdown/Markdown.svelte";
-export { default as PaddingReset } from "./components/PaddingReset/PaddingReset.svelte";
-export { default as PhotoCarousel } from "./components/PhotoCarousel/PhotoCarousel.svelte";
-export { default as PhotoPack } from "./components/PhotoPack/PhotoPack.svelte";
-export { default as PymChild } from "./components/PymChild/PymChild.svelte";
-export { pymChildStore } from "./components/PymChild/stores.js";
-export { staticMarkdown } from "./components/Markdown/stores.js";
-export { default as ReferralBlock } from "./components/ReferralBlock/ReferralBlock.svelte";
-export { default as ReutersGraphicsLogo } from "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte";
-export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.svelte";
-export { default as Scroller } from "./components/Scroller/Scroller.svelte";
-export { default as SearchInput } from "./components/SearchInput/SearchInput.svelte";
-export { default as SEO } from "./components/SEO/SEO.svelte";
-export { default as SimpleTimeline } from "./components/SimpleTimeline/SimpleTimeline.svelte";
-export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte";
-export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
-export { default as SiteHeadline } from "./components/SiteHeadline/SiteHeadline.svelte";
-export { default as Spinner } from "./components/Spinner/Spinner.svelte";
-export { default as SponsorshipAd } from "./components/AdSlot/SponsorshipAd.svelte";
-export { default as Table } from "./components/Table/Table.svelte";
-export { default as ToolsHeader } from "./components/ToolsHeader/ToolsHeader.svelte";
-export { default as Video } from "./components/Video/Video.svelte";
-export { default as Visible } from "./components/Visible/Visible.svelte";
-export { default as Analytics, registerPageview } from "./components/Analytics/Analytics.svelte";
-export { default as Theme, themes } from "./components/Theme/Theme.svelte";
+export { default as cssVariables } from './actions/cssVariables/index';
+export { default as resizeObserver } from './actions/resizeObserver/index';
+export { default as Analytics, registerPageview, } from './components/Analytics/Analytics.svelte';
+export { default as Article } from './components/Article/Article.svelte';
+export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
+export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
+export { default as Block } from './components/Block/Block.svelte';
+export { default as BodyText } from './components/BodyText/BodyText.svelte';
+export { default as Byline } from './components/Byline/Byline.svelte';
+export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
+export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
+export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
+export { default as Framer } from './components/Framer/Framer.svelte';
+export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
+export { default as Headline } from './components/Headline/Headline.svelte';
+export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
+export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
+export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
+export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
+export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
+export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
+export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
+export { default as PymChild } from './components/PymChild/PymChild.svelte';
+export { pym } from './components/PymChild/state.svelte';
+export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
+export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
+export { default as Scroller } from './components/Scroller/Scroller.svelte';
+export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
+export { default as SEO } from './components/SEO/SEO.svelte';
+export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';
+export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
+export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
+export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
+export { default as Table } from './components/Table/Table.svelte';
+export { default as Theme, themes } from './components/Theme/Theme.svelte';
+export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
+export { default as Video } from './components/Video/Video.svelte';
+export { default as Visible } from './components/Visible/Visible.svelte';
+export type { ContainerWidth, HeadlineSize } from './components/@types/global';