@digigov/react-core 1.0.0-88820b1e → 1.0.0-8bbf3ef2

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

@@ -7,11 +7,11 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=full 1`]
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-input"
+    className="govgr-input--width-5-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-input"
+      className="govgr-input--width-5-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -25,11 +25,11 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=one-half
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-5-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-!-width-one-half govgr-input"
+      className="govgr-input--width-5-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -43,11 +43,11 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=one-quart
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-!-width-one-quarter govgr-input"
+    className="govgr-input--width-5-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-!-width-one-quarter govgr-input"
+      className="govgr-input--width-5-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -61,11 +61,11 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=one-third
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-!-width-one-third govgr-input"
+    className="govgr-input--width-5-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-!-width-one-third govgr-input"
+      className="govgr-input--width-5-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -79,11 +79,11 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=three-qua
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-5-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-!-width-three-quarters govgr-input"
+      className="govgr-input--width-5-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -97,11 +97,28 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=two-third
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-5-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-!-width-two-thirds govgr-input"
+      className="govgr-input--width-5-char govgr-!-width-two-thirds govgr-input"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(TextInput)>
+`;
+
+exports[`renders the TextInput with dense prop 1`] = `
+<ForwardRef(TextInput)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-input--dense govgr-input"
+    type="text"
+  >
+    <input
+      className="govgr-input--dense govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -114,11 +131,11 @@ exports[`renders the TextInput with maxWidth="2-char" 1`] = `
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-input"
+    className="govgr-input--width-2-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-input"
+      className="govgr-input--width-2-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -132,11 +149,11 @@ exports[`renders the TextInput with maxWidth="2-char" and with width=full 1`] =
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-input"
+    className="govgr-input--width-2-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-input"
+      className="govgr-input--width-2-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -150,11 +167,11 @@ exports[`renders the TextInput with maxWidth="2-char" and with width=one-half 1`
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-2-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-!-width-one-half govgr-input"
+      className="govgr-input--width-2-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -168,11 +185,11 @@ exports[`renders the TextInput with maxWidth="2-char" and with width=one-quarter
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-!-width-one-quarter govgr-input"
+    className="govgr-input--width-2-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-!-width-one-quarter govgr-input"
+      className="govgr-input--width-2-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -186,11 +203,11 @@ exports[`renders the TextInput with maxWidth="2-char" and with width=one-third 1
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-!-width-one-third govgr-input"
+    className="govgr-input--width-2-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-!-width-one-third govgr-input"
+      className="govgr-input--width-2-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -204,11 +221,11 @@ exports[`renders the TextInput with maxWidth="2-char" and with width=three-quart
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-2-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-!-width-three-quarters govgr-input"
+      className="govgr-input--width-2-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -222,11 +239,11 @@ exports[`renders the TextInput with maxWidth="2-char" and with width=two-thirds
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-2-char-char govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-2-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-2-char-char govgr-!-width-two-thirds govgr-input"
+      className="govgr-input--width-2-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -239,11 +256,11 @@ exports[`renders the TextInput with maxWidth="3-char" 1`] = `
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-input"
+    className="govgr-input--width-3-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-input"
+      className="govgr-input--width-3-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -257,11 +274,11 @@ exports[`renders the TextInput with maxWidth="3-char" and with width=full 1`] =
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-input"
+    className="govgr-input--width-3-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-input"
+      className="govgr-input--width-3-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -275,11 +292,11 @@ exports[`renders the TextInput with maxWidth="3-char" and with width=one-half 1`
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-3-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-!-width-one-half govgr-input"
+      className="govgr-input--width-3-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -293,11 +310,11 @@ exports[`renders the TextInput with maxWidth="3-char" and with width=one-quarter
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-!-width-one-quarter govgr-input"
+    className="govgr-input--width-3-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-!-width-one-quarter govgr-input"
+      className="govgr-input--width-3-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -311,11 +328,11 @@ exports[`renders the TextInput with maxWidth="3-char" and with width=one-third 1
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-!-width-one-third govgr-input"
+    className="govgr-input--width-3-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-!-width-one-third govgr-input"
+      className="govgr-input--width-3-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -329,11 +346,11 @@ exports[`renders the TextInput with maxWidth="3-char" and with width=three-quart
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-3-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-!-width-three-quarters govgr-input"
+      className="govgr-input--width-3-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -347,11 +364,11 @@ exports[`renders the TextInput with maxWidth="3-char" and with width=two-thirds
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-3-char-char govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-3-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-3-char-char govgr-!-width-two-thirds govgr-input"
+      className="govgr-input--width-3-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -364,11 +381,11 @@ exports[`renders the TextInput with maxWidth="4-char" 1`] = `
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-input"
+    className="govgr-input--width-4-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-input"
+      className="govgr-input--width-4-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -382,11 +399,11 @@ exports[`renders the TextInput with maxWidth="4-char" and with width=full 1`] =
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-input"
+    className="govgr-input--width-4-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-input"
+      className="govgr-input--width-4-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -400,11 +417,11 @@ exports[`renders the TextInput with maxWidth="4-char" and with width=one-half 1`
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-4-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-!-width-one-half govgr-input"
+      className="govgr-input--width-4-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -418,11 +435,11 @@ exports[`renders the TextInput with maxWidth="4-char" and with width=one-quarter
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-!-width-one-quarter govgr-input"
+    className="govgr-input--width-4-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-!-width-one-quarter govgr-input"
+      className="govgr-input--width-4-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -436,11 +453,11 @@ exports[`renders the TextInput with maxWidth="4-char" and with width=one-third 1
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-!-width-one-third govgr-input"
+    className="govgr-input--width-4-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-!-width-one-third govgr-input"
+      className="govgr-input--width-4-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -454,11 +471,11 @@ exports[`renders the TextInput with maxWidth="4-char" and with width=three-quart
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-4-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-!-width-three-quarters govgr-input"
+      className="govgr-input--width-4-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -472,11 +489,11 @@ exports[`renders the TextInput with maxWidth="4-char" and with width=two-thirds
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-4-char-char govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-4-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-4-char-char govgr-!-width-two-thirds govgr-input"
+      className="govgr-input--width-4-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -489,11 +506,11 @@ exports[`renders the TextInput with maxWidth="5-char" 1`] = `
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-5-char-char govgr-input"
+    className="govgr-input--width-5-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-5-char-char govgr-input"
+      className="govgr-input--width-5-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -506,11 +523,11 @@ exports[`renders the TextInput with maxWidth="10-char" 1`] = `
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-10-char-char govgr-input"
+    className="govgr-input--width-10-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-10-char-char govgr-input"
+      className="govgr-input--width-10-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -523,11 +540,11 @@ exports[`renders the TextInput with maxWidth="20-char" 1`] = `
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-input"
+    className="govgr-input--width-20-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-input"
+      className="govgr-input--width-20-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -541,11 +558,11 @@ exports[`renders the TextInput with maxWidth="20-char" and with width=full 1`] =
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-input"
+    className="govgr-input--width-20-char govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-input"
+      className="govgr-input--width-20-char govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -559,11 +576,11 @@ exports[`renders the TextInput with maxWidth="20-char" and with width=one-half 1
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-20-char govgr-!-width-one-half govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-!-width-one-half govgr-input"
+      className="govgr-input--width-20-char govgr-!-width-one-half govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -577,11 +594,11 @@ exports[`renders the TextInput with maxWidth="20-char" and with width=one-quarte
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-!-width-one-quarter govgr-input"
+    className="govgr-input--width-20-char govgr-!-width-one-quarter govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-!-width-one-quarter govgr-input"
+      className="govgr-input--width-20-char govgr-!-width-one-quarter govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -595,11 +612,11 @@ exports[`renders the TextInput with maxWidth="20-char" and with width=one-third
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-!-width-one-third govgr-input"
+    className="govgr-input--width-20-char govgr-!-width-one-third govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-!-width-one-third govgr-input"
+      className="govgr-input--width-20-char govgr-!-width-one-third govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -613,11 +630,11 @@ exports[`renders the TextInput with maxWidth="20-char" and with width=three-quar
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-20-char govgr-!-width-three-quarters govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-!-width-three-quarters govgr-input"
+      className="govgr-input--width-20-char govgr-!-width-three-quarters govgr-input"
       type="text"
     />
   </ForwardRef(Base)>
