srf-feathers 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Harvey Delaney
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,300 @@
+# React Component Library
+
+[![Build status](https://badge.buildkite.com/90ff98db996bb137c5be1bdce666c4b1ce68a25b17af0a6a04.svg?branch=master)](https://buildkite.com/harvey/react-component-library)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+
+This project skeleton was created to help people get started with creating their own React component library using:
+
+- [Rollup](https://github.com/rollup/rollup)
+- [Sass](https://sass-lang.com/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+It also features:
+
+- [Storybook](https://storybook.js.org/) to help you create and show off your components
+- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components
+
+[**Read my blog post about why and how I created this project skeleton ▸**](https://blog.harveydelaney.com/creating-your-own-react-component-library/)
+
+[Check out this CodeSandbox to see the component library in action ▸](https://codesandbox.io/s/harvey-component-library-example-y2b60)
+
+## Development
+
+### Testing
+
+```
+npm run test
+```
+
+### Building
+
+```
+npm run build
+```
+
+### Storybook
+
+To run a live-reload Storybook server on your local machine:
+
+```
+npm run storybook
+```
+
+To export your Storybook as static files:
+
+```
+npm run storybook:export
+```
+
+You can then serve the files under `storybook-static` using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library
+
+### Generating New Components
+
+I've included a handy NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:
+
+```
+npm run generate YourComponentName
+```
+
+This will generate:
+
+```
+/src
+  /YourComponentName
+    YourComponentName.tsx
+    YourComponentName.stories.tsx
+    YourComponentName.test.tsx
+    YourComponentName.types.ts
+    YourComponentName.scss
+```
+
+The default templates for each file can be modified under `util/templates`.
+
+Don't forget to add the component to your `index.ts` exports if you want the library to export the component!
+
+### Installing Component Library Locally
+
+Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:
+
+```
+npm i --save ../react-component-library
+```
+
+which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:
+
+```
+  ...
+  "dependencies": {
+    ...
+    "react-component-library": "file:../react-component-library",
+    ...
+  },
+  ...
+```
+
+Your components can then be imported and used in that project.
+
+**NOTE**: After installing the component library locally, you may run into:
+
+```
+Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+
+You might have mismatching versions of React and the renderer (such as React DOM)
+You might be breaking the Rules of Hooks
+You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.
+```
+
+This is the most commonly encountered problem people face when installing the library locally. This is most likely due to the third reason: `You might have more than one copy of React in the app`.
+
+Normally when a library is published, dev dependencies are excluded. However, when the library is symlinked, all local dev depdendencies are persisted in the libraries `node_modules` (includes React). Your bundler may see two versions of React, one in the consuming app and one in the symlinked library. The solution is to have the component library use the React version in the consuming app. So from your component library folder, run:
+
+```
+npm link ../test-app/node_modules/react
+```
+
+**OR**, if you are using Webpack in app you can follow [this GitHub comment](https://github.com/facebook/react/issues/13991#issuecomment-435587809).
+
+Read more about this issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html).
+
+## Publishing
+
+### Hosting via NPM
+
+First, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)
+
+Then update the `name` field in `package.json` to reflect your NPM package name in your private or public NPM registry. Then run:
+
+```
+npm publish
+```
+
+The `"prepublishOnly": "npm run build"` script in `package.json` will execute before publish occurs, ensuring the `build/` directory and the compiled component library exist.
+
+### Hosting via GitHub
+
+I recommend you host the component library using NPM. However, if you don't want to use NPM, you can use GitHub to host it instead.
+
+You'll need to remove `build/` from `.gitignore`, build the component library (`npm run build`), add, commit and push the contents of `build`. [See this branch for an example.](https://github.com/HarveyD/react-component-library/tree/host-via-github)
+
+You can then install your library into other projects by running:
+
+```
+npm i --save git+https://github.com/HarveyD/react-component-library.git#branch-name
+```
+
+OR
+
+```
+npm i --save github:harveyd/react-component-library#branch-name
+```
+
+## Usage
+
+Let's say you created a public NPM package called `harvey-component-library` with the `TestComponent` component created in this repository.
+
+Usage of the component (after the library installed as a dependency into another project) will be:
+
+```TSX
+import React from "react";
+import { TestComponent } from "harvey-component-library";
+
+const App = () => (
+  <div className="app-container">
+    <h1>Hello I'm consuming the component library</h1>
+    <TestComponent theme="primary" />
+  </div>
+);
+
+export default App;
+```
+
+[Check out this Code Sandbox for a live example.](https://codesandbox.io/s/harvey-component-library-example-y2b60?file=/src/App.js)
+
+### Using Component Library SASS Variables
+
+I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the [`src/typography.scss`](src/typography.scss) and [`variables.scss`](src/variables.scss) into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.
+
+For example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:
+
+```Sass
+@import '~harvey-component-library/build/typography';
+
+.example-container {
+    @include heading;
+
+    color: $harvey-white;
+}
+```
+
+## Additional Help
+
+### Dark Mode
+
+The example component `TestComponent` respects the user's dark mode operating system preferences and renders the component in the appropriate theme.
+
+This is achieved by using the media query: `@media (prefers-color-scheme: dark)` in combination with CSS variables. The colours that change depending on dark mode preference can be found in [`src/variables.scss`](src/variables.scss). Example usage of these variables can be found within [`src/TestComponent/TestComponent.scss`](src/TestComponent/TestComponent.scss).
+
+Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.
+
+### Using Alternatives to Sass
+
+#### Less or Stylus
+
+The Rollup plugin `rollup-plugin-postcss` supports Sass, Less and Stylus:
+
+- For Stylus, install stylus: `yarn add stylus --dev`
+- For Less, install less: `yarn add less --dev`
+
+You can then remove `node-sass` from your dependencies.
+
+#### CSS Modules
+
+If you want to use CSS Modules, update `postcss` in `rollup-config.js` to:
+
+```
+postcss({
+  modules: true
+})
+```
+
+#### Styled Components
+
+If you want to use [`styled-components`](https://styled-components.com/), the changes required are a bit more involved. As such, I've created a branch where I've got `styled-components` working in this component library, [check it out here](https://github.com/HarveyD/react-component-library/tree/styled-components).
+
+### Component Code Splitting
+
+Code splitting of your components is not supported by default.
+
+[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) to find out how and why you would enable code splitting of your components. In summary, code splitting enables users to import components in isolation like:
+
+```
+import TestComponent from 'harvey-component-library/build/TestComponent';
+```
+
+This can reduce the bundle size for projects using older (CJS) module formats.
+
+You can check out [this branch](https://github.com/HarveyD/react-component-library/tree/code-splitting) or [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) to see what changes are neccesary to implement it.
+
+Please note, there's an issue with code splitting and using `rollup-plugin-postcss`. I recommend using `rollup-plugin-sass` instead alongside code splitting.
+
+### Supporting Image Imports
+
+Add the following library to your component library [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image):
+
+```
+npm i -D @rollup/plugin-image
+```
+
+Then add it to `rollup-config.js`:
+
+```
+...
+plugins:[
+  ...,
+  image(),
+  ...
+]
+...
+```
+
+You can then import and render images in your components like:
+
+```tsx
+import logo from "./rollup.png";
+
+export const ImageComponent = () => (
+  <div>
+    <img src={logo} />
+  </div>
+);
+```
+
+### Supporting JSON Imports
+
+Add the following library to your component library [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json):
+
+```
+npm i -D @rollup/plugin-json
+```
+
+Then add it to `rollup-config.js`:
+
+```
+...
+plugins:[
+  ...,
+  json(),
+  ...
+]
+...
+```
+
+You can then import and use JSON as ES6 Modules:
+
+```tsx
+import data from "./some-data.json";
+
+export const JsonDataComponent = () => <div>{data.description}</div>;
+```
+
+Checkout the [official Rollup plugin list](https://github.com/rollup/plugins) for additional helpful plugins.

package/build/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IconProps } from "./Icon.types";
+import "./Icon.scss";
+declare const Icon: React.FC<IconProps>;
+export declare const UpdateIcon: React.FC<IconProps>;
+export declare const ExclamationMarkIcon: React.FC<IconProps>;
+export default Icon;

package/build/Icon/Icon.types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface IconProps {
+    modifier?: 'success' | 'danger' | 'info';
+    children?: JSX.Element;
+}

package/build/TestComponent/TestComponent.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TestComponentProps } from "./TestComponent.types";
+import "./TestComponent.scss";
+declare const TestComponent: React.FC<TestComponentProps>;
+export default TestComponent;

package/build/TestComponent/TestComponent.types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface TestComponentProps {
+    heading: string;
+    content: ReactNode;
+}

package/build/TestComponent/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./TestComponent";

package/build/index.d.ts

@@ -0,0 +1,3 @@
+import TestComponent from "./TestComponent";
+import { UpdateIcon, ExclamationMarkIcon } from './Icon/Icon';
+export { TestComponent, UpdateIcon, ExclamationMarkIcon };

package/build/index.esm.js

@@ -0,0 +1,157 @@
+import React from 'react';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "/*** COLORS ***/\n:root {\n  --background: #fff;\n  --font-color: #494949;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: #3c3c3c;\n    --font-color: #fafafa;\n  }\n}\n.test-component {\n  background-color: var(--background);\n  color: var(--font-color);\n  border: 1px solid #131111;\n  padding: 16px;\n  width: 360px;\n  text-align: center;\n}\n.test-component .heading {\n  font-family: \"Avenir Next\", Helvetica, Arial, sans-serif;\n  font-size: 40px;\n  font-weight: bold;\n}";
+styleInject(css_248z$1);
+
+var TestComponent = function (_a) {
+    var heading = _a.heading, content = _a.content;
+    return (React.createElement("div", { "data-testid": "test-component", className: "test-component" },
+        React.createElement("h1", { "data-testid": "test-component__heading", className: "heading" }, heading),
+        React.createElement("div", { "data-testid": "test-component__content" }, content)));
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+var classnames = createCommonjsModule(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+var css_248z = "/*** COLORS ***/\n:root {\n  --background: #fff;\n  --font-color: #494949;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: #3c3c3c;\n    --font-color: #fafafa;\n  }\n}\n.f-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.f-icon svg {\n  height: 24px;\n  width: 24px;\n}\n.f-icon svg * {\n  stroke: currentColor;\n}\n\n.f-icon--small svg {\n  width: 16px;\n  height: 16px;\n}\n\n.f-icon--tiny svg {\n  width: 12px;\n  height: 12px;\n}\n\n.f-icon--rotatable {\n  transition: transform 0.2s ease-in-out;\n}\n\n.f-icon--rotated-180 {\n  transform: rotate(180deg);\n}\n\n.f-icon--no-stroke svg * {\n  stroke: none;\n}\n\n.f-icon--success {\n  color: #1cb373;\n}\n\n.f-icon--danger {\n  color: #f1434a;\n}\n\n.f-icon--info {\n  color: #1a7ac5;\n}\n\n.f-icon--white {\n  color: white;\n}";
+styleInject(css_248z);
+
+var Icon = function (_a) {
+    var modifier = _a.modifier, children = _a.children;
+    return (React.createElement("div", { "data-testid": "Icon", className: classnames('f-icon', {
+            'f-icon--success': modifier === 'success',
+            'f-icon--danger': modifier === 'danger',
+            'f-icon--info': modifier === 'info'
+        }) }, children));
+};
+var UpdateIcon = function (_a) {
+    var modifier = _a.modifier;
+    return (React.createElement(Icon, __assign({}, { modifier: modifier }),
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M0.713989 10.353L3.50099 14.503L6.70599 10.665", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M23.2859 14.6551L20.5009 10.5031L17.2939 14.3421", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M20.464 10.54C20.8021 12.6833 20.3197 14.8753 19.1131 16.6787C17.9064 18.482 16.0642 19.764 13.9539 20.269C12.5519 20.6016 11.0882 20.5719 9.70079 20.1829C8.31334 19.7938 7.04769 19.0581 6.02295 18.045", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M3.50501 14.479C3.22197 13.3435 3.16688 12.1631 3.34294 11.0061C3.51899 9.84912 3.92269 8.73853 4.53069 7.73856C5.13868 6.7386 5.93891 5.8691 6.88508 5.18036C7.83125 4.49163 8.90459 3.99732 10.043 3.72604C11.5397 3.37139 13.1046 3.42984 14.5706 3.89516C16.0367 4.36047 17.3488 5.21518 18.367 6.36804", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }))));
+};
+var ExclamationMarkIcon = function (_a) {
+    var modifier = _a.modifier;
+    return (React.createElement(Icon, __assign({}, { modifier: modifier }),
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M23.5 11.8024C23.5077 14.8728 22.3048 17.8224 20.1521 20.0119C17.9994 22.2013 15.0703 23.4542 12 23.4987C10.5005 23.5213 9.01135 23.2459 7.61905 22.6886C6.22674 22.1313 4.95895 21.3032 3.8892 20.2522C2.81944 19.2012 1.96901 17.9484 1.38723 16.5662C0.805446 15.1841 0.503889 13.7002 0.500046 12.2007C0.491468 9.12983 1.69398 6.17937 3.84679 3.98923C5.99959 1.79908 8.92911 0.545824 12 0.501266C13.4998 0.478844 14.9891 0.754394 16.3815 1.31193C17.774 1.86947 19.0418 2.69791 20.1116 3.74918C21.1814 4.80046 22.0318 6.05365 22.6134 7.43608C23.195 8.8185 23.4964 10.3026 23.5 11.8024Z", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M12 14.005V7.005", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React.createElement("path", { d: "M11.991 16.005C11.9583 16.0055 11.926 16.0126 11.8961 16.0257C11.8661 16.0389 11.8392 16.0579 11.8167 16.0817C11.7942 16.1055 11.7768 16.1335 11.7653 16.1641C11.7538 16.1947 11.7486 16.2273 11.75 16.26C11.7523 16.3256 11.7799 16.3878 11.8271 16.4335C11.8743 16.4792 11.9373 16.5048 12.003 16.505V16.505C12.0356 16.5044 12.0678 16.4972 12.0977 16.484C12.1275 16.4708 12.1545 16.4518 12.1769 16.428C12.1993 16.4043 12.2168 16.3763 12.2283 16.3458C12.2399 16.3152 12.2452 16.2826 12.244 16.25C12.242 16.1858 12.2157 16.1248 12.1703 16.0793C12.125 16.0338 12.0641 16.0073 12 16.005H11.995", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }))));
+};
+
+export { ExclamationMarkIcon, TestComponent, UpdateIcon };
+//# sourceMappingURL=index.esm.js.map

package/build/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/TestComponent/TestComponent.tsx","../node_modules/tslib/tslib.es6.js","../node_modules/classnames/index.js","../src/Icon/Icon.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from \"react\";\n\nimport { TestComponentProps } from \"./TestComponent.types\";\n\nimport \"./TestComponent.scss\";\n\nconst TestComponent: React.FC<TestComponentProps> = ({ heading, content }) => (\n  <div data-testid=\"test-component\" className=\"test-component\">\n    <h1 data-testid=\"test-component__heading\" className=\"heading\">\n      {heading}\n    </h1>\n    <div data-testid=\"test-component__content\">{content}</div>\n  </div>\n);\n\nexport default TestComponent;\n","/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","/*!\n  Copyright (c) 2018 Jed Watson.\n  Licensed under the MIT License (MIT), see\n  http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString === Object.prototype.toString) {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\n\nimport { IconProps } from \"./Icon.types\";\n\nimport \"./Icon.scss\";\n\nconst Icon: React.FC<IconProps> = ({ modifier, children }) => (\n  <div data-testid=\"Icon\" className={classNames(\n    'f-icon',\n    {\n      'f-icon--success': modifier === 'success',\n      'f-icon--danger': modifier === 'danger',\n      'f-icon--info': modifier === 'info'\n    })}\n  >\n    {children}\n  </div>\n);\n\nexport const UpdateIcon: React.FC<IconProps> = ({ modifier }) => (\n    <Icon {...{modifier}}>\n        <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            >\n            <path\n                d=\"M0.713989 10.353L3.50099 14.503L6.70599 10.665\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M23.2859 14.6551L20.5009 10.5031L17.2939 14.3421\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M20.464 10.54C20.8021 12.6833 20.3197 14.8753 19.1131 16.6787C17.9064 18.482 16.0642 19.764 13.9539 20.269C12.5519 20.6016 11.0882 20.5719 9.70079 20.1829C8.31334 19.7938 7.04769 19.0581 6.02295 18.045\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M3.50501 14.479C3.22197 13.3435 3.16688 12.1631 3.34294 11.0061C3.51899 9.84912 3.92269 8.73853 4.53069 7.73856C5.13868 6.7386 5.93891 5.8691 6.88508 5.18036C7.83125 4.49163 8.90459 3.99732 10.043 3.72604C11.5397 3.37139 13.1046 3.42984 14.5706 3.89516C16.0367 4.36047 17.3488 5.21518 18.367 6.36804\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            </svg>\n    </Icon>\n);\n\nexport const ExclamationMarkIcon: React.FC<IconProps> = ({modifier}) => (\n  <Icon {...{modifier}}>\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M23.5 11.8024C23.5077 14.8728 22.3048 17.8224 20.1521 20.0119C17.9994 22.2013 15.0703 23.4542 12 23.4987C10.5005 23.5213 9.01135 23.2459 7.61905 22.6886C6.22674 22.1313 4.95895 21.3032 3.8892 20.2522C2.81944 19.2012 1.96901 17.9484 1.38723 16.5662C0.805446 15.1841 0.503889 13.7002 0.500046 12.2007C0.491468 9.12983 1.69398 6.17937 3.84679 3.98923C5.99959 1.79908 8.92911 0.545824 12 0.501266C13.4998 0.478844 14.9891 0.754394 16.3815 1.31193C17.774 1.86947 19.0418 2.69791 20.1116 3.74918C21.1814 4.80046 22.0318 6.05365 22.6134 7.43608C23.195 8.8185 23.4964 10.3026 23.5 11.8024Z\"\n        stroke=\"#4E4D47\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M12 14.005V7.005\"\n        stroke=\"#4E4D47\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M11.991 16.005C11.9583 16.0055 11.926 16.0126 11.8961 16.0257C11.8661 16.0389 11.8392 16.0579 11.8167 16.0817C11.7942 16.1055 11.7768 16.1335 11.7653 16.1641C11.7538 16.1947 11.7486 16.2273 11.75 16.26C11.7523 16.3256 11.7799 16.3878 11.8271 16.4335C11.8743 16.4792 11.9373 16.5048 12.003 16.505V16.505C12.0356 16.5044 12.0678 16.4972 12.0977 16.484C12.1275 16.4708 12.1545 16.4518 12.1769 16.428C12.1993 16.4043 12.2168 16.3763 12.2283 16.3458C12.2399 16.3152 12.2452 16.2826 12.244 16.25C12.242 16.1858 12.2157 16.1248 12.1703 16.0793C12.125 16.0338 12.0641 16.0073 12 16.005H11.995\"\n        stroke=\"#4E4D47\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </Icon>\n);\n\nexport default Icon;\n\n"],"names":["classNames"],"mappings":"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"}

package/build/index.js

@@ -0,0 +1,167 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "/*** COLORS ***/\n:root {\n  --background: #fff;\n  --font-color: #494949;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: #3c3c3c;\n    --font-color: #fafafa;\n  }\n}\n.test-component {\n  background-color: var(--background);\n  color: var(--font-color);\n  border: 1px solid #131111;\n  padding: 16px;\n  width: 360px;\n  text-align: center;\n}\n.test-component .heading {\n  font-family: \"Avenir Next\", Helvetica, Arial, sans-serif;\n  font-size: 40px;\n  font-weight: bold;\n}";
+styleInject(css_248z$1);
+
+var TestComponent = function (_a) {
+    var heading = _a.heading, content = _a.content;
+    return (React__default['default'].createElement("div", { "data-testid": "test-component", className: "test-component" },
+        React__default['default'].createElement("h1", { "data-testid": "test-component__heading", className: "heading" }, heading),
+        React__default['default'].createElement("div", { "data-testid": "test-component__content" }, content)));
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+var classnames = createCommonjsModule(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+var css_248z = "/*** COLORS ***/\n:root {\n  --background: #fff;\n  --font-color: #494949;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: #3c3c3c;\n    --font-color: #fafafa;\n  }\n}\n.f-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.f-icon svg {\n  height: 24px;\n  width: 24px;\n}\n.f-icon svg * {\n  stroke: currentColor;\n}\n\n.f-icon--small svg {\n  width: 16px;\n  height: 16px;\n}\n\n.f-icon--tiny svg {\n  width: 12px;\n  height: 12px;\n}\n\n.f-icon--rotatable {\n  transition: transform 0.2s ease-in-out;\n}\n\n.f-icon--rotated-180 {\n  transform: rotate(180deg);\n}\n\n.f-icon--no-stroke svg * {\n  stroke: none;\n}\n\n.f-icon--success {\n  color: #1cb373;\n}\n\n.f-icon--danger {\n  color: #f1434a;\n}\n\n.f-icon--info {\n  color: #1a7ac5;\n}\n\n.f-icon--white {\n  color: white;\n}";
+styleInject(css_248z);
+
+var Icon = function (_a) {
+    var modifier = _a.modifier, children = _a.children;
+    return (React__default['default'].createElement("div", { "data-testid": "Icon", className: classnames('f-icon', {
+            'f-icon--success': modifier === 'success',
+            'f-icon--danger': modifier === 'danger',
+            'f-icon--info': modifier === 'info'
+        }) }, children));
+};
+var UpdateIcon = function (_a) {
+    var modifier = _a.modifier;
+    return (React__default['default'].createElement(Icon, __assign({}, { modifier: modifier }),
+        React__default['default'].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__default['default'].createElement("path", { d: "M0.713989 10.353L3.50099 14.503L6.70599 10.665", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default['default'].createElement("path", { d: "M23.2859 14.6551L20.5009 10.5031L17.2939 14.3421", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default['default'].createElement("path", { d: "M20.464 10.54C20.8021 12.6833 20.3197 14.8753 19.1131 16.6787C17.9064 18.482 16.0642 19.764 13.9539 20.269C12.5519 20.6016 11.0882 20.5719 9.70079 20.1829C8.31334 19.7938 7.04769 19.0581 6.02295 18.045", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default['default'].createElement("path", { d: "M3.50501 14.479C3.22197 13.3435 3.16688 12.1631 3.34294 11.0061C3.51899 9.84912 3.92269 8.73853 4.53069 7.73856C5.13868 6.7386 5.93891 5.8691 6.88508 5.18036C7.83125 4.49163 8.90459 3.99732 10.043 3.72604C11.5397 3.37139 13.1046 3.42984 14.5706 3.89516C16.0367 4.36047 17.3488 5.21518 18.367 6.36804", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }))));
+};
+var ExclamationMarkIcon = function (_a) {
+    var modifier = _a.modifier;
+    return (React__default['default'].createElement(Icon, __assign({}, { modifier: modifier }),
+        React__default['default'].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__default['default'].createElement("path", { d: "M23.5 11.8024C23.5077 14.8728 22.3048 17.8224 20.1521 20.0119C17.9994 22.2013 15.0703 23.4542 12 23.4987C10.5005 23.5213 9.01135 23.2459 7.61905 22.6886C6.22674 22.1313 4.95895 21.3032 3.8892 20.2522C2.81944 19.2012 1.96901 17.9484 1.38723 16.5662C0.805446 15.1841 0.503889 13.7002 0.500046 12.2007C0.491468 9.12983 1.69398 6.17937 3.84679 3.98923C5.99959 1.79908 8.92911 0.545824 12 0.501266C13.4998 0.478844 14.9891 0.754394 16.3815 1.31193C17.774 1.86947 19.0418 2.69791 20.1116 3.74918C21.1814 4.80046 22.0318 6.05365 22.6134 7.43608C23.195 8.8185 23.4964 10.3026 23.5 11.8024Z", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default['default'].createElement("path", { d: "M12 14.005V7.005", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }),
+            React__default['default'].createElement("path", { d: "M11.991 16.005C11.9583 16.0055 11.926 16.0126 11.8961 16.0257C11.8661 16.0389 11.8392 16.0579 11.8167 16.0817C11.7942 16.1055 11.7768 16.1335 11.7653 16.1641C11.7538 16.1947 11.7486 16.2273 11.75 16.26C11.7523 16.3256 11.7799 16.3878 11.8271 16.4335C11.8743 16.4792 11.9373 16.5048 12.003 16.505V16.505C12.0356 16.5044 12.0678 16.4972 12.0977 16.484C12.1275 16.4708 12.1545 16.4518 12.1769 16.428C12.1993 16.4043 12.2168 16.3763 12.2283 16.3458C12.2399 16.3152 12.2452 16.2826 12.244 16.25C12.242 16.1858 12.2157 16.1248 12.1703 16.0793C12.125 16.0338 12.0641 16.0073 12 16.005H11.995", stroke: "#4E4D47", strokeLinecap: "round", strokeLinejoin: "round" }))));
+};
+
+exports.ExclamationMarkIcon = ExclamationMarkIcon;
+exports.TestComponent = TestComponent;
+exports.UpdateIcon = UpdateIcon;
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/TestComponent/TestComponent.tsx","../node_modules/tslib/tslib.es6.js","../node_modules/classnames/index.js","../src/Icon/Icon.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from \"react\";\n\nimport { TestComponentProps } from \"./TestComponent.types\";\n\nimport \"./TestComponent.scss\";\n\nconst TestComponent: React.FC<TestComponentProps> = ({ heading, content }) => (\n  <div data-testid=\"test-component\" className=\"test-component\">\n    <h1 data-testid=\"test-component__heading\" className=\"heading\">\n      {heading}\n    </h1>\n    <div data-testid=\"test-component__content\">{content}</div>\n  </div>\n);\n\nexport default TestComponent;\n","/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","/*!\n  Copyright (c) 2018 Jed Watson.\n  Licensed under the MIT License (MIT), see\n  http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString === Object.prototype.toString) {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\n\nimport { IconProps } from \"./Icon.types\";\n\nimport \"./Icon.scss\";\n\nconst Icon: React.FC<IconProps> = ({ modifier, children }) => (\n  <div data-testid=\"Icon\" className={classNames(\n    'f-icon',\n    {\n      'f-icon--success': modifier === 'success',\n      'f-icon--danger': modifier === 'danger',\n      'f-icon--info': modifier === 'info'\n    })}\n  >\n    {children}\n  </div>\n);\n\nexport const UpdateIcon: React.FC<IconProps> = ({ modifier }) => (\n    <Icon {...{modifier}}>\n        <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            >\n            <path\n                d=\"M0.713989 10.353L3.50099 14.503L6.70599 10.665\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M23.2859 14.6551L20.5009 10.5031L17.2939 14.3421\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M20.464 10.54C20.8021 12.6833 20.3197 14.8753 19.1131 16.6787C17.9064 18.482 16.0642 19.764 13.9539 20.269C12.5519 20.6016 11.0882 20.5719 9.70079 20.1829C8.31334 19.7938 7.04769 19.0581 6.02295 18.045\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M3.50501 14.479C3.22197 13.3435 3.16688 12.1631 3.34294 11.0061C3.51899 9.84912 3.92269 8.73853 4.53069 7.73856C5.13868 6.7386 5.93891 5.8691 6.88508 5.18036C7.83125 4.49163 8.90459 3.99732 10.043 3.72604C11.5397 3.37139 13.1046 3.42984 14.5706 3.89516C16.0367 4.36047 17.3488 5.21518 18.367 6.36804\"\n                stroke=\"#4E4D47\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            </svg>\n    </Icon>\n);\n\nexport const ExclamationMarkIcon: React.FC<IconProps> = ({modifier}) => (\n  <Icon {...{modifier}}>\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M23.5 11.8024C23.5077 14.8728 22.3048 17.8224 20.1521 20.0119C17.9994 22.2013 15.0703 23.4542 12 23.4987C10.5005 23.5213 9.01135 23.2459 7.61905 22.6886C6.22674 22.1313 4.95895 21.3032 3.8892 20.2522C2.81944 19.2012 1.96901 17.9484 1.38723 16.5662C0.805446 15.1841 0.503889 13.7002 0.500046 12.2007C0.491468 9.12983 1.69398 6.17937 3.84679 3.98923C5.99959 1.79908 8.92911 0.545824 12 0.501266C13.4998 0.478844 14.9891 0.754394 16.3815 1.31193C17.774 1.86947 19.0418 2.69791 20.1116 3.74918C21.1814 4.80046 22.0318 6.05365 22.6134 7.43608C23.195 8.8185 23.4964 10.3026 23.5 11.8024Z\"\n        stroke=\"#4E4D47\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M12 14.005V7.005\"\n        stroke=\"#4E4D47\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M11.991 16.005C11.9583 16.0055 11.926 16.0126 11.8961 16.0257C11.8661 16.0389 11.8392 16.0579 11.8167 16.0817C11.7942 16.1055 11.7768 16.1335 11.7653 16.1641C11.7538 16.1947 11.7486 16.2273 11.75 16.26C11.7523 16.3256 11.7799 16.3878 11.8271 16.4335C11.8743 16.4792 11.9373 16.5048 12.003 16.505V16.505C12.0356 16.5044 12.0678 16.4972 12.0977 16.484C12.1275 16.4708 12.1545 16.4518 12.1769 16.428C12.1993 16.4043 12.2168 16.3763 12.2283 16.3458C12.2399 16.3152 12.2452 16.2826 12.244 16.25C12.242 16.1858 12.2157 16.1248 12.1703 16.0793C12.125 16.0338 12.0641 16.0073 12 16.005H11.995\"\n        stroke=\"#4E4D47\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </Icon>\n);\n\nexport default Icon;\n\n"],"names":["React","classNames"],"mappings":"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"}

package/build/typography.scss

@@ -0,0 +1,12 @@
+$font-family: "Avenir Next", Helvetica, Arial, sans-serif;
+
+@mixin font-defaults {
+  font-family: $font-family;
+}
+
+@mixin heading {
+  @include font-defaults;
+
+  font-size: 40px;
+  font-weight: bold;
+}

package/build/variables.scss

@@ -0,0 +1,183 @@
+// Variables
+$harvey-black: #131111;
+$harvey-white: #e0e0e0;
+$harvey-red: #ff2323;
+$harvey-green: #005f20;
+$harvey-blue: #070bce;
+
+/*** COLORS ***/
+// SRF Color RED
+$color-srf-red-50:                            rgba(255,230,230,1);   // #ffe6e6
+$color-srf-red-100:                           rgba(255,187,188,1);   // #ffbbbc
+$color-srf-red-200:                           rgba(255,145,147,1);   // #ff9193
+$color-srf-red-300:                           rgba(255,102,105,1);   // #ff6669
+$color-srf-red-300a12:                        rgba(255,102,105,.12); // #ff6669 alpha 12%
+$color-srf-red-300a24:                        rgba(255,102,105,.24); // #ff6669 alpha 24%
+$color-srf-red-400:                           rgba(241,67,74,1);     // #f1434a
+$color-srf-red-500:                           rgba(227,31,43,1);     // #e31f2b
+$color-srf-red-500a60:                        rgba(227,31,43,0.6);   // #e31f2b alpha 60%
+$color-srf-red-600:                           rgba(201,16,36,1);     // #c91024
+$color-srf-red-600a00:                        rgba(201,16,36,0);     // #c91024 alpha  0%
+$color-srf-red-600a12:                        rgba(201,16,36,.12);   // #c91024 alpha 12%
+$color-srf-red-600a24:                        rgba(201,16,36,.24);   // #c91024 alpha 24%
+$color-srf-red-600a60:                        rgba(201,16,36,.6);    // #c91024 alpha 60%
+$color-srf-red-700:                           rgba(175,0,29,1);      // #af001d
+$color-srf-red-700a00:                        rgba(175,0,29,0);      // #af001d alpha  0%
+$color-srf-red-800:                           rgba(141,6,20,1);      // #8d0614
+$color-srf-red-900:                           rgba(106,11,12,1);     // #6a0b0c
+
+// SRF Color Yellow
+$color-srf-yellow-50:                         rgba(255,249,230,1);   // #fff9e6
+$color-srf-yellow-100:                        rgba(255,237,180,1);   // #ffedb4
+$color-srf-yellow-200:                        rgba(255,226,131,1);   // #ffe283
+$color-srf-yellow-300:                        rgba(255,214,81,1);    // #ffd651
+$color-srf-yellow-300a00:                     rgba(255,214,81,0);    // #ffd651 alpha  0%
+$color-srf-yellow-300a60:                     rgba(255,214,81,.6);   // #ffd651 alpha 60%
+$color-srf-yellow-400:                        rgba(251,190,41,1);    // #fbbe29
+$color-srf-yellow-500:                        rgba(247,166,0,1);     // #f7a600
+$color-srf-yellow-500a00:                     rgba(247,166,0,0);     // #f7a600 alpha  0%
+$color-srf-yellow-600:                        rgba(242,139,2,1);     // #f28b02
+$color-srf-yellow-700:                        rgba(237,112,4,1);     // #ed7004
+$color-srf-yellow-700a00:                     rgba(237,112,4,0);     // #ed7004 alpha  0%
+$color-srf-yellow-800:                        rgba(205,87,12,1);     // #cd570c
+$color-srf-yellow-900:                        rgba(173,62,20,1);     // #ad3e14
+
+// SRF Color Green
+$color-srf-green-50:                          rgba(227,252,243,1);   // #e3fcf3
+$color-srf-green-100:                         rgba(194,238,220,1);   // #c2eedc
+$color-srf-green-200:                         rgba(160,223,198,1);   // #a0dfc6
+$color-srf-green-300:                         rgba(127,209,175,1);   // #7fd1af
+$color-srf-green-400:                         rgba(78,194,145,1);    // #4ec291
+$color-srf-green-500:                         rgba(28,179,115,1);    // #1cb373
+$color-srf-green-600:                         rgba(25,160,103,1);    // #19a067
+$color-srf-green-700:                         rgba(22,140,90,1);     // #168c5a
+$color-srf-green-700a00:                      rgba(22,140,90,0);     // #168c5a alpha  0%
+$color-srf-green-800:                         rgba(18,115,74,1);     // #12734a
+$color-srf-green-900:                         rgba(14,89,58,1);      // #0e593a
+$color-srf-green-900a00:                      rgba(14,89,58,0);      // #0e593a alpha  0%
+
+// SRF Color Blue
+$color-srf-blue-50:                           rgba(230,244,255,1);   // #e6f4ff
+$color-srf-blue-50a00:                        rgba(230,244,255,0);   // #e6f4ff alpha  0%
+$color-srf-blue-100:                          rgba(187,225,255,1);   // #bbe1ff
+$color-srf-blue-200:                          rgba(145,206,255,1);   // #91ceff
+$color-srf-blue-300:                          rgba(102,187,255,1);   // #66bbff
+$color-srf-blue-400:                          rgba(66,163,241,1);    // #42a3f1
+$color-srf-blue-500:                          rgba(30,140,227,1);    // #1e8ce3
+$color-srf-blue-600:                          rgba(26,122,197,1);    // #1a7ac5
+$color-srf-blue-650:                          rgba(24,113,182,1);    // #1871b6
+$color-srf-blue-700:                          rgba(22,103,167,1);    // #1667a7
+$color-srf-blue-750:                          rgba(19,92,148,1);     // #135c94
+$color-srf-blue-800:                          rgba(16,80,130,1);     // #105082
+$color-srf-blue-800a00:                       rgba(16,80,130,0);     // #105082 alpha  0%
+$color-srf-blue-850:                          rgba(13,68,111,1);     // #0d446f
+$color-srf-blue-900:                          rgba(10,56,92,1);      // #0a385c
+$color-srf-blue-900a00:                       rgba(10,56,92,0);      // #0a385c alpha  0%
+$color-srf-blue-950:                          rgba(5,45,65,1);       // #052d41
+
+// SRF Color Purple
+$color-srf-purple-50:                         rgba(252,227,246,1);   // #fce3f6
+$color-srf-purple-100:                        rgba(244,201,234,1);   // #f4c9ea
+$color-srf-purple-200:                        rgba(235,176,221,1);   // #ebb0dd
+$color-srf-purple-300:                        rgba(227,150,209,1);   // #e396d1
+$color-srf-purple-400:                        rgba(214,116,192,1);   // #d674c0
+$color-srf-purple-500:                        rgba(202,81,175,1);    // #ca51af
+$color-srf-purple-600:                        rgba(188,57,159,1);    // #bc399f
+$color-srf-purple-700:                        rgba(173,52,146,1);    // #ad3492
+$color-srf-purple-700a00:                     rgba(173,52,146,0);    // #ad3492 alpha  0%
+$color-srf-purple-800:                        rgba(147,44,123,1);    // #932c7b
+$color-srf-purple-900:                        rgba(121,36,101,1);    // #792465
+$color-srf-purple-900a00:                     rgba(121,36,101,0);    // #792465 alpha  0%
+
+// SRF Color Warmgrey
+$color-srf-warmgrey-10:                       rgba(250,250,248,1);   // #fafaf8
+$color-srf-warmgrey-10a00:                    rgba(250,250,248,0);   // #fafaf8 alpha  0%
+$color-srf-warmgrey-25:                       rgba(245,245,242,1);   // #f5f5f2
+$color-srf-warmgrey-25a70:                    rgba(245,245,242,.7);  // #f5f5f2 alpha 70%
+$color-srf-warmgrey-25a80:                    rgba(245,245,242,.8);  // #f5f5f2 alpha 80%
+$color-srf-warmgrey-50:                       rgba(235,235,229,1);   // #ebebe5
+$color-srf-warmgrey-50a00:                    rgba(235,235,229,0);   // #ebebe5 alpha  0%
+$color-srf-warmgrey-50a40:                    rgba(235,235,229,.4);  // #ebebe5 alpha 40%
+$color-srf-warmgrey-50a80:                    rgba(235,235,229,.8);  // #ebebe5 alpha 80%
+$color-srf-warmgrey-100:                      rgba(218,218,210,1);   // #dadad2
+$color-srf-warmgrey-200:                      rgba(202,200,191,1);   // #cac8bf
+$color-srf-warmgrey-300:                      rgba(185,183,172,1);   // #b9b7ac
+$color-srf-warmgrey-300a12:                   rgba(185,183,172,.12); // #b9b7ac alpha 12%
+$color-srf-warmgrey-300a24:                   rgba(185,183,172,.24); // #b9b7ac alpha 24%
+$color-srf-warmgrey-400:                      rgba(172,170,158,1);   // #acaa9e
+$color-srf-warmgrey-500:                      rgba(159,156,144,1);   // #9f9c90
+$color-srf-warmgrey-600:                      rgba(147,145,132,1);   // #939184
+$color-srf-warmgrey-700:                      rgba(136,133,121,1);   // #888579
+$color-srf-warmgrey-800:                      rgba(107,105,96,1);    // #6b6960
+$color-srf-warmgrey-850:                      rgba(94,93,86,1);      // #5e5d56
+$color-srf-warmgrey-900:                      rgba(78,77,71,1);      // #4e4d47
+$color-srf-warmgrey-900a24:                   rgba(78,77,71,.24);    // #4e4d47 alpha 24%
+$color-srf-warmgrey-900a64:                   rgba(78,77,71,.64);    // #4e4d47 alpha 64%
+$color-srf-warmgrey-950:                      rgba(69,68,61,1);      // #45443d
+$color-srf-warmgrey-1000:                     rgba(56,55,50,1);      // #383732
+$color-srf-warmgrey-1000a32:                  rgba(56,55,50,.32);    // #383732 alpha 32%
+$color-srf-warmgrey-1000a64:                  rgba(56,55,50,.64);    // #383732 alpha 64%
+$color-srf-warmgrey-1050:                     rgba(46,45,41,1);      // #2e2d29
+$color-srf-warmgrey-1050a00:                  rgba(46,45,41,0);      // #2e2d29 alpha  0%
+$color-srf-warmgrey-1100:                     rgba(34,33,29,1);      // #22211d
+$color-srf-warmgrey-1100a00:                  rgba(34,33,29,0);      // #22211d alpha  0%
+$color-srf-warmgrey-1100a12:                  rgba(34,33,29,.12);    // #22211d alpha 12%
+$color-srf-warmgrey-1100a24:                  rgba(34,33,29,.24);    // #22211d alpha 24%
+$color-srf-warmgrey-1100a40:                  rgba(34,33,29,.4);     // #22211d alpha 40%
+$color-srf-warmgrey-1100a64:                  rgba(34,33,29,.64);    // #22211d alpha 64%
+$color-srf-warmgrey-1100a80:                  rgba(34,33,29,.8);     // #22211d alpha 80%
+$color-srf-warmgrey-1150:                     rgba(20,20,17,1);      // #141411
+$color-srf-warmgrey-1150a70:                  rgba(20,20,17,.7);     // #141411 alpha 70%
+
+// SRF Color Neutral
+$color-srf-neutral-white:                     rgba(255,255,255,1);   // #ffffff
+$color-srf-neutral-whitea00:                  rgba(255,255,255,0);   // #ffffff alpha  0%
+$color-srf-neutral-whitea08:                  rgba(255,255,255,.08); // #ffffff alpha  8%
+$color-srf-neutral-whitea12:                  rgba(255,255,255,.12); // #ffffff alpha 12%
+$color-srf-neutral-whitea24:                  rgba(255,255,255,.24); // #ffffff alpha 24%
+$color-srf-neutral-whitea40:                  rgba(255,255,255,.4);  // #ffffff alpha 40%
+$color-srf-neutral-whitea64:                  rgba(255,255,255,.64); // #ffffff alpha 64%
+$color-srf-neutral-whitea80:                  rgba(255,255,255,.8);  // #ffffff alpha 80%
+$color-srf-neutral-whitea90:                  rgba(255,255,255,.9); // #ffffff alpha 90%
+$color-srf-neutral-offwhite:                  rgba(254,254,253,1);   // #fefefd
+$color-srf-neutral-offwhitea00:               rgba(254,254,253,0);   // #fefefd alpha  0%
+$color-srf-neutral-600:                       rgba(85,85,85,1);      // #555555
+$color-srf-neutral-800:                       rgba(51,51,51,1);      // #333333
+$color-srf-neutral-900:                       rgba(34,34,34,1);      // #222222
+$color-srf-neutral-900a90:                    rgba(34,34,34,.9);     // #222222 alpha 90%
+$color-srf-neutral-1000:                      rgba(17,17,17,1);      // #111111
+$color-srf-neutral-black:                     rgba(0,0,0,1);         // #000000
+$color-srf-neutral-blacka00:                  rgba(0,0,0,0);         // #000000 alpha  0%
+$color-srf-neutral-blacka04:                  rgba(0,0,0,.04);       // #000000 alpha  4%
+$color-srf-neutral-blacka08:                  rgba(0,0,0,.08);       // #000000 alpha  8%
+$color-srf-neutral-blacka10:                  rgba(0,0,0,.1);        // #000000 alpha 10%
+$color-srf-neutral-blacka12:                  rgba(0,0,0,.12);       // #000000 alpha 12%
+$color-srf-neutral-blacka16:                  rgba(0,0,0,.16);       // #000000 alpha 16%
+$color-srf-neutral-blacka18:                  rgba(0,0,0,.18);       // #000000 alpha 18%
+$color-srf-neutral-blacka20:                  rgba(0,0,0,.2);        // #000000 alpha 20%
+$color-srf-neutral-blacka24:                  rgba(0,0,0,.24);       // #000000 alpha 24%
+$color-srf-neutral-blacka30:                  rgba(0,0,0,.3);        // #000000 alpha 30%
+$color-srf-neutral-blacka32:                  rgba(0,0,0,.32);       // #000000 alpha 32%
+$color-srf-neutral-blacka48:                  rgba(0,0,0,.48);       // #000000 alpha 48%
+$color-srf-neutral-blacka50:                  rgba(0,0,0,.5);        // #000000 alpha 50%
+$color-srf-neutral-blacka60:                  rgba(0,0,0,.6);        // #000000 alpha 60%
+$color-srf-neutral-blacka70:                  rgba(0,0,0,.7);        // #000000 alpha 70%
+$color-srf-neutral-blacka75:                  rgba(0,0,0,.75);       // #000000 alpha 75%
+$color-srf-neutral-blacka80:                  rgba(0,0,0,.8);        // #000000 alpha 80%
+
+// Brand Colors
+$color-brand-facebook:                        rgba(52,100,165,1);    // #3464a5
+$color-brand-twitter:                         rgba(90,168,223,1);    // #5aa8df
+$color-brand-whatsapp:                        rgba(78,206,91,1);     // #4ece5b
+
+:root {
+  --background: #fff;
+  --font-color: #494949;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #3c3c3c;
+    --font-color: #fafafa;
+  }
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "srf-feathers",
+  "version": "1.0.0",
+  "main": "build/index.js",
+  "module": "build/index.esm.js",
+  "files": [
+    "build"
+  ],
+  "types": "build/index.d.ts",
+  "description": "Shared Frontend Components between SRF web applications",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "storybook": "start-storybook -p 6006",
+    "storybook:export": "build-storybook",
+    "generate": "node ./util/create-component",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mmz-srf/feathers.git"
+  },
+  "keywords": [
+    "React",
+    "Component",
+    "Library",
+    "Rollup",
+    "Typescript",
+    "Sass",
+    "Storybook"
+  ],
+  "author": "SRF Online",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mmz-srf/feathers/issues"
+  },
+  "homepage": "https://github.com/mmz-srf/feathers#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@storybook/react": "^6.3.7",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@types/jest": "^24.9.1",
+    "@types/react": "^16.14.14",
+    "@types/react-dom": "^16.9.14",
+    "babel-loader": "^8.2.2",
+    "babel-preset-react-app": "^10.0.0",
+    "classnames": "^2.3.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "rollup": "^2.56.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^10.2.0",
+    "ts-jest": "^26.5.6",
+    "typescript": "^4.4.2"
+  }
+}