diff --git a/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap b/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap index a0cb9cd2..39b69611 100644 --- a/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap +++ b/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap @@ -1,47 +1,118 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - -`; - exports[`renders without throwing 1`] = ` - + - - + - + + + - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - exports[`renders without throwing 1`] = ` - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
- - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
`; -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - - - - - - + + + + - - + + + + + + + + + + + + + +
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - - - - - - + + + + - - + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` +exports[`renders without throwing 1`] = ` .c0 { width: 0.375rem; height: 0.375rem; @@ -2201,48 +2254,134 @@ exports[`renders without throwing 1`] = ` display: inline-block; } - +
+ + + + + + + +
`; exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - + - - - - - + + - - + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - + - - + - + + + - - - + + + - - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - + - - - - - - - - - - - - - - - + + - - + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = ` `; exports[`renders without throwing 1`] = ` - + - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - + - - + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - + - - + - - - - + + + + + + - - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - + - - - - - - - - - - - + + - - + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - + - - + + + + + + + + + + + - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - without throwing 1`] = ` +
+ + - -`; - -exports[`renders without throwing 1`] = ` - - - + + + + +
`; exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - + viewBox="0 0 12 16" + width="12" + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + + + + + + + + + + + + + + +
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - + viewBox="0 0 12 16" + width="12" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+`; + +exports[`renders without throwing 1`] = ` +
+ + + + + + + + + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - without throwing 1`] = ` +
+ - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - + - - - - - - - + + + + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - + - - - - - - - + + + + + + + + - - - - - - -`; - -exports[`renders without throwing 1`] = ` -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 1`] = ` - without throwing 1`] = ` +
+ - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - + - - - - - - - - - - - + + - - + + + + + + + + + + + + + +
`; exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + +
`; -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; -exports[`renders without throwing 2`] = ` -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-`; - -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - - - - - - - - - - - - - - -`; - exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = `
+ + + + + + + + + without throwing 1`] = `
`; - -exports[`renders without throwing 1`] = ` - - - -`; - -exports[`renders without throwing 1`] = ` - - - -`; diff --git a/packages/icons/src/__tests__/icons.spec.js b/packages/icons/src/__tests__/icons.spec.js index 8102a832..7ca8bdf0 100644 --- a/packages/icons/src/__tests__/icons.spec.js +++ b/packages/icons/src/__tests__/icons.spec.js @@ -10,16 +10,19 @@ import { Arrow, Bin, Checkcircle, - Chevron, Clipboard, Close, Cns, + Copy, + Cpu, DataCenter, Delete, Dot, Duplicate, Edit, + Fabric, Firewall, + General, Health, Id, Import, @@ -28,1812 +31,902 @@ import { Instances, Loading, Login, + Memory, Metadata, Minus, + Name, Network, Package, Plus, + Private, + Public, + Randomize, Reset, + Restart, Start, Stop, + Storage, Tags, Triton, User } from '..'; it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); +it('renders without throwing', () => { + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders without throwing', () => { - const tree = renderer - .create( - -
- - - - -
- - ) - .toJSON(); - - expect(tree).toMatchSnapshot(); + expect( + renderer + .create( + +
+ + + + + + + +
+ + ) + .toJSON() + ).toMatchSnapshot(); }); diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 289ef918..624dd26a 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -3,17 +3,19 @@ export { default as Affinity } from './affinity'; export { default as Arrow } from './arrow'; export { default as Bin } from './bin'; export { default as Checkcircle } from './checkcircle'; -export { default as Chevron } from './chevron'; export { default as Clipboard } from './clipboard'; export { default as Close } from './close'; export { default as Cns } from './cns'; export { default as Copy } from './copy'; +export { default as Cpu } from './cpu'; export { default as DataCenter } from './data-center'; export { default as Delete } from './delete'; export { default as Dot } from './dot'; export { default as Duplicate } from './duplicate'; export { default as Edit } from './edit'; +export { default as Fabric } from './fabric'; export { default as Firewall } from './firewall'; +export { default as General } from './general'; export { default as Health } from './health'; export { default as Id } from './id'; export { default as Import } from './import'; @@ -22,21 +24,21 @@ export { default as InstanceType } from './instance-type'; export { default as Instances } from './instances'; export { default as Loading } from './loading'; export { default as Login } from './login'; +export { default as Memory } from './memory'; export { default as Metadata } from './metadata'; export { default as Minus } from './minus'; +export { default as Name } from './name'; export { default as Network } from './network'; export { default as Package } from './package'; export { default as Plus } from './plus'; +export { default as Private } from './private'; +export { default as Public } from './public'; +export { default as Randomize } from './randomize'; export { default as Reset } from './reset'; +export { default as Restart } from './restart'; export { default as Start } from './start'; export { default as Stop } from './stop'; +export { default as Storage } from './storage'; export { default as Tags } from './tags'; export { default as Triton } from './triton'; export { default as User } from './user'; -export { default as Randomize } from './randomize'; -export { default as Name } from './name'; -export { default as Fabric } from './fabric'; -export { default as Cpu } from './cpu'; -export { default as Memory } from './memory'; -export { default as Storage } from './storage'; -export { default as General } from './general'; diff --git a/packages/icons/src/chevron.js b/packages/icons/src/private.js similarity index 65% rename from packages/icons/src/chevron.js rename to packages/icons/src/private.js index 8bef0c34..54c2a0ad 100644 --- a/packages/icons/src/chevron.js +++ b/packages/icons/src/private.js @@ -17,18 +17,16 @@ export default ({ {({ style: rotateStyle }) => ( )} diff --git a/packages/icons/src/public.js b/packages/icons/src/public.js new file mode 100644 index 00000000..efbd2c6d --- /dev/null +++ b/packages/icons/src/public.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import Colors from './colors'; +import Rotate from './rotate'; +import calcFill from './fill'; + +export default ({ + fill = null, + light = false, + disabled = false, + direction = 'down', + style = {}, + ...rest +}) => ( + + {colors => ( + + {({ style: rotateStyle }) => ( + + + + + + )} + + )} + +); diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index 234631da..8fbbfe7c 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -6,14 +6,11 @@ "repository": "github:yldio/joyent-portal", "main": "build/", "scripts": { - "dev": - "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start", + "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start", "start": "PORT=3069 joyent-react-scripts start", "build": "NODE_ENV=production joyent-react-scripts build", - "lint-ci": - "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`", - "lint": - "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`", + "lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`", + "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`", "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom", "test-ci": "npm run test", "prepublish": "echo 0" diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap index 4b976e91..84a76e0b 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap @@ -316,7 +316,7 @@ exports[`renders without throwing 1`] = ` .c4 { box-sizing: border-box; - width: 100%; + width: 18.75rem; height: 3rem; min-height: 3rem; margin-bottom: 0.5rem; diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap new file mode 100644 index 00000000..e966a849 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap @@ -0,0 +1,6159 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c14 { + margin-right: 2rem; +} + +.c17 { + margin-right: 0.25rem; +} + +.c12 { + padding: 2rem; +} + +.c13 { + 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; +} + +.c16 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c15 { + -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; +} + +.c18 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c18 + p, +.c18 + small, +.c18 + h1, +.c18 + h2, +.c18 + label, +.c18 + h3, +.c18 + h4, +.c18 + h5, +.c18 + div, +.c18 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 0.75rem; +} + +.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; + 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); +} + +.c11 { + 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; + 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; + margin-bottom: 0; + background-color: transparent; +} + +.c11 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c11 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.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; + 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; +} + +.c2 button { + margin-bottom: 0; + margin-top: 0; +} + +.c3 { + 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; + 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; + width: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 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: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border-width: 0; + border-radius: 0; + box-shadow: none; +} + +.c9 { + 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; + 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; + 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; +} + +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c7[type='checkbox'], +.c7[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c7[type='number']::-webkit-inner-spin-button, +.c7[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c7[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c7[type='search']::-webkit-search-cancel-button, +.c7[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c7::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c7:checked + label::after { + opacity: 1; +} + +.c7:selected + label::after { + opacity: 1; +} + +.c7:checked + label { + border-color: rgb(59,70,204); +} + +.c7:selected + label { + border-color: rgb(59,70,204); +} + +.c7:disabled + label { + background-color: rgb(249,249,249); +} + +.c8 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c8::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c6 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c5 { + list-style-type: none; + 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; +} + +.c5 label { + font-weight: 400; +} + +.c4 { + 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; +} + +
+
+
+
+
+
  • +
    + +
    +
    • +
    +
    +
    +

    +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 2`] = ` +.c9 { + margin-right: 2rem; +} + +.c11 { + margin-right: 0.25rem; +} + +.c0 { + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; +} + +.c4 { + margin-top: 0.5rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + margin-left: 1rem; +} + +.c8 { + 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; +} + +.c10 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + -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; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c1 { + display: inline-block; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + border-radius: 0.25rem; + min-width: 18.75rem; +} + +
    +
    +
    +
    +
    +

    +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 2rem; +} + +.c19 { + margin-right: 0.25rem; +} + +.c13 { + margin-bottom: 1rem; +} + +.c12 { + padding: 2rem; +} + +.c15 { + 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; +} + +.c18 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c17 { + -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; +} + +.c14 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c14 + p, +.c14 + small, +.c14 + h1, +.c14 + h2, +.c14 + label, +.c14 + h3, +.c14 + h4, +.c14 + h5, +.c14 + div, +.c14 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 0.75rem; +} + +.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; + 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); +} + +.c11 { + 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; + 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; + margin-bottom: 0; + background-color: transparent; +} + +.c11 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c11 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.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; + 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; +} + +.c2 button { + margin-bottom: 0; + margin-top: 0; +} + +.c3 { + 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; + 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; + width: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 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: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border-width: 0; + border-radius: 0; + box-shadow: none; +} + +.c9 { + 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; + 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; + 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; +} + +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c7[type='checkbox'], +.c7[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c7[type='number']::-webkit-inner-spin-button, +.c7[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c7[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c7[type='search']::-webkit-search-cancel-button, +.c7[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c7::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c7:checked + label::after { + opacity: 1; +} + +.c7:selected + label::after { + opacity: 1; +} + +.c7:checked + label { + border-color: rgb(59,70,204); +} + +.c7:selected + label { + border-color: rgb(59,70,204); +} + +.c7:disabled + label { + background-color: rgb(249,249,249); +} + +.c8 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c8::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c6 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c5 { + list-style-type: none; + 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; +} + +.c5 label { + font-weight: 400; +} + +.c4 { + 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; +} + +
    +
    +
    +
    +
    +
  • +
    + +
    +
    • +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +

    + description +

    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 2`] = ` +.c9 { + margin-right: 2rem; +} + +.c11 { + margin-right: 0.25rem; +} + +.c0 { + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; +} + +.c4 { + margin-top: 0.5rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + margin-left: 1rem; +} + +.c8 { + 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; +} + +.c10 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + -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; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c1 { + display: inline-block; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + border-radius: 0.25rem; + min-width: 18.75rem; +} + +
    +
    +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 3`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 2rem; +} + +.c19 { + margin-right: 0.25rem; +} + +.c13 { + margin-bottom: 1rem; +} + +.c12 { + padding: 2rem; +} + +.c15 { + 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; +} + +.c18 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c17 { + -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; +} + +.c14 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c14 + p, +.c14 + small, +.c14 + h1, +.c14 + h2, +.c14 + label, +.c14 + h3, +.c14 + h4, +.c14 + h5, +.c14 + div, +.c14 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 0.75rem; +} + +.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; + 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); +} + +.c11 { + 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; + 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; + margin-bottom: 0; + background-color: transparent; +} + +.c11 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c11 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.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; + 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; +} + +.c2 button { + margin-bottom: 0; + margin-top: 0; +} + +.c3 { + 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; + 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; + width: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 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: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border-width: 0; + border-radius: 0; + box-shadow: none; +} + +.c9 { + 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; + 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; + 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; +} + +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c7[type='checkbox'], +.c7[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c7[type='number']::-webkit-inner-spin-button, +.c7[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c7[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c7[type='search']::-webkit-search-cancel-button, +.c7[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c7::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c7:checked + label::after { + opacity: 1; +} + +.c7:selected + label::after { + opacity: 1; +} + +.c7:checked + label { + border-color: rgb(59,70,204); +} + +.c7:selected + label { + border-color: rgb(59,70,204); +} + +.c7:disabled + label { + background-color: rgb(249,249,249); +} + +.c8 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c8::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c6 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c5 { + list-style-type: none; + 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; +} + +.c5 label { + font-weight: 400; +} + +.c4 { + 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; +} + +
    +
    +
    +
    +
    +
  • +
    + +
    +
    • +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +

    + description +

    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 4`] = ` +.c9 { + margin-right: 2rem; +} + +.c11 { + margin-right: 0.25rem; +} + +.c0 { + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; +} + +.c4 { + margin-top: 0.5rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + margin-left: 1rem; +} + +.c8 { + 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; +} + +.c10 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + -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; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c1 { + display: inline-block; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + border-radius: 0.25rem; + min-width: 18.75rem; +} + +
    +
    +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 2rem; +} + +.c19 { + margin-right: 0.25rem; +} + +.c13 { + margin-bottom: 1rem; +} + +.c20 { + margin-top: 1rem; +} + +.c12 { + padding: 2rem; +} + +.c24 { + padding-right: 1rem; + padding-left: 1rem; +} + +.c15 { + 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; +} + +.c18 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c17 { + -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; +} + +.c14 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c14 + p, +.c14 + small, +.c14 + h1, +.c14 + h2, +.c14 + label, +.c14 + h3, +.c14 + h4, +.c14 + h5, +.c14 + div, +.c14 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 0.75rem; +} + +.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; + 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); +} + +.c21 { + 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; + 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; +} + +.c11 { + 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; + 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; + margin-bottom: 0; + background-color: transparent; +} + +.c11 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c11 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.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; + 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; +} + +.c2 button { + margin-bottom: 0; + margin-top: 0; +} + +.c22 { + 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; + 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; + margin: -0.0625rem; + box-shadow: none; +} + +.c22 button { + margin-bottom: 0; + margin-top: 0; +} + +.c3 { + 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; + 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; + width: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 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: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border-width: 0; + border-radius: 0; + box-shadow: none; +} + +.c9 { + 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; + 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; + 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; +} + +.c23 { + 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; + 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; + 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; +} + +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c7[type='checkbox'], +.c7[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c7[type='number']::-webkit-inner-spin-button, +.c7[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c7[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c7[type='search']::-webkit-search-cancel-button, +.c7[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c7::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c7:checked + label::after { + opacity: 1; +} + +.c7:selected + label::after { + opacity: 1; +} + +.c7:checked + label { + border-color: rgb(59,70,204); +} + +.c7:selected + label { + border-color: rgb(59,70,204); +} + +.c7:disabled + label { + background-color: rgb(249,249,249); +} + +.c8 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c8::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c6 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c5 { + list-style-type: none; + 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; +} + +.c5 label { + font-weight: 400; +} + +.c4 { + 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; +} + +
    +
    +
    +
    +
    +
  • +
    + +
    +
    • +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +

    + description +

    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Fabric +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Network information +

    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 2`] = ` +.c9 { + margin-right: 2rem; +} + +.c11 { + margin-right: 0.25rem; +} + +.c0 { + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; +} + +.c4 { + margin-top: 0.5rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + margin-left: 1rem; +} + +.c8 { + 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; +} + +.c10 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + -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; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c1 { + display: inline-block; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + border-radius: 0.25rem; + min-width: 18.75rem; +} + +
    +
    +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Fabric +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 2rem; +} + +.c19 { + margin-right: 0.25rem; +} + +.c13 { + margin-bottom: 1rem; +} + +.c20 { + margin-top: 1rem; +} + +.c12 { + padding: 2rem; +} + +.c22 { + padding-right: 1rem; + padding-left: 1rem; +} + +.c23 { + padding: 1rem; +} + +.c15 { + 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; +} + +.c18 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c24 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c17 { + -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; +} + +.c14 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c14 + p, +.c14 + small, +.c14 + h1, +.c14 + h2, +.c14 + label, +.c14 + h3, +.c14 + h4, +.c14 + h5, +.c14 + div, +.c14 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 0.75rem; +} + +.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; + 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); +} + +.c21 { + 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; + 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); +} + +.c11 { + 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; + 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; + margin-bottom: 0; + background-color: transparent; +} + +.c11 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c11 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.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; + 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; +} + +.c2 button { + margin-bottom: 0; + margin-top: 0; +} + +.c3 { + 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; + 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; + width: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 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: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border-width: 0; + border-radius: 0; + box-shadow: none; +} + +.c9 { + 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; + 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; + 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; +} + +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c7[type='checkbox'], +.c7[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c7[type='number']::-webkit-inner-spin-button, +.c7[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c7[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c7[type='search']::-webkit-search-cancel-button, +.c7[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c7::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c7:checked + label::after { + opacity: 1; +} + +.c7:selected + label::after { + opacity: 1; +} + +.c7:checked + label { + border-color: rgb(59,70,204); +} + +.c7:selected + label { + border-color: rgb(59,70,204); +} + +.c7:disabled + label { + background-color: rgb(249,249,249); +} + +.c8 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c8::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c6 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c5 { + list-style-type: none; + 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; +} + +.c5 label { + font-weight: 400; +} + +.c4 { + 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; +} + +.c26 { + box-sizing: border-box; + width: 18.75rem; + 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; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c26::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c26::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c26:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c26:invalid { + box-shadow: none; +} + +.c26:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c26:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c26:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c26:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c26:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c25 { + 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; +} + +
    +
    +
    +
    +
    +
  • +
    + +
    +
    • +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +

    + description +

    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Fabric +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Network information +

    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 2`] = ` +.c9 { + margin-right: 2rem; +} + +.c11 { + margin-right: 0.25rem; +} + +.c0 { + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; +} + +.c4 { + margin-top: 0.5rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + margin-left: 1rem; +} + +.c8 { + 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; +} + +.c10 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + -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; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c1 { + display: inline-block; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + border-radius: 0.25rem; + min-width: 18.75rem; +} + +
    +
    +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Private +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Fabric +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c16 { + margin-right: 2rem; +} + +.c19 { + margin-right: 0.25rem; +} + +.c13 { + margin-bottom: 1rem; +} + +.c12 { + padding: 2rem; +} + +.c15 { + 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; +} + +.c18 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c17 { + -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; +} + +.c14 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c14 + p, +.c14 + small, +.c14 + h1, +.c14 + h2, +.c14 + label, +.c14 + h3, +.c14 + h4, +.c14 + h5, +.c14 + div, +.c14 + span { + padding-bottom: 2.25rem; +} + +.c10 { + color: rgba(73,73,73,1); + font-weight: 600; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c10 + p, +.c10 + small, +.c10 + h1, +.c10 + h2, +.c10 + label, +.c10 + h3, +.c10 + h4, +.c10 + h5, +.c10 + div, +.c10 + span { + margin-top: 0.75rem; +} + +.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; + 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); +} + +.c11 { + 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; + 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; + margin-bottom: 0; + background-color: transparent; +} + +.c11 > [name='card']:not(:last-child) { + margin-bottom: 0.8125rem; +} + +.c11 > [name='card']:last-child { + margin-bottom: 0.4375rem; +} + +.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; + 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; +} + +.c2 button { + margin-bottom: 0; + margin-top: 0; +} + +.c3 { + 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; + 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; + width: 2.875rem; + min-width: 2.875rem; + min-height: 2.875rem; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 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: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: transparent; + border-width: 0; + border-radius: 0; + box-shadow: none; +} + +.c9 { + 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; + 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; + 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; +} + +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + display: none; +} + +.c7[type='checkbox'], +.c7[type='radio'] { + box-sizing: border-box; + padding: 0; +} + +.c7[type='number']::-webkit-inner-spin-button, +.c7[type='number']::-webkit-outer-spin-button { + height: auto; +} + +.c7[type='search'] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + outline-offset: -0.125rem; +} + +.c7[type='search']::-webkit-search-cancel-button, +.c7[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c7::-webkit-file-upload-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + font: inherit; +} + +.c7:checked + label::after { + opacity: 1; +} + +.c7:selected + label::after { + opacity: 1; +} + +.c7:checked + label { + border-color: rgb(59,70,204); +} + +.c7:selected + label { + border-color: rgb(59,70,204); +} + +.c7:disabled + label { + background-color: rgb(249,249,249); +} + +.c8 { + color: rgb(100,100,100); + position: absolute; + width: 1.125rem; + height: 1.125rem; + box-sizing: border-box; + top: 0; + right: 0; + cursor: pointer; + background-color: rgb(255,255,255); + box-shadow: none; + border: 0.0625rem solid rgb(216,216,216); + cursor: pointer; + border-radius: 0.25rem; + width: 1.125rem; + height: 1.125rem; +} + +.c8::after { + opacity: 0; + content: ''; + position: absolute; + width: 0.375rem; + height: 0.125rem; + background: transparent; + top: 0.3125rem; + left: 0.25rem; + border: 0.125rem solid rgb(45,45,45); + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.c6 { + display: inline-block; + vertical-align: text-bottom; + width: 1.125rem; + height: 1.125rem; + position: relative; + cursor: pointer; +} + +.c5 { + list-style-type: none; + 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; +} + +.c5 label { + font-weight: 400; +} + +.c4 { + 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; +} + +
    +
    +
    +
    +
    +
  • +
    + +
    +
    • +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +

    + description +

    +
    +
    +
    +
    +
    +
    +
    + + + + + +
    +
    +
    +

    + Public +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`renders without throwing 2`] = ` +.c9 { + margin-right: 2rem; +} + +.c11 { + margin-right: 0.25rem; +} + +.c0 { + display: inline-block; + margin-top: 1rem; + margin-right: 1rem; +} + +.c4 { + margin-top: 0.5rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + margin-left: 1rem; +} + +.c8 { + 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; +} + +.c10 { + 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-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 { + 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-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + -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; +} + +.c5 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c5 + p, +.c5 + small, +.c5 + h1, +.c5 + h2, +.c5 + label, +.c5 + h3, +.c5 + h4, +.c5 + h5, +.c5 + div, +.c5 + span { + padding-bottom: 2.25rem; +} + +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c1 { + display: inline-block; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + border-radius: 0.25rem; + min-width: 18.75rem; +} + +
    +
    +
    +
    +
    +

    + name +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + +
    +
    +
    +

    + Public +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +

    + Data center network +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap index a00134d9..0380d6fd 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap @@ -281,10 +281,7 @@ exports[`renders without throwing 1`] = ` />
    without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + const network = { + id: '1', + name: 'name', + description: 'description', + fabric: false, + subnet: '255.255.255.0', + provision_start_ip: '192.168.1.2', + provision_end_ip: '192.168.1.253', + selected: false, + infoExpanded: false + }; + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + const network = { + id: '1', + name: 'name', + description: 'description', + fabric: false, + subnet: '255.255.255.0', + provision_start_ip: '192.168.1.2', + provision_end_ip: '192.168.1.253', + selected: false, + infoExpanded: false + }; + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + const network = { + id: '1', + name: 'name', + description: 'description', + fabric: false, + subnet: '255.255.255.0', + provision_start_ip: '192.168.1.2', + provision_end_ip: '192.168.1.253', + selected: false, + infoExpanded: false, + public: true + }; + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + const network = { + id: '1', + name: 'name', + description: 'description', + fabric: true, + subnet: '255.255.255.0', + provision_start_ip: '192.168.1.2', + provision_end_ip: '192.168.1.253', + selected: false, + infoExpanded: false + }; + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + const network = { + id: '1', + name: 'name', + description: 'description', + fabric: true, + subnet: '255.255.255.0', + provision_start_ip: '192.168.1.2', + provision_end_ip: '192.168.1.253', + selected: false, + infoExpanded: true + }; + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); + + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/components/create-instance/network.js b/packages/my-joy-beta/src/components/create-instance/network.js new file mode 100644 index 00000000..16164239 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/network.js @@ -0,0 +1,205 @@ +import React from 'react'; +import { Field } from 'redux-form'; +import { Margin, Padding } from 'styled-components-spacing'; +import styled from 'styled-components'; +import Flex, { FlexItem } from 'styled-flex-component'; +import remcalc from 'remcalc'; + +import { + H4, + P, + Card, + CardHeader, + CardHeaderMeta, + CardHeaderBox, + CardOutlet, + FormGroup, + FormLabel, + Input, + Checkbox, + Divider, + FabricIcon, + DataCenterIcon, + PublicIcon, + PrivateIcon, + ArrowIcon +} from 'joyent-ui-toolkit'; + +const Box = styled.div` + display: inline-block; + background-color: ${props => props.theme.white}; + border: ${remcalc(1)} solid ${props => props.theme.grey}; + border-radius: ${remcalc(4)}; + min-width: ${remcalc(300)}; +`; + +export const Collapsed = ({ name, fabric, ...network }) => ( + + + + + +

    {name}

    +     +     + + + + + + + + + + + + {network.public ? : } + + + +

    {network.public ? 'Public' : 'Private'}

    +     +     +     +     + + + + + + {fabric ? : } + + + +

    {fabric ? 'Fabric' : 'Data center network'}

    +     +     +     +     +     +     +     +     +     +     +); + +export const Expanded = ({ + id, + name, + fabric, + subnet, + description, + provision_start_ip, + provision_end_ip, + selected = false, + infoExpanded = false, + onInfoClick, + ...network +}) => ( + + + + + + + + + +

    {name}

    +     +     + + + {description && ( + +

    {description}

    +     + )} + + + + + + + {network.public ? : } + + + +

    {network.public ? 'Public' : 'Private'}

    +     +     +     +     + + + + + + {fabric ? : } + + + +

    {fabric ? 'Fabric' : 'Data center network'}

    +     +     +     +     +     + {fabric ? ( + + + + + +

    Network information

    +     +     + + + +     + {infoExpanded ? ( + + + + + + ID + + + + + + Subnet + + + + + + IP range + + + + + + + ) : null} +     +     + ) : null} +     +     +     +     +); + +export default ({ small = false, ...rest }) => + small ? : ; diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap index ecd81e9b..fde2c3bd 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap @@ -1,7 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` -.c13 { +.c2 { + padding-right: 1rem; + padding-left: 1rem; +} + +.c6 { + padding: 1rem; +} + +.c14 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -20,7 +29,7 @@ exports[`renders without throwing 1`] = ` margin-left: -0.5rem; } -.c14 { +.c15 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -29,7 +38,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c19 { +.c20 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -38,11 +47,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c5 { - padding: 0.25rem; -} - -.c6 { +.c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -69,1158 +74,26 @@ exports[`renders without throwing 1`] = ` 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; -} - -.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; -} - -.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; -} - -.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%; + -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; } -.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; -} - -@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; - } -} - -
    -
    -
    -

    - Add metadata -

    -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    -`; - -exports[`renders without throwing 1`] = ` -.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; -} - -.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); - 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; -} - -.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; - margin: -0.0625rem; - box-shadow: none; -} - -.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; -} - -
    -
    -
    -

    - Add metadata -

    -
    -
    -
    -`; - -exports[`renders without throwing 1`] = ` .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; -} - -.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; @@ -1239,910 +112,6 @@ exports[`renders without throwing 1`] = ` flex-basis: 0.75rem; } -.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; -} - -.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; -} - -.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; -} - -@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; - } -} - -
    -
    -
    -

    - Add metadata -

    -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    -`; - -exports[`renders without throwing 1`] = ` -.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; -} - -.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; -} - -.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; -} - -.c5 { - padding: 0.25rem; -} - .c18 { font-family: sans-serif; font-size: 100%; @@ -2482,7 +451,7 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } -.c3 { +.c4 { color: rgba(73,73,73,1); font-weight: 600; line-height: 1.5rem; @@ -2490,26 +459,19 @@ exports[`renders without throwing 1`] = ` margin: 0; } -.c3 + p, -.c3 + small, -.c3 + h1, -.c3 + h2, -.c3 + label, -.c3 + h3, -.c3 + h4, -.c3 + h5, -.c3 + div, -.c3 + span { +.c4 + p, +.c4 + small, +.c4 + h1, +.c4 + h2, +.c4 + label, +.c4 + h3, +.c4 + h4, +.c4 + h5, +.c4 + div, +.c4 + span { margin-top: 0.75rem; } -.c12 { - background-color: rgb(216,216,216); - margin: 0; - background-color: transparent; - height: 0.75rem; -} - .c0 { box-sizing: content-box; display: -webkit-box; @@ -2522,8 +484,6 @@ exports[`renders without throwing 1`] = ` -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; @@ -2535,7 +495,7 @@ exports[`renders without throwing 1`] = ` box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); } -.c4 { +.c5 { box-sizing: content-box; display: -webkit-box; display: -webkit-flex; @@ -2547,8 +507,6 @@ exports[`renders without throwing 1`] = ` -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; @@ -2569,16 +527,15 @@ exports[`renders without throwing 1`] = ` -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) { +.c5 > [name='card']:not(:last-child) { margin-bottom: 0.8125rem; } -.c4 > [name='card']:last-child { +.c5 > [name='card']:last-child { margin-bottom: 0.4375rem; } @@ -2594,8 +551,6 @@ exports[`renders without throwing 1`] = ` -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; @@ -2623,7 +578,7 @@ exports[`renders without throwing 1`] = ` margin-top: 0; } -.c2 { +.c3 { box-sizing: content-box; display: -webkit-box; display: -webkit-flex; @@ -2635,8 +590,6 @@ exports[`renders without throwing 1`] = ` -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; @@ -2654,7 +607,6 @@ exports[`renders without throwing 1`] = ` min-height: 2.9375rem; width: auto; height: auto; - padding: 0.75rem; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2683,7 +635,7 @@ exports[`renders without throwing 1`] = ` color: inherit; } -.c8 { +.c9 { display: inline-block; margin: 0; padding: 0; @@ -2699,9 +651,9 @@ exports[`renders without throwing 1`] = ` width: 100%; } -.c10 { +.c11 { box-sizing: border-box; - width: 100%; + width: 18.75rem; height: 3rem; min-height: 3rem; margin-bottom: 0.5rem; @@ -2723,120 +675,45 @@ exports[`renders without throwing 1`] = ` outline: 0; } -.c10::-webkit-input-placeholder { +.c11::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c10::-moz-placeholder { +.c11::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c10:-ms-input-placeholder { +.c11:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c10:invalid { +.c11:invalid { box-shadow: none; } -.c10:disabled { +.c11:disabled { background-color: rgb(250,250,250); color: rgb(216,216,216); } -.c10:disabled::-webkit-input-placeholder { +.c11:disabled::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c10:disabled::-moz-placeholder { +.c11:disabled::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c10:disabled:-ms-input-placeholder { +.c11:disabled:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c10:focus { +.c11: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 { +.c10 { font-size: 0.9375rem; font-style: normal; font-stretch: normal; @@ -2849,7 +726,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; } -.c11 { +.c12 { font-size: 0.9375rem; font-style: normal; font-stretch: normal; @@ -2863,7 +740,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c15 { + .c14 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2872,7 +749,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c15 { + .c14 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -2881,7 +758,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c7 { + .c15 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; @@ -2909,96 +786,91 @@ exports[`renders without throwing 1`] = ` >
    -

    - Add metadata -

    +

    + Add metadata +

    +
    -
    -
    -
    +
    -