@@ -631,11 +648,11 @@ exports[`renders the TextInput with maxWidth="20-char" and with width=two-thirds
 >
   <ForwardRef(Base)
     as="input"
-    className="govgr-input--width-20-char-char govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-20-char govgr-!-width-two-thirds govgr-input"
     type="text"
   >
     <input
-      className="govgr-input--width-20-char-char govgr-!-width-two-thirds govgr-input"
+      className="govgr-input--width-20-char govgr-!-width-two-thirds govgr-input"
       type="text"
     />
   </ForwardRef(Base)>

package/src/TextInput/index.test.tsx

@@ -6,6 +6,9 @@ import TextInput from '@digigov/react-core/TextInput';
 it('renders the TextInput with no props', () => {
   expect(mount(<TextInput></TextInput>)).toMatchSnapshot();
 });
+it('renders the TextInput with dense prop', () => {
+  expect(mount(<TextInput dense></TextInput>)).toMatchSnapshot();
+});
 
 it('renders the TextInput with maxWidth="2-char"', () => {
   expect(mount(<TextInput maxWidth='2-char'></TextInput>)).toMatchSnapshot();

package/src/TextInput/index.tsx

@@ -34,6 +34,13 @@ export interface TextInputProps extends BaseProps<'input'> {
    * @value false
    */
   error?: boolean;
+  /**
+   * dense is optional.
+   * @value true TextInput will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * TextInput component when you need to let users enter text that’s no
@@ -46,6 +53,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       maxWidth,
       width,
       error,
+      dense,
       className,
       children,
       ...props
@@ -60,6 +68,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         className={clsx(className, {
           'govgr-input': true,
           'govgr-input--error': error,
+          'govgr-input--dense': dense,
           [`govgr-input--width-${maxWidth}`]: maxWidth !== undefined,
           'govgr-!-width-one-quarter': width === '25%',
           'govgr-!-width-one-third': width === '33.3%',

package/src/Timeline/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Timeline with dense prop 1`] = `
+<ForwardRef(Timeline)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-timeline--dense govgr-timeline"
+  >
+    <ol
+      className="govgr-timeline--dense govgr-timeline"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(Timeline)>
+`;
+
 exports[`renders the Timeline with no prop 1`] = `
 <ForwardRef(Timeline)>
   <ForwardRef(Base)

package/src/Timeline/index.test.tsx

@@ -6,3 +6,7 @@ import Timeline from '@digigov/react-core/Timeline';
 it('renders the Timeline with no prop', () => {
   expect(mount(<Timeline>hello</Timeline>)).toMatchSnapshot();
 });
+
+it('renders the Timeline with dense prop', () => {
+  expect(mount(<Timeline dense>hello</Timeline>)).toMatchSnapshot();
+});

package/src/Timeline/index.tsx

@@ -4,8 +4,8 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TimelineProps extends BaseProps<'ol'> {
   /**
-   * spaced is optional. Use it to add space between the list items.
-   * @value true
+   * dense is optional.
+   * @value true Timeline will be dense.
    * @value false
    * @default true
    */
@@ -16,14 +16,14 @@ export interface TimelineProps extends BaseProps<'ol'> {
  * This component must contain TimelineItem component.
  */
 export const Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(
-  function Timeline({ dense = true, className, children, ...props }, ref) {
+  function Timeline({ dense, className, children, ...props }, ref) {
     return (
       <Base
         as="ol"
         ref={ref}
         className={clsx(className, {
           'govgr-timeline': true,
-          'govgr-timeline--spaced': !dense,
+          'govgr-timeline--dense': dense,
         })}
         {...props}
       >

package/src/Unpurge/index.tsx

@@ -141,6 +141,46 @@ function Unpurge() {
     govgr-gap-8
     govgr-gap-10
     govgr-gap-12
+    govgr-gap-xs-1
+    govgr-gap-xs-2
+    govgr-gap-xs-4
+    govgr-gap-xs-5
+    govgr-gap-xs-6
+    govgr-gap-xs-8
+    govgr-gap-xs-10
+    govgr-gap-xs-12
+    govgr-gap-sm-1
+    govgr-gap-sm-2
+    govgr-gap-sm-4
+    govgr-gap-sm-5
+    govgr-gap-sm-6
+    govgr-gap-sm-8
+    govgr-gap-sm-10
+    govgr-gap-sm-12
+    govgr-gap-md-1
+    govgr-gap-md-2
+    govgr-gap-md-4
+    govgr-gap-md-5
+    govgr-gap-md-6
+    govgr-gap-md-8
+    govgr-gap-md-10
+    govgr-gap-md-12
+    govgr-gap-lg-1
+    govgr-gap-lg-2
+    govgr-gap-lg-4
+    govgr-gap-lg-5
+    govgr-gap-lg-6
+    govgr-gap-lg-8
+    govgr-gap-lg-10
+    govgr-gap-lg-12
+    govgr-gap-xl-1
+    govgr-gap-xl-2
+    govgr-gap-xl-4
+    govgr-gap-xl-5
+    govgr-gap-xl-6
+    govgr-gap-xl-8
+    govgr-gap-xl-10
+    govgr-gap-xl-12
     govgr-!-font-size-14
     govgr-!-font-size-16
     govgr-!-font-size-19
@@ -262,6 +302,16 @@ function Unpurge() {
     govgr-svg-icon--md
     govgr-svg-icon--lg
     govgr-svg-icon--xl
+    govgr-caption-md
+    govgr-caption-lg
+    govgr-caption-xl
+    govgr-heading-xs
+    govgr-heading-sm
+    govgr-heading-md
+    govgr-heading-lg
+    govgr-heading-xl
+    govgr-image-logo--light
+    govgr-image-logo--dark
     `}
     ></div>
   );