diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index 62dcda86..cc85f4a8 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -24,9 +24,10 @@ "apr-intercept": "^1.0.4", "clipboard-copy": "^1.2.0", "date-fns": "^1.29.0", - "declarative-redux-form": "^1.0.4", - "joyent-manifest-editor": "^1.4.0", + "declarative-redux-form": "^2.0.8", "joyent-ui-toolkit": "^4.0.0", + "joyent-manifest-editor": "^1.4.0", + "joyent-ui-toolkit": "^4.0.1", "lodash.find": "^4.6.0", "lodash.get": "^4.4.2", "lodash.isstring": "^4.0.1", diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap index da4dcee3..fe241f1b 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders without throwing 1`] = ` +exports[`renders without throwing 1`] = ` Array [ .c2 { color: rgba(73,73,73,1); @@ -97,7 +97,7 @@ Array [ ] `; -exports[`renders <Toolbar icon="NameIcon"/> without throwing 1`] = ` +exports[`renders <Title icon="NameIcon"/> without throwing 1`] = ` Array [ .c2 { color: rgba(73,73,73,1); @@ -214,7 +214,7 @@ Array [ ] `; -exports[`renders <Toolbar icon="Test" label="Instance name"/> without throwing 1`] = ` +exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = ` Array [ .c2 { color: rgba(73,73,73,1); @@ -331,7 +331,7 @@ Array [ ] `; -exports[`renders <Toolbar label="Test"/> without throwing 1`] = ` +exports[`renders <Title label="Test"/> without throwing 1`] = ` Array [ .c2 { color: rgba(73,73,73,1); diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js b/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js index 994d4258..20d0ad87 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js @@ -7,7 +7,7 @@ import { NameIcon } from 'joyent-ui-toolkit'; import Title from '../title'; import Theme from '@mocks/theme'; -it('renders <Toolbar /> without throwing', () => { +it('renders <Title /> without throwing', () => { expect( renderer .create( @@ -19,7 +19,7 @@ it('renders <Toolbar /> without throwing', () => { ).toMatchSnapshot(); }); -it('renders <Toolbar label="Test"/> without throwing', () => { +it('renders <Title label="Test"/> without throwing', () => { expect( renderer .create( @@ -31,7 +31,7 @@ it('renders <Toolbar label="Test"/> without throwing', () => { ).toMatchSnapshot(); }); -it('renders <Toolbar icon="NameIcon"/> without throwing', () => { +it('renders <Title icon="NameIcon"/> without throwing', () => { expect( renderer .create( @@ -43,7 +43,7 @@ it('renders <Toolbar icon="NameIcon"/> without throwing', () => { ).toMatchSnapshot(); }); -it('renders <Toolbar icon="Test" label="Instance name"/> without throwing', () => { +it('renders <Title icon="Test" label="Instance name"/> without throwing', () => { expect( renderer .create( diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap index 84cf2b1d..bd1c4856 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap @@ -1972,11 +1972,6 @@ exports[`renders <Tag /> without throwing 1`] = ` } .c1 { - border: 0.0625rem solid rgb(216,216,216); - box-sizing: border-box; - border-radius: 0.1875rem; - font-size: 0.8125rem; - padding: 0.375rem 0.75rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1992,6 +1987,12 @@ exports[`renders <Tag /> without throwing 1`] = ` } .c2 { + border: 0.0625rem solid rgb(216,216,216); + box-sizing: border-box; + border-radius: 0.1875rem; + font-size: 0.8125rem; + line-height: 1.125rem; + padding: 0.375rem 0.75rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2009,16 +2010,16 @@ exports[`renders <Tag /> without throwing 1`] = ` <div className="c0" > - <li + <div className="c1" - onClick={undefined} > - <div + <li className="c2" + onClick={undefined} > : - </div> - </li> + </li> + </div> </div> `; @@ -2029,11 +2030,6 @@ exports[`renders <Tag name value/> without throwing 1`] = ` } .c1 { - border: 0.0625rem solid rgb(216,216,216); - box-sizing: border-box; - border-radius: 0.1875rem; - font-size: 0.8125rem; - padding: 0.375rem 0.75rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2049,6 +2045,12 @@ exports[`renders <Tag name value/> without throwing 1`] = ` } .c2 { + border: 0.0625rem solid rgb(216,216,216); + box-sizing: border-box; + border-radius: 0.1875rem; + font-size: 0.8125rem; + line-height: 1.125rem; + padding: 0.375rem 0.75rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2066,17 +2068,17 @@ exports[`renders <Tag name value/> without throwing 1`] = ` <div className="c0" > - <li + <div className="c1" - onClick={undefined} > - <div + <li className="c2" + onClick={undefined} > name : value - </div> - </li> + </li> + </div> </div> `; diff --git a/packages/my-joy-beta/src/components/instances/tags.js b/packages/my-joy-beta/src/components/instances/tags.js index 689ff7df..04e195a3 100644 --- a/packages/my-joy-beta/src/components/instances/tags.js +++ b/packages/my-joy-beta/src/components/instances/tags.js @@ -2,7 +2,7 @@ import React from 'react'; import { Margin } from 'styled-components-spacing'; import { KeyValue } from '@components/instances'; -import { TagItem, TagItemContainer } from 'joyent-ui-toolkit'; +import { TagItem } from 'joyent-ui-toolkit'; export const AddForm = props => ( <KeyValue {...props} method="add" input="input" type="tag" expanded /> @@ -12,12 +12,10 @@ export const EditForm = props => ( <KeyValue {...props} method="edit" input="input" type="tag" expanded /> ); -export default ({ name, value, onClick }) => ( +export default ({ name, value, onClick, onRemoveClick }) => ( <Margin right={1} bottom={1} key={`${name}-${value}`}> - <TagItem onClick={onClick}> - <TagItemContainer> - {name}: {value} - </TagItemContainer> + <TagItem onClick={onClick} onRemoveClick={onRemoveClick}> + {name}: {value} </TagItem> </Margin> ); diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.js.snap new file mode 100644 index 00000000..8bac34ef --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.js.snap @@ -0,0 +1,7095 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders <Metadata /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="11" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Metadata + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + key:value pair + s + </h3> +</div>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={undefined} + type="button" + > + Edit + </button> +</div>, +] +`; + +exports[`renders <Metadata addOpen expanded /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="11" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Metadata + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + padding-bottom: 2.25rem; +} + +.c0 { + margin-bottom: 1rem; +} + +<div + className="c0" +> + <p + className="c1" + > + Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance. + + <a + href="https://docs.joyent.com/public-cloud/tags-metadata/metadata" + target="__blank" + > + Read the docs + </a> + </p> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + key:value pair + s + </h3> +</div>, + .c18 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c18::-moz-focus-inner, +.c18[type='button']::-moz-focus-inner, +.c18[type='reset']::-moz-focus-inner, +.c18[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c18:-moz-focusring, +.c18[type='button']:-moz-focusring, +.c18[type='reset']:-moz-focusring, +.c18[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c18 + button { + margin-left: 0.375rem; +} + +.c17 { + display: inline-block; +} + +.c16 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + margin: 0; +} + +.c16:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c16:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c16:active, +.c16:active:hover, +.c16:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c16[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c16:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c16:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c16:active, +.c16:active:hover, +.c16:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c19 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + margin: 0; +} + +.c19:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c19:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c19:active, +.c19:active:hover, +.c19:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c19[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c19:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c19:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c19:active, +.c19:active:hover, +.c19:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c21 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + float: right; +} + +.c21:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c21:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c21:active, +.c21:active:hover, +.c21:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c21[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c21:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c21:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c21:active, +.c21:active:hover, +.c21:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c21:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c21:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c21:active, +.c21:active:hover, +.c21:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c21 svg + span { + margin-left: 0.75rem; +} + +.c21 svg { + max-height: 1.125rem; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c15 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c20 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c3 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + margin-top: 0.75rem; +} + +.c12 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.75rem; +} + +.c22 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.8125rem; +} + +.c0 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); +} + +.c4 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-width: 0; + padding: 0.75rem; + margin-bottom: 0; + background-color: transparent; +} + +.c4 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c4 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.c1 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + line-height: 1.5rem; + height: auto; + margin: -0.0625rem -0.0625rem 0 -0.0625rem; +} + +.c1 button { + margin-bottom: 0; + margin-top: 0; +} + +.c2 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + box-sizing: border-box; + min-height: 2.9375rem; + width: auto; + height: auto; + padding: 0.75rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + overflow: hidden; + background-color: transparent; + border-width: 0; + box-shadow: none; + color: inherit; +} + +.c8 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c10 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c10::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:invalid { + box-shadow: none; +} + +.c10:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c10:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c14 { + box-sizing: border-box; + width: 100%; + height: 6rem; + min-height: 6rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 100%; + text-overflow: ellipsis; + resize: vertical; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c14::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:invalid { + box-shadow: none; +} + +.c14:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c14:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c13 { + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 100%; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c11 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c5 { + padding: 0.25rem; +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media only screen and (min-width:0em) { + .c7 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c20 { + display: none; + } +} + +<form + onSubmit={undefined} +> + <div + className="c0" + disabled={false} + name="card" + > + <div + className="c1" + disabled={false} + name="card-header" + onClick={false} + > + <div + className="c2" + disabled={false} + name="card-header-meta" + > + <h4 + className="c3" + > + Add metadata + </h4> + </div> + </div> + <div + className="c4" + name="card-outlet" + > + <div + className="c5" + > + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="name" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="bg" + > + Metadata + key + </label> + <input + className="c10" + disabled={false} + id="bg" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="value" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="bh" + > + Metadata + value + </label> + <textarea + className="c13 c14" + disabled={false} + id="bh" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c15" + > + <div + className="c7" + > + <button + className="c16 c17 c18" + disabled={false} + href="" + onClick={[Function]} + type="button" + > + <span> + Cancel + </span> + </button> + <button + className="c19 c17 c18" + disabled={true} + href="" + type="submit" + > + <span> + Create + </span> + </button> + </div> + <div + className="c20" + > + <button + className="c21 c17 c18" + disabled={false} + href="" + icon={true} + onClick={[Function]} + type="button" + > + <svg + className="" + height="12" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 9 12" + width="9" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(17403 -18583)" + > + <g> + <use + fill="rgb(210, 67, 58)" + transform="translate(-17403 18583)" + xlinkHref="#j" + /> + </g> + </g> + <defs> + <path + d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z" + fillRule="evenodd" + id="j" + /> + </defs> + </svg> + <span> + Delete + </span> + </button> + </div> + </div> + </div> + </div> + </div> + <div + className="c22 c6" + height="0.8125rem" + /> +</form>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c3 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c3:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c3[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={[Function]} + type="button" + > + Add Metadata + </button> + <button + className="c3 c1 c2" + href="" + onClick={undefined} + type="button" + > + Next + </button> +</div>, +] +`; + +exports[`renders <Metadata expanded /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="11" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Metadata + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + padding-bottom: 2.25rem; +} + +.c0 { + margin-bottom: 1rem; +} + +<div + className="c0" +> + <p + className="c1" + > + Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance. + + <a + href="https://docs.joyent.com/public-cloud/tags-metadata/metadata" + target="__blank" + > + Read the docs + </a> + </p> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + key:value pair + s + </h3> +</div>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c3 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c3:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c3[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={[Function]} + type="button" + > + Add Metadata + </button> + <button + className="c3 c1 c2" + href="" + onClick={undefined} + type="button" + > + Next + </button> +</div>, +] +`; + +exports[`renders <Metadata metadata=[] /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="11" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Metadata + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 2 + key:value pair + s + </h3> +</div>, + .c19 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c19::-moz-focus-inner, +.c19[type='button']::-moz-focus-inner, +.c19[type='reset']::-moz-focus-inner, +.c19[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c19:-moz-focusring, +.c19[type='button']:-moz-focusring, +.c19[type='reset']:-moz-focusring, +.c19[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c19 + button { + margin-left: 0.375rem; +} + +.c18 { + display: inline-block; +} + +.c17 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + margin: 0; +} + +.c17:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c17:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c17[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c17:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c17:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c20 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + margin: 0; +} + +.c20:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c20:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c20[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c20:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c20:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c22 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + float: right; +} + +.c22:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c22:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c22[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c22 svg + span { + margin-left: 0.75rem; +} + +.c22 svg { + max-height: 1.125rem; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c15 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c16 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c21 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c12 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.75rem; +} + +.c23 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.8125rem; +} + +.c0 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); +} + +.c4 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-width: 0; + padding: 0.75rem; + margin-bottom: 0; + background-color: transparent; +} + +.c4 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c4 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.c1 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + line-height: 1.5rem; + height: auto; + margin: -0.0625rem -0.0625rem 0 -0.0625rem; +} + +.c1 button { + margin-bottom: 0; + margin-top: 0; +} + +.c2 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + box-sizing: border-box; + min-height: 2.9375rem; + width: auto; + height: auto; + padding: 0.75rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + overflow: hidden; + background-color: transparent; + border-width: 0; + box-shadow: none; + color: inherit; +} + +.c8 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c10 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c10::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:invalid { + box-shadow: none; +} + +.c10:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c10:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c14 { + box-sizing: border-box; + width: 100%; + height: 6rem; + min-height: 6rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 100%; + text-overflow: ellipsis; + resize: vertical; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c14::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:invalid { + box-shadow: none; +} + +.c14:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c14:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c13 { + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 100%; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c11 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c5 { + padding: 0.25rem; +} + +.c3 { + word-break: break-all; + line-height: 1.5; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media only screen and (min-width:0em) { + .c7 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c16 { + -webkit-flex-basis: 58.333333333333336%; + -ms-flex-preferred-size: 58.333333333333336%; + flex-basis: 58.333333333333336%; + max-width: 58.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c21 { + -webkit-flex-basis: 41.66666666666667%; + -ms-flex-preferred-size: 41.66666666666667%; + flex-basis: 41.66666666666667%; + max-width: 41.66666666666667%; + display: block; + } +} + +<form + onSubmit={undefined} +> + <div + className="c0" + disabled={false} + name="card" + > + <div + className="c1" + disabled={false} + name="card-header" + onClick={[Function]} + > + <div + className="c2" + disabled={false} + name="card-header-meta" + > + <div + className="c3" + > + <span> + hello: + </span> + <span> + world + </span> + </div> + </div> + </div> + <div + className="c4" + name="card-outlet" + > + <div + className="c5" + > + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="name" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="Y" + > + Metadata + key + </label> + <input + className="c10" + disabled={false} + id="Y" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="value" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="Z" + > + Metadata + value + </label> + <textarea + className="c13 c14" + disabled={false} + id="Z" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c15" + > + <div + className="c16" + > + <button + className="c17 c18 c19" + disabled={false} + href="" + onClick={[Function]} + type="button" + > + <span> + Cancel + </span> + </button> + <button + className="c20 c18 c19" + disabled={true} + href="" + type="submit" + > + <span> + Save + </span> + </button> + </div> + <div + className="c21" + > + <button + className="c22 c18 c19" + disabled={false} + href="" + icon={true} + onClick={[Function]} + type="button" + > + <svg + className="" + height="12" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 9 12" + width="9" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(17403 -18583)" + > + <g> + <use + fill="rgb(210, 67, 58)" + transform="translate(-17403 18583)" + xlinkHref="#j" + /> + </g> + </g> + <defs> + <path + d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z" + fillRule="evenodd" + id="j" + /> + </defs> + </svg> + <span> + Delete + </span> + </button> + </div> + </div> + </div> + </div> + </div> + <div + className="c23 c6" + height="0.8125rem" + /> +</form>, + .c19 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c19::-moz-focus-inner, +.c19[type='button']::-moz-focus-inner, +.c19[type='reset']::-moz-focus-inner, +.c19[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c19:-moz-focusring, +.c19[type='button']:-moz-focusring, +.c19[type='reset']:-moz-focusring, +.c19[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c19 + button { + margin-left: 0.375rem; +} + +.c18 { + display: inline-block; +} + +.c17 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + margin: 0; +} + +.c17:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c17:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c17[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c17:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c17:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c20 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + margin: 0; +} + +.c20:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c20:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c20[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c20:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c20:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c22 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + float: right; +} + +.c22:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c22:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c22[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c22 svg + span { + margin-left: 0.75rem; +} + +.c22 svg { + max-height: 1.125rem; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c15 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c16 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c21 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c12 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.75rem; +} + +.c23 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.8125rem; +} + +.c0 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); +} + +.c4 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-width: 0; + padding: 0.75rem; + margin-bottom: 0; + background-color: transparent; +} + +.c4 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c4 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.c1 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + line-height: 1.5rem; + height: auto; + margin: -0.0625rem -0.0625rem 0 -0.0625rem; +} + +.c1 button { + margin-bottom: 0; + margin-top: 0; +} + +.c2 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + box-sizing: border-box; + min-height: 2.9375rem; + width: auto; + height: auto; + padding: 0.75rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + overflow: hidden; + background-color: transparent; + border-width: 0; + box-shadow: none; + color: inherit; +} + +.c8 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c10 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c10::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:invalid { + box-shadow: none; +} + +.c10:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c10:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c14 { + box-sizing: border-box; + width: 100%; + height: 6rem; + min-height: 6rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 100%; + text-overflow: ellipsis; + resize: vertical; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c14::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:invalid { + box-shadow: none; +} + +.c14:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c14:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c13 { + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 100%; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c11 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c5 { + padding: 0.25rem; +} + +.c3 { + word-break: break-all; + line-height: 1.5; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media only screen and (min-width:0em) { + .c7 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c16 { + -webkit-flex-basis: 58.333333333333336%; + -ms-flex-preferred-size: 58.333333333333336%; + flex-basis: 58.333333333333336%; + max-width: 58.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c21 { + -webkit-flex-basis: 41.66666666666667%; + -ms-flex-preferred-size: 41.66666666666667%; + flex-basis: 41.66666666666667%; + max-width: 41.66666666666667%; + display: block; + } +} + +<form + onSubmit={undefined} +> + <div + className="c0" + disabled={false} + name="card" + > + <div + className="c1" + disabled={false} + name="card-header" + onClick={[Function]} + > + <div + className="c2" + disabled={false} + name="card-header-meta" + > + <div + className="c3" + > + <span> + hello2: + </span> + <span> + world2 + </span> + </div> + </div> + </div> + <div + className="c4" + name="card-outlet" + > + <div + className="c5" + > + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="name" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="a" + > + Metadata + key + </label> + <input + className="c10" + disabled={false} + id="a" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="value" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="bb" + > + Metadata + value + </label> + <textarea + className="c13 c14" + disabled={false} + id="bb" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c15" + > + <div + className="c16" + > + <button + className="c17 c18 c19" + disabled={false} + href="" + onClick={[Function]} + type="button" + > + <span> + Cancel + </span> + </button> + <button + className="c20 c18 c19" + disabled={true} + href="" + type="submit" + > + <span> + Save + </span> + </button> + </div> + <div + className="c21" + > + <button + className="c22 c18 c19" + disabled={false} + href="" + icon={true} + onClick={[Function]} + type="button" + > + <svg + className="" + height="12" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 9 12" + width="9" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(17403 -18583)" + > + <g> + <use + fill="rgb(210, 67, 58)" + transform="translate(-17403 18583)" + xlinkHref="#j" + /> + </g> + </g> + <defs> + <path + d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z" + fillRule="evenodd" + id="j" + /> + </defs> + </svg> + <span> + Delete + </span> + </button> + </div> + </div> + </div> + </div> + </div> + <div + className="c23 c6" + height="0.8125rem" + /> +</form>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={undefined} + type="button" + > + Edit + </button> +</div>, +] +`; + +exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="11" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Metadata + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + padding-bottom: 2.25rem; +} + +.c0 { + margin-bottom: 1rem; +} + +<div + className="c0" +> + <p + className="c1" + > + Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance. + + <a + href="https://docs.joyent.com/public-cloud/tags-metadata/metadata" + target="__blank" + > + Read the docs + </a> + </p> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 2 + key:value pair + s + </h3> +</div>, + .c19 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c19::-moz-focus-inner, +.c19[type='button']::-moz-focus-inner, +.c19[type='reset']::-moz-focus-inner, +.c19[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c19:-moz-focusring, +.c19[type='button']:-moz-focusring, +.c19[type='reset']:-moz-focusring, +.c19[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c19 + button { + margin-left: 0.375rem; +} + +.c18 { + display: inline-block; +} + +.c17 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + margin: 0; +} + +.c17:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c17:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c17[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c17:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c17:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c20 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + margin: 0; +} + +.c20:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c20:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c20[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c20:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c20:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c22 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + float: right; +} + +.c22:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c22:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c22[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c22 svg + span { + margin-left: 0.75rem; +} + +.c22 svg { + max-height: 1.125rem; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c15 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c16 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c21 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c12 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.75rem; +} + +.c23 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.8125rem; +} + +.c0 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); +} + +.c4 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-width: 0; + padding: 0.75rem; + margin-bottom: 0; + background-color: transparent; +} + +.c4 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c4 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.c1 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + line-height: 1.5rem; + height: auto; + margin: -0.0625rem -0.0625rem 0 -0.0625rem; +} + +.c1 button { + margin-bottom: 0; + margin-top: 0; +} + +.c2 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + box-sizing: border-box; + min-height: 2.9375rem; + width: auto; + height: auto; + padding: 0.75rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + overflow: hidden; + background-color: transparent; + border-width: 0; + box-shadow: none; + color: inherit; +} + +.c8 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c10 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c10::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:invalid { + box-shadow: none; +} + +.c10:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c10:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c14 { + box-sizing: border-box; + width: 100%; + height: 6rem; + min-height: 6rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 100%; + text-overflow: ellipsis; + resize: vertical; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c14::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:invalid { + box-shadow: none; +} + +.c14:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c14:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c13 { + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 100%; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c11 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c5 { + padding: 0.25rem; +} + +.c3 { + word-break: break-all; + line-height: 1.5; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media only screen and (min-width:0em) { + .c7 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c16 { + -webkit-flex-basis: 58.333333333333336%; + -ms-flex-preferred-size: 58.333333333333336%; + flex-basis: 58.333333333333336%; + max-width: 58.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c21 { + -webkit-flex-basis: 41.66666666666667%; + -ms-flex-preferred-size: 41.66666666666667%; + flex-basis: 41.66666666666667%; + max-width: 41.66666666666667%; + display: block; + } +} + +<form + onSubmit={undefined} +> + <div + className="c0" + disabled={false} + name="card" + > + <div + className="c1" + disabled={false} + name="card-header" + onClick={[Function]} + > + <div + className="c2" + disabled={false} + name="card-header-meta" + > + <div + className="c3" + > + <span> + hello: + </span> + <span> + world + </span> + </div> + </div> + </div> + <div + className="c4" + name="card-outlet" + > + <div + className="c5" + > + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="name" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="bc" + > + Metadata + key + </label> + <input + className="c10" + disabled={false} + id="bc" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="value" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="bd" + > + Metadata + value + </label> + <textarea + className="c13 c14" + disabled={false} + id="bd" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c15" + > + <div + className="c16" + > + <button + className="c17 c18 c19" + disabled={false} + href="" + onClick={[Function]} + type="button" + > + <span> + Cancel + </span> + </button> + <button + className="c20 c18 c19" + disabled={true} + href="" + type="submit" + > + <span> + Save + </span> + </button> + </div> + <div + className="c21" + > + <button + className="c22 c18 c19" + disabled={false} + href="" + icon={true} + onClick={[Function]} + type="button" + > + <svg + className="" + height="12" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 9 12" + width="9" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(17403 -18583)" + > + <g> + <use + fill="rgb(210, 67, 58)" + transform="translate(-17403 18583)" + xlinkHref="#j" + /> + </g> + </g> + <defs> + <path + d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z" + fillRule="evenodd" + id="j" + /> + </defs> + </svg> + <span> + Delete + </span> + </button> + </div> + </div> + </div> + </div> + </div> + <div + className="c23 c6" + height="0.8125rem" + /> +</form>, + .c19 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c19::-moz-focus-inner, +.c19[type='button']::-moz-focus-inner, +.c19[type='reset']::-moz-focus-inner, +.c19[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c19:-moz-focusring, +.c19[type='button']:-moz-focusring, +.c19[type='reset']:-moz-focusring, +.c19[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c19 + button { + margin-left: 0.375rem; +} + +.c18 { + display: inline-block; +} + +.c17 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + margin: 0; +} + +.c17:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c17:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c17[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c17:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c17:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c20 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + margin: 0; +} + +.c20:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c20:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c20[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c20:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c20:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c22 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + float: right; +} + +.c22:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c22:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c22[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c22:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c22:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c22:active, +.c22:active:hover, +.c22:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c22 svg + span { + margin-left: 0.75rem; +} + +.c22 svg { + max-height: 1.125rem; +} + +.c6 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c15 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c16 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c21 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c12 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.75rem; +} + +.c23 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.8125rem; +} + +.c0 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); +} + +.c4 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-width: 0; + padding: 0.75rem; + margin-bottom: 0; + background-color: transparent; +} + +.c4 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c4 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.c1 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + line-height: 1.5rem; + height: auto; + margin: -0.0625rem -0.0625rem 0 -0.0625rem; +} + +.c1 button { + margin-bottom: 0; + margin-top: 0; +} + +.c2 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: pointer; + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + box-sizing: border-box; + min-height: 2.9375rem; + width: auto; + height: auto; + padding: 0.75rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + overflow: hidden; + background-color: transparent; + border-width: 0; + box-shadow: none; + color: inherit; +} + +.c8 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c10 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c10::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:invalid { + box-shadow: none; +} + +.c10:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c10:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c14 { + box-sizing: border-box; + width: 100%; + height: 6rem; + min-height: 6rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 100%; + text-overflow: ellipsis; + resize: vertical; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c14::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:invalid { + box-shadow: none; +} + +.c14:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c14:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c14:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c13 { + position: relative; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 100%; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c11 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c5 { + padding: 0.25rem; +} + +.c3 { + word-break: break-all; + line-height: 1.5; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +@media only screen and (min-width:0em) { + .c15 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media only screen and (min-width:0em) { + .c7 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c16 { + -webkit-flex-basis: 58.333333333333336%; + -ms-flex-preferred-size: 58.333333333333336%; + flex-basis: 58.333333333333336%; + max-width: 58.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c21 { + -webkit-flex-basis: 41.66666666666667%; + -ms-flex-preferred-size: 41.66666666666667%; + flex-basis: 41.66666666666667%; + max-width: 41.66666666666667%; + display: block; + } +} + +<form + onSubmit={undefined} +> + <div + className="c0" + disabled={false} + name="card" + > + <div + className="c1" + disabled={false} + name="card-header" + onClick={[Function]} + > + <div + className="c2" + disabled={false} + name="card-header-meta" + > + <div + className="c3" + > + <span> + hello2: + </span> + <span> + world2 + </span> + </div> + </div> + </div> + <div + className="c4" + name="card-outlet" + > + <div + className="c5" + > + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="name" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="be" + > + Metadata + key + </label> + <input + className="c10" + disabled={false} + id="be" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="value" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="bf" + > + Metadata + value + </label> + <textarea + className="c13 c14" + disabled={false} + id="bf" + /> + <label + className="c11" + /> + </div> + <div + className="c12 c6" + height="0.75rem" + /> + </div> + </div> + <div + className="c15" + > + <div + className="c16" + > + <button + className="c17 c18 c19" + disabled={false} + href="" + onClick={[Function]} + type="button" + > + <span> + Cancel + </span> + </button> + <button + className="c20 c18 c19" + disabled={true} + href="" + type="submit" + > + <span> + Save + </span> + </button> + </div> + <div + className="c21" + > + <button + className="c22 c18 c19" + disabled={false} + href="" + icon={true} + onClick={[Function]} + type="button" + > + <svg + className="" + height="12" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 9 12" + width="9" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(17403 -18583)" + > + <g> + <use + fill="rgb(210, 67, 58)" + transform="translate(-17403 18583)" + xlinkHref="#j" + /> + </g> + </g> + <defs> + <path + d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z" + fillRule="evenodd" + id="j" + /> + </defs> + </svg> + <span> + Delete + </span> + </button> + </div> + </div> + </div> + </div> + </div> + <div + className="c23 c6" + height="0.8125rem" + /> +</form>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c3 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c3:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c3[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={[Function]} + type="button" + > + Add Metadata + </button> + <button + className="c3 c1 c2" + href="" + onClick={undefined} + type="button" + > + Next + </button> +</div>, +] +`; diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tags.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tags.js.snap new file mode 100644 index 00000000..b7515fd8 --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tags.js.snap @@ -0,0 +1,2984 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders <Tags /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="17" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Tags + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + Tag + s + </h3> +</div>, + .c0 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +<ul + className="c0" +/>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={undefined} + type="button" + > + Edit + </button> +</div>, +] +`; + +exports[`renders <Tags addOpen expanded /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="17" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Tags + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + padding-bottom: 2.25rem; +} + +.c0 { + margin-bottom: 1rem; +} + +<div + className="c0" +> + <p + className="c1" + > + Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more. + + <a + href="https://docs.joyent.com/public-cloud/tags-metadata/tags" + target="__blank" + > + Read the docs + </a> + </p> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + Tag + s + </h3> +</div>, + .c0 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +<ul + className="c0" +/>, + .c17 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c17::-moz-focus-inner, +.c17[type='button']::-moz-focus-inner, +.c17[type='reset']::-moz-focus-inner, +.c17[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c17:-moz-focusring, +.c17[type='button']:-moz-focusring, +.c17[type='reset']:-moz-focusring, +.c17[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c17 + button { + margin-left: 0.375rem; +} + +.c16 { + display: inline-block; +} + +.c15 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + margin: 0; +} + +.c15:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c15:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c15[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c15:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c15:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c18 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + margin: 0; +} + +.c18:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c18:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c18:active, +.c18:active:hover, +.c18:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c18[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c18:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c18:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c18:active, +.c18:active:hover, +.c18:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c20 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + float: right; +} + +.c20:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c20:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c20[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c20:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c20:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c20:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c20:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c20:active, +.c20:active:hover, +.c20:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c20 svg + span { + margin-left: 0.75rem; +} + +.c20 svg { + max-height: 1.125rem; +} + +.c22 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c13 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c14 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c19 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c3 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + margin-top: 0.75rem; +} + +.c21 { + background-color: rgb(216,216,216); + margin: 0; + background-color: transparent; + height: 0.8125rem; +} + +.c0 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); +} + +.c4 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-width: 0; + padding: 0.75rem; + margin-bottom: 0; + background-color: transparent; +} + +.c4 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c4 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.c1 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + z-index: 1; + line-height: 1.5rem; + height: auto; + margin: -0.0625rem -0.0625rem 0 -0.0625rem; +} + +.c1 button { + margin-bottom: 0; + margin-top: 0; +} + +.c2 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + min-height: 7.8125rem; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + min-height: auto; + height: 2.875rem; + -webkit-flex: 0 0 2.875rem; + -ms-flex: 0 0 2.875rem; + flex: 0 0 2.875rem; + box-sizing: border-box; + min-height: 2.9375rem; + width: auto; + height: auto; + padding: 0.75rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + overflow: hidden; + background-color: transparent; + border-width: 0; + box-shadow: none; + color: inherit; +} + +.c8 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c10 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c10::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:invalid { + box-shadow: none; +} + +.c10:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c10:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c10:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c9 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c11 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c5 { + padding: 0.25rem; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c7 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; +} + +.c12 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: 0.75rem; + -ms-flex-preferred-size: 0.75rem; + flex-basis: 0.75rem; +} + +@media only screen and (min-width:0em) { + .c13 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} + +@media only screen and (min-width:0em) { + .c13 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media only screen and (min-width:0em) { + .c14 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:0em) { + .c19 { + display: none; + } +} + +<form + onSubmit={undefined} +> + <div + className="c0" + disabled={false} + name="card" + > + <div + className="c1" + disabled={false} + name="card-header" + onClick={false} + > + <div + className="c2" + disabled={false} + name="card-header-meta" + > + <h4 + className="c3" + > + Add tag + </h4> + </div> + </div> + <div + className="c4" + name="card-outlet" + > + <div + className="c5" + > + <div + className="c6" + > + <div + className="c7" + > + <div + className="c8" + name="name" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="Y" + > + Tag + key + </label> + <input + className="c10" + disabled={false} + id="Y" + /> + <label + className="c11" + /> + </div> + </div> + <div + className="c12" + /> + <div + className="c7" + > + <div + className="c8" + name="value" + role="group" + style={undefined} + > + <label + className="c9" + htmlFor="Z" + > + Tag + value + </label> + <input + className="c10" + disabled={false} + id="Z" + /> + <label + className="c11" + /> + </div> + </div> + </div> + <div + className="c13" + > + <div + className="c14" + > + <button + className="c15 c16 c17" + disabled={false} + href="" + onClick={[Function]} + type="button" + > + <span> + Cancel + </span> + </button> + <button + className="c18 c16 c17" + disabled={true} + href="" + type="submit" + > + <span> + Create + </span> + </button> + </div> + <div + className="c19" + > + <button + className="c20 c16 c17" + disabled={false} + href="" + icon={true} + onClick={[Function]} + type="button" + > + <svg + className="" + height="12" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 9 12" + width="9" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(17403 -18583)" + > + <g> + <use + fill="rgb(210, 67, 58)" + transform="translate(-17403 18583)" + xlinkHref="#j" + /> + </g> + </g> + <defs> + <path + d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z" + fillRule="evenodd" + id="j" + /> + </defs> + </svg> + <span> + Delete + </span> + </button> + </div> + </div> + </div> + </div> + </div> + <div + className="c21 c22" + height="0.8125rem" + /> +</form>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c3 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c3:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c3[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={[Function]} + type="button" + > + Add Tag + </button> + <button + className="c3 c1 c2" + href="" + onClick={undefined} + type="button" + > + Next + </button> +</div>, +] +`; + +exports[`renders <Tags expanded /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="17" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Tags + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + padding-bottom: 2.25rem; +} + +.c0 { + margin-bottom: 1rem; +} + +<div + className="c0" +> + <p + className="c1" + > + Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more. + + <a + href="https://docs.joyent.com/public-cloud/tags-metadata/tags" + target="__blank" + > + Read the docs + </a> + </p> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + Tag + s + </h3> +</div>, + .c0 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +<ul + className="c0" +/>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c3 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c3:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c3[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={[Function]} + type="button" + > + Add Tag + </button> + <button + className="c3 c1 c2" + href="" + onClick={undefined} + type="button" + > + Next + </button> +</div>, +] +`; + +exports[`renders <Tags metadata=[] /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="17" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Tags + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + Tag + s + </h3> +</div>, + .c0 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +<ul + className="c0" +/>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={undefined} + type="button" + > + Edit + </button> +</div>, +] +`; + +exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c1 { + margin-right: 0.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +<div + className="c0" +> + <div + className="c1" + > + <svg + className="" + height="17" + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + <p + className="c2" + > + Tags + </p> +</div>, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +<div + className="c0" +> + <div + className="c1 c2" + height="0.0625rem" + /> +</div>, + .c1 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + padding-bottom: 2.25rem; +} + +.c0 { + margin-bottom: 1rem; +} + +<div + className="c0" +> + <p + className="c1" + > + Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more. + + <a + href="https://docs.joyent.com/public-cloud/tags-metadata/tags" + target="__blank" + > + Read the docs + </a> + </p> +</div>, + .c1 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c1 + p, +.c1 + small, +.c1 + h1, +.c1 + h2, +.c1 + label, +.c1 + h3, +.c1 + h4, +.c1 + h5, +.c1 + div, +.c1 + span { + margin-top: 1.5rem; +} + +.c0 { + margin-bottom: 2rem; +} + +<div + className="c0" +> + <h3 + className="c1" + > + 0 + Tag + s + </h3> +</div>, + .c0 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +<ul + className="c0" +/>, + .c2 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2 + button { + margin-left: 0.375rem; +} + +.c1 { + display: inline-block; +} + +.c0 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c0:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c0[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c0:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c0:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c3 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c3:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c3[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +<div> + <button + className="c0 c1 c2" + href="" + onClick={[Function]} + type="button" + > + Add Tag + </button> + <button + className="c3 c1 c2" + href="" + onClick={undefined} + type="button" + > + Next + </button> +</div>, +] +`; diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/metadata.js b/packages/my-joy-beta/src/containers/create-instance/__tests__/metadata.js new file mode 100644 index 00000000..18ff455d --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/metadata.js @@ -0,0 +1,76 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import Theme from '@mocks/theme'; +import { Metadata } from '../metadata'; + +it('renders <Metadata /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Metadata /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Metadata expanded /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Metadata expanded /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Metadata metadata=[] /> without throwing', () => { + const metadata = [ + { name: 'hello', value: 'world' }, + { name: 'hello2', value: 'world2' } + ]; + + expect( + renderer + .create( + <Theme> + <Metadata metadata={metadata} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Metadata metadata=[] expanded /> without throwing', () => { + const metadata = [ + { name: 'hello', value: 'world' }, + { name: 'hello2', value: 'world2' } + ]; + + expect( + renderer + .create( + <Theme> + <Metadata metadata={metadata} expanded /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Metadata addOpen expanded /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Metadata addOpen expanded /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/tags.js b/packages/my-joy-beta/src/containers/create-instance/__tests__/tags.js new file mode 100644 index 00000000..4ca6c4bb --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/tags.js @@ -0,0 +1,76 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import Theme from '@mocks/theme'; +import { Tags } from '../tags'; + +it('renders <Tags /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Tags /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Tags expanded /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Tags expanded /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Tags metadata=[] /> without throwing', () => { + const metadata = [ + { name: 'hello', value: 'world' }, + { name: 'hello2', value: 'world2' } + ]; + + expect( + renderer + .create( + <Theme> + <Tags metadata={metadata} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Tags metadata=[] expanded /> without throwing', () => { + const metadata = [ + { name: 'hello', value: 'world' }, + { name: 'hello2', value: 'world2' } + ]; + + expect( + renderer + .create( + <Theme> + <Tags metadata={metadata} expanded /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Tags addOpen expanded /> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Tags addOpen expanded /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/containers/create-instance/image.js b/packages/my-joy-beta/src/containers/create-instance/image.js index 4e87e0d9..8229ed92 100644 --- a/packages/my-joy-beta/src/containers/create-instance/image.js +++ b/packages/my-joy-beta/src/containers/create-instance/image.js @@ -1,5 +1,4 @@ import React, { Fragment } from 'react'; -import { withRouter } from 'react-router'; import { compose, graphql } from 'react-apollo'; import ReduxForm from 'declarative-redux-form'; import { connect } from 'react-redux'; @@ -45,7 +44,6 @@ const ImageContainer = ({ ); export default compose( - withRouter, connect( (state, ownProps) => { return { diff --git a/packages/my-joy-beta/src/containers/create-instance/index.js b/packages/my-joy-beta/src/containers/create-instance/index.js index 95b1d3a3..0d230774 100644 --- a/packages/my-joy-beta/src/containers/create-instance/index.js +++ b/packages/my-joy-beta/src/containers/create-instance/index.js @@ -5,17 +5,25 @@ import { ViewContainer, H2 } from 'joyent-ui-toolkit'; import Name from '@containers/create-instance/name'; import Image from '@containers/create-instance/image'; +import Metadata from '@containers/create-instance/metadata'; +import Tags from '@containers/create-instance/tags'; -export default ({ step }) => ( +export default ({ step, ...props }) => ( <ViewContainer> <Margin top={4} bottom={4}> <H2>Create Instances</H2> </Margin> <Margin bottom={4}> - <Name expanded={step === 'name'} /> + <Name {...props} expanded={step === 'name'} /> </Margin> <Margin bottom={4}> - <Image expanded={step === 'image'} /> + <Image {...props} expanded={step === 'image'} /> + </Margin> + <Margin bottom={4}> + <Tags {...props} expanded={step === 'tags'} /> + </Margin> + <Margin bottom={4}> + <Metadata {...props} expanded={step === 'metadata'} /> </Margin> </ViewContainer> ); diff --git a/packages/my-joy-beta/src/containers/create-instance/metadata.js b/packages/my-joy-beta/src/containers/create-instance/metadata.js new file mode 100644 index 00000000..528fa8a3 --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js @@ -0,0 +1,198 @@ +import React, { Fragment } from 'react'; +import { set } from 'react-redux-values'; +import { Margin } from 'styled-components-spacing'; +import { compose } from 'react-apollo'; +import { destroy, reset } from 'redux-form'; +import ReduxForm from 'declarative-redux-form'; +import { connect } from 'react-redux'; +import get from 'lodash.get'; + +import { MetadataIcon, P, Button, H3 } from 'joyent-ui-toolkit'; + +import Title from '@components/create-instance/title'; +import KeyValue from '@components/instances/key-value'; + +const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD'; +const FORM_NAME_EDIT = i => `CREATE-INSTANCE-METADATA-EDIT-${i}`; + +export const Metadata = ({ + metadata = [], + expanded, + addOpen, + handleAddMetadata, + handleRemoveMetadata, + handleUpdateMetadata, + handleToggleExpanded, + handleCancelEdit, + handleChangeAddOpen, + handleNext, + handleEdit +}) => ( + <Fragment> + <Title icon={<MetadataIcon />}>Metadata + {expanded ? ( + +

+ Metadata can be used to pass data to the instance. It can also be used + to inject a custom boot script. Unlike tags, metadata is only viewable + inside the instance.{' '} + + Read the docs + +

+ + ) : null} + +

+ {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'} +

+ + {metadata.map(({ name, value, expanded }, index) => ( + handleUpdateMetadata(index, newValue)} + > + {props => ( + handleToggleExpanded(index)} + onCancel={() => handleCancelEdit(index)} + onRemove={() => handleRemoveMetadata(index)} + /> + )} + + ))} + {expanded && addOpen ? ( + + {props => ( + handleChangeAddOpen(false)} + /> + )} + + ) : null} +
+ {expanded ? ( + + + + + ) : ( + + )} +
+ +); + +export default compose( + connect(({ values }, ownProps) => ({ + addOpen: get(values, 'create-instance-metadata-add-open', false), + metadata: get(values, 'create-instance-metadata', []) + })), + connect(null, (dispatch, { metadata = [], history }) => ({ + handleNext: () => { + return history.push(`/instances/~create/networks`); + }, + handleEdit: () => { + return history.push(`/instances/~create/metadata`); + }, + handleAddMetadata: value => { + const toggleToClosed = set({ + name: `create-instance-metadata-add-open`, + value: false + }); + + const appendMetadata = set({ + name: `create-instance-metadata`, + value: metadata.concat([{ ...value, expanded: false }]) + }); + + return dispatch([ + destroy(FORM_NAME_CREATE), + toggleToClosed, + appendMetadata + ]); + }, + handleUpdateMetadata: (index, newMetadata) => { + metadata[index] = { + ...newMetadata, + expanded: false + }; + + return dispatch([ + destroy(FORM_NAME_EDIT(index)), + set({ name: `create-instance-metadata`, value: metadata.slice() }) + ]); + }, + handleChangeAddOpen: value => { + return dispatch([ + reset(FORM_NAME_CREATE), + set({ name: `create-instance-metadata-add-open`, value }) + ]); + }, + handleToggleExpanded: index => { + metadata[index] = { + ...metadata[index], + expanded: !metadata[index].expanded + }; + + return dispatch( + set({ + name: `create-instance-metadata`, + value: metadata.slice() + }) + ); + }, + handleCancelEdit: index => { + metadata[index] = { + ...metadata[index], + expanded: false + }; + + return dispatch([ + reset(FORM_NAME_EDIT(index)), + set({ name: `create-instance-metadata`, value: metadata.slice() }) + ]); + }, + handleRemoveMetadata: index => { + metadata.splice(index, 1); + + return dispatch([ + destroy(FORM_NAME_EDIT(index)), + set({ name: `create-instance-metadata`, value: metadata.slice() }) + ]); + } + })) +)(Metadata); diff --git a/packages/my-joy-beta/src/containers/create-instance/name.js b/packages/my-joy-beta/src/containers/create-instance/name.js index 537dc71e..fc87ded9 100644 --- a/packages/my-joy-beta/src/containers/create-instance/name.js +++ b/packages/my-joy-beta/src/containers/create-instance/name.js @@ -1,5 +1,4 @@ import React, { Fragment } from 'react'; -import { withRouter } from 'react-router'; import { compose } from 'react-apollo'; import ReduxForm from 'declarative-redux-form'; import { connect } from 'react-redux'; @@ -32,7 +31,6 @@ const NameContainer = ({ expanded, name, handleSubmit, handleCancel }) => ( ); export default compose( - withRouter, connect( (state, ownProps) => ({ ...ownProps, diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js new file mode 100644 index 00000000..81775045 --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/tags.js @@ -0,0 +1,180 @@ +import React, { Fragment } from 'react'; +import { set } from 'react-redux-values'; +import { Margin } from 'styled-components-spacing'; +import { compose } from 'react-apollo'; +import { destroy, reset } from 'redux-form'; +import ReduxForm from 'declarative-redux-form'; +import { connect } from 'react-redux'; +import get from 'lodash.get'; + +import { TagsIcon, P, Button, H3, TagList } from 'joyent-ui-toolkit'; + +import Title from '@components/create-instance/title'; +import Tag from '@components/instances/tags'; +import KeyValue from '@components/instances/key-value'; + +const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD'; +const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`; + +export const Tags = ({ + tags = [], + expanded, + addOpen, + handleAddTag, + handleRemoveTag, + handleUpdateTag, + handleToggleExpanded, + handleCancelEdit, + handleChangeAddOpen, + handleNext, + handleEdit +}) => ( + + }>Tags + {expanded ? ( + +

+ Tags can be used to identify your instances, group multiple instances + together, define firewall and affinity rules, and more.{' '} + + Read the docs + +

+ + ) : null} + +

+ {tags.length} Tag{tags.length === 1 ? '' : 's'} +

+ + + {tags.map(({ name, value }, index) => ( + handleRemoveTag(index)} + /> + ))} + + {expanded && addOpen ? ( + + {props => ( + handleChangeAddOpen(false)} + /> + )} + + ) : null} +
+ {expanded ? ( + + + + + ) : ( + + )} +
+ +); + +export default compose( + connect(({ values }, ownProps) => ({ + addOpen: get(values, 'create-instance-tags-add-open', false), + tags: get(values, 'create-instance-tags', []) + })), + connect(null, (dispatch, { tags = [], history }) => ({ + handleNext: () => { + return history.push(`/instances/~create/metadata`); + }, + handleEdit: () => { + return history.push(`/instances/~create/tags`); + }, + handleAddTag: value => { + const toggleToClosed = set({ + name: `create-instance-tags-add-open`, + value: false + }); + + const appendTag = set({ + name: `create-instance-tags`, + value: tags.concat([{ ...value, expanded: false }]) + }); + + return dispatch([destroy(FORM_NAME_CREATE), toggleToClosed, appendTag]); + }, + handleUpdateTag: (index, newTag) => { + tags[index] = { + ...newTag, + expanded: false + }; + + return dispatch([ + destroy(FORM_NAME_EDIT(index)), + set({ name: `create-instance-tags`, value: tags.slice() }) + ]); + }, + handleChangeAddOpen: value => { + return dispatch([ + reset(FORM_NAME_CREATE), + set({ name: `create-instance-tags-add-open`, value }) + ]); + }, + handleToggleExpanded: index => { + tags[index] = { + ...tags[index], + expanded: !tags[index].expanded + }; + + return dispatch( + set({ + name: `create-instance-tags`, + value: tags.slice() + }) + ); + }, + handleCancelEdit: index => { + tags[index] = { + ...tags[index], + expanded: false + }; + + return dispatch([ + reset(FORM_NAME_EDIT(index)), + set({ name: `create-instance-tags`, value: tags.slice() }) + ]); + }, + handleRemoveTag: index => { + tags.splice(index, 1); + + return dispatch([ + destroy(FORM_NAME_EDIT(index)), + set({ name: `create-instance-tags`, value: tags.slice() }) + ]); + } + })) +)(Tags); diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap index ca15e110..f6eaca5a 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap @@ -6786,10 +6786,26 @@ exports[`renders without throwing 1`] = ` } .c19 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c20 { border: 0.0625rem solid rgb(216,216,216); box-sizing: border-box; border-radius: 0.1875rem; font-size: 0.8125rem; + line-height: 1.125rem; padding: 0.375rem 0.75rem; display: -webkit-box; display: -webkit-flex; @@ -6818,21 +6834,6 @@ exports[`renders without throwing 1`] = ` flex-wrap: wrap; } -.c20 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - @media only screen and (min-width:0em) { .c2 { -webkit-flex-basis: 58.333333333333336%; @@ -6987,50 +6988,50 @@ exports[`renders without throwing 1`] = `
-
  • -
    name1 : value1 -
    -
    • + +
    -
  • -
    name2 : value2 -
    -
    • + +
    -
  • -
    name3 : value3 -
    -
    • + +
    diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js index 1bf922da..3e570983 100644 --- a/packages/my-joy-beta/src/containers/instances/list.js +++ b/packages/my-joy-beta/src/containers/instances/list.js @@ -338,9 +338,11 @@ export default compose( }); // reverts the individual item mutation flags - const setMutatingFalse = name !== 'remove' && selected.map(({ id }) => - set({ name: `${id}-mutating`, value: false }) - ); + const setMutatingFalse = + name !== 'remove' && + selected.map(({ id }) => + set({ name: `${id}-mutating`, value: false }) + ); const actions = [ flipSubmitFalse, diff --git a/packages/my-joy-beta/src/router.js b/packages/my-joy-beta/src/router.js index 8bc11783..97c96776 100644 --- a/packages/my-joy-beta/src/router.js +++ b/packages/my-joy-beta/src/router.js @@ -29,6 +29,11 @@ export default () => ( {/* Breadcrumb */} + ( } + component={() => } /> props.theme.grey}; box-sizing: border-box; border-radius: ${remcalc(3)}; font-size: ${remcalc(13)}; + line-height: ${remcalc(18)}; padding: ${remcalc(6)} ${remcalc(12)}; display: flex; align-items: center; @@ -16,3 +34,12 @@ export default styled.li` cursor: pointer; `}; `; + +export default ({ children, onRemoveClick, ...rest }) => ( + + + {children} + {onRemoveClick ? : null} + + +); diff --git a/yarn.lock b/yarn.lock index 3e930df0..fec5a803 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,54 +2,53 @@ # yarn lockfile v1 -"@babel/code-frame@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.31.tgz#473d021ecc573a2cce1c07d5b509d5215f46ba35" +"@babel/code-frame@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz#2349d7ec04b3a06945ae173280ef8579b63728e4" dependencies: chalk "^2.0.0" esutils "^2.0.2" js-tokens "^3.0.0" -"@babel/helper-function-name@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57" +"@babel/helper-function-name@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d" dependencies: - "@babel/helper-get-function-arity" "7.0.0-beta.31" - "@babel/template" "7.0.0-beta.31" - "@babel/traverse" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" + "@babel/helper-get-function-arity" "7.0.0-beta.36" + "@babel/template" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" -"@babel/helper-get-function-arity@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.31.tgz#1176d79252741218e0aec872ada07efb2b37a493" +"@babel/helper-get-function-arity@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.36.tgz#f5383bac9a96b274828b10d98900e84ee43e32b8" dependencies: - "@babel/types" "7.0.0-beta.31" + "@babel/types" "7.0.0-beta.36" -"@babel/template@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda" +"@babel/template@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.36.tgz#02e903de5d68bd7899bce3c5b5447e59529abb00" dependencies: - "@babel/code-frame" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" - babylon "7.0.0-beta.31" + "@babel/code-frame" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" + babylon "7.0.0-beta.36" lodash "^4.2.0" -"@babel/traverse@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.31.tgz#db399499ad74aefda014f0c10321ab255134b1df" +"@babel/traverse@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.36.tgz#1dc6f8750e89b6b979de5fe44aa993b1a2192261" dependencies: - "@babel/code-frame" "7.0.0-beta.31" - "@babel/helper-function-name" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" - babylon "7.0.0-beta.31" + "@babel/code-frame" "7.0.0-beta.36" + "@babel/helper-function-name" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" + babylon "7.0.0-beta.36" debug "^3.0.1" - globals "^10.0.0" + globals "^11.1.0" invariant "^2.2.0" lodash "^4.2.0" -"@babel/types@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.31.tgz#42c9c86784f674c173fb21882ca9643334029de4" +"@babel/types@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.36.tgz#64f2004353de42adb72f9ebb4665fc35b5499d23" dependencies: esutils "^2.0.2" lodash "^4.2.0" @@ -144,14 +143,6 @@ version "0.10.2" resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.10.2.tgz#d7c79acbaa17453b6681c80c34b38fcb10c4c08c" -"@types/graphql@0.11.7": - version "0.11.7" - resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.11.7.tgz#da39a2f7c74e793e32e2bb7b3b68da1691532dd5" - -"@types/lodash@^4.14.85": - version "4.14.91" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.91.tgz#794611b28056d16b5436059c6d800b39d573cd3a" - JSONStream@^1.0.4: version "1.3.2" resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea" @@ -207,8 +198,8 @@ acorn@^4.0.3, acorn@^4.0.4: resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787" acorn@^5.0.0, acorn@^5.1.1, acorn@^5.1.2, acorn@^5.2.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7" + version "5.3.0" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822" add-stream@^1.0.0: version "1.0.0" @@ -319,6 +310,13 @@ anymatch@^1.3.0: micromatch "^2.1.5" normalize-path "^2.0.0" +anymatch@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb" + dependencies: + micromatch "^3.1.4" + normalize-path "^2.1.1" + apollo-client@^1.4.0: version "1.9.3" resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-1.9.3.tgz#37000b3c801f4571b7b089739e696a158896aeab" @@ -504,11 +502,15 @@ arr-diff@^2.0.0: dependencies: arr-flatten "^1.0.1" -arr-flatten@^1.0.1: +arr-diff@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" + +arr-flatten@^1.0.1, arr-flatten@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1" -arr-union@^3.0.0: +arr-union@^3.0.0, arr-union@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4" @@ -573,6 +575,10 @@ array-unique@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53" +array-unique@^0.3.2: + version "0.3.2" + resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" + arrify@^1.0.0, arrify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" @@ -607,6 +613,10 @@ assert@^1.1.1: dependencies: util "0.10.3" +assign-symbols@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367" + ast-types-flow@0.0.7: version "0.0.7" resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" @@ -641,6 +651,10 @@ asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" +atob@^2.0.0: + version "2.0.3" + resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d" + atob@~1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773" @@ -672,14 +686,14 @@ autoprefixer@^6.3.1: postcss-value-parser "^3.2.3" autoprefixer@^7.1.2: - version "7.2.3" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.3.tgz#c2841e38b7940c2d0a9bbffd72c75f33637854f8" + version "7.2.4" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.4.tgz#29b367c03876a29bfd3721260d945e3545666c8d" dependencies: - browserslist "^2.10.0" - caniuse-lite "^1.0.30000783" + browserslist "^2.10.2" + caniuse-lite "^1.0.30000784" normalize-range "^0.1.2" num2fraction "^1.2.2" - postcss "^6.0.14" + postcss "^6.0.15" postcss-value-parser "^3.2.3" aws-sign2@~0.6.0: @@ -763,13 +777,15 @@ babel-eslint@7.2.3: babylon "^6.17.0" babel-eslint@^8.0.1: - version "8.0.3" - resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.3.tgz#f29ecf02336be438195325cd47c468da81ee4e98" + version "8.2.1" + resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.1.tgz#136888f3c109edc65376c23ebf494f36a3e03951" dependencies: - "@babel/code-frame" "7.0.0-beta.31" - "@babel/traverse" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" - babylon "7.0.0-beta.31" + "@babel/code-frame" "7.0.0-beta.36" + "@babel/traverse" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" + babylon "7.0.0-beta.36" + eslint-scope "~3.7.1" + eslint-visitor-keys "^1.0.0" babel-generator@^6.18.0, babel-generator@^6.26.0: version "6.26.0" @@ -1589,6 +1605,10 @@ babylon@7.0.0-beta.31: version "7.0.0-beta.31" resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f" +babylon@7.0.0-beta.36: + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.36.tgz#3a3683ba6a9a1e02b0aa507c8e63435e39305b9e" + babylon@^6.12.0, babylon@^6.17.0, babylon@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" @@ -1609,6 +1629,18 @@ base64-js@^1.0.2: version "1.2.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886" +base@^0.11.1: + version "0.11.2" + resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f" + dependencies: + cache-base "^1.0.1" + class-utils "^0.3.5" + component-emitter "^1.2.1" + define-property "^1.0.0" + isobject "^3.0.1" + mixin-deep "^1.2.0" + pascalcase "^0.1.1" + basic-auth@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.0.tgz#015db3f353e02e56377755f962742e8981e7bbba" @@ -1736,6 +1768,22 @@ braces@^1.8.2: preserve "^0.2.0" repeat-element "^1.1.2" +braces@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.0.tgz#a46941cb5fb492156b3d6a656e06c35364e3e66e" + dependencies: + arr-flatten "^1.1.0" + array-unique "^0.3.2" + define-property "^1.0.0" + extend-shallow "^2.0.1" + fill-range "^4.0.0" + isobject "^3.0.1" + repeat-element "^1.1.2" + snapdragon "^0.8.1" + snapdragon-node "^2.0.1" + split-string "^3.0.2" + to-regex "^3.0.1" + breeze-async@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/breeze-async/-/breeze-async-0.1.0.tgz#ba4265949980a3d9d8bb9137a61a42e1f87da73a" @@ -1823,12 +1871,12 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@^2.1.2, browserslist@^2.10.0, browserslist@^2.5.1: - version "2.10.0" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.10.0.tgz#bac5ee1cc69ca9d96403ffb8a3abdc5b6aed6346" +browserslist@^2.1.2, browserslist@^2.10.2, browserslist@^2.5.1: + version "2.11.0" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.0.tgz#50350d6873a82ebe0f3ae5483658c571ae5f9d7d" dependencies: - caniuse-lite "^1.0.30000780" - electron-to-chromium "^1.3.28" + caniuse-lite "^1.0.30000784" + electron-to-chromium "^1.3.30" bser@1.0.2: version "1.0.2" @@ -1901,8 +1949,8 @@ bytes@3.0.0: resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" cacache@^10.0.0, cacache@^10.0.1: - version "10.0.1" - resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.1.tgz#3e05f6e616117d9b54665b1b20c8aeb93ea5d36f" + version "10.0.2" + resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.2.tgz#105a93a162bbedf3a25da42e1939ed99ffb145f8" dependencies: bluebird "^3.5.0" chownr "^1.0.1" @@ -1918,6 +1966,20 @@ cacache@^10.0.0, cacache@^10.0.1: unique-filename "^1.1.0" y18n "^3.2.1" +cache-base@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2" + dependencies: + collection-visit "^1.0.0" + component-emitter "^1.2.1" + get-value "^2.0.6" + has-value "^1.0.0" + isobject "^3.0.1" + set-value "^2.0.0" + to-object-path "^0.3.0" + union-value "^1.0.0" + unset-value "^1.0.0" + caller-path@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f" @@ -1980,12 +2042,12 @@ caniuse-api@^1.5.2: lodash.uniq "^4.5.0" caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000784" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000784.tgz#1be95012d9489c7719074f81aee57dbdffe6361b" + version "1.0.30000789" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000789.tgz#5cf3fec75480041ab162ca06413153141e234325" -caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000780, caniuse-lite@^1.0.30000783: - version "1.0.30000784" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000784.tgz#129ced74e9a1280a441880b6cd2bce30ef59e6c0" +caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000784: + version "1.0.30000789" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000789.tgz#2e3d937b267133f63635ef7f441fac66360fc889" capture-stack-trace@^1.0.0: version "1.0.0" @@ -2087,6 +2149,23 @@ chokidar@^1.6.0, chokidar@^1.6.1, chokidar@^1.7.0: optionalDependencies: fsevents "^1.0.0" +chokidar@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.0.tgz#6686313c541d3274b2a5c01233342037948c911b" + dependencies: + anymatch "^2.0.0" + async-each "^1.0.0" + braces "^2.3.0" + glob-parent "^3.1.0" + inherits "^2.0.1" + is-binary-path "^1.0.0" + is-glob "^4.0.0" + normalize-path "^2.1.1" + path-is-absolute "^1.0.0" + readdirp "^2.0.0" + optionalDependencies: + fsevents "^1.0.0" + chownr@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181" @@ -2116,6 +2195,16 @@ clap@^1.0.9: dependencies: chalk "^1.1.3" +class-utils@^0.3.5: + version "0.3.5" + resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.5.tgz#17e793103750f9627b2176ea34cfd1b565903c80" + dependencies: + arr-union "^3.1.0" + define-property "^0.2.5" + isobject "^3.0.0" + lazy-cache "^2.0.2" + static-extend "^0.1.1" + classnames@^2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" @@ -2187,6 +2276,14 @@ cliui@^3.2.0: strip-ansi "^3.0.1" wrap-ansi "^2.0.0" +cliui@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc" + dependencies: + string-width "^2.1.1" + strip-ansi "^4.0.0" + wrap-ansi "^2.0.0" + clone-regexp@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/clone-regexp/-/clone-regexp-1.0.0.tgz#eae0a2413f55c0942f818c229fefce845d7f3b1c" @@ -2231,6 +2328,13 @@ collapse-white-space@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c" +collection-visit@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0" + dependencies: + map-visit "^1.0.0" + object-visit "^1.0.0" + color-convert@^1.3.0, color-convert@^1.9.0: version "1.9.1" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed" @@ -2325,6 +2429,10 @@ compare-func@^1.3.1: array-ify "^1.0.0" dot-prop "^3.0.0" +component-emitter@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6" + compressible@~2.0.11: version "2.0.12" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66" @@ -2582,6 +2690,10 @@ copy-concurrently@^1.0.0: rimraf "^2.5.4" run-queue "^1.0.0" +copy-descriptor@^0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" + copy-webpack-plugin@^4.3.0: version "4.3.1" resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.3.1.tgz#19ba6370bf6f8e263cbd66185a2b79f2321a9302" @@ -2678,9 +2790,9 @@ cross-env@^5.1.0: cross-spawn "^5.1.0" is-windows "^1.0.0" -cross-fetch@0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-0.0.8.tgz#01ed94dc407df2c00f1807fde700a7cfa48a205c" +cross-fetch@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-1.1.1.tgz#dede6865ae30f37eae62ac90ebb7bdac002b05a0" dependencies: node-fetch "1.7.3" whatwg-fetch "2.0.3" @@ -2737,7 +2849,7 @@ css-initials@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/css-initials/-/css-initials-0.1.1.tgz#cc6dcdb70dc6038c6cf494dd4980f001b824a4ab" -css-loader@0.28.7, css-loader@^0.28.7: +css-loader@0.28.7: version "0.28.7" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b" dependencies: @@ -2756,6 +2868,25 @@ css-loader@0.28.7, css-loader@^0.28.7: postcss-value-parser "^3.3.0" source-list-map "^2.0.0" +css-loader@^0.28.7: + version "0.28.8" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.8.tgz#ff36381464dea18fe60f2601a060ba6445886bd5" + dependencies: + babel-code-frame "^6.26.0" + css-selector-tokenizer "^0.7.0" + cssnano "^3.10.0" + icss-utils "^2.1.0" + loader-utils "^1.0.2" + lodash.camelcase "^4.3.0" + object-assign "^4.1.1" + postcss "^5.0.6" + postcss-modules-extract-imports "^1.1.0" + postcss-modules-local-by-default "^1.2.0" + postcss-modules-scope "^1.1.0" + postcss-modules-values "^1.3.0" + postcss-value-parser "^3.3.0" + source-list-map "^2.0.0" + css-mediaquery@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" @@ -2802,7 +2933,7 @@ cssesc@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" -"cssnano@>=2.6.1 <4": +"cssnano@>=2.6.1 <4", cssnano@^3.10.0: version "3.10.0" resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38" dependencies: @@ -2923,7 +3054,7 @@ dateformat@^1.0.11, dateformat@^1.0.12: get-stdin "^4.0.1" meow "^3.3.0" -debug@2.6.9, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8: +debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" dependencies: @@ -2950,14 +3081,18 @@ decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" -declarative-redux-form@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/declarative-redux-form/-/declarative-redux-form-1.0.4.tgz#34e08d473f9a655e261c7c295ef1106c40e8fef7" +declarative-redux-form@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/declarative-redux-form/-/declarative-redux-form-2.0.8.tgz#da6e73011e7a0c323b3ff0aad90c6e13c2a40468" dependencies: lodash.isequal "^4.5.0" lodash.isundefined "^3.0.1" prop-types "^15.6.0" +decode-uri-component@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" + dedent@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" @@ -2993,6 +3128,18 @@ define-properties@^1.1.2: foreach "^2.0.5" object-keys "^1.0.8" +define-property@^0.2.5: + version "0.2.5" + resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116" + dependencies: + is-descriptor "^0.1.0" + +define-property@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6" + dependencies: + is-descriptor "^1.0.0" + defined@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" @@ -3134,8 +3281,8 @@ doctrine@1.5.0: isarray "^1.0.0" doctrine@^2.0.0, doctrine@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075" + version "2.1.0" + resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" dependencies: esutils "^2.0.2" @@ -3269,7 +3416,7 @@ electron-releases@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/electron-releases/-/electron-releases-2.1.0.tgz#c5614bf811f176ce3c836e368a0625782341fd4e" -electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.28: +electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30: version "1.3.30" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz#9666f532a64586651fc56a72513692e820d06a80" dependencies: @@ -3393,8 +3540,8 @@ es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14: es6-symbol "~3.1.1" es6-error@^4.0.0: - version "4.0.2" - resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98" + version "4.1.1" + resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d" es6-iterator@^2.0.1, es6-iterator@~2.0.1: version "2.0.3" @@ -3502,11 +3649,11 @@ eslint-config-xo@^0.18.0: resolved "https://registry.yarnpkg.com/eslint-config-xo/-/eslint-config-xo-0.18.2.tgz#0a157120875619929e735ffd6b185c41e8a187af" eslint-import-resolver-node@^0.3.1: - version "0.3.1" - resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz#4422574cde66a9a7b099938ee4d508a199e0e3cc" + version "0.3.2" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a" dependencies: - debug "^2.6.8" - resolve "^1.2.0" + debug "^2.6.9" + resolve "^1.5.0" eslint-loader@1.9.0: version "1.9.0" @@ -3532,8 +3679,8 @@ eslint-plugin-flowtype@2.39.1: lodash "^4.15.0" eslint-plugin-flowtype@^2.39.1: - version "2.40.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.40.1.tgz#f78a8e6a4cc6da831dd541eb61e803ff0279b796" + version "2.41.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.0.tgz#fd5221c60ba917c059d7ef69686a99cca09fd871" dependencies: lodash "^4.15.0" @@ -3616,13 +3763,17 @@ eslint-plugin-react@^7.4.0: jsx-ast-utils "^2.0.0" prop-types "^15.6.0" -eslint-scope@^3.7.1: +eslint-scope@^3.7.1, eslint-scope@~3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" dependencies: esrecurse "^4.1.0" estraverse "^4.1.1" +eslint-visitor-keys@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d" + eslint@4.10.0: version "4.10.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7" @@ -3666,20 +3817,20 @@ eslint@4.10.0: text-table "~0.2.0" eslint@^4.13.1, eslint@^4.9.0: - version "4.13.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.13.1.tgz#0055e0014464c7eb7878caf549ef2941992b444f" + version "4.15.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.15.0.tgz#89ab38c12713eec3d13afac14e4a89e75ef08145" dependencies: ajv "^5.3.0" babel-code-frame "^6.22.0" chalk "^2.1.0" concat-stream "^1.6.0" cross-spawn "^5.1.0" - debug "^3.0.1" + debug "^3.1.0" doctrine "^2.0.2" eslint-scope "^3.7.1" + eslint-visitor-keys "^1.0.0" espree "^3.5.2" esquery "^1.0.0" - estraverse "^4.2.0" esutils "^2.0.2" file-entry-cache "^2.0.0" functional-red-black-tree "^1.0.1" @@ -3825,6 +3976,18 @@ expand-brackets@^0.1.4: dependencies: is-posix-bracket "^0.1.0" +expand-brackets@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622" + dependencies: + debug "^2.3.3" + define-property "^0.2.5" + extend-shallow "^2.0.1" + posix-character-classes "^0.1.0" + regex-not "^1.0.0" + snapdragon "^0.8.1" + to-regex "^3.0.1" + expand-range@^1.8.1: version "1.8.2" resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337" @@ -3872,6 +4035,19 @@ express@^4.13.3, express@^4.16.2: utils-merge "1.0.1" vary "~1.1.2" +extend-shallow@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f" + dependencies: + is-extendable "^0.1.0" + +extend-shallow@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8" + dependencies: + assign-symbols "^1.0.0" + is-extendable "^1.0.1" + extend@^3.0.0, extend@~3.0.0, extend@~3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" @@ -3890,6 +4066,19 @@ extglob@^0.3.1: dependencies: is-extglob "^1.0.0" +extglob@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.3.tgz#55e019d0c95bf873949c737b7e5172dba84ebb29" + dependencies: + array-unique "^0.3.2" + define-property "^1.0.0" + expand-brackets "^2.1.4" + extend-shallow "^2.0.1" + fragment-cache "^0.2.1" + regex-not "^1.0.0" + snapdragon "^0.8.1" + to-regex "^3.0.1" + extract-text-webpack-plugin@3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7" @@ -4019,6 +4208,15 @@ fill-range@^2.1.0: repeat-element "^1.1.2" repeat-string "^1.5.2" +fill-range@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7" + dependencies: + extend-shallow "^2.0.1" + is-number "^3.0.0" + repeat-string "^1.6.1" + to-regex-range "^2.1.0" + filled-array@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84" @@ -4103,7 +4301,7 @@ flush-write-stream@^1.0.0: inherits "^2.0.1" readable-stream "^2.0.4" -for-in@^1.0.1: +for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -4147,6 +4345,12 @@ forwarded@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" +fragment-cache@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19" + dependencies: + map-cache "^0.2.2" + fresh@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" @@ -4317,6 +4521,10 @@ get-stream@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14" +get-value@^2.0.3, get-value@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28" + getpass@^0.1.1: version "0.1.7" resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa" @@ -4414,11 +4622,7 @@ global-prefix@^1.0.1: is-windows "^1.0.1" which "^1.2.14" -globals@^10.0.0: - version "10.4.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7" - -globals@^11.0.1: +globals@^11.0.1, globals@^11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4" @@ -4519,30 +4723,28 @@ graphql-anywhere@^3.0.1: resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96" graphql-config@^1.0.7: - version "1.1.1" - resolved "https://registry.yarnpkg.com/graphql-config/-/graphql-config-1.1.1.tgz#40f22d4845ee629d3344b31c4c9db8f695ddcad5" + version "1.1.5" + resolved "https://registry.yarnpkg.com/graphql-config/-/graphql-config-1.1.5.tgz#c8de9cdaef946ceb4c4ab0acc970db5805c90dbf" dependencies: graphql "^0.12.3" - graphql-import "^0.1.7" + graphql-import "^0.2.0" graphql-request "^1.4.0" js-yaml "^3.10.0" minimatch "^3.0.4" rimraf "^2.6.2" -graphql-import@^0.1.7: - version "0.1.8" - resolved "https://registry.yarnpkg.com/graphql-import/-/graphql-import-0.1.8.tgz#403b9f9dd83a206a9808ae2ab6afab4040e0359d" +graphql-import@^0.2.0: + version "0.2.1" + resolved "https://registry.yarnpkg.com/graphql-import/-/graphql-import-0.2.1.tgz#96b11fbd180e169500c1a76dbcfa05ec8672e94c" dependencies: - "@types/graphql" "0.11.7" - "@types/lodash" "^4.14.85" graphql "^0.12.3" lodash "^4.17.4" graphql-request@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.4.0.tgz#f5b067c83070296d93fb45760e83dfad0d9f537a" + version "1.4.1" + resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.4.1.tgz#0772743cfac8dfdd4d69d36106a96c9bdd191ce8" dependencies: - cross-fetch "0.0.8" + cross-fetch "1.1.1" graphql-tag@^2.0.0, graphql-tag@^2.4.2, graphql-tag@^2.6.1: version "2.6.1" @@ -4632,6 +4834,33 @@ has-unicode@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9" +has-value@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f" + dependencies: + get-value "^2.0.3" + has-values "^0.1.4" + isobject "^2.0.0" + +has-value@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177" + dependencies: + get-value "^2.0.6" + has-values "^1.0.0" + isobject "^3.0.0" + +has-values@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771" + +has-values@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f" + dependencies: + is-number "^3.0.0" + kind-of "^4.0.0" + has@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28" @@ -4759,8 +4988,8 @@ html-entities@^1.2.0: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" html-minifier@^3.2.3: - version "3.5.7" - resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.7.tgz#511e69bb5a8e7677d1012ebe03819aa02ca06208" + version "3.5.8" + resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700" dependencies: camel-case "3.0.x" clean-css "4.1.x" @@ -4769,7 +4998,7 @@ html-minifier@^3.2.3: ncname "1.0.x" param-case "2.1.x" relateurl "0.2.x" - uglify-js "3.2.x" + uglify-js "3.3.x" html-tags@^2.0.0: version "2.0.0" @@ -4919,6 +5148,13 @@ import-local@^0.1.1: pkg-dir "^2.0.0" resolve-cwd "^2.0.0" +import-local@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc" + dependencies: + pkg-dir "^2.0.0" + resolve-cwd "^2.0.0" + imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" @@ -5032,6 +5268,18 @@ is-absolute-url@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6" +is-accessor-descriptor@^0.1.6: + version "0.1.6" + resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6" + dependencies: + kind-of "^3.0.2" + +is-accessor-descriptor@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656" + dependencies: + kind-of "^6.0.0" + is-alphabetical@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.1.tgz#c77079cc91d4efac775be1034bf2d243f95e6f08" @@ -5076,11 +5324,23 @@ is-callable@^1.1.1, is-callable@^1.1.3: resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2" is-ci@^1.0.10: - version "1.0.10" - resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.0.10.tgz#f739336b2632365061a9d48270cd56ae3369318e" + version "1.1.0" + resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5" dependencies: ci-info "^1.0.0" +is-data-descriptor@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56" + dependencies: + kind-of "^3.0.2" + +is-data-descriptor@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7" + dependencies: + kind-of "^6.0.0" + is-date-object@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16" @@ -5089,6 +5349,22 @@ is-decimal@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.1.tgz#f5fb6a94996ad9e8e3761fbfbd091f1fca8c4e82" +is-descriptor@^0.1.0: + version "0.1.6" + resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca" + dependencies: + is-accessor-descriptor "^0.1.6" + is-data-descriptor "^0.1.4" + kind-of "^5.0.0" + +is-descriptor@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec" + dependencies: + is-accessor-descriptor "^1.0.0" + is-data-descriptor "^1.0.0" + kind-of "^6.0.2" + is-directory@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1" @@ -5103,10 +5379,16 @@ is-equal-shallow@^0.1.3: dependencies: is-primitive "^2.0.0" -is-extendable@^0.1.1: +is-extendable@^0.1.0, is-extendable@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89" +is-extendable@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4" + dependencies: + is-plain-object "^2.0.4" + is-extglob@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0" @@ -5196,6 +5478,12 @@ is-object@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470" +is-odd@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-1.0.0.tgz#3b8a932eb028b3775c39bb09e91767accdb69088" + dependencies: + is-number "^3.0.0" + is-path-cwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d" @@ -5216,7 +5504,7 @@ is-plain-obj@^1.0.0, is-plain-obj@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" -is-plain-object@^2.0.1, is-plain-object@^2.0.4: +is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" dependencies: @@ -5330,7 +5618,7 @@ isobject@^2.0.0: dependencies: isarray "1.0.0" -isobject@^3.0.1: +isobject@^3.0.0, isobject@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" @@ -5847,8 +6135,8 @@ jss-nested@^6.0.1: warning "^3.0.0" jss@^9.3.3: - version "9.4.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-9.4.0.tgz#fbfd1a63556c5afd5bfcffd98df3c50eb2614ed3" + version "9.5.1" + resolved "https://registry.yarnpkg.com/jss/-/jss-9.5.1.tgz#c869f38cdc44a32f4425fe007ea46b8891536326" dependencies: is-in-browser "^1.1.3" symbol-observable "^1.1.0" @@ -5868,7 +6156,7 @@ killable@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b" -kind-of@^3.0.2: +kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0: version "3.2.2" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64" dependencies: @@ -5880,6 +6168,14 @@ kind-of@^4.0.0: dependencies: is-buffer "^1.1.5" +kind-of@^5.0.0, kind-of@^5.0.2: + version "5.1.0" + resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d" + +kind-of@^6.0.0, kind-of@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051" + klaw@^1.0.0: version "1.3.1" resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439" @@ -5906,6 +6202,12 @@ lazy-cache@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e" +lazy-cache@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264" + dependencies: + set-getter "^0.1.0" + lazy-req@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac" @@ -5917,8 +6219,8 @@ lcid@^1.0.0: invert-kv "^1.0.0" lerna@^2.4.0: - version "2.5.1" - resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.5.1.tgz#d07099bd3051ee799f98c753328bd69e96c6fab8" + version "2.6.0" + resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.6.0.tgz#865377717ca9e0daa5a2fbb00e364968d533650a" dependencies: async "^1.5.0" chalk "^2.1.0" @@ -5952,6 +6254,7 @@ lerna@^2.4.0: safe-buffer "^5.1.1" semver "^5.4.1" signal-exit "^3.0.2" + slash "^1.0.0" strong-log-transformer "^1.0.6" temp-write "^3.3.0" write-file-atomic "^2.3.0" @@ -6291,6 +6594,10 @@ makeerror@1.0.x: dependencies: tmpl "1.0.x" +map-cache@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf" + map-obj@^1.0.0, map-obj@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" @@ -6299,6 +6606,12 @@ map-obj@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9" +map-visit@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f" + dependencies: + object-visit "^1.0.0" + mapsome@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/mapsome/-/mapsome-1.0.0.tgz#70bf732b3eeab66aee7042158202885a17625c41" @@ -6312,8 +6625,8 @@ markdown-table@^1.1.0: resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c" markdown-to-jsx@^6.2.2: - version "6.3.1" - resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.3.1.tgz#70064a28ec54e5b392721e443114cf2814b8eaf1" + version "6.4.1" + resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.4.1.tgz#95fe617b5790fec6f4e0399a296e3a2f10fffaad" dependencies: prop-types "^15.5.10" unquote "^1.1.0" @@ -6454,6 +6767,24 @@ micromatch@^2.1.5, micromatch@^2.3.11: parse-glob "^3.0.4" regex-cache "^0.4.2" +micromatch@^3.1.4: + version "3.1.5" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.5.tgz#d05e168c206472dfbca985bfef4f57797b4cd4ba" + dependencies: + arr-diff "^4.0.0" + array-unique "^0.3.2" + braces "^2.3.0" + define-property "^1.0.0" + extend-shallow "^2.0.1" + extglob "^2.0.2" + fragment-cache "^0.2.1" + kind-of "^6.0.0" + nanomatch "^1.2.5" + object.pick "^1.3.0" + regex-not "^1.0.0" + snapdragon "^0.8.1" + to-regex "^3.0.1" + miller-rabin@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" @@ -6549,6 +6880,13 @@ mississippi@^1.3.0: stream-each "^1.1.0" through2 "^2.0.0" +mixin-deep@^1.2.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.0.tgz#47a8732ba97799457c8c1eca28f95132d7e8150a" + dependencies: + for-in "^1.0.2" + is-extendable "^1.0.1" + mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" @@ -6617,6 +6955,22 @@ nan@^2.3.0: version "2.8.0" resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a" +nanomatch@^1.2.5: + version "1.2.7" + resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.7.tgz#53cd4aa109ff68b7f869591fdc9d10daeeea3e79" + dependencies: + arr-diff "^4.0.0" + array-unique "^0.3.2" + define-property "^1.0.0" + extend-shallow "^2.0.1" + fragment-cache "^0.2.1" + is-odd "^1.0.0" + kind-of "^5.0.2" + object.pick "^1.3.0" + regex-not "^1.0.0" + snapdragon "^0.8.1" + to-regex "^3.0.1" + natural-compare@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" @@ -6773,7 +7127,7 @@ normalize-path@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-1.0.0.tgz#32d0e472f91ff345701c15a8311018d3b0a90379" -normalize-path@^2.0.0, normalize-path@^2.0.1: +normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9" dependencies: @@ -6854,6 +7208,14 @@ object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^ version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" +object-copy@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c" + dependencies: + copy-descriptor "^0.1.0" + define-property "^0.2.5" + kind-of "^3.0.3" + object-hash@^1.1.4: version "1.2.0" resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.2.0.tgz#e96af0e96981996a1d47f88ead8f74f1ebc4422b" @@ -6862,6 +7224,12 @@ object-keys@^1.0.11, object-keys@^1.0.7, object-keys@^1.0.8, object-keys@^1.0.9: version "1.0.11" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d" +object-visit@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb" + dependencies: + isobject "^3.0.0" + object.assign@^4.0.4: version "4.1.0" resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da" @@ -6878,6 +7246,12 @@ object.omit@^2.0.0: for-own "^0.1.4" is-extendable "^0.1.1" +object.pick@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747" + dependencies: + isobject "^3.0.1" + object.values@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a" @@ -7016,8 +7390,10 @@ p-finally@^1.0.0: resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae" p-limit@^1.0.0, p-limit@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc" + version "1.2.0" + resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c" + dependencies: + p-try "^1.0.0" p-locate@^2.0.0: version "2.0.0" @@ -7029,6 +7405,10 @@ p-map@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b" +p-try@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3" + package-json@^2.0.0: version "2.4.0" resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb" @@ -7145,6 +7525,10 @@ pascal-case@^2.0.1: camel-case "^3.0.0" upper-case-first "^1.1.0" +pascalcase@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14" + path-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a" @@ -7227,7 +7611,7 @@ performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" -pify@^2.0.0, pify@^2.2.0, pify@^2.3.0: +pify@^2.0.0, pify@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" @@ -7277,6 +7661,10 @@ portfinder@^1.0.9: debug "^2.2.0" mkdirp "0.5.x" +posix-character-classes@^0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" + postcss-calc@^5.2.0: version "5.3.1" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e" @@ -7455,27 +7843,27 @@ postcss-minify-selectors@^2.0.4: postcss "^5.0.14" postcss-selector-parser "^2.0.0" -postcss-modules-extract-imports@^1.0.0: +postcss-modules-extract-imports@^1.0.0, postcss-modules-extract-imports@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb" dependencies: postcss "^6.0.1" -postcss-modules-local-by-default@^1.0.1: +postcss-modules-local-by-default@^1.0.1, postcss-modules-local-by-default@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069" dependencies: css-selector-tokenizer "^0.7.0" postcss "^6.0.1" -postcss-modules-scope@^1.0.0: +postcss-modules-scope@^1.0.0, postcss-modules-scope@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90" dependencies: css-selector-tokenizer "^0.7.0" postcss "^6.0.1" -postcss-modules-values@^1.1.0: +postcss-modules-values@^1.1.0, postcss-modules-values@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20" dependencies: @@ -7552,10 +7940,10 @@ postcss-sass@^0.2.0: postcss "^6.0.6" postcss-scss@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.2.tgz#ff45cf3354b879ee89a4eb68680f46ac9bb14f94" + version "1.0.3" + resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.3.tgz#4c00ab440fc1c994134e3d4e600c23341af6cd27" dependencies: - postcss "^6.0.3" + postcss "^6.0.15" postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2: version "2.2.3" @@ -7611,13 +7999,13 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.2.3" -postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.14, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.8: - version "6.0.14" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885" +postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.14, postcss@^6.0.15, postcss@^6.0.6, postcss@^6.0.8: + version "6.0.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146" dependencies: chalk "^2.3.0" source-map "^0.6.1" - supports-color "^4.4.0" + supports-color "^5.1.0" prelude-ls@~1.1.2: version "1.1.2" @@ -7636,8 +8024,8 @@ prettier@1.7.4: resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa" prettier@^1.7.4: - version "1.9.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827" + version "1.10.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.1.tgz#01423fea6957ea23618d37d339ef0e7f7c967fc6" pretty-bytes@^4.0.2: version "4.0.2" @@ -7877,8 +8265,8 @@ raw-body@2.3.2: unpipe "1.0.0" rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: - version "1.2.2" - resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077" + version "1.2.3" + resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b" dependencies: deep-extend "~0.4.0" ini "~1.3.0" @@ -8002,8 +8390,8 @@ react-icons@^2.2.7: react-icon-base "2.1.0" react-popper@^0.7.4: - version "0.7.4" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.4.tgz#8649d539837e7c6f47bc9b24c9cf57a404e199a1" + version "0.7.5" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596" dependencies: popper.js "^1.12.5" prop-types "^15.5.10" @@ -8195,7 +8583,7 @@ react@16.2.0, react@^0.14.0, react@^15.5.4, react@^16.2.0: read-all-stream@^3.0.0: version "3.1.0" - resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa" + resolved "http://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa" dependencies: pinkie-promise "^2.0.0" readable-stream "^2.0.0" @@ -8459,6 +8847,12 @@ regex-cache@^0.4.2: dependencies: is-equal-shallow "^0.1.3" +regex-not@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.0.tgz#42f83e39771622df826b02af176525d6a5f157f9" + dependencies: + extend-shallow "^2.0.1" + regexpu-core@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b" @@ -8642,7 +9036,7 @@ repeat-element@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a" -repeat-string@^1.5.0, repeat-string@^1.5.2, repeat-string@^1.5.4: +repeat-string@^1.5.0, repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" @@ -8770,7 +9164,7 @@ resolve-pathname@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" -resolve-url@~0.2.1: +resolve-url@^0.2.1, resolve-url@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -8778,7 +9172,7 @@ resolve@1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" -resolve@^1.2.0, resolve@^1.3.2: +resolve@^1.3.2, resolve@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36" dependencies: @@ -8968,6 +9362,13 @@ schema-utils@^0.3.0: dependencies: ajv "^5.0.0" +schema-utils@^0.4.2: + version "0.4.3" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e" + dependencies: + ajv "^5.0.0" + ajv-keywords "^2.1.0" + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -9036,8 +9437,8 @@ serve-static@1.13.1: send "0.16.1" serve@^6.4.1: - version "6.4.3" - resolved "https://registry.yarnpkg.com/serve/-/serve-6.4.3.tgz#ae44de08a6e5a0b6179252663c40a472ec0f1160" + version "6.4.4" + resolved "https://registry.yarnpkg.com/serve/-/serve-6.4.4.tgz#4e4e614ff89b0c74b610589d54d4a3fd0899025d" dependencies: args "3.0.8" basic-auth "2.0.0" @@ -9069,10 +9470,34 @@ set-blocking@^2.0.0, set-blocking@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" +set-getter@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376" + dependencies: + to-object-path "^0.3.0" + set-immediate-shim@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61" +set-value@^0.4.3: + version "0.4.3" + resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1" + dependencies: + extend-shallow "^2.0.1" + is-extendable "^0.1.1" + is-plain-object "^2.0.1" + to-object-path "^0.3.0" + +set-value@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274" + dependencies: + extend-shallow "^2.0.1" + is-extendable "^0.1.1" + is-plain-object "^2.0.3" + split-string "^3.0.1" + setimmediate@^1.0.4, setimmediate@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" @@ -9141,6 +9566,33 @@ smog-formula@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/smog-formula/-/smog-formula-1.0.2.tgz#25753f3bc7c0a7d10e0767a56e716ebd3bdd326e" +snapdragon-node@^2.0.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" + dependencies: + define-property "^1.0.0" + isobject "^3.0.0" + snapdragon-util "^3.0.1" + +snapdragon-util@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2" + dependencies: + kind-of "^3.2.0" + +snapdragon@^0.8.1: + version "0.8.1" + resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.1.tgz#e12b5487faded3e3dea0ac91e9400bf75b401370" + dependencies: + base "^0.11.1" + debug "^2.2.0" + define-property "^0.2.5" + extend-shallow "^2.0.1" + map-cache "^0.2.2" + source-map "^0.5.6" + source-map-resolve "^0.5.0" + use "^2.0.0" + sntp@1.x.x: version "1.0.9" resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198" @@ -9171,6 +9623,13 @@ sockjs@0.3.18: faye-websocket "^0.10.0" uuid "^2.0.2" +sockjs@0.3.19: + version "0.3.19" + resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d" + dependencies: + faye-websocket "^0.10.0" + uuid "^3.0.1" + sort-keys@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" @@ -9196,12 +9655,26 @@ source-map-resolve@^0.3.0: source-map-url "~0.3.0" urix "~0.1.0" +source-map-resolve@^0.5.0: + version "0.5.1" + resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a" + dependencies: + atob "^2.0.0" + decode-uri-component "^0.2.0" + resolve-url "^0.2.1" + source-map-url "^0.4.0" + urix "^0.1.0" + source-map-support@^0.4.15: version "0.4.18" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f" dependencies: source-map "^0.5.6" +source-map-url@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" + source-map-url@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9" @@ -9279,6 +9752,12 @@ specificity@^0.3.1: version "0.3.2" resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.3.2.tgz#99e6511eceef0f8d9b57924937aac2cb13d13c42" +split-string@^3.0.1, split-string@^3.0.2: + version "3.1.0" + resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2" + dependencies: + extend-shallow "^3.0.0" + split2@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493" @@ -9327,6 +9806,13 @@ state-toggle@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.0.tgz#d20f9a616bb4f0c3b98b91922d25b640aa2bc425" +static-extend@^0.1.1: + version "0.1.2" + resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6" + dependencies: + define-property "^0.2.5" + object-copy "^0.1.0" + "statuses@>= 1.3.1 < 2": version "1.4.0" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087" @@ -9612,8 +10098,8 @@ stylelint@^8.4.0: table "^4.0.1" stylis@^3.0.0, stylis@^3.4.0: - version "3.4.5" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e" + version "3.4.7" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.7.tgz#4fa57ef276d1ed20aafda4e1a97c35b5b87d59ce" sugarss@^1.0.0: version "1.0.1" @@ -9635,12 +10121,18 @@ supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^4.0.0, supports-color@^4.1.0, supports-color@^4.2.1, supports-color@^4.4.0: +supports-color@^4.0.0, supports-color@^4.1.0, supports-color@^4.2.1: version "4.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" dependencies: has-flag "^2.0.0" +supports-color@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5" + dependencies: + has-flag "^2.0.0" + svg-tags@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" @@ -9764,13 +10256,13 @@ temp-dir@^1.0.0: resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d" temp-write@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.3.0.tgz#c1a96de2b36061342eae81f44ff001aec8f615a9" + version "3.4.0" + resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.4.0.tgz#8cff630fb7e9da05f047c74ce4ce4d685457d492" dependencies: graceful-fs "^4.1.2" is-stream "^1.1.0" make-dir "^1.0.0" - pify "^2.2.0" + pify "^3.0.0" temp-dir "^1.0.0" uuid "^3.0.1" @@ -9903,6 +10395,27 @@ to-integer@^1.0.1: is-object "^1.0.1" is-symbol "^1.0.1" +to-object-path@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" + dependencies: + kind-of "^3.0.2" + +to-regex-range@^2.1.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38" + dependencies: + is-number "^3.0.0" + repeat-string "^1.6.1" + +to-regex@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.1.tgz#15358bee4a2c83bd76377ba1dc049d0f18837aae" + dependencies: + define-property "^0.2.5" + extend-shallow "^2.0.1" + regex-not "^1.0.0" + to-vfile@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-2.1.2.tgz#63f410e3b72937be84e8198961caf74be2da4388" @@ -10010,16 +10523,16 @@ ua-parser-js@^0.7.9: version "0.7.17" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" -uglify-es@^3.2.1: - version "3.2.2" - resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.2.2.tgz#15c62b7775002c81b7987a1c49ecd3f126cace73" +uglify-es@^3.2.1, uglify-es@^3.3.4: + version "3.3.5" + resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.5.tgz#cf7e695da81999f85196b15e2978862f13212f88" dependencies: commander "~2.12.1" source-map "~0.6.1" -uglify-js@3.2.x, uglify-js@^3.0.13: - version "3.2.2" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.2.tgz#870e4b34ed733d179284f9998efd3293f7fd73f6" +uglify-js@3.3.x, uglify-js@^3.0.13: + version "3.3.5" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.5.tgz#4c4143dfe08e8825746675cc49a6874a933b543e" dependencies: commander "~2.12.1" source-map "~0.6.1" @@ -10037,7 +10550,7 @@ uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" -uglifyjs-webpack-plugin@1.1.4, uglifyjs-webpack-plugin@^1.1.4: +uglifyjs-webpack-plugin@1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.4.tgz#e43ad6e736c315024eb99481a7cc9362d6a066be" dependencies: @@ -10058,6 +10571,19 @@ uglifyjs-webpack-plugin@^0.4.6: uglify-js "^2.8.29" webpack-sources "^1.0.1" +uglifyjs-webpack-plugin@^1.1.4: + version "1.1.6" + resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.6.tgz#f4ba8449edcf17835c18ba6ae99b9d610857fb19" + dependencies: + cacache "^10.0.1" + find-cache-dir "^1.0.0" + schema-utils "^0.4.2" + serialize-javascript "^1.4.0" + source-map "^0.6.1" + uglify-es "^3.3.4" + webpack-sources "^1.1.0" + worker-farm "^1.5.2" + uid-number@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81" @@ -10081,6 +10607,15 @@ unified@^6.0.0, unified@^6.1.2: x-is-function "^1.0.4" x-is-string "^0.1.0" +union-value@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4" + dependencies: + arr-union "^3.1.0" + get-value "^2.0.6" + is-extendable "^0.1.1" + set-value "^0.4.3" + uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" @@ -10173,6 +10708,13 @@ unquote@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544" +unset-value@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559" + dependencies: + has-value "^0.3.1" + isobject "^3.0.0" + unzip-response@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe" @@ -10261,6 +10803,14 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/use/-/use-2.0.2.tgz#ae28a0d72f93bf22422a18a2e379993112dec8e8" + dependencies: + define-property "^0.2.5" + isobject "^3.0.0" + lazy-cache "^2.0.2" + user-home@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190" @@ -10447,7 +10997,7 @@ webpack-common-shake@^1.5.3: webpack "^3.1.0" webpack-sources "^1.0.1" -webpack-dev-middleware@^1.11.0: +webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.11.0: version "1.12.2" resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e" dependencies: @@ -10490,13 +11040,13 @@ webpack-dev-server@2.9.4: yargs "^6.6.0" webpack-dev-server@^2.9.7: - version "2.9.7" - resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.7.tgz#100ad6a14775478924d417ca6dcfb9d52a98faed" + version "2.10.1" + resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.10.1.tgz#a9768375346e62155860fe3cef3d4d641b24273e" dependencies: ansi-html "0.0.7" array-includes "^3.0.3" bonjour "^3.5.0" - chokidar "^1.6.0" + chokidar "^2.0.0" compression "^1.5.2" connect-history-api-fallback "^1.3.0" debug "^3.1.0" @@ -10504,7 +11054,7 @@ webpack-dev-server@^2.9.7: express "^4.16.2" html-entities "^1.2.0" http-proxy-middleware "~0.17.4" - import-local "^0.1.1" + import-local "^1.0.0" internal-ip "1.2.0" ip "^1.1.5" killable "^1.0.0" @@ -10513,13 +11063,13 @@ webpack-dev-server@^2.9.7: portfinder "^1.0.9" selfsigned "^1.9.1" serve-index "^1.7.2" - sockjs "0.3.18" + sockjs "0.3.19" sockjs-client "1.1.4" spdy "^3.4.1" - strip-ansi "^3.0.1" - supports-color "^4.2.1" - webpack-dev-middleware "^1.11.0" - yargs "^6.6.0" + strip-ansi "^4.0.0" + supports-color "^5.1.0" + webpack-dev-middleware "1.12.2" + yargs "6.6.0" webpack-manifest-plugin@1.3.2: version "1.3.2" @@ -10534,7 +11084,7 @@ webpack-merge@^4.1.1: dependencies: lodash "^4.17.4" -webpack-sources@^1.0.1: +webpack-sources@^1.0.1, webpack-sources@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54" dependencies: @@ -10684,7 +11234,7 @@ wordwrap@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" -worker-farm@^1.3.1, worker-farm@^1.4.1: +worker-farm@^1.3.1, worker-farm@^1.4.1, worker-farm@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.2.tgz#32b312e5dc3d5d45d79ef44acc2587491cd729ae" dependencies: @@ -10798,30 +11348,13 @@ yargs-parser@^7.0.0: dependencies: camelcase "^4.1.0" -yargs-parser@^8.0.0: +yargs-parser@^8.0.0, yargs-parser@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950" dependencies: camelcase "^4.1.0" -yargs@^10.0.3: - version "10.0.3" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.0.3.tgz#6542debd9080ad517ec5048fb454efe9e4d4aaae" - dependencies: - cliui "^3.2.0" - decamelize "^1.1.1" - find-up "^2.1.0" - get-caller-file "^1.0.1" - os-locale "^2.0.0" - require-directory "^2.1.1" - require-main-filename "^1.0.1" - set-blocking "^2.0.0" - string-width "^2.0.0" - which-module "^2.0.0" - y18n "^3.2.1" - yargs-parser "^8.0.0" - -yargs@^6.6.0: +yargs@6.6.0, yargs@^6.6.0: version "6.6.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" dependencies: @@ -10839,6 +11372,23 @@ yargs@^6.6.0: y18n "^3.2.1" yargs-parser "^4.2.0" +yargs@^10.0.3: + version "10.1.1" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.1.tgz#5fe1ea306985a099b33492001fa19a1e61efe285" + dependencies: + cliui "^4.0.0" + decamelize "^1.1.1" + find-up "^2.1.0" + get-caller-file "^1.0.1" + os-locale "^2.0.0" + require-directory "^2.1.1" + require-main-filename "^1.0.1" + set-blocking "^2.0.0" + string-width "^2.0.0" + which-module "^2.0.0" + y18n "^3.2.1" + yargs-parser "^8.1.0" + yargs@^7.0.2: version "7.1.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"