diff --git a/components/tag/__tests__/__snapshots__/index.test.tsx.snap b/components/tag/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..4b05c1f
--- /dev/null
+++ b/components/tag/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,1705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag should work with invert 1`] = `
+initialize {
+ "0": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "success",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid transparent;
+ background-color: #0070f3;
+ color: #fff;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid transparent;
+ background-color: #0070f3;
+ color: #fff;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "success",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "root": Object {
+ "attribs": Object {},
+ "children": Array [
+ [Circular],
+ ],
+ "name": "root",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "type": "root",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": Object {
+ "decodeEntities": true,
+ "normalizeWhitespace": false,
+ "withDomLvl1": true,
+ "xml": false,
+ },
+}
+`;
+
+exports[`Tag should work with types 1`] = `
+initialize {
+ "0": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "success",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "success",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "secondary",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "secondary",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "error",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "error",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "dark",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "dark",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "secondary",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "secondary",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "error",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "error",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "dark",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "dark",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "parent": [Circular],
+ "prev": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "success",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "success",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "error",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "error",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "dark",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "dark",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "parent": [Circular],
+ "prev": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "secondary",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "secondary",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "success",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "success",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "dark",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #000;
+ background-color: #fff;
+ color: #000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "dark",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "error",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #ff0000;
+ background-color: #fff;
+ color: #ff0000;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "error",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "secondary",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #666;
+ background-color: #fff;
+ color: #666;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "secondary",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": Object {
+ "attribs": Object {
+ "class": "",
+ },
+ "children": Array [
+ Object {
+ "data": "success",
+ "next": Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": [Circular],
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ Object {
+ "attribs": Object {},
+ "children": Array [
+ Object {
+ "data": "
+ span {
+ display: inline-block;
+ line-height: .875rem;
+ font-size: .875rem;
+ height: 1.75rem;
+ border-radius: 5px;
+ border: 1px solid #0070f3;
+ background-color: #fff;
+ color: #0070f3;
+ padding: 6px;
+ box-sizing: border-box;
+ }
+ ",
+ "next": null,
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ ],
+ "name": "style",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": [Circular],
+ "prev": Object {
+ "data": "success",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "text",
+ },
+ "type": "style",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ ],
+ "name": "span",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": [Circular],
+ "parent": [Circular],
+ "prev": null,
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {
+ "class": undefined,
+ },
+ "x-attribsPrefix": Object {
+ "class": undefined,
+ },
+ },
+ ],
+ "name": "div",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "root": Object {
+ "attribs": Object {},
+ "children": Array [
+ [Circular],
+ ],
+ "name": "root",
+ "namespace": "http://www.w3.org/1999/xhtml",
+ "next": null,
+ "parent": null,
+ "prev": null,
+ "type": "root",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "type": "tag",
+ "x-attribsNamespace": Object {},
+ "x-attribsPrefix": Object {},
+ },
+ "_root": [Circular],
+ "length": 1,
+ "options": Object {
+ "decodeEntities": true,
+ "normalizeWhitespace": false,
+ "withDomLvl1": true,
+ "xml": false,
+ },
+}
+`;
diff --git a/components/tag/__tests__/index.test.tsx b/components/tag/__tests__/index.test.tsx
new file mode 100644
index 0000000..6363b40
--- /dev/null
+++ b/components/tag/__tests__/index.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { Tag } from 'components'
+
+describe('Tag', () => {
+ it('should render correctly', () => {
+ const wrapper = mount(