diff --git a/src/context/ScreenClassProvider/index.js b/src/context/ScreenClassProvider/index.js
index e565af6d..5c05a425 100644
--- a/src/context/ScreenClassProvider/index.js
+++ b/src/context/ScreenClassProvider/index.js
@@ -1,28 +1,39 @@
-import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useScreenClass } from '../../utils';
-import { getConfiguration } from '../../config';
-import { Div } from '../../primitives'
+import React, { useRef, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useScreenClass } from "../../utils";
+import { getConfiguration } from "../../config";
+import { Div } from "../../primitives";
 
-export const NO_PROVIDER_FLAG = 'NO_PROVIDER_FLAG';
+export const NO_PROVIDER_FLAG = "NO_PROVIDER_FLAG";
 
 export const ScreenClassContext = React.createContext(NO_PROVIDER_FLAG);
 
-const ScreenClassProvider = ({ useOwnWidth, children, fallbackScreenClass }) => {
+const ScreenClassProvider = ({
+  useOwnWidth = false,
+  children,
+  fallbackScreenClass = null,
+}) => {
   const screenClassRef = useRef();
   const [mounted, setMounted] = useState(false);
-  const detectedScreenClass = useScreenClass(screenClassRef, fallbackScreenClass);
+  const detectedScreenClass = useScreenClass(
+    screenClassRef,
+    fallbackScreenClass
+  );
   const { defaultScreenClass } = getConfiguration();
 
-  const screenClass = mounted ? detectedScreenClass : (fallbackScreenClass || defaultScreenClass);
+  const screenClass = mounted
+    ? detectedScreenClass
+    : fallbackScreenClass || defaultScreenClass;
 
   useEffect(() => setMounted(true), []);
 
   return (
     <ScreenClassContext.Provider value={screenClass}>
-      {useOwnWidth
-        ? <Div ref={useOwnWidth ? screenClassRef : null}>{children}</Div>
-        : <>{children}</>}
+      {useOwnWidth ? (
+        <Div ref={useOwnWidth ? screenClassRef : null}>{children}</Div>
+      ) : (
+        <>{children}</>
+      )}
     </ScreenClassContext.Provider>
   );
 };
@@ -42,12 +53,16 @@ ScreenClassProvider.propTypes = {
    * Screen class to use when it cannot be determined otherwise.
    * Useful for server side rendering.
    */
-  fallbackScreenClass: PropTypes.oneOf([null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' , 'xxxl']),
-};
-
-ScreenClassProvider.defaultProps = {
-  useOwnWidth: false,
-  fallbackScreenClass: null,
+  fallbackScreenClass: PropTypes.oneOf([
+    null,
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "xxl",
+    "xxxl",
+  ]),
 };
 
 export default ScreenClassProvider;
diff --git a/src/grid/Col/index.js b/src/grid/Col/index.js
index 749ec21f..061e006d 100644
--- a/src/grid/Col/index.js
+++ b/src/grid/Col/index.js
@@ -1,61 +1,71 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
-import getStyle from './style';
-import { getConfiguration } from '../../config';
-import { GutterWidthContext } from '../Row';
-import ScreenClassResolver from '../../context/ScreenClassResolver';
-import { Div } from '../../primitives';
+import React, { createElement } from "react";
+import PropTypes from "prop-types";
+import getStyle from "./style";
+import { getConfiguration } from "../../config";
+import { GutterWidthContext } from "../Row";
+import ScreenClassResolver from "../../context/ScreenClassResolver";
+import { Div } from "../../primitives";
 
-const Col = React.forwardRef(({
-  children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xxl,
-  xxxl,
-  offset,
-  pull,
-  push,
-  order,
-  debug,
-  style,
-  component,
-  width,
-  ...otherProps
-}, ref) => (
-  <ScreenClassResolver>
-    {(screenClass) => (
-      <GutterWidthContext.Consumer>
-        {(gutterWidth) => {
-          const theStyle = getStyle({
-            forceWidth: width,
-            width: {
-              xs,
-              sm,
-              md,
-              lg,
-              xl,
-              xxl,
-              xxxl,
-            },
-            offset,
-            pull,
-            push,
-            order,
-            debug,
-            screenClass,
-            gutterWidth,
-            gridColumns: getConfiguration().gridColumns,
-            moreStyle: style,
-          });
-          return createElement(component, { ref, style: theStyle, ...otherProps, children });
-        }}
-      </GutterWidthContext.Consumer>
-    )}
-  </ScreenClassResolver>
-));
+const Col = React.forwardRef(
+  (
+    {
+      children = null,
+      xs = null,
+      sm = null,
+      md = null,
+      lg = null,
+      xl = null,
+      xxl = null,
+      xxxl = null,
+      offset = {},
+      pull = {},
+      push = {},
+      order = {},
+      debug = false,
+      style = {},
+      component = Div,
+      width = null,
+      ...otherProps
+    },
+    ref
+  ) => (
+    <ScreenClassResolver>
+      {(screenClass) => (
+        <GutterWidthContext.Consumer>
+          {(gutterWidth) => {
+            const theStyle = getStyle({
+              forceWidth: width,
+              width: {
+                xs,
+                sm,
+                md,
+                lg,
+                xl,
+                xxl,
+                xxxl,
+              },
+              offset,
+              pull,
+              push,
+              order,
+              debug,
+              screenClass,
+              gutterWidth,
+              gridColumns: getConfiguration().gridColumns,
+              moreStyle: style,
+            });
+            return createElement(component, {
+              ref,
+              style: theStyle,
+              ...otherProps,
+              children,
+            });
+          }}
+        </GutterWidthContext.Consumer>
+      )}
+    </ScreenClassResolver>
+  )
+);
 
 Col.propTypes = {
   /**
@@ -65,59 +75,35 @@ Col.propTypes = {
   /**
    * The width of the column for screenclass `xs`, either a number between 0 and 12, or "content"
    */
-  xs: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `sm`, either a number between 0 and 12, or "content"
    */
-  sm: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `md`, either a number between 0 and 12, or "content"
    */
-  md: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  md: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `lg`, either a number between 0 and 12, or "content"
    */
-  lg: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `xl`, either a number between 0 and 12, or "content"
    */
-  xl: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xl: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `xxl`, either a number between 0 and 12, or "content"
    */
-  xxl: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xxl: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `xxl`, either a number between 0 and 12, or "content"
    */
-  xxxl: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xxxl: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * A fixed width of the column for all screenclasses"
    */
-  width: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The offset of this column for all screenclasses
    */
@@ -169,7 +155,9 @@ Col.propTypes = {
   /**
    * Optional styling
    */
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  style: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  ),
   /**
    * Set to apply some debug styling
    */
@@ -180,25 +168,6 @@ Col.propTypes = {
   component: PropTypes.elementType,
 };
 
-Col.defaultProps = {
-  children: null,
-  xs: null,
-  sm: null,
-  md: null,
-  lg: null,
-  xl: null,
-  xxl: null,
-  xxxl: null,
-  width: null,
-  offset: {},
-  push: {},
-  pull: {},
-  style: {},
-  order: {},
-  debug: false,
-  component: Div,
-};
-
 Col.displayName = "Col";
 
 export default Col;
diff --git a/src/grid/Container/index.js b/src/grid/Container/index.js
index 0663f88b..28c9f309 100644
--- a/src/grid/Container/index.js
+++ b/src/grid/Container/index.js
@@ -1,49 +1,56 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
-import getStyle from './style';
-import { getConfiguration } from '../../config';
-import ScreenClassResolver from '../../context/ScreenClassResolver';
-import { Div } from '../../primitives';
+import React, { createElement } from "react";
+import PropTypes from "prop-types";
+import getStyle from "./style";
+import { getConfiguration } from "../../config";
+import ScreenClassResolver from "../../context/ScreenClassResolver";
+import { Div } from "../../primitives";
 
-const Container = React.forwardRef(({
-  children,
-  fluid,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xxl,
-  xxxl,
-  style,
-  component,
-  ...otherProps
-}, ref) => (
-  <ScreenClassResolver>
-    {(screenClass) => createElement(
-      component,
-      {
-        ref,
-        style: getStyle({
-          fluid,
-          xs,
-          sm,
-          md,
-          lg,
-          xl,
-          xxl,
-          xxxl,
-          screenClass,
-          containerWidths: getConfiguration().containerWidths,
-          gutterWidth: getConfiguration().gutterWidth,
-          moreStyle: style,
-        }),
-        ...otherProps,
-      },
+const Container = React.forwardRef(
+  (
+    {
       children,
-    )}
-  </ScreenClassResolver>
-));
+      fluid = false,
+      xs = false,
+      sm = false,
+      md = false,
+      lg = false,
+      xl = false,
+      xxl = false,
+      xxxl = false,
+      style = {},
+      component = Div,
+      ...otherProps
+    },
+    ref
+  ) => (
+    <ScreenClassResolver>
+      {(screenClass) =>
+        createElement(
+          component,
+          {
+            ref,
+            style: getStyle({
+              fluid,
+              xs,
+              sm,
+              md,
+              lg,
+              xl,
+              xxl,
+              xxxl,
+              screenClass,
+              containerWidths: getConfiguration().containerWidths,
+              gutterWidth: getConfiguration().gutterWidth,
+              moreStyle: style,
+            }),
+            ...otherProps,
+          },
+          children
+        )
+      }
+    </ScreenClassResolver>
+  )
+);
 
 Container.propTypes = {
   /**
@@ -92,26 +99,15 @@ Container.propTypes = {
   /**
    * Optional styling
    */
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  style: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  ),
   /**
    * Use your own component
    */
   component: PropTypes.elementType,
 };
 
-Container.defaultProps = {
-  fluid: false,
-  xs: false,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
-  xxl: false,
-  xxxl: false,
-  style: {},
-  component: Div,
-};
-
 Container.displayName = "Container";
 
 export default Container;
diff --git a/src/grid/Row/index.js b/src/grid/Row/index.js
index 89bc1586..1eb55427 100644
--- a/src/grid/Row/index.js
+++ b/src/grid/Row/index.js
@@ -1,44 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getConfiguration } from '../../config';
-import getStyle from './style';
-import { Div } from '../../primitives';
+import React from "react";
+import PropTypes from "prop-types";
+import { getConfiguration } from "../../config";
+import getStyle from "./style";
+import { Div } from "../../primitives";
 
 export const GutterWidthContext = React.createContext(false);
 
-const Row = React.forwardRef(({
-  children,
-  style,
-  align,
-  justify,
-  wrap,
-  debug,
-  nogutter,
-  gutterWidth,
-  component,
-  direction,
-  ...otherProps
-}, ref) => {
-  let theGutterWidth = getConfiguration().gutterWidth;
-  if (nogutter) theGutterWidth = 0;
-  if (typeof gutterWidth === 'number') theGutterWidth = gutterWidth;
-  const theStyle = getStyle({
-    gutterWidth: theGutterWidth,
-    align,
-    justify,
-    debug,
-    moreStyle: style,
-    direction,
-    wrap
-  });
-  return React.createElement(
-    component,
-    { ref, style: theStyle, ...otherProps },
-    <GutterWidthContext.Provider value={theGutterWidth}>
-      {children}
-    </GutterWidthContext.Provider>,
-  );
-});
+const Row = React.forwardRef(
+  (
+    {
+      children,
+      style = {},
+      align = "normal",
+      justify = "start",
+      wrap = "wrap",
+      debug = false,
+      nogutter = false,
+      gutterWidth = null,
+      component = Div,
+      direction = "row",
+      ...otherProps
+    },
+    ref
+  ) => {
+    let theGutterWidth = getConfiguration().gutterWidth;
+    if (nogutter) theGutterWidth = 0;
+    if (typeof gutterWidth === "number") theGutterWidth = gutterWidth;
+    const theStyle = getStyle({
+      gutterWidth: theGutterWidth,
+      align,
+      justify,
+      debug,
+      moreStyle: style,
+      direction,
+      wrap,
+    });
+    return React.createElement(
+      component,
+      { ref, style: theStyle, ...otherProps },
+      <GutterWidthContext.Provider value={theGutterWidth}>
+        {children}
+      </GutterWidthContext.Provider>
+    );
+  }
+);
 
 Row.propTypes = {
   /**
@@ -48,27 +53,32 @@ Row.propTypes = {
   /**
    * Vertical column alignment
    */
-  align: PropTypes.oneOf(['normal', 'start', 'center', 'end', 'stretch']),
+  align: PropTypes.oneOf(["normal", "start", "center", "end", "stretch"]),
   /**
    * Horizontal column alignment
    */
   justify: PropTypes.oneOf([
-    'start',
-    'center',
-    'end',
-    'between',
-    'around',
-    'initial',
-    'inherit',
+    "start",
+    "center",
+    "end",
+    "between",
+    "around",
+    "initial",
+    "inherit",
   ]),
   /**
    * flex-direction style attribute
    */
-  direction: PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse']),
+  direction: PropTypes.oneOf([
+    "column",
+    "row",
+    "column-reverse",
+    "row-reverse",
+  ]),
   /**
    * flex-wrap style attribute
    */
-  wrap: PropTypes.oneOf(['nowrap', 'wrap', 'reverse']),
+  wrap: PropTypes.oneOf(["nowrap", "wrap", "reverse"]),
   /**
    * No gutter for this row
    */
@@ -81,7 +91,7 @@ Row.propTypes = {
    * Optional styling
    */
   style: PropTypes.objectOf(
-    PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   ),
   /**
    * Set to apply some debug styling
@@ -90,19 +100,7 @@ Row.propTypes = {
   /**
    * Use your own component
    */
-  component: PropTypes.elementType
-};
-
-Row.defaultProps = {
-  align: 'normal',
-  justify: 'start',
-  direction: 'row',
-  wrap: 'wrap',
-  nogutter: false,
-  gutterWidth: null,
-  style: {},
-  debug: false,
-  component: Div,
+  component: PropTypes.elementType,
 };
 
 Row.displayName = "Row";
diff --git a/src/utilities/Hidden/index.js b/src/utilities/Hidden/index.js
index 13b13e1a..eedf9d2f 100644
--- a/src/utilities/Hidden/index.js
+++ b/src/utilities/Hidden/index.js
@@ -1,31 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as style from './style';
-import ScreenClassResolver from '../../context/ScreenClassResolver';
+import React from "react";
+import PropTypes from "prop-types";
+import * as style from "./style";
+import ScreenClassResolver from "../../context/ScreenClassResolver";
 
 const Hidden = ({
   children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xxl,
-  xxxl,
+  xs = false,
+  sm = false,
+  md = false,
+  lg = false,
+  xl = false,
+  xxl = false,
+  xxxl = false,
 }) => (
   <ScreenClassResolver>
-    {(screenClass) => (style.hidden({
-      screenClass,
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      xxl,
-      xxxl,
-    })
-      ? null
-      : children)}
+    {(screenClass) =>
+      style.hidden({
+        screenClass,
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+        xxl,
+        xxxl,
+      })
+        ? null
+        : children
+    }
   </ScreenClassResolver>
 );
 
@@ -64,14 +66,4 @@ Hidden.propTypes = {
   xxxl: PropTypes.bool,
 };
 
-Hidden.defaultProps = {
-  xs: false,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
-  xxl: false,
-  xxxl: false,
-};
-
 export default Hidden;
diff --git a/src/utilities/Visible/index.js b/src/utilities/Visible/index.js
index 6a97ab1c..b95101f1 100644
--- a/src/utilities/Visible/index.js
+++ b/src/utilities/Visible/index.js
@@ -1,31 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as style from './style';
-import ScreenClassResolver from '../../context/ScreenClassResolver';
+import React from "react";
+import PropTypes from "prop-types";
+import * as style from "./style";
+import ScreenClassResolver from "../../context/ScreenClassResolver";
 
 const Visible = ({
   children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xxl,
-  xxxl,
+  xs = false,
+  sm = false,
+  md = false,
+  lg = false,
+  xl = false,
+  xxl = false,
+  xxxl = false,
 }) => (
   <ScreenClassResolver>
-    {(screenClass) => (!style.visible({
-      screenClass,
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      xxl,
-      xxxl,
-    })
-      ? null
-      : children)}
+    {(screenClass) =>
+      !style.visible({
+        screenClass,
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+        xxl,
+        xxxl,
+      })
+        ? null
+        : children
+    }
   </ScreenClassResolver>
 );
 
@@ -64,14 +66,4 @@ Visible.propTypes = {
   xxxl: PropTypes.bool,
 };
 
-Visible.defaultProps = {
-  xs: false,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
-  xxl: false,
-  xxxl: false,
-};
-
 export default Visible;