@openfin/ui-library 0.1.0 → 0.1.2-alpha.1616610135

package/dist/components/typography/Heading/heading.js

@@ -1,64 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Heading = exports.defaultSize = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../system/ThemeProvider/lib/constants");
-const Text_1 = require("../Text");
-exports.defaultSize = {
-    h1: constants_1.Size.xxxlarge,
-    h2: constants_1.Size.xxlarge,
-    h3: constants_1.Size.xlarge,
-    h4: constants_1.Size.large,
-    h5: constants_1.Size.base,
-    h6: constants_1.Size.small,
-};
-/**
- * ## Heading
- *
- * @example <Heading level={1}>Pizza</Heading>
- *          <Heading level={2}>Pizza</Heading>
- *          <Heading level={3}>Pizza</Heading>
- *          <Heading level={4}>Pizza</Heading>
- *          <Heading level={5}>Pizza</Heading>
- *          <Heading level={6}>Pizza</Heading>
- *
- * @example <H1>Pizza</H1>
- *          <H2>Pizza</H2>
- *          <H3>Pizza</H3>
- *          <H4>Pizza</H4>
- *          <H5>Pizza</H5>
- *          <H6>Pizza</H6>
- */
-const Heading = (_a) => {
-    var { level = 1, className } = _a, props = __rest(_a, ["level", "className"]);
-    const htag = `h${level}`;
-    return (jsx_runtime_1.jsx(StyledHeading, Object.assign({ className: className, as: htag, size: exports.defaultSize[htag], weight: "bold" }, props), void 0));
-};
-exports.Heading = Heading;
-const StyledHeading = styled_components_1.default(Text_1.Text) `
-  line-height: ${({ theme }) => theme.lineHeight.heading};
-`;
-/**
- * ## Heading Variants
- */
-exports.H1 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 1 }))) ``;
-exports.H2 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 2 }))) ``;
-exports.H3 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 3 }))) ``;
-exports.H4 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 4 }))) ``;
-exports.H5 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 5 }))) ``;
-exports.H6 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 6 }))) ``;

package/dist/components/typography/Heading/index.d.ts

@@ -1 +0,0 @@
-export * from './heading';

package/dist/components/typography/Heading/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./heading"), exports);

package/dist/components/typography/Text/index.d.ts

@@ -1 +0,0 @@
-export * from './text';

package/dist/components/typography/Text/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./text"), exports);

package/dist/components/typography/Text/text.d.ts

@@ -1,19 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { FontSizeType, FontWeightType } from '../../system/ThemeProvider/lib/types';
-export declare type TextProps = HTMLAttributes<HTMLElement> & {
-    children: ReactNode;
-    size?: FontSizeType;
-    weight?: FontWeightType;
-};
-/**
- * ## Text
- *
- * @example <Text>Okay Cool</Text>
- *          <Text size="small">Okay Cool</Text>
- *          <Text weight="bold">Okay Cool</Text>
- */
-export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, HTMLAttributes<HTMLElement> & {
-    children: ReactNode;
-    size?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    weight?: "bold" | "normal" | undefined;
-}, never>;

package/dist/components/typography/Text/text.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-/**
- * ## Text
- *
- * @example <Text>Okay Cool</Text>
- *          <Text size="small">Okay Cool</Text>
- *          <Text weight="bold">Okay Cool</Text>
- */
-exports.Text = styled_components_1.default.span `
-  color: ${({ theme }) => theme.palette.textDefault};
-  font-size: ${({ theme, size = 'base' }) => theme.fontSize[size]};
-  font-weight: ${({ theme, weight = 'normal' }) => theme.fontWeight[weight]};
-  line-height: ${({ theme }) => theme.lineHeight.text};
-`;
-exports.Text.displayName = 'Text';

package/dist/hooks/useColorScheme.d.ts

