@openfin/ui-library 0.0.33

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

@@ -0,0 +1,64 @@
+"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

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

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

@@ -0,0 +1,13 @@
+"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

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

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

@@ -0,0 +1,13 @@
+"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

@@ -0,0 +1,15 @@
+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, TextProps, never>;

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

@@ -0,0 +1,20 @@
+"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};
+`;

package/dist/hooks/useColorScheme.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,28 @@
+"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',
+};
+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

@@ -0,0 +1,12 @@
+/**
+ * ## 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

@@ -0,0 +1,39 @@
+"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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1,12 @@
+export * from './components/elements/Button';
+export * from './components/elements/Icon';
+export * from './components/elements/Input';
+export * from './components/elements/Toggle';
+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

@@ -0,0 +1,37 @@
+"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/elements/Button"), exports);
+__exportStar(require("./components/elements/Icon"), exports);
+__exportStar(require("./components/elements/Input"), exports);
+__exportStar(require("./components/elements/Toggle"), 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/storybookHelpers.d.ts

@@ -0,0 +1,84 @@
+/// <reference types="react" />
+export declare const StoryRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
+    alignItems?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
+    display?: "flex" | "inline-flex" | undefined;
+    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    flexBasis?: string | undefined;
+    flexGrow?: 0 | 1 | undefined;
+    flexShrink?: 0 | 1 | undefined;
+    order?: number | undefined;
+    surfaceLevel?: 3 | 2 | 1 | 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?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
+    display?: "flex" | "inline-flex" | undefined;
+    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    flexBasis?: string | undefined;
+    flexGrow?: 0 | 1 | undefined;
+    flexShrink?: 0 | 1 | undefined;
+    order?: number | undefined;
+    surfaceLevel?: 3 | 2 | 1 | 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?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
+    display?: "flex" | "inline-flex" | undefined;
+    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    flexBasis?: string | undefined;
+    flexGrow?: 0 | 1 | undefined;
+    flexShrink?: 0 | 1 | undefined;
+    order?: number | undefined;
+    surfaceLevel?: 3 | 2 | 1 | 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?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
+    display?: "flex" | "inline-flex" | undefined;
+    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    flexBasis?: string | undefined;
+    flexGrow?: 0 | 1 | undefined;
+    flexShrink?: 0 | 1 | undefined;
+    order?: number | undefined;
+    surfaceLevel?: 3 | 2 | 1 | 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

@@ -0,0 +1,55 @@
+"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.surfaceMiddle};
+  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.palette.surfaceTop}`};
+  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';
+  }
+`;

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "@openfin/ui-library",
+  "description": "OpenFin UI Component Library",
+  "version": "0.0.33",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@modulz/radix-icons": "^4.0.0",
+    "styled-components": "^5.1.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.1.20",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/node-logger": "^6.1.20",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.20",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^12.6.2",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/faker": "^5.1.7",
+    "@types/jest": "^26.0.20",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/parser": "^4.14.1",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "faker": "^5.4.0",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.1",
+    "rimraf": "^3.0.2",
+    "stylelint": "^13.9.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "tsconfig-paths-webpack-plugin": "^3.3.0",
+    "typescript": "^4.1.3",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "yarn storybook",
+    "build": "yarn build:clean && yarn build:bundle",
+    "build:bundle": "tsc -p tsconfig.bundle.json",
+    "build:clean": "rimraf dist",
+    "build:dev": "yarn build && yalc push",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "yarn lint:typescript && yarn lint:styles",
+    "lint:typescript": "eslint './src/**/*.{ts,tsx}'",
+    "lint:styles": "stylelint './src/**/*.{ts,tsx}'",
+    "storybook": "yarn storybook:cache-clear && start-storybook -p 6006 -s public",
+    "storybook:build": "build-storybook -s public",
+    "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook",
+    "git:pre-push": "yarn lint && yarn test --watchAll=false && yarn build"
+  },
+  "env": {
+    "jest/globals": true
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:jest/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint",
+      "jest"
+    ],
+    "rules": {
+      "dot-notation": "error",
+      "react/prop-types": "off",
+      "react/jsx-uses-react": "off",
+      "react/react-in-jsx-scope": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "error",
+      "@typescript-eslint/no-explicit-any": "error"
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
+    "env": {
+      "browser": true,
+      "node": true
+    }
+  },
+  "stylelint": {
+    "processors": [
+      "stylelint-processor-styled-components"
+    ],
+    "extends": [
+      "stylelint-config-recommended",
+      "stylelint-config-styled-components"
+    ]
+  },
+  "prettier": {
+    "endOfLine": "lf",
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "arrowParens": "always"
+  }
+}