@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/TextInput/__snapshots__/index.test.tsx.snap

@@ -1,758 +1,758 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the TextInput  with with characterWidth=5 with cellWidth=full 1`] = `
+exports[`renders the TextInput  with with maxWidth="5-char" with width=full 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="full"
-  characterWidth={5}
+  maxWidth="5-char"
+  width="full"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5 govgr-!-width-full govgr-input"
+    className="govgr-input--width-5-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5 govgr-!-width-full govgr-input"
+      className="govgr-input--width-5-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with cellWidth=one-half 1`] = `
+exports[`renders the TextInput  with with maxWidth="5-char" with width=one-half 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-half"
-  characterWidth={5}
+  maxWidth="5-char"
+  width="50%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-half govgr-input--width-5 govgr-input"
+    className="govgr-input--width-5-char-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-half govgr-input--width-5 govgr-input"
+      className="govgr-input--width-5-char-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter 1`] = `
+exports[`renders the TextInput  with with maxWidth="5-char" with width=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-quarter"
-  characterWidth={5}
+  maxWidth="5-char"
+  width="25%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-quarter govgr-input--width-5 govgr-input"
+    className="govgr-input--width-5-char-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-quarter govgr-input--width-5 govgr-input"
+      className="govgr-input--width-5-char-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with cellWidth=one-third 1`] = `
+exports[`renders the TextInput  with with maxWidth="5-char" with width=one-third 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-third"
-  characterWidth={5}
+  maxWidth="5-char"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-third govgr-input--width-5 govgr-input"
+    className="govgr-input--width-5-char-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-third govgr-input--width-5 govgr-input"
+      className="govgr-input--width-5-char-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters 1`] = `
+exports[`renders the TextInput  with with maxWidth="5-char" with width=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="three-quarters"
-  characterWidth={5}
+  maxWidth="5-char"
+  width="75%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-three-quarters govgr-input--width-5 govgr-input"
+    className="govgr-input--width-5-char-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-three-quarters govgr-input--width-5 govgr-input"
+      className="govgr-input--width-5-char-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds 1`] = `
+exports[`renders the TextInput  with with maxWidth="5-char" with width=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="two-thirds"
-  characterWidth={5}
+  maxWidth="5-char"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-two-thirds govgr-input--width-5 govgr-input"
+    className="govgr-input--width-5-char-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-two-thirds govgr-input--width-5 govgr-input"
+      className="govgr-input--width-5-char-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with cellWidth=full 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="full"
+  maxWidth="2-char"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-full govgr-input"
+    className="govgr-input--width-2-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-full govgr-input"
+      className="govgr-input--width-2-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with cellWidth=one-half 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" and with width=full 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-half"
+  maxWidth="2-char"
+  width="full"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-2-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-half govgr-input"
+      className="govgr-input--width-2-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with cellWidth=one-quarter 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" and with width=one-half 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-quarter"
+  maxWidth="2-char"
+  width="50%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-quarter govgr-input"
+    className="govgr-input--width-2-char-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-quarter govgr-input"
+      className="govgr-input--width-2-char-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with cellWidth=one-third 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" and with width=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-third"
+  maxWidth="2-char"
+  width="25%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-third govgr-input"
+    className="govgr-input--width-2-char-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-third govgr-input"
+      className="govgr-input--width-2-char-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with cellWidth=three-quarters 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" and with width=one-third 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="three-quarters"
+  maxWidth="2-char"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-2-char-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-three-quarters govgr-input"
+      className="govgr-input--width-2-char-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with cellWidth=two-thirds 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" and with width=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="two-thirds"
+  maxWidth="2-char"
+  width="75%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-2-char-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-two-thirds govgr-input"
+      className="govgr-input--width-2-char-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 1`] = `
+exports[`renders the TextInput with maxWidth="2-char" and with width=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth={2}
+  maxWidth="2-char"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2 govgr-input"
+    className="govgr-input--width-2-char-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2 govgr-input"
+      className="govgr-input--width-2-char-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with cellWidth=full 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="full"
-  characterWidth={2}
+  maxWidth="3-char"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2 govgr-!-width-full govgr-input"
+    className="govgr-input--width-3-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2 govgr-!-width-full govgr-input"
+      className="govgr-input--width-3-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with cellWidth=one-half 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" and with width=full 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-half"
-  characterWidth={2}
+  maxWidth="3-char"
+  width="full"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-half govgr-input--width-2 govgr-input"
+    className="govgr-input--width-3-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-half govgr-input--width-2 govgr-input"
+      className="govgr-input--width-3-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with cellWidth=one-quarter 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" and with width=one-half 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-quarter"
-  characterWidth={2}
+  maxWidth="3-char"
+  width="50%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-quarter govgr-input--width-2 govgr-input"
+    className="govgr-input--width-3-char-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-quarter govgr-input--width-2 govgr-input"
+      className="govgr-input--width-3-char-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with cellWidth=one-third 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" and with width=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-third"
-  characterWidth={2}
+  maxWidth="3-char"
+  width="25%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-third govgr-input--width-2 govgr-input"
+    className="govgr-input--width-3-char-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-third govgr-input--width-2 govgr-input"
+      className="govgr-input--width-3-char-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with cellWidth=three-quarters 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" and with width=one-third 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="three-quarters"
-  characterWidth={2}
+  maxWidth="3-char"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-three-quarters govgr-input--width-2 govgr-input"
+    className="govgr-input--width-3-char-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-three-quarters govgr-input--width-2 govgr-input"
+      className="govgr-input--width-3-char-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with cellWidth=two-thirds 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" and with width=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="two-thirds"
-  characterWidth={2}
+  maxWidth="3-char"
+  width="75%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-two-thirds govgr-input--width-2 govgr-input"
+    className="govgr-input--width-3-char-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-two-thirds govgr-input--width-2 govgr-input"
+      className="govgr-input--width-3-char-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 1`] = `
+exports[`renders the TextInput with maxWidth="3-char" and with width=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth={3}
+  maxWidth="3-char"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3 govgr-input"
+    className="govgr-input--width-3-char-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3 govgr-input"
+      className="govgr-input--width-3-char-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with cellWidth=full 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="full"
-  characterWidth={3}
+  maxWidth="4-char"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3 govgr-!-width-full govgr-input"
+    className="govgr-input--width-4-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3 govgr-!-width-full govgr-input"
+      className="govgr-input--width-4-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with cellWidth=one-half 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" and with width=full 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-half"
-  characterWidth={3}
+  maxWidth="4-char"
+  width="full"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-half govgr-input--width-3 govgr-input"
+    className="govgr-input--width-4-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-half govgr-input--width-3 govgr-input"
+      className="govgr-input--width-4-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with cellWidth=one-quarter 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" and with width=one-half 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-quarter"
-  characterWidth={3}
+  maxWidth="4-char"
+  width="50%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-quarter govgr-input--width-3 govgr-input"
+    className="govgr-input--width-4-char-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-quarter govgr-input--width-3 govgr-input"
+      className="govgr-input--width-4-char-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with cellWidth=one-third 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" and with width=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-third"
-  characterWidth={3}
+  maxWidth="4-char"
+  width="25%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-third govgr-input--width-3 govgr-input"
+    className="govgr-input--width-4-char-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-third govgr-input--width-3 govgr-input"
+      className="govgr-input--width-4-char-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with cellWidth=three-quarters 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" and with width=one-third 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="three-quarters"
-  characterWidth={3}
+  maxWidth="4-char"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-three-quarters govgr-input--width-3 govgr-input"
+    className="govgr-input--width-4-char-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-three-quarters govgr-input--width-3 govgr-input"
+      className="govgr-input--width-4-char-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with cellWidth=two-thirds 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" and with width=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="two-thirds"
-  characterWidth={3}
+  maxWidth="4-char"
+  width="75%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-two-thirds govgr-input--width-3 govgr-input"
+    className="govgr-input--width-4-char-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-two-thirds govgr-input--width-3 govgr-input"
+      className="govgr-input--width-4-char-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 1`] = `
+exports[`renders the TextInput with maxWidth="4-char" and with width=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth={4}
+  maxWidth="4-char"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4 govgr-input"
+    className="govgr-input--width-4-char-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4 govgr-input"
+      className="govgr-input--width-4-char-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with cellWidth=full 1`] = `
+exports[`renders the TextInput with maxWidth="5-char" 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="full"
-  characterWidth={4}
+  maxWidth="5-char"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4 govgr-!-width-full govgr-input"
+    className="govgr-input--width-5-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4 govgr-!-width-full govgr-input"
+      className="govgr-input--width-5-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with cellWidth=one-half 1`] = `
+exports[`renders the TextInput with maxWidth="10-char" 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-half"
-  characterWidth={4}
+  maxWidth="10-char"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-half govgr-input--width-4 govgr-input"
+    className="govgr-input--width-10-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-half govgr-input--width-4 govgr-input"
+      className="govgr-input--width-10-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with cellWidth=one-quarter 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-quarter"
-  characterWidth={4}
+  maxWidth="20-char"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-quarter govgr-input--width-4 govgr-input"
+    className="govgr-input--width-20-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-quarter govgr-input--width-4 govgr-input"
+      className="govgr-input--width-20-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with cellWidth=one-third 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" and with width=full 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-third"
-  characterWidth={4}
+  maxWidth="20-char"
+  width="full"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-third govgr-input--width-4 govgr-input"
+    className="govgr-input--width-20-char-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-third govgr-input--width-4 govgr-input"
+      className="govgr-input--width-20-char-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with cellWidth=three-quarters 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" and with width=one-half 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="three-quarters"
-  characterWidth={4}
+  maxWidth="20-char"
+  width="50%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-three-quarters govgr-input--width-4 govgr-input"
+    className="govgr-input--width-20-char-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-three-quarters govgr-input--width-4 govgr-input"
+      className="govgr-input--width-20-char-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with cellWidth=two-thirds 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" and with width=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="two-thirds"
-  characterWidth={4}
+  maxWidth="20-char"
+  width="25%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-two-thirds govgr-input--width-4 govgr-input"
+    className="govgr-input--width-20-char-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-two-thirds govgr-input--width-4 govgr-input"
+      className="govgr-input--width-20-char-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=5 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" and with width=one-third 1`] = `
 <ForwardRef(TextInput)
-  characterWidth={5}
+  maxWidth="20-char"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5 govgr-input"
+    className="govgr-input--width-20-char-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5 govgr-input"
+      className="govgr-input--width-20-char-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=10 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" and with width=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  characterWidth={10}
+  maxWidth="20-char"
+  width="75%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-10 govgr-input"
+    className="govgr-input--width-20-char-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-10 govgr-input"
+      className="govgr-input--width-20-char-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 1`] = `
+exports[`renders the TextInput with maxWidth="20-char" and with width=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth={20}
+  maxWidth="20-char"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20 govgr-input"
+    className="govgr-input--width-20-char-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20 govgr-input"
+      className="govgr-input--width-20-char-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with cellWidth=full 1`] = `
-<ForwardRef(TextInput)
-  cellWidth="full"
-  characterWidth={20}
->
+exports[`renders the TextInput with no props 1`] = `
+<ForwardRef(TextInput)>
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20 govgr-!-width-full govgr-input"
+    className="govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20 govgr-!-width-full govgr-input"
+      className="govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with cellWidth=one-half 1`] = `
+exports[`renders the TextInput with width=full 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-half"
-  characterWidth={20}
+  width="full"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-half govgr-input--width-20 govgr-input"
+    className="govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-half govgr-input--width-20 govgr-input"
+      className="govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with cellWidth=one-quarter 1`] = `
+exports[`renders the TextInput with width=one-half 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-quarter"
-  characterWidth={20}
+  width="50%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-quarter govgr-input--width-20 govgr-input"
+    className="govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-quarter govgr-input--width-20 govgr-input"
+      className="govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with cellWidth=one-third 1`] = `
+exports[`renders the TextInput with width=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="one-third"
-  characterWidth={20}
+  width="25%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-one-third govgr-input--width-20 govgr-input"
+    className="govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-one-third govgr-input--width-20 govgr-input"
+      className="govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with cellWidth=three-quarters 1`] = `
+exports[`renders the TextInput with width=one-third 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="three-quarters"
-  characterWidth={20}
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-three-quarters govgr-input--width-20 govgr-input"
+    className="govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-three-quarters govgr-input--width-20 govgr-input"
+      className="govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with cellWidth=two-thirds 1`] = `
+exports[`renders the TextInput with width=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  cellWidth="two-thirds"
-  characterWidth={20}
+  width="75%"
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-!-width-two-thirds govgr-input--width-20 govgr-input"
+    className="govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-!-width-two-thirds govgr-input--width-20 govgr-input"
+      className="govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with no props 1`] = `
-<ForwardRef(TextInput)>
+exports[`renders the TextInput with width=two-thirds 1`] = `
+<ForwardRef(TextInput)
+  width="66.6%"
+>
   <ForwardRef(Base)
     as="input"
-    className="govgr-input"
+    className="govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input"
+      className="govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>