@@ -1,12 +0,0 @@
-export declare const ColorScheme: {
-    readonly dark: "dark";
-    readonly light: "light";
-};
-export declare type ColorSchemeType = keyof typeof ColorScheme;
-/**
- * ## useColorScheme
- * Returns system preference for Color Scheme
- */
-export declare const useColorScheme: ({ defaultScheme, }: {
-    defaultScheme?: "dark" | "light" | undefined;
-}) => ColorSchemeType;

package/dist/hooks/useColorScheme.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColorScheme = exports.ColorScheme = void 0;
-const useMediaQuery_1 = require("./useMediaQuery");
-exports.ColorScheme = {
-    dark: 'dark',
-    light: 'light',
-    /**
-     * This is a valid MediaQuery string that we're not using to identify Browsers (older Operating Systems)
-     * that maybe do not have a concept of color scheme.
-     */
-    // none = 'no-preference',
-};
-const buildQuery = (scheme) => `(prefers-color-scheme: ${scheme})`;
-/**
- * ## useColorScheme
- * Returns system preference for Color Scheme
- */
-const useColorScheme = ({ defaultScheme = exports.ColorScheme.light, }) => {
-    const isDark = useMediaQuery_1.useMediaQuery(buildQuery(exports.ColorScheme.dark));
-    const isLight = useMediaQuery_1.useMediaQuery(buildQuery(exports.ColorScheme.light));
-    const isNone = !isDark && !isLight;
-    switch (true) {
-        case isDark:
-            return exports.ColorScheme.dark;
-        case isLight:
-            return exports.ColorScheme.light;
-        case isNone:
-        default:
-            return defaultScheme;
-    }
-};
-exports.useColorScheme = useColorScheme;

package/dist/hooks/useMediaQuery.d.ts

@@ -1,12 +0,0 @@
-/**
- * ## useMediaQuery
- * @example   const isPageWide = useMediaQuery('(min-width: 800px)')
- * @example   const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
- */
-export declare const useMediaQuery: (query: string) => boolean;
-/**
- * ## useLayoutMediaQuery
- * @example   const isPageWide = useLayoutMediaQuery('(min-width: 800px)')
- * @example   const reduceMotion = useLayoutMediaQuery('(prefers-reduced-motion: reduce)');
- */
-export declare const useLayoutMediaQuery: (query: string) => boolean;

package/dist/hooks/useMediaQuery.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLayoutMediaQuery = exports.useMediaQuery = void 0;
-const react_1 = require("react");
-/**
- * ## MediaQuery Hooks
- *
- * Inspired by:
- * @link https://github.com/streamich/use-media
- */
-const useMq = (effect) => (query) => {
-    const [matches, setMatches] = react_1.useState(false);
-    effect(() => {
-        const media = window.matchMedia(query);
-        if (media) {
-            if (media.matches !== matches) {
-                setMatches(media.matches);
-            }
-            const listener = () => setMatches(media.matches);
-            const cleanup = () => media.removeEventListener('change', listener);
-            media.addEventListener('change', listener);
-            return cleanup;
-        }
-        return;
-    }, [matches, query]);
-    return matches;
-};
-/**
- * ## useMediaQuery
- * @example   const isPageWide = useMediaQuery('(min-width: 800px)')
- * @example   const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
- */
-exports.useMediaQuery = useMq(react_1.useEffect);
-/**
- * ## useLayoutMediaQuery
- * @example   const isPageWide = useLayoutMediaQuery('(min-width: 800px)')
- * @example   const reduceMotion = useLayoutMediaQuery('(prefers-reduced-motion: reduce)');
- */
-exports.useLayoutMediaQuery = useMq(react_1.useLayoutEffect);

package/dist/hooks/useTheme.d.ts

@@ -1,9 +0,0 @@
-import { ConfigurationType } from './../components/system/ThemeProvider/lib/config';
-import { DefaultTheme } from 'styled-components';
-import { ColorScheme } from '../hooks/useColorScheme';
-import { ThemePaletteSet } from '../components/system/ThemeProvider';
-export declare const useTheme: ({ themes, scheme, config, }: {
-    themes?: ThemePaletteSet | undefined;
-    scheme?: "dark" | "light" | undefined;
-    config?: ConfigurationType | undefined;
-}) => DefaultTheme;

