` element. Any corner that will not be cut (i.e. its size is 0)
+> does not need a dedicated element.
+
+### Styles
+
+```scss
+@import "@material/shape/mixins";
+
+.my-shape-container {
+ @include mdc-shape-angled-corner(#fff, 10px);
+}
+```
+
+## Variants
+
+### Outlined Angled Corners
+
+Outlined angled corners involve the same markup and styles as above, with the addition of including a mixin for outline:
+
+```scss
+@import "@material/shape/mixins";
+
+.my-shape-container {
+ @include mdc-shape-angled-corner(#fff, 10px);
+ @include mdc-shape-angled-corner-outline(2px, blue);
+}
+```
+
+## Style Customization
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-shape-container` | Mandatory. Parent element containing the component to be masked.
+`mdc-shape-container__corner` | Mandatory. Element for masking a specific corner; there may be up to 4.
+`mdc-shape-container__corner--bottom-left` | Element for masking the bottom left corner of the component.
+`mdc-shape-container__corner--bottom-right` | Element for masking the bottom right corner of the component.
+`mdc-shape-container__corner--top-left` | Element for masking the top left corner of the component.
+`mdc-shape-container__corner--top-right` | Element for masking the top right corner of the component.
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-shape-angled-corner($background-color, $top-left-size[, $top-right-size, $bottom-right-size, $bottom-left-size])` | Applies styles for masking angled corners, using the given background color and corner sizes. If fewer than 4 corner sizes are specified, the mixin automatically determines the other corners similarly to CSS `border-radius`.
+`mdc-shape-angled-corner-background($background-color)` | Sets the background color used to mask angled corners. Useful for styling a subset of components in a section with a different background color.
+`mdc-shape-angled-corner-outline($outline-width, $outline-color[, $outline-style])` | Applies outline styles to angled corners. `$outline-style` defaults to `solid`.
+
+> **Note:** When mentioned above, "background color" specifically refers to the color of the background behind the surface (_not_ the fill color of the surface). These mixins operate by masking the corners of the surface to match the background.
+
+> **Note:** These mixins should be included in the context of the container element (or an ancestor) in order to apply styles to the corner elements.
diff --git a/node_modules/@material/shape/_mixins.scss b/node_modules/@material/shape/_mixins.scss
new file mode 100644
index 0000000..13ec167
--- /dev/null
+++ b/node_modules/@material/shape/_mixins.scss
@@ -0,0 +1,58 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+// Sets 45-degree angle corners of a certain size (akin to border-radius but for flat corners).
+@mixin mdc-shape-angled-corner($background-color, $top-left-size, $top-right-size: $top-left-size, $bottom-right-size: $top-left-size, $bottom-left-size: $top-right-size) {
+ $corners: (top, left, $top-left-size),
+ (top, right, $top-right-size),
+ (bottom, right, $bottom-right-size),
+ (bottom, left, $bottom-left-size);
+
+ @each $y, $x, $size in $corners {
+ @if $size > 0 {
+ // Assume that the size passed represents the width/height rather than the diagonal.
+ // This makes it trivial e.g. to accomplish a horizontal arrow cap by specifying exactly half the shape's height.
+ // Unfortunately, Sass doesn't have built-in exponentiation, and node-sass custom functions seem to hang.
+ // (https://github.com/sass/node-sass/issues/857 may be related, but the workaround didn't seem to work.)
+ // Fortunately, if we assume 45 degree cutouts all the time, a^2 + b^2 = c^2 simplifies to a*sqrt(2).
+ $diagonal-length: $size * 1.4142135623730951;
+
+ .mdc-shape-container__corner--#{$y}-#{$x} {
+ #{$y}: -$diagonal-length / 2;
+ #{$x}: -$diagonal-length / 2;
+ width: $diagonal-length;
+ height: $diagonal-length;
+ }
+ }
+ }
+
+ @include mdc-shape-angled-corner-background($background-color);
+}
+
+// Sets the background color used for masking.
+// Exposed separately to allow overriding for some shapes within a page which happen to be over a different background.
+@mixin mdc-shape-angled-corner-background($background-color) {
+ .mdc-shape-container__corner::after {
+ background-color: $background-color;
+ }
+}
+
+@mixin mdc-shape-angled-corner-outline($outline-width, $outline-color, $outline-style: solid) {
+ .mdc-shape-container__corner::before {
+ top: $outline-width;
+ border-bottom: $outline-width $outline-style $outline-color;
+ }
+}
diff --git a/node_modules/@material/shape/dist/mdc.shape.css b/node_modules/@material/shape/dist/mdc.shape.css
new file mode 100644
index 0000000..7d0a24c
--- /dev/null
+++ b/node_modules/@material/shape/dist/mdc.shape.css
@@ -0,0 +1,39 @@
+/*!
+ Material Components for the Web
+ Copyright (c) 2018 Google Inc.
+ License: Apache-2.0
+*/
+.mdc-shape-container {
+ display: inline-block;
+ position: relative;
+ overflow: hidden; }
+
+.mdc-shape-container__corner {
+ position: absolute;
+ z-index: 1; }
+
+.mdc-shape-container__corner::before,
+.mdc-shape-container__corner::after {
+ position: absolute;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ content: ""; }
+
+.mdc-shape-container__corner--top-left {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+
+.mdc-shape-container__corner--top-right {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg); }
+
+.mdc-shape-container__corner--bottom-right {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg); }
+
+.mdc-shape-container__corner--bottom-left {
+ -webkit-transform: rotate(-135deg);
+ transform: rotate(-135deg); }
+
+/*# sourceMappingURL=mdc.shape.css.map*/
\ No newline at end of file
diff --git a/node_modules/@material/shape/dist/mdc.shape.min.css b/node_modules/@material/shape/dist/mdc.shape.min.css
new file mode 100644
index 0000000..6151fe0
--- /dev/null
+++ b/node_modules/@material/shape/dist/mdc.shape.min.css
@@ -0,0 +1,7 @@
+/*!
+ Material Components for the Web
+ Copyright (c) 2018 Google Inc.
+ License: Apache-2.0
+*/
+.mdc-shape-container{display:inline-block;position:relative;overflow:hidden}.mdc-shape-container__corner{position:absolute;z-index:1}.mdc-shape-container__corner:after,.mdc-shape-container__corner:before{position:absolute;box-sizing:border-box;width:100%;height:100%;content:""}.mdc-shape-container__corner--top-left{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.mdc-shape-container__corner--top-right{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.mdc-shape-container__corner--bottom-right{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.mdc-shape-container__corner--bottom-left{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}
+/*# sourceMappingURL=mdc.shape.min.css.map*/
\ No newline at end of file
diff --git a/node_modules/@material/shape/mdc-shape.scss b/node_modules/@material/shape/mdc-shape.scss
new file mode 100644
index 0000000..0d7f60b
--- /dev/null
+++ b/node_modules/@material/shape/mdc-shape.scss
@@ -0,0 +1,52 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+.mdc-shape-container {
+ display: inline-block;
+ position: relative;
+ overflow: hidden; // Prevent overflowed borders from encroaching on surrounding elements
+}
+
+.mdc-shape-container__corner {
+ position: absolute;
+ // IE and Edge require z-index set to 1 to properly mask ripple.
+ z-index: 1;
+}
+
+.mdc-shape-container__corner::before,
+.mdc-shape-container__corner::after {
+ position: absolute;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ content: "";
+}
+
+.mdc-shape-container__corner--top-left {
+ transform: rotate(-45deg);
+}
+
+.mdc-shape-container__corner--top-right {
+ transform: rotate(45deg);
+}
+
+.mdc-shape-container__corner--bottom-right {
+ transform: rotate(135deg);
+}
+
+.mdc-shape-container__corner--bottom-left {
+ transform: rotate(-135deg);
+}
diff --git a/node_modules/@material/shape/package.json b/node_modules/@material/shape/package.json
new file mode 100644
index 0000000..1455e5d
--- /dev/null
+++ b/node_modules/@material/shape/package.json
@@ -0,0 +1,49 @@
+{
+ "_from": "@material/shape",
+ "_id": "@material/shape@0.35.0",
+ "_inBundle": false,
+ "_integrity": "sha512-WMmGLWrqRymMn8gaPybDWRIx7zNurUmaUa/OoxB++HSiLdLZf8hdEffiWLgqc5u97eRpb4IRaIi/jzcPbWxiUw==",
+ "_location": "/@material/shape",
+ "_phantomChildren": {},
+ "_requested": {
+ "type": "tag",
+ "registry": true,
+ "raw": "@material/shape",
+ "name": "@material/shape",
+ "escapedName": "@material%2fshape",
+ "scope": "@material",
+ "rawSpec": "",
+ "saveSpec": null,
+ "fetchSpec": "latest"
+ },
+ "_requiredBy": [
+ "#USER",
+ "/"
+ ],
+ "_resolved": "https://registry.npmjs.org/@material/shape/-/shape-0.35.0.tgz",
+ "_shasum": "2bd20063cef04034f9e050a2d96027bb3f645d6f",
+ "_spec": "@material/shape",
+ "_where": "C:\\Users\\jakch\\github\\tool-hub",
+ "bugs": {
+ "url": "https://github.com/material-components/material-components-web/issues"
+ },
+ "bundleDependencies": false,
+ "deprecated": false,
+ "description": "Shape utilities for Material Components for the web",
+ "homepage": "https://github.com/material-components/material-components-web#readme",
+ "keywords": [
+ "material components",
+ "material design",
+ "shape"
+ ],
+ "license": "Apache-2.0",
+ "name": "@material/shape",
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/material-components/material-components-web.git"
+ },
+ "version": "0.35.0"
+}
diff --git a/node_modules/@material/textfield/README.md b/node_modules/@material/textfield/README.md
new file mode 100644
index 0000000..5caf834
--- /dev/null
+++ b/node_modules/@material/textfield/README.md
@@ -0,0 +1,321 @@
+
+
+## Important - Default Style Deprecation Notice
+
+The existing default text field style will be changed in an upcoming release. The Material spec indicates that
+the default style will be the filled variant (currently referred to as the box variant). This will become the
+default style. Continuing to add the `mdc-text-field--box` class to the text field will
+result in no change.
+
+# Text Field
+
+
+
+Text fields allow users to input, edit, and select text.
+
+## Design & API Documentation
+
+
+
+## Installation
+
+```
+npm install @material/textfield
+```
+
+## Basic Usage
+
+### HTML Structure
+
+```html
+
+```
+
+> NOTE: Text field supports `text`, `number`, and `password` input types (e.g., `
`).
+>
+> Other input types (such as `date`) are not currently supported.
+
+> NOTE: For more details, see [MDC Line Ripple](../mdc-line-ripple/README.md)
+> and [MDC Floating Label](../mdc-floating-label/README.md).
+
+### Styles
+
+```scss
+@import "@material/textfield/mdc-text-field";
+```
+
+### JavaScript Instantiation
+
+```js
+import {MDCTextField} from '@material/textfield';
+
+const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
+```
+
+> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
+
+## Variants
+
+### Full Width
+
+Full width text fields are useful for in-depth tasks or entering complex information.
+
+```html
+
+
+```
+
+> _NOTE_: Do not use `mdc-text-field--box` or `mdc-text-field--outlined` to style a full width text field.
+
+> _NOTE_: Do not use `mdc-floating-label` within `mdc-text-field--fullwidth`. Labels should not be
+included as part of the DOM structure of a full width text field.
+
+### Textarea
+
+```html
+
+
+ Textarea Label
+
+```
+
+### Outlined
+
+```html
+
+```
+
+See [here](../mdc-notched-outline/) for more information on using the notched outline sub-component.
+
+> _NOTE_: Do not use `mdc-line-ripple` inside of `mdc-text-field` _if you plan on using `mdc-text-field--outlined`_. Line Ripple should not be included as part of the DOM structure of an outlined text field.
+
+### Disabled
+
+To disable the text field, add the `disabled` attribute to the `
` element and add the `mdc-text-field--disabled` class to the `mdc-text-field` element.
+
+```html
+
+
+
Disabled text field
+
+
+```
+
+### Text Field with Helper Text
+
+The helper text provides supplemental information and/or validation messages to users. It appears on input field focus
+and disappears on input field blur by default, or it can be persistent.
+See [here](helper-text/) for more information on using helper text.
+
+### Text Field with Leading and Trailing Icons
+
+Leading and trailing icons can be added within the box or outlined variants of MDC Text Field as visual indicators as
+well as interaction targets. See [here](icon/) for more information on using icons.
+
+
+### HTML5 Validation
+
+`MDCTextFieldFoundation` provides validity styling by using the `:invalid` and `:required` attributes provided
+by HTML5's form validation API.
+
+```html
+
+```
+
+`MDCTextFieldFoundation` automatically appends an asterisk to the label text if the required attribute is set.
+
+### Pre-filled
+
+When dealing with JS-driven text fields that already have values, you'll want to ensure that you
+render `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
+ensure that the label moves out of the way of the text field's value and prevents a Flash Of
+Un-styled Content (**FOUC**).
+
+```html
+
+
+
+ Label in correct place
+
+
+
+```
+
+## Style Customization
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-text-field` | Mandatory.
+`mdc-text-field--upgraded` | Indicates the text field is upgraded, using JavaScript.
+`mdc-text-field--box` | Styles the text field as a box text field.
+`mdc-text-field--outlined` | Styles the text field as an outlined text field.
+`mdc-text-field--fullwidth` | Styles the text field as a full width text field.
+`mdc-text-field--textarea` | Indicates the text field is a `