package/dist/hooks/useTheme.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = void 0;
-const themes_1 = require("../components/system/ThemeProvider/themes");
-const useColorScheme_1 = require("../hooks/useColorScheme");
-const Themes = {
-    [useColorScheme_1.ColorScheme.dark]: themes_1.OpenFinDarkTheme,
-    [useColorScheme_1.ColorScheme.light]: themes_1.OpenFinLightTheme,
-};
-const useTheme = ({ themes, scheme, config, }) => {
-    // 1. Get Current Scheme
-    //    Use user - provided color scheme
-    //    OR fallback to System Preference Color Scheme (if available)
-    //    OR default to "light"
-    const currentScheme = scheme
-        ? useColorScheme_1.ColorScheme[scheme]
-        : useColorScheme_1.useColorScheme({
-            defaultScheme: useColorScheme_1.ColorScheme.light,
-        });
-    // 2. Get Current Theme
-    const currentTheme = themes === undefined
-        ? // Built-in Theme
-            Themes[currentScheme]
-        : // Built-in Theme with User-provided Palette
-         Object.assign(Object.assign({}, Themes[currentScheme]), { palette: Object.assign(Object.assign({}, Themes[currentScheme].palette), themes[currentScheme].palette) });
-    // 3. Merge any User-provided Config
-    if (config) {
-        currentTheme._config = Object.assign(Object.assign({}, currentTheme._config), config);
-    }
-    return currentTheme;
-};
-exports.useTheme = useTheme;

package/dist/index.d.ts

@@ -1,13 +0,0 @@
-export * from './components/controls/Button';
-export * from './components/controls/Toggle';
-export * from './components/elements/Badge';
-export * from './components/elements/Icon';
-export * from './components/input/Input';
-export * from './components/layout/Box';
-export * from './components/system/GlobalStyles';
-export * from './components/system/ThemeProvider';
-export * from './components/typography/Heading';
-export * from './components/typography/Text';
-export * from './hooks/useColorScheme';
-export * from './hooks/useMediaQuery';
-export * as StoryHelpers from './storybookHelpers';

package/dist/index.js

@@ -1,38 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StoryHelpers = void 0;
-__exportStar(require("./components/controls/Button"), exports);
-__exportStar(require("./components/controls/Toggle"), exports);
-__exportStar(require("./components/elements/Badge"), exports);
-__exportStar(require("./components/elements/Icon"), exports);
-__exportStar(require("./components/input/Input"), exports);
-__exportStar(require("./components/layout/Box"), exports);
-__exportStar(require("./components/system/GlobalStyles"), exports);
-__exportStar(require("./components/system/ThemeProvider"), exports);
-__exportStar(require("./components/typography/Heading"), exports);
-__exportStar(require("./components/typography/Text"), exports);
-__exportStar(require("./hooks/useColorScheme"), exports);
-__exportStar(require("./hooks/useMediaQuery"), exports);
-exports.StoryHelpers = __importStar(require("./storybookHelpers"));

package/dist/react-app-env.d.js

@@ -1,2 +0,0 @@
-/// <reference types="react-scripts" />
-"use strict";

package/dist/storybookHelpers.d.ts

@@ -1,84 +0,0 @@
-/// <reference types="react" />
-export declare const StoryRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
-    display?: import("./components/layout/Box/types").Display | undefined;
-    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
-    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
-    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
-    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
-    flexBasis?: string | undefined;
-    flexGrow?: 0 | 1 | undefined;
-    flexShrink?: 0 | 1 | undefined;
-    order?: number | undefined;
-    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
-    padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-} & {
-    gap: string;
-    alignItems: string;
-}, "alignItems" | "gap">;
-export declare const StoryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
-    display?: import("./components/layout/Box/types").Display | undefined;
-    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
-    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
-    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
-    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
-    flexBasis?: string | undefined;
-    flexGrow?: 0 | 1 | undefined;
-    flexShrink?: 0 | 1 | undefined;
-    order?: number | undefined;
-    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
-    padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-} & {
-    flexDirection: string;
-    gap: string;
-    alignItems: string;
-}, "flexDirection" | "alignItems" | "gap">;
-export declare const StoryGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
-    display?: import("./components/layout/Box/types").Display | undefined;
-    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
-    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
-    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
-    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
-    flexBasis?: string | undefined;
-    flexGrow?: 0 | 1 | undefined;
-    flexShrink?: 0 | 1 | undefined;
-    order?: number | undefined;
-    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
-    padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-} & {
-    gap: string;
-}, "gap">;
-export declare const PlaceholderContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
-    display?: import("./components/layout/Box/types").Display | undefined;
-    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
-    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
-    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
-    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
-    flexBasis?: string | undefined;
-    flexGrow?: 0 | 1 | undefined;
-    flexShrink?: 0 | 1 | undefined;
-    order?: number | undefined;
-    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
-    padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-} & {
-    flexDirection: string;
-    gap: string;
-    alignItems: string;
-}, "flexDirection" | "alignItems" | "gap">;
-export declare const Pre: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
-export declare const JSONData: ({ data }: {
-    data: unknown;
-}) => JSX.Element;
-export declare const SpatialLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
-    href: "https://docs.google.com/spreadsheets/d/10fcDXFdGJ8-cQxJ5X1EPSKP-aMrxgqnM8YIlYmcOPoQ";
-    target: "_blank";
-    rel: "noreferrer";
-    title: "Spatial";
-}, "title" | "href" | "target" | "rel">;

package/dist/storybookHelpers.js

@@ -1,55 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpatialLink = exports.JSONData = exports.Pre = exports.PlaceholderContent = exports.StoryGrid = exports.StoryColumn = exports.StoryRow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = require("./components/layout/Box");
-exports.StoryRow = styled_components_1.default(Box_1.Box).attrs({
-    gap: 'large',
-    alignItems: 'flex-start',
-}) ``;
-exports.StoryColumn = styled_components_1.default(Box_1.Box).attrs({
-    flexDirection: 'column',
-    gap: 'large',
-    alignItems: 'flex-start',
-}) `
-  max-width: 500px;
-`;
-exports.StoryGrid = styled_components_1.default(Box_1.Box).attrs({
-    gap: 'large',
-}) `
-  display: grid;
-`;
-exports.PlaceholderContent = styled_components_1.default(exports.StoryColumn) `
-  background: ${({ theme }) => theme.palette.background2};
-  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.palette.background3}`};
-  padding: ${({ theme }) => theme.px.small};
-  border-radius: ${({ theme }) => theme.radius.small};
-  user-select: none;
-`;
-exports.Pre = styled_components_1.default.pre `
-  margin: ${({ theme }) => theme.px.base} 0;
-  padding: ${({ theme }) => theme.px.base};
-  border-radius: ${({ theme }) => theme.radius.base};
-`;
-const JSONData = ({ data }) => {
-    return jsx_runtime_1.jsx(exports.Pre, { children: JSON.stringify(data, undefined, 2) }, void 0);
-};
-exports.JSONData = JSONData;
-exports.SpatialLink = styled_components_1.default.a.attrs({
-    href: 'https://docs.google.com/spreadsheets/d/10fcDXFdGJ8-cQxJ5X1EPSKP-aMrxgqnM8YIlYmcOPoQ',
-    target: '_blank',
-    rel: 'noreferrer',
-    title: 'Spatial',
-}) `
-  display: block;
-  color: ${({ theme }) => theme.palette.textDefault};
-  text-decoration: none;
-  &:after {
-    display: block;
-    content: 'Source: Spatial';
-  }
-`;