From 9c8f4090b7bce7d874bbde05ba19ea823789058e Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 8 Feb 2019 10:36:08 +1100
Subject: [PATCH 01/14] fix: Shrink API WIP

---
 docs/src/App/App.tsx                          | 106 ++++++++++--------
 .../src/App/ComponentProps/ComponentProps.tsx |   6 +-
 .../src/App/ComponentRoute/ComponentRoute.tsx |  78 +++++++------
 lib/componentDocs/globsToReactDocgen.js       |   5 +-
 lib/components/Alert/Alert.tsx                |  19 +++-
 lib/components/Bullet/Bullet.css.js           |   4 +-
 lib/components/Bullet/Bullet.css.js.d.ts      |   2 +-
 lib/components/Bullet/Bullet.tsx              |  23 ++--
 lib/components/BulletList/BulletList.tsx      |  12 +-
 lib/components/Card/Card.docs.tsx             |  33 +++---
 lib/components/Card/Card.tsx                  |  16 ++-
 lib/components/Checkbox/Checkbox.tsx          |  37 ++----
 lib/components/Divider/Divider.tsx            |  32 ++----
 lib/components/FieldLabel/FieldLabel.tsx      |  16 ++-
 lib/components/FieldMessage/FieldMessage.tsx  |  40 +++----
 lib/components/Text/Text.css.js               |   3 +-
 lib/components/Text/Text.tsx                  |  15 ++-
 .../icons/ChevronIcon/ChevronIcon.tsx         |  13 ++-
 lib/components/icons/Icon/Icon.tsx            |  11 +-
 19 files changed, 242 insertions(+), 229 deletions(-)

diff --git a/docs/src/App/App.tsx b/docs/src/App/App.tsx
index 2f3019c9994..3f7ad2cfba5 100644
--- a/docs/src/App/App.tsx
+++ b/docs/src/App/App.tsx
@@ -103,54 +103,64 @@ export default withRouter(
                 paddingLeft="gutter"
                 paddingRight="gutter"
               >
-                <Text size="large" weight="strong" marginBottom="small">
-                  Tools
-                </Text>
-                <BulletList marginBottom="small">
-                  <Bullet>
-                    <a
-                      style={{ color: 'inherit' }}
-                      href="https://github.com/seek-oss/braid-design-system"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={this.closeMenu}
-                    >
-                      Source
-                    </a>
-                  </Bullet>
-                  <Bullet>
-                    <Link
-                      style={{ color: 'inherit' }}
-                      to="/playroom"
-                      target="_blank"
-                      onClick={this.closeMenu}
-                    >
-                      Playroom
-                    </Link>
-                  </Bullet>
-                </BulletList>
-                <Text size="large" weight="strong" marginBottom="small">
-                  Components
-                </Text>
-                <BulletList marginBottom="small">
-                  {Object.keys(components)
-                    .filter(x => !/icon/i.test(x))
-                    .sort()
-                    .map(componentName => (
-                      <Bullet key={componentName}>
-                        <Link
-                          style={{ color: 'inherit' }}
-                          to={`/components/${componentName}`}
-                          onClick={this.closeMenu}
-                        >
-                          {componentName}
-                        </Link>
-                      </Bullet>
-                    ))}
-                </BulletList>
-                <Text size="large" weight="strong" marginBottom="small">
-                  Icons
-                </Text>
+                <Box paddingBottom="small">
+                  <Text size="large" weight="strong">
+                    Tools
+                  </Text>
+                </Box>
+                <Box paddingBottom="small">
+                  <BulletList>
+                    <Bullet>
+                      <a
+                        style={{ color: 'inherit' }}
+                        href="https://github.com/seek-oss/braid-design-system"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={this.closeMenu}
+                      >
+                        Source
+                      </a>
+                    </Bullet>
+                    <Bullet>
+                      <Link
+                        style={{ color: 'inherit' }}
+                        to="/playroom"
+                        target="_blank"
+                        onClick={this.closeMenu}
+                      >
+                        Playroom
+                      </Link>
+                    </Bullet>
+                  </BulletList>
+                </Box>
+                <Box paddingBottom="small">
+                  <Text size="large" weight="strong">
+                    Components
+                  </Text>
+                </Box>
+                <Box paddingBottom="small">
+                  <BulletList>
+                    {Object.keys(components)
+                      .filter(x => !/icon/i.test(x))
+                      .sort()
+                      .map(componentName => (
+                        <Bullet key={componentName}>
+                          <Link
+                            style={{ color: 'inherit' }}
+                            to={`/components/${componentName}`}
+                            onClick={this.closeMenu}
+                          >
+                            {componentName}
+                          </Link>
+                        </Bullet>
+                      ))}
+                  </BulletList>
+                </Box>
+                <Box paddingBottom="small">
+                  <Text size="large" weight="strong">
+                    Icons
+                  </Text>
+                </Box>
                 <BulletList>
                   {Object.keys(components)
                     .filter(x => /icon/i.test(x) && x !== 'Icon')
diff --git a/docs/src/App/ComponentProps/ComponentProps.tsx b/docs/src/App/ComponentProps/ComponentProps.tsx
index d9032990ceb..9c6da2676e4 100644
--- a/docs/src/App/ComponentProps/ComponentProps.tsx
+++ b/docs/src/App/ComponentProps/ComponentProps.tsx
@@ -27,9 +27,9 @@ export default class ComponentProps extends Component<Props> {
 
     return Object.keys(props).length === 0 ? null : (
       <Fragment>
-        <Text weight="strong" paddingBottom="small">
-          Options
-        </Text>
+        <Box paddingBottom="small">
+          <Text weight="strong">Options</Text>
+        </Box>
         {map(props, (option, propName) => {
           if (!option) {
             return null;
diff --git a/docs/src/App/ComponentRoute/ComponentRoute.tsx b/docs/src/App/ComponentRoute/ComponentRoute.tsx
index 38f713e4c77..a056b44bc3f 100644
--- a/docs/src/App/ComponentRoute/ComponentRoute.tsx
+++ b/docs/src/App/ComponentRoute/ComponentRoute.tsx
@@ -34,36 +34,42 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {
 
     return (
       <Box>
-        <Text size="large" weight="strong" paddingBottom="small">
-          {componentName}
-        </Text>
-        {examples.length > 0 ? (
-          <Text weight="strong" paddingBottom="small">
-            Example
-            {examples.length > 1 ? 's' : ''}
+        <Box paddingBottom="small">
+          <Text size="large" weight="strong">
+            {componentName}
           </Text>
+        </Box>
+        {examples.length > 0 ? (
+          <Box paddingBottom="small">
+            <Text weight="strong">
+              Example
+              {examples.length > 1 ? 's' : ''}
+            </Text>
+          </Box>
         ) : null}
         {examples.map(({ label, render, code }, index) => (
           <Box key={index} marginBottom="xxlarge">
-            {label ? <Text paddingBottom="small">{label}</Text> : null}
+            {label ? (
+              <Box paddingBottom="small">
+                <Text>{label}</Text>
+              </Box>
+            ) : null}
             {render
               ? themes.map(theme => (
                   <Box key={theme.name} marginBottom="large">
-                    <Text color="secondary" paddingBottom="small">
-                      Theme: {theme.name}
-                    </Text>
+                    <Box paddingBottom="small">
+                      <Text color="secondary">Theme: {theme.name}</Text>
+                    </Box>
                     <ThemeProvider theme={theme}>
                       {render({ id: `${index}_${theme.name}` })}
                     </ThemeProvider>
                   </Box>
                 ))
               : null}
-            <Text color="secondary" paddingBottom="small">
-              Code:
-            </Text>
-            <Text
-              component="pre"
-              color="white"
+            <Box paddingBottom="small">
+              <Text color="secondary">Code:</Text>
+            </Box>
+            <Box
               paddingLeft="small"
               paddingRight="small"
               paddingTop="xxsmall"
@@ -74,15 +80,17 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {
                 overflowX: 'auto'
               }}
             >
-              {render
-                ? reactElementToJSXString(render({ id: 'id' }), {
-                    useBooleanShorthandSyntax: false,
-                    showDefaultProps: false,
-                    showFunctions: true
-                  })
-                : null}
-              {code ? dedent(code) : null}
-            </Text>
+              <Text component="pre" color="white">
+                {render
+                  ? reactElementToJSXString(render({ id: 'id' }), {
+                      useBooleanShorthandSyntax: false,
+                      showDefaultProps: false,
+                      showFunctions: true
+                    })
+                  : null}
+                {code ? dedent(code) : null}
+              </Text>
+            </Box>
           </Box>
         ))}
 
@@ -90,14 +98,16 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {
           <ComponentProps componentName={componentName} />
         </Box>
 
-        <Text weight="strong" paddingBottom="small">
-          Source
-        </Text>
-        <Text paddingBottom="large">
-          <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
-            View on GitHub
-          </a>
-        </Text>
+        <Box paddingBottom="small">
+          <Text weight="strong">Source</Text>
+        </Box>
+        <Box paddingBottom="large">
+          <Text>
+            <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
+              View on GitHub
+            </a>
+          </Text>
+        </Box>
       </Box>
     );
   }
diff --git a/lib/componentDocs/globsToReactDocgen.js b/lib/componentDocs/globsToReactDocgen.js
index 4b44be85694..2276a76caed 100644
--- a/lib/componentDocs/globsToReactDocgen.js
+++ b/lib/componentDocs/globsToReactDocgen.js
@@ -1,10 +1,7 @@
 const path = require('path');
 const fastGlob = require('fast-glob').async;
 const { parse: parseTs } = require('react-docgen-typescript').withCustomConfig(
-  path.join(process.cwd(), 'tsconfig.json'),
-  {
-    propFilter: prop => !/node_modules/.test(prop.parent.fileName)
-  }
+  path.join(process.cwd(), 'tsconfig.json')
 );
 
 module.exports = async ({ include = '', exclude: ignore = [] } = {}) => {
diff --git a/lib/components/Alert/Alert.tsx b/lib/components/Alert/Alert.tsx
index 8b0e7151f6b..694da841f4b 100644
--- a/lib/components/Alert/Alert.tsx
+++ b/lib/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from 'react';
-import Box, { BoxProps } from '../Box/Box';
+import Box from '../Box/Box';
 import Text from '../Text/Text';
 import InfoIcon from '../icons/InfoIcon/InfoIcon';
 import ErrorIcon from '../icons/ErrorIcon/ErrorIcon';
@@ -7,18 +7,26 @@ import styles from './Alert.css.js';
 
 type Tone = 'info' | 'critical';
 
-export interface AlertProps extends BoxProps {
+export interface AlertProps {
   tone?: Tone;
   children: ReactNode;
 }
 
 const iconForTone = (tone: Tone) => {
   if (tone === 'info') {
-    return <InfoIcon fill="white" marginRight="small" />;
+    return (
+      <Box paddingRight="small">
+        <InfoIcon fill="white" />
+      </Box>
+    );
   }
 
   if (tone === 'critical') {
-    return <ErrorIcon fill="critical" marginRight="small" />;
+    return (
+      <Box paddingRight="small">
+        <ErrorIcon fill="critical" />
+      </Box>
+    );
   }
 
   return null;
@@ -40,7 +48,7 @@ export default class Alert extends Component<AlertProps> {
   static displayName = 'Alert';
 
   render() {
-    const { tone = 'info', children, ...restProps } = this.props;
+    const { tone = 'info', children } = this.props;
 
     const icon = iconForTone(tone);
     const color = textColorForTone(tone);
@@ -52,7 +60,6 @@ export default class Alert extends Component<AlertProps> {
         paddingRight="gutter"
         paddingTop="medium"
         paddingBottom="medium"
-        {...restProps}
       >
         <div className={styles.root}>
           <div className={styles.icon}>{icon}</div>
diff --git a/lib/components/Bullet/Bullet.css.js b/lib/components/Bullet/Bullet.css.js
index bc97108a679..93705707c93 100644
--- a/lib/components/Bullet/Bullet.css.js
+++ b/lib/components/Bullet/Bullet.css.js
@@ -1,5 +1,3 @@
 export default {
-  '.root': {
-    marginLeft: '1.3em'
-  }
+  '.block': { display: 'block' }
 };
diff --git a/lib/components/Bullet/Bullet.css.js.d.ts b/lib/components/Bullet/Bullet.css.js.d.ts
index 62114034288..7a06bcd0400 100644
--- a/lib/components/Bullet/Bullet.css.js.d.ts
+++ b/lib/components/Bullet/Bullet.css.js.d.ts
@@ -1,3 +1,3 @@
 // This file is automatically generated.
 // Please do not change this file!
-export const root: string;
+export const block: string;
diff --git a/lib/components/Bullet/Bullet.tsx b/lib/components/Bullet/Bullet.tsx
index ac5c0d719b5..1de86283604 100644
--- a/lib/components/Bullet/Bullet.tsx
+++ b/lib/components/Bullet/Bullet.tsx
@@ -1,23 +1,24 @@
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import Text, { TextProps } from '../Text/Text';
+import React, { Component, ReactNode } from 'react';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
 import styles from './Bullet.css.js';
 
-export type BulletProps = TextProps;
+export interface BulletProps {
+  children?: ReactNode;
+}
 
 export default class Bullet extends Component<BulletProps> {
   static displayName = 'Bullet';
 
   render() {
-    const { className } = this.props;
+    const { children } = this.props;
 
     return (
-      <Text
-        component="li"
-        paddingBottom="xsmall"
-        className={classnames(styles.root, className)}
-        {...this.props}
-      />
+      <Text component="li">
+        <Box className={styles.block} component="span" paddingBottom="xsmall">
+          {children}
+        </Box>
+      </Text>
     );
   }
 }
diff --git a/lib/components/BulletList/BulletList.tsx b/lib/components/BulletList/BulletList.tsx
index 316d40e2cb2..fe73c6945e0 100644
--- a/lib/components/BulletList/BulletList.tsx
+++ b/lib/components/BulletList/BulletList.tsx
@@ -1,12 +1,16 @@
-import React, { Component } from 'react';
-import Box, { BoxProps } from '../Box/Box';
+import React, { Component, ReactNode } from 'react';
+import Box from '../Box/Box';
 
-export type BulletListProps = BoxProps;
+export interface BulletListProps {
+  children?: ReactNode;
+}
 
 export default class BulletList extends Component<BulletListProps> {
   static displayName = 'BulletList';
 
   render() {
-    return <Box component="ul" {...this.props} />;
+    const { children } = this.props;
+
+    return <Box component="ul">{children}</Box>;
   }
 }
diff --git a/lib/components/Card/Card.docs.tsx b/lib/components/Card/Card.docs.tsx
index 3e297e2252e..e7f71551094 100644
--- a/lib/components/Card/Card.docs.tsx
+++ b/lib/components/Card/Card.docs.tsx
@@ -16,22 +16,25 @@ const docs: ComponentDocs = {
           paddingBottom="small"
           style={{ backgroundColor: '#ccc' }}
         >
-          <Card
-            paddingLeft="gutter"
-            paddingRight="gutter"
-            paddingTop="small"
-            paddingBottom="large"
-          >
-            <Text>This text is inside a card.</Text>
+          <Card>
+            <Box
+              paddingLeft="gutter"
+              paddingRight="gutter"
+              paddingTop="small"
+              paddingBottom="large"
+            >
+              <Text>This text is inside a card.</Text>
+            </Box>
           </Card>
-          <Card
-            paddingLeft="gutter"
-            paddingRight="gutter"
-            paddingTop="small"
-            paddingBottom="large"
-            marginBottom="none"
-          >
-            <Text>This text is inside a card.</Text>
+          <Card>
+            <Box
+              paddingLeft="gutter"
+              paddingRight="gutter"
+              paddingTop="small"
+              paddingBottom="large"
+            >
+              <Text>This text is inside a card.</Text>
+            </Box>
           </Card>
         </Box>
       )
diff --git a/lib/components/Card/Card.tsx b/lib/components/Card/Card.tsx
index 67715d2b3f7..af47f4309a9 100644
--- a/lib/components/Card/Card.tsx
+++ b/lib/components/Card/Card.tsx
@@ -1,12 +1,20 @@
-import React, { Component } from 'react';
-import Box, { BoxProps } from '../Box/Box';
+import React, { Component, ReactNode } from 'react';
+import Box from '../Box/Box';
 
-export type CardProps = BoxProps;
+export interface CardProps {
+  children?: ReactNode;
+}
 
 export default class Card extends Component<CardProps> {
   static displayName = 'Card';
 
   render() {
-    return <Box backgroundColor="card" marginBottom="medium" {...this.props} />;
+    const { children } = this.props;
+
+    return (
+      <Box backgroundColor="card" marginBottom="medium">
+        {children}
+      </Box>
+    );
   }
 }
diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index 3ed02dc83f4..987ba354858 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,5 @@
 import React, { Component, ReactNode, AllHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import { Omit } from 'utility-types';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 import getCheckboxRadioSize from '../private/getCheckboxRadioSize';
 import Box from '../Box/Box';
@@ -22,19 +21,16 @@ const textColorForState = (disabled: boolean, hovered: boolean) => {
   return 'neutral';
 };
 
+type InputProps = AllHTMLAttributes<HTMLInputElement>;
+type RequiredInputProps = 'id' | 'checked' | 'onChange';
+type OptionalInputProps = 'disabled' | 'children';
 export interface CheckboxProps
-  extends Omit<AllHTMLAttributes<HTMLElement>, 'label'> {
+  extends Required<Pick<InputProps, RequiredInputProps>>,
+    Pick<InputProps, OptionalInputProps> {
   variant?: 'default' | 'inChecklistCard';
-  id: string;
-  checked: boolean;
   label: ReactNode;
-  disabled?: boolean;
-  inputProps?: object;
-  labelProps?: object;
   tone?: 'neutral' | 'critical' | 'positive';
   message?: ReactNode | false;
-  messageProps?: object;
-  children?: ReactNode;
 }
 
 interface State {
@@ -73,15 +69,9 @@ export default class Checkbox extends Component<CheckboxProps, State> {
             checked,
             label,
             disabled = false,
-            className,
-            style,
-            inputProps,
-            labelProps,
             tone,
             message,
-            messageProps,
-            children,
-            ...restProps
+            children
           } = this.props;
           const { hovered } = this.state;
 
@@ -91,12 +81,11 @@ export default class Checkbox extends Component<CheckboxProps, State> {
 
           return (
             <div
-              className={classnames(className, {
+              className={classnames({
                 [theme.atoms.paddingBottom.xsmall]: inChecklistCard,
                 [theme.atoms.backgroundColor.selection]:
                   inChecklistCard && (checked || hovered) && !disabled
               })}
-              style={style}
             >
               <input
                 className={styles.realCheckbox}
@@ -105,8 +94,6 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                 checked={checked}
                 disabled={disabled}
                 aria-describedby={fieldMessageId}
-                {...restProps}
-                {...inputProps}
               />
               <div className={styles.content}>
                 <Box
@@ -127,7 +114,6 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                     )
                   }}
                   htmlFor={id}
-                  {...labelProps}
                   onMouseOver={this.handleMouseOver}
                   onMouseOut={this.handleMouseOut}
                 >
@@ -207,14 +193,14 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                         theme.atoms.transition.fast
                       )}
                     />
-                    <TickIcon
-                      size="fill"
+                    <Box
                       className={classnames(
                         styles.checkboxIcon,
-                        theme.atoms.fill.white,
                         theme.atoms.transition.fast
                       )}
-                    />
+                    >
+                      <TickIcon size="fill" fill="white" />
+                    </Box>
                   </Box>
                   <Text
                     size="interaction"
@@ -249,7 +235,6 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                     id={fieldMessageId}
                     tone={tone}
                     message={message}
-                    {...messageProps}
                   />
                 </Box>
               ) : null}
diff --git a/lib/components/Divider/Divider.tsx b/lib/components/Divider/Divider.tsx
index 01dac145875..6b0c06bec2d 100644
--- a/lib/components/Divider/Divider.tsx
+++ b/lib/components/Divider/Divider.tsx
@@ -1,35 +1,21 @@
 import React, { Component } from 'react';
-import classnames from 'classnames';
 import styles from './Divider.css.js';
-import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
-import Box, { BoxProps } from '../Box/Box';
-import { BorderColorVariants, BorderWidthVariants } from '../../themes/theme';
+import Box from '../Box/Box';
 
-export interface DividerProps extends BoxProps {
-  borderColor?: BorderColorVariants;
-  borderWidth?: BorderWidthVariants;
-}
+export type DividerProps = {};
 
 export default class Divider extends Component<DividerProps> {
   static displayName = 'Divider';
 
   render() {
-    const { borderColor, borderWidth, className, ...restProps } = this.props;
-
     return (
-      <ThemeConsumer>
-        {theme => (
-          <Box className={classnames(styles.root, className)} {...restProps}>
-            <div
-              className={classnames(
-                styles.divider,
-                theme.atoms.borderWidth[borderWidth || 'standard'],
-                theme.atoms.borderColor[borderColor || 'standard']
-              )}
-            />
-          </Box>
-        )}
-      </ThemeConsumer>
+      <Box className={styles.root}>
+        <Box
+          borderWidth="standard"
+          borderColor="standard"
+          className={styles.divider}
+        />
+      </Box>
     );
   }
 }
diff --git a/lib/components/FieldLabel/FieldLabel.tsx b/lib/components/FieldLabel/FieldLabel.tsx
index 9954fc46a0b..99ad997afec 100644
--- a/lib/components/FieldLabel/FieldLabel.tsx
+++ b/lib/components/FieldLabel/FieldLabel.tsx
@@ -1,12 +1,20 @@
-import React, { Component } from 'react';
-import Text, { TextProps } from '../Text/Text';
+import React, { Component, ReactNode } from 'react';
+import Text from '../Text/Text';
 
-export type FieldLabelProps = TextProps;
+export interface FieldLabelProps {
+  children?: ReactNode;
+}
 
 export default class FieldLabel extends Component<FieldLabelProps> {
   static displayName = 'FieldLabel';
 
   render() {
-    return <Text component="label" weight="strong" {...this.props} />;
+    const { children } = this.props;
+
+    return (
+      <Text component="label" weight="strong">
+        {children}
+      </Text>
+    );
   }
 }
diff --git a/lib/components/FieldMessage/FieldMessage.tsx b/lib/components/FieldMessage/FieldMessage.tsx
index 51843ba8cb2..a8370ec3e4b 100644
--- a/lib/components/FieldMessage/FieldMessage.tsx
+++ b/lib/components/FieldMessage/FieldMessage.tsx
@@ -1,33 +1,31 @@
 import React, { Component, ReactNode } from 'react';
-import classnames from 'classnames';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
-import { Theme } from '../../themes/theme';
+import Box from '../Box/Box';
 import Text, { TextProps } from '../Text/Text';
 import ErrorIcon from '../icons/ErrorIcon/ErrorIcon';
 import TickCircleIcon from '../icons/TickCircleIcon/TickCircleIcon';
 import styles from './FieldMessage.css.js';
 
 export interface FieldMessageProps extends TextProps {
+  id?: string;
   tone?: 'neutral' | 'critical' | 'positive';
   message: ReactNode | false;
 }
 
-const renderIcon = (theme: Theme, tone: FieldMessageProps['tone']) => {
+const renderIcon = (tone: FieldMessageProps['tone']) => {
   if (tone === 'critical') {
     return (
-      <ErrorIcon
-        fill="critical"
-        className={classnames(styles.icon, theme.atoms.marginRight.xsmall)}
-      />
+      <Box paddingRight="xsmall" className={styles.icon}>
+        <ErrorIcon fill="critical" />
+      </Box>
     );
   }
 
   if (tone === 'positive') {
     return (
-      <TickCircleIcon
-        fill="positive"
-        className={classnames(styles.icon, theme.atoms.marginRight.xsmall)}
-      />
+      <Box paddingRight="xsmall" className={styles.icon}>
+        <TickCircleIcon fill="positive" />
+      </Box>
     );
   }
 
@@ -38,19 +36,21 @@ export default class FieldMessage extends Component<FieldMessageProps> {
   static displayName = 'FieldMessage';
 
   render() {
-    const { tone = 'neutral', message, ...restProps } = this.props;
+    const { id, tone = 'neutral', message } = this.props;
 
     return message === false ? null : (
       <ThemeConsumer>
         {theme => (
-          <Text paddingBottom="small" color={tone} tabIndex={-1} {...restProps}>
-            <div className={styles.content}>
-              {/* This element acts as a min-height, preserving vertical space for the message: */}
-              <div className={theme.atoms.height.standardText} />
-              {renderIcon(theme, tone)}
-              <div>{message}</div>
-            </div>
-          </Text>
+          <Box id={id} paddingBottom="small" tabIndex={-1}>
+            <Text color={tone}>
+              <div className={styles.content}>
+                {/* This element acts as a min-height, preserving vertical space for the message: */}
+                <div className={theme.atoms.height.standardText} />
+                {renderIcon(tone)}
+                <div>{message}</div>
+              </div>
+            </Text>
+          </Box>
         )}
       </ThemeConsumer>
     );
diff --git a/lib/components/Text/Text.css.js b/lib/components/Text/Text.css.js
index 6cee325927e..00ca02daa6d 100644
--- a/lib/components/Text/Text.css.js
+++ b/lib/components/Text/Text.css.js
@@ -4,6 +4,7 @@ export default {
   },
   '.listItem': {
     display: 'list-item',
-    listStyle: 'disc'
+    listStyle: 'disc',
+    marginLeft: '1.3em'
   }
 };
diff --git a/lib/components/Text/Text.tsx b/lib/components/Text/Text.tsx
index 90227504338..504c5f8321c 100644
--- a/lib/components/Text/Text.tsx
+++ b/lib/components/Text/Text.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-import { Omit } from 'utility-types';
+import React, { Component, ReactNode } from 'react';
 import classnames from 'classnames';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 import styles from './Text.css.js';
@@ -11,7 +10,8 @@ import {
   TransformVariants
 } from '../../themes/theme';
 
-export interface TextProps extends Omit<BoxProps, 'size'> {
+export interface TextProps extends Pick<BoxProps, 'component'> {
+  children?: ReactNode;
   size?: FontSizeVariants;
   color?: ColorVariants;
   weight?: FontWeightVariants;
@@ -37,8 +37,7 @@ export default class Text extends Component<TextProps> {
             color,
             weight,
             baseline = true,
-            className,
-            ...restProps
+            children
           } = this.props;
 
           const transformSize = `${size}Text`;
@@ -51,7 +50,6 @@ export default class Text extends Component<TextProps> {
             <Box
               component={component}
               className={classnames(
-                className,
                 styles.block,
                 theme.atoms.fontFamily.text,
                 theme.atoms.color[color || 'neutral'],
@@ -63,8 +61,9 @@ export default class Text extends Component<TextProps> {
                     typeof component === 'string' && /^li$/i.test(component)
                 }
               )}
-              {...restProps}
-            />
+            >
+              {children}
+            </Box>
           );
         }}
       </ThemeConsumer>
diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.tsx b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
index ac918071a6d..1786e682dd8 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.tsx
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Omit } from 'utility-types';
+import Box from '../../Box/Box';
 import Icon, { IconProps } from '../Icon/Icon';
 import ChevronSvg from './ChevronSvg';
 import styles from './ChevronIcon.css.js';
@@ -13,18 +14,18 @@ export default class ChevronIcon extends Component<ChevronIconProps> {
   static displayName = 'ChevronIcon';
 
   render() {
-    const { className, direction = 'down', ...restProps } = this.props;
+    const { direction = 'down' } = this.props;
 
     return (
-      <Icon
-        svgComponent={ChevronSvg}
-        className={classnames(className, styles.root, {
+      <Box
+        className={classnames(styles.root, {
           [styles.up]: direction === 'up',
           [styles.left]: direction === 'left',
           [styles.right]: direction === 'right'
         })}
-        {...restProps}
-      />
+      >
+        <Icon svgComponent={ChevronSvg} />
+      </Box>
     );
   }
 }
diff --git a/lib/components/icons/Icon/Icon.tsx b/lib/components/icons/Icon/Icon.tsx
index 810ff419f46..288a52aca5a 100644
--- a/lib/components/icons/Icon/Icon.tsx
+++ b/lib/components/icons/Icon/Icon.tsx
@@ -1,12 +1,11 @@
 import React, { Component, ComponentType } from 'react';
-import { Omit } from 'utility-types';
 import classnames from 'classnames';
-import Box, { BoxProps } from '../../Box/Box';
+import Box from '../../Box/Box';
 import ThemeConsumer from '../../ThemeConsumer/ThemeConsumer';
 import styles from './Icon.css.js';
 import { TextSize, FillVariants, SizeVariants } from '../../../themes/theme';
 
-export interface IconProps extends Omit<BoxProps, 'size'> {
+export interface IconProps {
   size?: TextSize | 'fill';
   inline?: boolean;
   fill?: FillVariants;
@@ -26,12 +25,10 @@ export default class Icon extends Component<IconProps> {
       <ThemeConsumer>
         {theme => {
           const {
-            className,
             size = 'standard',
             svgComponent,
             inline = false,
-            fill,
-            ...restProps
+            fill
           } = this.props;
           const sizeAtom = `${size}Text${inline ? 'Inline' : ''}`;
           const widthAtom = isSizeVariant(theme.atoms.width, sizeAtom)
@@ -45,7 +42,6 @@ export default class Icon extends Component<IconProps> {
             <Box
               component={svgComponent}
               className={classnames(
-                className,
                 widthAtom,
                 heightAtom,
                 theme.atoms.fill[fill!],
@@ -54,7 +50,6 @@ export default class Icon extends Component<IconProps> {
                   [styles.inline]: inline
                 }
               )}
-              {...restProps}
             />
           );
         }}

From 26d765531a1df19f3f8fb1ded36af03e80f41b60 Mon Sep 17 00:00:00 2001
From: Matt Jones <mattjones701@gmail.com>
Date: Thu, 14 Feb 2019 10:47:58 +1100
Subject: [PATCH 02/14] fix: Finish shrink of API surface area

---
 .../Alert/__snapshots__/Alert.test.tsx.snap   | 392 +++++----
 .../Bullet/__snapshots__/Bullet.test.tsx.snap |  32 +-
 .../__snapshots__/Checkbox.test.tsx.snap      | 808 +++++++++++-------
 .../__snapshots__/ChecklistCard.test.tsx.snap | 448 ++++++----
 lib/components/Divider/Divider.tsx            |   4 +-
 .../__snapshots__/Divider.test.tsx.snap       |   8 +-
 .../__snapshots__/FieldMessage.test.tsx.snap  | 408 +++++----
 lib/components/Radio/Radio.tsx                |  29 +-
 .../Radio/__snapshots__/Radio.test.tsx.snap   | 368 +++++---
 lib/components/Strong/Strong.tsx              |  16 +-
 .../Strong/__snapshots__/Strong.test.tsx.snap |  16 +-
 .../__snapshots__/ChevronIcon.test.tsx.snap   | 616 +++++++------
 lib/components/private/examplesForIcon.tsx    |  17 +-
 13 files changed, 1888 insertions(+), 1274 deletions(-)

diff --git a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
index 168ad742d14..50dfdf5600a 100644
--- a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -10,16 +10,20 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__critical Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 512 512"
-        width="16"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -40,24 +44,28 @@ exports[`Alert Theme: jobStreet Tones default 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -76,24 +84,28 @@ exports[`Alert Theme: jobStreet Tones info 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -114,16 +126,20 @@ exports[`Alert Theme: seekAnz Tones critical 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__critical Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 512 512"
-        width="16"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -144,24 +160,28 @@ exports[`Alert Theme: seekAnz Tones default 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -180,24 +200,28 @@ exports[`Alert Theme: seekAnz Tones info 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -218,16 +242,20 @@ exports[`Alert Theme: seekAsia Tones critical 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__critical Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 512 512"
-        width="16"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -248,24 +276,28 @@ exports[`Alert Theme: seekAsia Tones default 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -284,24 +316,28 @@ exports[`Alert Theme: seekAsia Tones info 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -322,16 +358,20 @@ exports[`Alert Theme: wireframe Tones critical 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__critical Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 512 512"
-        width="16"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -352,24 +392,28 @@ exports[`Alert Theme: wireframe Tones default 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
@@ -388,24 +432,28 @@ exports[`Alert Theme: wireframe Tones info 1`] = `
     <div
       class="Alert__icon"
     >
-      <svg
-        class="width__standardText height__standardText fill__white Box__root borderColor__standard marginRight__small"
-        height="16"
-        viewBox="0 0 30 30"
-        width="16"
-        x="0"
-        y="0"
+      <div
+        class="Box__root borderColor__standard paddingRight__small"
       >
-        <path
-          d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
-        />
-        <path
-          d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
-        />
-        <path
-          d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
-        />
-      </svg>
+        <svg
+          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 30 30"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M14.905,21.843c-0.552,0-1-0.447-1-1v-8.236c0-0.552,0.448-1,1-1s1,0.448,1,1v8.236 C15.905,21.396,15.458,21.843,14.905,21.843z"
+          />
+          <path
+            d="M14.905,10.208c-0.552,0-1-0.448-1-1s0.448-1.025,1-1.025s1,0.422,1,0.975v0.051 C15.905,9.76,15.458,10.208,14.905,10.208z"
+          />
+          <path
+            d="M15.001,28.499C7.556,28.499,1.499,22.443,1.499,15c0-7.444,6.057-13.5,13.502-13.5 c7.442,0,13.498,6.056,13.498,13.5C28.499,22.443,22.443,28.499,15.001,28.499z M15.001,3.501C8.659,3.501,3.499,8.66,3.499,15 c0,6.34,5.16,11.499,11.502,11.499c6.34,0,11.498-5.158,11.498-11.499C26.499,8.66,21.341,3.501,15.001,3.501z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="Text__block fontFamily__text color__white fontSize__standard fontWeight__regular Box__root borderColor__standard"
diff --git a/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap b/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap
index e2d988043ff..9b7839895c6 100644
--- a/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap
+++ b/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap
@@ -2,32 +2,48 @@
 
 exports[`Bullet Theme: jobStreet Default 1`] = `
 <li
-  class="Bullet__root Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard paddingBottom__xsmall"
+  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard"
 >
-  Bullet
+  <span
+    class="Bullet__block Box__root borderColor__standard paddingBottom__xsmall"
+  >
+    Bullet
+  </span>
 </li>
 `;
 
 exports[`Bullet Theme: seekAnz Default 1`] = `
 <li
-  class="Bullet__root Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard paddingBottom__xsmall"
+  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard"
 >
-  Bullet
+  <span
+    class="Bullet__block Box__root borderColor__standard paddingBottom__xsmall"
+  >
+    Bullet
+  </span>
 </li>
 `;
 
 exports[`Bullet Theme: seekAsia Default 1`] = `
 <li
-  class="Bullet__root Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard paddingBottom__xsmall"
+  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard"
 >
-  Bullet
+  <span
+    class="Bullet__block Box__root borderColor__standard paddingBottom__xsmall"
+  >
+    Bullet
+  </span>
 </li>
 `;
 
 exports[`Bullet Theme: wireframe Default 1`] = `
 <li
-  class="Bullet__root Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard paddingBottom__xsmall"
+  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Text__listItem Box__root borderColor__standard"
 >
-  Bullet
+  <span
+    class="Bullet__block Box__root borderColor__standard paddingBottom__xsmall"
+  >
+    Bullet
+  </span>
 </li>
 `;
diff --git a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 0f373aa633f..b47b9fb5dfa 100644
--- a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -42,16 +42,20 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -64,17 +68,21 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -123,16 +131,20 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -155,17 +167,21 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -213,16 +229,20 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -245,17 +265,21 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -303,16 +327,20 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -325,17 +353,21 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -384,16 +416,20 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 1;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -416,28 +452,36 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
@@ -487,16 +531,20 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -509,17 +557,21 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -568,16 +620,20 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -600,17 +656,21 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -658,16 +718,20 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -690,17 +754,21 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -748,16 +816,20 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -770,17 +842,21 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -829,16 +905,20 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 1;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -861,28 +941,36 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
@@ -932,16 +1020,20 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -954,17 +1046,21 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1013,16 +1109,20 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -1045,17 +1145,21 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1103,16 +1207,20 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -1135,17 +1243,21 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1193,16 +1305,20 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -1215,17 +1331,21 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1274,16 +1394,20 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 1;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -1306,28 +1430,36 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
@@ -1377,16 +1509,20 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -1399,17 +1535,21 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1458,16 +1598,20 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -1490,17 +1634,21 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1548,16 +1696,20 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -1580,17 +1732,21 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1638,16 +1794,20 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 0;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -1660,17 +1820,21 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1719,16 +1883,20 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
           class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
           style="opacity: 1;"
         />
-        <svg
-          class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-          height="16"
-          viewBox="90.471 302.809 823 823"
-          width="16"
+        <div
+          class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
-          <path
-            d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-          />
-        </svg>
+          <svg
+            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            height="16"
+            viewBox="90.471 302.809 823 823"
+            width="16"
+          >
+            <path
+              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__strong Box__root borderColor__standard"
@@ -1751,28 +1919,36 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
index a2ba6cb6201..d32ebc7e6dc 100644
--- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
+++ b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
@@ -44,16 +44,20 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -66,17 +70,21 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="1-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -85,7 +93,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -128,16 +136,20 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -150,17 +162,21 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="2-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -169,7 +185,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -212,16 +228,20 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -234,17 +254,21 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="3-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -296,16 +320,20 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -318,17 +346,21 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="1-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -337,7 +369,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -380,16 +412,20 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -402,17 +438,21 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="2-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -421,7 +461,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -464,16 +504,20 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -486,17 +530,21 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="3-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -548,16 +596,20 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -570,17 +622,21 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="1-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -589,7 +645,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -632,16 +688,20 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -654,17 +714,21 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="2-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -673,7 +737,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -716,16 +780,20 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -738,17 +806,21 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="3-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -800,16 +872,20 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -822,17 +898,21 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="1-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -841,7 +921,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -884,16 +964,20 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -906,17 +990,21 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="2-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
@@ -925,7 +1013,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
     class="Divider__root Box__root borderColor__standard"
   >
     <div
-      class="Divider__divider borderWidth__standard borderColor__standard"
+      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
     />
   </div>
   <div
@@ -968,16 +1056,20 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
             style="opacity: 0;"
           />
-          <svg
-            class="Checkbox__checkboxIcon fill__white transition__fast Icon__fillSize Box__root borderColor__standard"
-            height="16"
-            viewBox="90.471 302.809 823 823"
-            width="16"
+          <div
+            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
-            <path
-              d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-            />
-          </svg>
+            <svg
+              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              height="16"
+              viewBox="90.471 302.809 823 823"
+              width="16"
+            >
+              <path
+                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+              />
+            </svg>
+          </div>
         </div>
         <div
           class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
@@ -990,17 +1082,21 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
       class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+        class="Box__root borderColor__standard paddingBottom__small"
         id="3-message"
         tabindex="-1"
       >
         <div
-          class="FieldMessage__content"
+          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
         >
           <div
-            class="height__standardText"
-          />
-          <div />
+            class="FieldMessage__content"
+          >
+            <div
+              class="height__standardText"
+            />
+            <div />
+          </div>
         </div>
       </div>
     </div>
diff --git a/lib/components/Divider/Divider.tsx b/lib/components/Divider/Divider.tsx
index 6b0c06bec2d..ed2547472e1 100644
--- a/lib/components/Divider/Divider.tsx
+++ b/lib/components/Divider/Divider.tsx
@@ -2,9 +2,7 @@ import React, { Component } from 'react';
 import styles from './Divider.css.js';
 import Box from '../Box/Box';
 
-export type DividerProps = {};
-
-export default class Divider extends Component<DividerProps> {
+export default class Divider extends Component<{}> {
   static displayName = 'Divider';
 
   render() {
diff --git a/lib/components/Divider/__snapshots__/Divider.test.tsx.snap b/lib/components/Divider/__snapshots__/Divider.test.tsx.snap
index 2e4260c1d0b..a6abd243345 100644
--- a/lib/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/lib/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Divider Theme: jobStreet Default 1`] = `
   class="Divider__root Box__root borderColor__standard"
 >
   <div
-    class="Divider__divider borderWidth__standard borderColor__standard"
+    class="Divider__divider Box__root borderColor__standard borderWidth__standard"
   />
 </div>
 `;
@@ -15,7 +15,7 @@ exports[`Divider Theme: seekAnz Default 1`] = `
   class="Divider__root Box__root borderColor__standard"
 >
   <div
-    class="Divider__divider borderWidth__standard borderColor__standard"
+    class="Divider__divider Box__root borderColor__standard borderWidth__standard"
   />
 </div>
 `;
@@ -25,7 +25,7 @@ exports[`Divider Theme: seekAsia Default 1`] = `
   class="Divider__root Box__root borderColor__standard"
 >
   <div
-    class="Divider__divider borderWidth__standard borderColor__standard"
+    class="Divider__divider Box__root borderColor__standard borderWidth__standard"
   />
 </div>
 `;
@@ -35,7 +35,7 @@ exports[`Divider Theme: wireframe Default 1`] = `
   class="Divider__root Box__root borderColor__standard"
 >
   <div
-    class="Divider__divider borderWidth__standard borderColor__standard"
+    class="Divider__divider Box__root borderColor__standard borderWidth__standard"
   />
 </div>
 `;
diff --git a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
index ab0e5bfad96..26ca68cf907 100644
--- a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
+++ b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
@@ -2,27 +2,35 @@
 
 exports[`FieldMessage Theme: jobStreet Critical 1`] = `
 <div
-  class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 512 512"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -30,17 +38,21 @@ exports[`FieldMessage Theme: jobStreet Critical 1`] = `
 
 exports[`FieldMessage Theme: jobStreet Default 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div>
-      Message
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -48,16 +60,20 @@ exports[`FieldMessage Theme: jobStreet Default 1`] = `
 
 exports[`FieldMessage Theme: jobStreet Empty 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div />
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div />
+    </div>
   </div>
 </div>
 `;
@@ -66,27 +82,35 @@ exports[`FieldMessage Theme: jobStreet False 1`] = `null`;
 
 exports[`FieldMessage Theme: jobStreet Positive 1`] = `
 <div
-  class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__positive Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -94,27 +118,35 @@ exports[`FieldMessage Theme: jobStreet Positive 1`] = `
 
 exports[`FieldMessage Theme: seekAnz Critical 1`] = `
 <div
-  class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 512 512"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -122,17 +154,21 @@ exports[`FieldMessage Theme: seekAnz Critical 1`] = `
 
 exports[`FieldMessage Theme: seekAnz Default 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div>
-      Message
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -140,16 +176,20 @@ exports[`FieldMessage Theme: seekAnz Default 1`] = `
 
 exports[`FieldMessage Theme: seekAnz Empty 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div />
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div />
+    </div>
   </div>
 </div>
 `;
@@ -158,27 +198,35 @@ exports[`FieldMessage Theme: seekAnz False 1`] = `null`;
 
 exports[`FieldMessage Theme: seekAnz Positive 1`] = `
 <div
-  class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__positive Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -186,27 +234,35 @@ exports[`FieldMessage Theme: seekAnz Positive 1`] = `
 
 exports[`FieldMessage Theme: seekAsia Critical 1`] = `
 <div
-  class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 512 512"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -214,17 +270,21 @@ exports[`FieldMessage Theme: seekAsia Critical 1`] = `
 
 exports[`FieldMessage Theme: seekAsia Default 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div>
-      Message
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -232,16 +292,20 @@ exports[`FieldMessage Theme: seekAsia Default 1`] = `
 
 exports[`FieldMessage Theme: seekAsia Empty 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div />
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div />
+    </div>
   </div>
 </div>
 `;
@@ -250,27 +314,35 @@ exports[`FieldMessage Theme: seekAsia False 1`] = `null`;
 
 exports[`FieldMessage Theme: seekAsia Positive 1`] = `
 <div
-  class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__positive Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -278,27 +350,35 @@ exports[`FieldMessage Theme: seekAsia Positive 1`] = `
 
 exports[`FieldMessage Theme: wireframe Critical 1`] = `
 <div
-  class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 512 512"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 512 512"
+          width="16"
+        >
+          <path
+            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -306,17 +386,21 @@ exports[`FieldMessage Theme: wireframe Critical 1`] = `
 
 exports[`FieldMessage Theme: wireframe Default 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div>
-      Message
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
@@ -324,16 +408,20 @@ exports[`FieldMessage Theme: wireframe Default 1`] = `
 
 exports[`FieldMessage Theme: wireframe Empty 1`] = `
 <div
-  class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <div />
+      class="FieldMessage__content"
+    >
+      <div
+        class="height__standardText"
+      />
+      <div />
+    </div>
   </div>
 </div>
 `;
@@ -342,27 +430,35 @@ exports[`FieldMessage Theme: wireframe False 1`] = `null`;
 
 exports[`FieldMessage Theme: wireframe Positive 1`] = `
 <div
-  class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+  class="Box__root borderColor__standard paddingBottom__small"
   tabindex="-1"
 >
   <div
-    class="FieldMessage__content"
+    class="Text__block fontFamily__text color__positive fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
   >
     <div
-      class="height__standardText"
-    />
-    <svg
-      class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__positive Box__root borderColor__standard"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      class="FieldMessage__content"
     >
-      <path
-        d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+      <div
+        class="height__standardText"
       />
-    </svg>
-    <div>
-      Message
+      <div
+        class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+      >
+        <svg
+          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 .5C3.86.5.5 3.858.5 8c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C15.5 3.858 12.142.5 8 .5zm4.47 5.328l-5.59 5.98c-.14.152-.34.238-.546.238-.208 0-.405-.086-.547-.237L3.537 9.41c-.284-.303-.268-.777.034-1.06.303-.283.777-.27 1.062.033l1.7 1.814 5.042-5.397c.282-.303.758-.318 1.06-.036.302.284.32.758.036 1.06z"
+          />
+        </svg>
+      </div>
+      <div>
+        Message
+      </div>
     </div>
   </div>
 </div>
diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx
index cb227ffd1e1..08adf2ca699 100644
--- a/lib/components/Radio/Radio.tsx
+++ b/lib/components/Radio/Radio.tsx
@@ -1,6 +1,5 @@
 import React, { Component, ReactNode, AllHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import { Omit } from 'utility-types';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 import getCheckboxRadioSize from '../private/getCheckboxRadioSize';
 import Box from '../Box/Box';
@@ -21,19 +20,16 @@ const textColorForState = (disabled: boolean, hovered: boolean) => {
   return 'neutral';
 };
 
+type InputProps = AllHTMLAttributes<HTMLInputElement>;
+type RequiredInputProps = 'id' | 'checked' | 'onChange';
+type OptionalInputProps = 'disabled' | 'children';
 export interface RadioProps
-  extends Omit<AllHTMLAttributes<HTMLElement>, 'label'> {
+  extends Required<Pick<InputProps, RequiredInputProps>>,
+    Pick<InputProps, OptionalInputProps> {
   variant?: 'default' | 'inChecklistCard';
-  id: string;
-  checked: boolean;
   label: ReactNode;
-  disabled?: boolean;
-  inputProps?: object;
-  labelProps?: object;
   tone?: 'neutral' | 'critical' | 'positive';
   message?: ReactNode | false;
-  messageProps?: object;
-  children?: ReactNode;
 }
 
 interface State {
@@ -72,15 +68,9 @@ export default class Radio extends Component<RadioProps, State> {
             label,
             checked,
             disabled = false,
-            className,
-            style,
-            inputProps,
-            labelProps,
             tone = 'neutral',
             message,
-            messageProps,
-            children,
-            ...restProps
+            children
           } = this.props;
 
           const { hovered } = this.state;
@@ -91,12 +81,11 @@ export default class Radio extends Component<RadioProps, State> {
 
           return (
             <div
-              className={classnames(className, {
+              className={classnames({
                 [theme.atoms.paddingBottom.xsmall]: inChecklistCard,
                 [theme.atoms.backgroundColor.selection]:
                   inChecklistCard && (checked || hovered) && !disabled
               })}
-              style={style}
             >
               <input
                 className={styles.realRadio}
@@ -105,8 +94,6 @@ export default class Radio extends Component<RadioProps, State> {
                 checked={checked}
                 disabled={disabled}
                 aria-describedby={fieldMessageId}
-                {...restProps}
-                {...inputProps}
               />
               <div className={styles.content}>
                 <Box
@@ -128,7 +115,6 @@ export default class Radio extends Component<RadioProps, State> {
                     )
                   }}
                   htmlFor={id}
-                  {...labelProps}
                   onMouseOver={this.handleMouseOver}
                   onMouseOut={this.handleMouseOut}
                 >
@@ -227,7 +213,6 @@ export default class Radio extends Component<RadioProps, State> {
                     id={fieldMessageId}
                     tone={tone}
                     message={message}
-                    {...messageProps}
                   />
                 </Box>
               ) : null}
diff --git a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
index c8ff475aa4b..91962d2bc66 100644
--- a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -55,17 +55,21 @@ exports[`Radio Theme: jobStreet Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -137,17 +141,21 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -218,17 +226,21 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -289,17 +301,21 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -371,28 +387,36 @@ exports[`Radio Theme: jobStreet With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
@@ -455,17 +479,21 @@ exports[`Radio Theme: seekAnz Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -537,17 +565,21 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -618,17 +650,21 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -689,17 +725,21 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -771,28 +811,36 @@ exports[`Radio Theme: seekAnz With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
@@ -855,17 +903,21 @@ exports[`Radio Theme: seekAsia Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -937,17 +989,21 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1018,17 +1074,21 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1089,17 +1149,21 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1171,28 +1235,36 @@ exports[`Radio Theme: seekAsia With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
@@ -1255,17 +1327,21 @@ exports[`Radio Theme: wireframe Checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1337,17 +1413,21 @@ exports[`Radio Theme: wireframe Children when checked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1418,17 +1498,21 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1489,17 +1573,21 @@ exports[`Radio Theme: wireframe Unchecked 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <div />
+          class="FieldMessage__content"
+        >
+          <div
+            class="height__standardText"
+          />
+          <div />
+        </div>
       </div>
     </div>
   </div>
@@ -1571,28 +1659,36 @@ exports[`Radio Theme: wireframe With message 1`] = `
     class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
   >
     <div
-      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard paddingBottom__small"
+      class="Box__root borderColor__standard paddingBottom__small"
       id="id-message"
       tabindex="-1"
     >
       <div
-        class="FieldMessage__content"
+        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
       >
         <div
-          class="height__standardText"
-        />
-        <svg
-          class="FieldMessage__icon marginRight__xsmall width__standardText height__standardText fill__critical Box__root borderColor__standard"
-          height="16"
-          viewBox="0 0 512 512"
-          width="16"
+          class="FieldMessage__content"
         >
-          <path
-            d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+          <div
+            class="height__standardText"
           />
-        </svg>
-        <div>
-          Message
+          <div
+            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          >
+            <svg
+              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              height="16"
+              viewBox="0 0 512 512"
+              width="16"
+            >
+              <path
+                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+              />
+            </svg>
+          </div>
+          <div>
+            Message
+          </div>
         </div>
       </div>
     </div>
diff --git a/lib/components/Strong/Strong.tsx b/lib/components/Strong/Strong.tsx
index a046df48ee5..9162c2d4f66 100644
--- a/lib/components/Strong/Strong.tsx
+++ b/lib/components/Strong/Strong.tsx
@@ -1,24 +1,14 @@
-import React, { Component, AllHTMLAttributes } from 'react';
-import classnames from 'classnames';
+import React, { Component } from 'react';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 
-export type StrongProps = AllHTMLAttributes<HTMLElement>;
-
-export default class Strong extends Component<StrongProps> {
+export default class Strong extends Component<{}> {
   static displayName = 'Strong';
 
   render() {
     return (
       <ThemeConsumer>
         {theme => {
-          const { className, ...restProps } = this.props;
-
-          return (
-            <strong
-              {...restProps}
-              className={classnames(className, theme.atoms.fontWeight.strong)}
-            />
-          );
+          return <strong className={theme.atoms.fontWeight.strong} />;
         }}
       </ThemeConsumer>
     );
diff --git a/lib/components/Strong/__snapshots__/Strong.test.tsx.snap b/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
index 6a416230572..082a4dcae2b 100644
--- a/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
+++ b/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
@@ -3,31 +3,23 @@
 exports[`Strong Theme: jobStreet Default 1`] = `
 <strong
   class="fontWeight__strong"
->
-  Children
-</strong>
+/>
 `;
 
 exports[`Strong Theme: seekAnz Default 1`] = `
 <strong
   class="fontWeight__strong"
->
-  Children
-</strong>
+/>
 `;
 
 exports[`Strong Theme: seekAsia Default 1`] = `
 <strong
   class="fontWeight__strong"
->
-  Children
-</strong>
+/>
 `;
 
 exports[`Strong Theme: wireframe Default 1`] = `
 <strong
   class="fontWeight__strong"
->
-  Children
-</strong>
+/>
 `;
diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
index 8ad09c4d089..fee91a1441e 100644
--- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
+++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
@@ -1,365 +1,477 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChevronIcon Theme: jobStreet Default 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: jobStreet Down 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: jobStreet Inline 1`] = `
-<svg
-  class="ChevronIcon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: jobStreet Left 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__left width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: jobStreet Right 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__right width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: jobStreet Sized 1`] = `
-<svg
-  class="ChevronIcon__root width__largeText height__largeText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: jobStreet Up 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__up width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Default 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Down 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Inline 1`] = `
-<svg
-  class="ChevronIcon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Left 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__left width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Right 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__right width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Sized 1`] = `
-<svg
-  class="ChevronIcon__root width__largeText height__largeText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAnz Up 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__up width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Default 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Down 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Inline 1`] = `
-<svg
-  class="ChevronIcon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Left 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__left width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Right 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__right width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Sized 1`] = `
-<svg
-  class="ChevronIcon__root width__largeText height__largeText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: seekAsia Up 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__up width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Default 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Down 1`] = `
-<svg
-  class="ChevronIcon__root width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Inline 1`] = `
-<svg
-  class="ChevronIcon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Left 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__left width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Right 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__right width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Sized 1`] = `
-<svg
-  class="ChevronIcon__root width__largeText height__largeText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
 
 exports[`ChevronIcon Theme: wireframe Up 1`] = `
-<svg
-  class="ChevronIcon__root ChevronIcon__up width__standardText height__standardText Box__root borderColor__standard"
-  height="16"
-  viewBox="0 0 1024 1024"
-  width="16"
+<div
+  class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
-  <path
-    d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
-  />
-</svg>
+  <svg
+    class="width__standardText height__standardText Box__root borderColor__standard"
+    height="16"
+    viewBox="0 0 1024 1024"
+    width="16"
+  >
+    <path
+      d="M945 305l78 67-510 524-510-524 75-69 435 451 432-449z"
+    />
+  </svg>
+</div>
 `;
diff --git a/lib/components/private/examplesForIcon.tsx b/lib/components/private/examplesForIcon.tsx
index 94009f297f7..683db66346b 100644
--- a/lib/components/private/examplesForIcon.tsx
+++ b/lib/components/private/examplesForIcon.tsx
@@ -1,6 +1,7 @@
 import React, { ComponentType } from 'react';
 import { Omit } from 'utility-types';
 import Text from '../Text/Text';
+import Box from '../Box/Box';
 import { IconProps } from '../icons/Icon/Icon';
 
 export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
@@ -9,7 +10,9 @@ export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
       label: 'Standard',
       render: () => (
         <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Icon marginRight="xsmall" />
+          <Box marginRight="xsmall">
+            <Icon />
+          </Box>
           <Text baseline={false}>Standard text</Text>
         </div>
       )
@@ -19,7 +22,9 @@ export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
       render: () => (
         <Text>
           Standard
-          <Icon inline marginLeft="xsmall" marginRight="xsmall" />
+          <Box marginLeft="xsmall" marginRight="xsmall">
+            <Icon inline />
+          </Box>
           text
         </Text>
       )
@@ -28,7 +33,9 @@ export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
       label: 'Large',
       render: () => (
         <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Icon size="large" marginRight="xsmall" />
+          <Box marginRight="xsmall">
+            <Icon size="large" />
+          </Box>
           <Text size="large" baseline={false}>
             Large text
           </Text>
@@ -40,7 +47,9 @@ export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
       render: () => (
         <Text size="large">
           Large
-          <Icon size="large" inline marginLeft="xsmall" marginRight="xsmall" />
+          <Box marginLeft="xsmall" marginRight="xsmall">
+            <Icon size="large" inline />
+          </Box>
           text
         </Text>
       )

From a7bb745199986f3e2950779364208204e99e396b Mon Sep 17 00:00:00 2001
From: Matt Jones <mattjones701@gmail.com>
Date: Thu, 14 Feb 2019 11:36:06 +1100
Subject: [PATCH 03/14] chore: Tweaks

---
 lib/components/Checkbox/Checkbox.tsx             |  1 -
 lib/components/Strong/Strong.tsx                 | 15 ++++++++++++---
 .../Strong/__snapshots__/Strong.test.tsx.snap    | 16 ++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index 09a99b14208..31c2a8a1d59 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,5 @@
 import React, { Component, ReactNode, AllHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import { Omit } from 'utility-types';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 import getCheckboxRadioSize from '../private/getCheckboxRadioSize';
 import Box from '../Box/Box';
diff --git a/lib/components/Strong/Strong.tsx b/lib/components/Strong/Strong.tsx
index 9162c2d4f66..cb4f2ef8a25 100644
--- a/lib/components/Strong/Strong.tsx
+++ b/lib/components/Strong/Strong.tsx
@@ -1,14 +1,23 @@
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
+import { children } from '../Radio/Radio.css.js';
 
-export default class Strong extends Component<{}> {
+export interface StrongProps {
+  children: ReactNode;
+}
+
+export default class Strong extends Component<StrongProps> {
   static displayName = 'Strong';
 
   render() {
     return (
       <ThemeConsumer>
         {theme => {
-          return <strong className={theme.atoms.fontWeight.strong} />;
+          return (
+            <strong className={theme.atoms.fontWeight.strong}>
+              {children}
+            </strong>
+          );
         }}
       </ThemeConsumer>
     );
diff --git a/lib/components/Strong/__snapshots__/Strong.test.tsx.snap b/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
index 082a4dcae2b..362e0627c4d 100644
--- a/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
+++ b/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
@@ -3,23 +3,31 @@
 exports[`Strong Theme: jobStreet Default 1`] = `
 <strong
   class="fontWeight__strong"
-/>
+>
+  Radio__children
+</strong>
 `;
 
 exports[`Strong Theme: seekAnz Default 1`] = `
 <strong
   class="fontWeight__strong"
-/>
+>
+  Radio__children
+</strong>
 `;
 
 exports[`Strong Theme: seekAsia Default 1`] = `
 <strong
   class="fontWeight__strong"
-/>
+>
+  Radio__children
+</strong>
 `;
 
 exports[`Strong Theme: wireframe Default 1`] = `
 <strong
   class="fontWeight__strong"
-/>
+>
+  Radio__children
+</strong>
 `;

From 3bf89ab4043a1dff06f365204b6045ee1197d291 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 15 Feb 2019 14:32:35 +1100
Subject: [PATCH 04/14] fix: Fix visual bugs with Strong and Icon

---
 lib/components/Strong/Strong.tsx           | 3 ++-
 lib/components/icons/Icon/Icon.css.js      | 3 +++
 lib/components/icons/Icon/Icon.css.js.d.ts | 1 +
 lib/components/icons/Icon/Icon.tsx         | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/components/Strong/Strong.tsx b/lib/components/Strong/Strong.tsx
index cb4f2ef8a25..882edffe372 100644
--- a/lib/components/Strong/Strong.tsx
+++ b/lib/components/Strong/Strong.tsx
@@ -1,6 +1,5 @@
 import React, { Component, ReactNode } from 'react';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
-import { children } from '../Radio/Radio.css.js';
 
 export interface StrongProps {
   children: ReactNode;
@@ -10,6 +9,8 @@ export default class Strong extends Component<StrongProps> {
   static displayName = 'Strong';
 
   render() {
+    const { children } = this.props;
+
     return (
       <ThemeConsumer>
         {theme => {
diff --git a/lib/components/icons/Icon/Icon.css.js b/lib/components/icons/Icon/Icon.css.js
index 98498e39554..c5537b3f970 100644
--- a/lib/components/icons/Icon/Icon.css.js
+++ b/lib/components/icons/Icon/Icon.css.js
@@ -1,4 +1,7 @@
 export default {
+  '.root': {
+    display: 'block'
+  },
   '.fillSize': {
     width: '100%',
     height: '100%'
diff --git a/lib/components/icons/Icon/Icon.css.js.d.ts b/lib/components/icons/Icon/Icon.css.js.d.ts
index 6933e2c2baf..fe4c408e0aa 100644
--- a/lib/components/icons/Icon/Icon.css.js.d.ts
+++ b/lib/components/icons/Icon/Icon.css.js.d.ts
@@ -2,3 +2,4 @@
 // Please do not change this file!
 export const fillSize: string;
 export const inline: string;
+export const root: string;
diff --git a/lib/components/icons/Icon/Icon.tsx b/lib/components/icons/Icon/Icon.tsx
index 288a52aca5a..25249680340 100644
--- a/lib/components/icons/Icon/Icon.tsx
+++ b/lib/components/icons/Icon/Icon.tsx
@@ -42,6 +42,7 @@ export default class Icon extends Component<IconProps> {
             <Box
               component={svgComponent}
               className={classnames(
+                styles.root,
                 widthAtom,
                 heightAtom,
                 theme.atoms.fill[fill!],

From c82fc783e44d3c9552a46b6d71d2461b04b81053 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 15 Feb 2019 14:41:37 +1100
Subject: [PATCH 05/14] test: Update snapshots

---
 .../Alert/__snapshots__/Alert.test.tsx.snap   | 24 ++++----
 .../__snapshots__/Checkbox.test.tsx.snap      | 48 ++++++++--------
 .../__snapshots__/ChecklistCard.test.tsx.snap | 24 ++++----
 .../__snapshots__/FieldMessage.test.tsx.snap  | 16 +++---
 .../Radio/__snapshots__/Radio.test.tsx.snap   |  8 +--
 .../Strong/__snapshots__/Strong.test.tsx.snap |  8 +--
 .../__snapshots__/ChevronIcon.test.tsx.snap   | 56 +++++++++----------
 .../__snapshots__/ErrorIcon.test.tsx.snap     | 24 ++++----
 .../__snapshots__/InfoIcon.test.tsx.snap      | 24 ++++----
 .../TickCircleIcon.test.tsx.snap              | 24 ++++----
 .../__snapshots__/TickIcon.test.tsx.snap      | 24 ++++----
 11 files changed, 140 insertions(+), 140 deletions(-)

diff --git a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
index 50dfdf5600a..0f2a40c5b6f 100644
--- a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -48,7 +48,7 @@ exports[`Alert Theme: jobStreet Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -88,7 +88,7 @@ exports[`Alert Theme: jobStreet Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -130,7 +130,7 @@ exports[`Alert Theme: seekAnz Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -164,7 +164,7 @@ exports[`Alert Theme: seekAnz Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -204,7 +204,7 @@ exports[`Alert Theme: seekAnz Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -246,7 +246,7 @@ exports[`Alert Theme: seekAsia Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -280,7 +280,7 @@ exports[`Alert Theme: seekAsia Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -320,7 +320,7 @@ exports[`Alert Theme: seekAsia Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -362,7 +362,7 @@ exports[`Alert Theme: wireframe Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -396,7 +396,7 @@ exports[`Alert Theme: wireframe Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -436,7 +436,7 @@ exports[`Alert Theme: wireframe Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
diff --git a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index bbbb94bcd6d..0fca6797923 100644
--- a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -135,7 +135,7 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -233,7 +233,7 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -331,7 +331,7 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -420,7 +420,7 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -469,7 +469,7 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -535,7 +535,7 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -624,7 +624,7 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -722,7 +722,7 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -820,7 +820,7 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -909,7 +909,7 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -958,7 +958,7 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1024,7 +1024,7 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1113,7 +1113,7 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1211,7 +1211,7 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1309,7 +1309,7 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1398,7 +1398,7 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1447,7 +1447,7 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1513,7 +1513,7 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1602,7 +1602,7 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1700,7 +1700,7 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1798,7 +1798,7 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1887,7 +1887,7 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="fill__white Icon__fillSize Box__root borderColor__standard"
+            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1936,7 +1936,7 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
index 03ca8dcd701..139c292e0a4 100644
--- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
+++ b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -132,7 +132,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -220,7 +220,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -308,7 +308,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -396,7 +396,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -484,7 +484,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -572,7 +572,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -660,7 +660,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -748,7 +748,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -836,7 +836,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -924,7 +924,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -1012,7 +1012,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="fill__white Icon__fillSize Box__root borderColor__standard"
+              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
diff --git a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
index 26ca68cf907..9fc5c81a880 100644
--- a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
+++ b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`FieldMessage Theme: jobStreet Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -98,7 +98,7 @@ exports[`FieldMessage Theme: jobStreet Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -134,7 +134,7 @@ exports[`FieldMessage Theme: seekAnz Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -214,7 +214,7 @@ exports[`FieldMessage Theme: seekAnz Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -250,7 +250,7 @@ exports[`FieldMessage Theme: seekAsia Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -330,7 +330,7 @@ exports[`FieldMessage Theme: seekAsia Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -366,7 +366,7 @@ exports[`FieldMessage Theme: wireframe Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -446,7 +446,7 @@ exports[`FieldMessage Theme: wireframe Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
diff --git a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
index 416ebeffb67..e5c1f215b81 100644
--- a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -404,7 +404,7 @@ exports[`Radio Theme: jobStreet With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -828,7 +828,7 @@ exports[`Radio Theme: seekAnz With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1252,7 +1252,7 @@ exports[`Radio Theme: seekAsia With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1676,7 +1676,7 @@ exports[`Radio Theme: wireframe With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
diff --git a/lib/components/Strong/__snapshots__/Strong.test.tsx.snap b/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
index 362e0627c4d..6a416230572 100644
--- a/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
+++ b/lib/components/Strong/__snapshots__/Strong.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Strong Theme: jobStreet Default 1`] = `
 <strong
   class="fontWeight__strong"
 >
-  Radio__children
+  Children
 </strong>
 `;
 
@@ -12,7 +12,7 @@ exports[`Strong Theme: seekAnz Default 1`] = `
 <strong
   class="fontWeight__strong"
 >
-  Radio__children
+  Children
 </strong>
 `;
 
@@ -20,7 +20,7 @@ exports[`Strong Theme: seekAsia Default 1`] = `
 <strong
   class="fontWeight__strong"
 >
-  Radio__children
+  Children
 </strong>
 `;
 
@@ -28,6 +28,6 @@ exports[`Strong Theme: wireframe Default 1`] = `
 <strong
   class="fontWeight__strong"
 >
-  Radio__children
+  Children
 </strong>
 `;
diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
index fee91a1441e..49703feb125 100644
--- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
+++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`ChevronIcon Theme: jobStreet Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -22,7 +22,7 @@ exports[`ChevronIcon Theme: jobStreet Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -39,7 +39,7 @@ exports[`ChevronIcon Theme: jobStreet Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -56,7 +56,7 @@ exports[`ChevronIcon Theme: jobStreet Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -73,7 +73,7 @@ exports[`ChevronIcon Theme: jobStreet Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -90,7 +90,7 @@ exports[`ChevronIcon Theme: jobStreet Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -107,7 +107,7 @@ exports[`ChevronIcon Theme: jobStreet Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -124,7 +124,7 @@ exports[`ChevronIcon Theme: seekAnz Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -141,7 +141,7 @@ exports[`ChevronIcon Theme: seekAnz Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -158,7 +158,7 @@ exports[`ChevronIcon Theme: seekAnz Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -175,7 +175,7 @@ exports[`ChevronIcon Theme: seekAnz Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -192,7 +192,7 @@ exports[`ChevronIcon Theme: seekAnz Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -209,7 +209,7 @@ exports[`ChevronIcon Theme: seekAnz Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -226,7 +226,7 @@ exports[`ChevronIcon Theme: seekAnz Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -243,7 +243,7 @@ exports[`ChevronIcon Theme: seekAsia Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -260,7 +260,7 @@ exports[`ChevronIcon Theme: seekAsia Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -277,7 +277,7 @@ exports[`ChevronIcon Theme: seekAsia Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -294,7 +294,7 @@ exports[`ChevronIcon Theme: seekAsia Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -311,7 +311,7 @@ exports[`ChevronIcon Theme: seekAsia Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -328,7 +328,7 @@ exports[`ChevronIcon Theme: seekAsia Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -345,7 +345,7 @@ exports[`ChevronIcon Theme: seekAsia Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -362,7 +362,7 @@ exports[`ChevronIcon Theme: wireframe Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -379,7 +379,7 @@ exports[`ChevronIcon Theme: wireframe Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -396,7 +396,7 @@ exports[`ChevronIcon Theme: wireframe Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -413,7 +413,7 @@ exports[`ChevronIcon Theme: wireframe Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -430,7 +430,7 @@ exports[`ChevronIcon Theme: wireframe Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -447,7 +447,7 @@ exports[`ChevronIcon Theme: wireframe Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -464,7 +464,7 @@ exports[`ChevronIcon Theme: wireframe Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Box__root borderColor__standard"
+    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
diff --git a/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap b/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
index b1858d4b760..1addb71fb17 100644
--- a/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
+++ b/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ErrorIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -15,7 +15,7 @@ exports[`ErrorIcon Theme: jobStreet Default 1`] = `
 
 exports[`ErrorIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -28,7 +28,7 @@ exports[`ErrorIcon Theme: jobStreet Inline 1`] = `
 
 exports[`ErrorIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -41,7 +41,7 @@ exports[`ErrorIcon Theme: jobStreet Sized 1`] = `
 
 exports[`ErrorIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -54,7 +54,7 @@ exports[`ErrorIcon Theme: seekAnz Default 1`] = `
 
 exports[`ErrorIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -67,7 +67,7 @@ exports[`ErrorIcon Theme: seekAnz Inline 1`] = `
 
 exports[`ErrorIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -80,7 +80,7 @@ exports[`ErrorIcon Theme: seekAnz Sized 1`] = `
 
 exports[`ErrorIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -93,7 +93,7 @@ exports[`ErrorIcon Theme: seekAsia Default 1`] = `
 
 exports[`ErrorIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -106,7 +106,7 @@ exports[`ErrorIcon Theme: seekAsia Inline 1`] = `
 
 exports[`ErrorIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -119,7 +119,7 @@ exports[`ErrorIcon Theme: seekAsia Sized 1`] = `
 
 exports[`ErrorIcon Theme: wireframe Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -132,7 +132,7 @@ exports[`ErrorIcon Theme: wireframe Default 1`] = `
 
 exports[`ErrorIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -145,7 +145,7 @@ exports[`ErrorIcon Theme: wireframe Inline 1`] = `
 
 exports[`ErrorIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
diff --git a/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap b/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
index ab48a68f030..3e3e0d4d3ca 100644
--- a/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
+++ b/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`InfoIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -23,7 +23,7 @@ exports[`InfoIcon Theme: jobStreet Default 1`] = `
 
 exports[`InfoIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -44,7 +44,7 @@ exports[`InfoIcon Theme: jobStreet Inline 1`] = `
 
 exports[`InfoIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -65,7 +65,7 @@ exports[`InfoIcon Theme: jobStreet Sized 1`] = `
 
 exports[`InfoIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -86,7 +86,7 @@ exports[`InfoIcon Theme: seekAnz Default 1`] = `
 
 exports[`InfoIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -107,7 +107,7 @@ exports[`InfoIcon Theme: seekAnz Inline 1`] = `
 
 exports[`InfoIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -128,7 +128,7 @@ exports[`InfoIcon Theme: seekAnz Sized 1`] = `
 
 exports[`InfoIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -149,7 +149,7 @@ exports[`InfoIcon Theme: seekAsia Default 1`] = `
 
 exports[`InfoIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -170,7 +170,7 @@ exports[`InfoIcon Theme: seekAsia Inline 1`] = `
 
 exports[`InfoIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -191,7 +191,7 @@ exports[`InfoIcon Theme: seekAsia Sized 1`] = `
 
 exports[`InfoIcon Theme: wireframe Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -212,7 +212,7 @@ exports[`InfoIcon Theme: wireframe Default 1`] = `
 
 exports[`InfoIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -233,7 +233,7 @@ exports[`InfoIcon Theme: wireframe Inline 1`] = `
 
 exports[`InfoIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
diff --git a/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap b/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap
index 0eba8a0e04d..0137fdb945e 100644
--- a/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap
+++ b/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TickCircleIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -15,7 +15,7 @@ exports[`TickCircleIcon Theme: jobStreet Default 1`] = `
 
 exports[`TickCircleIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -28,7 +28,7 @@ exports[`TickCircleIcon Theme: jobStreet Inline 1`] = `
 
 exports[`TickCircleIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -41,7 +41,7 @@ exports[`TickCircleIcon Theme: jobStreet Sized 1`] = `
 
 exports[`TickCircleIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -54,7 +54,7 @@ exports[`TickCircleIcon Theme: seekAnz Default 1`] = `
 
 exports[`TickCircleIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -67,7 +67,7 @@ exports[`TickCircleIcon Theme: seekAnz Inline 1`] = `
 
 exports[`TickCircleIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -80,7 +80,7 @@ exports[`TickCircleIcon Theme: seekAnz Sized 1`] = `
 
 exports[`TickCircleIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -93,7 +93,7 @@ exports[`TickCircleIcon Theme: seekAsia Default 1`] = `
 
 exports[`TickCircleIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -106,7 +106,7 @@ exports[`TickCircleIcon Theme: seekAsia Inline 1`] = `
 
 exports[`TickCircleIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -119,7 +119,7 @@ exports[`TickCircleIcon Theme: seekAsia Sized 1`] = `
 
 exports[`TickCircleIcon Theme: wireframe Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -132,7 +132,7 @@ exports[`TickCircleIcon Theme: wireframe Default 1`] = `
 
 exports[`TickCircleIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -145,7 +145,7 @@ exports[`TickCircleIcon Theme: wireframe Inline 1`] = `
 
 exports[`TickCircleIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
diff --git a/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap b/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap
index 3ea88d1c223..9400e867a63 100644
--- a/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap
+++ b/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TickIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -15,7 +15,7 @@ exports[`TickIcon Theme: jobStreet Default 1`] = `
 
 exports[`TickIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -28,7 +28,7 @@ exports[`TickIcon Theme: jobStreet Inline 1`] = `
 
 exports[`TickIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -41,7 +41,7 @@ exports[`TickIcon Theme: jobStreet Sized 1`] = `
 
 exports[`TickIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -54,7 +54,7 @@ exports[`TickIcon Theme: seekAnz Default 1`] = `
 
 exports[`TickIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -67,7 +67,7 @@ exports[`TickIcon Theme: seekAnz Inline 1`] = `
 
 exports[`TickIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -80,7 +80,7 @@ exports[`TickIcon Theme: seekAnz Sized 1`] = `
 
 exports[`TickIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -93,7 +93,7 @@ exports[`TickIcon Theme: seekAsia Default 1`] = `
 
 exports[`TickIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -106,7 +106,7 @@ exports[`TickIcon Theme: seekAsia Inline 1`] = `
 
 exports[`TickIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -119,7 +119,7 @@ exports[`TickIcon Theme: seekAsia Sized 1`] = `
 
 exports[`TickIcon Theme: wireframe Default 1`] = `
 <svg
-  class="width__standardText height__standardText Box__root borderColor__standard"
+  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -132,7 +132,7 @@ exports[`TickIcon Theme: wireframe Default 1`] = `
 
 exports[`TickIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -145,7 +145,7 @@ exports[`TickIcon Theme: wireframe Inline 1`] = `
 
 exports[`TickIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="width__largeText height__largeText Box__root borderColor__standard"
+  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"

From a663089faabf7a0e4cc5bebe624129fee0ef2d3e Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 15 Feb 2019 14:58:10 +1100
Subject: [PATCH 06/14] fix: Fix icons

---
 .../Alert/__snapshots__/Alert.test.tsx.snap   | 24 ++++----
 .../__snapshots__/Checkbox.test.tsx.snap      | 48 ++++++++--------
 .../__snapshots__/ChecklistCard.test.tsx.snap | 24 ++++----
 .../__snapshots__/FieldMessage.test.tsx.snap  | 16 +++---
 .../Radio/__snapshots__/Radio.test.tsx.snap   |  8 +--
 .../__snapshots__/ChevronIcon.test.tsx.snap   | 56 +++++++++----------
 .../__snapshots__/ErrorIcon.test.tsx.snap     | 24 ++++----
 lib/components/icons/Icon/Icon.css.js         |  2 +-
 lib/components/icons/Icon/Icon.css.js.d.ts    |  2 +-
 lib/components/icons/Icon/Icon.tsx            |  4 +-
 .../__snapshots__/InfoIcon.test.tsx.snap      | 24 ++++----
 .../TickCircleIcon.test.tsx.snap              | 24 ++++----
 .../__snapshots__/TickIcon.test.tsx.snap      | 24 ++++----
 lib/components/private/examplesForIcon.tsx    | 12 +---
 14 files changed, 142 insertions(+), 150 deletions(-)

diff --git a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
index 0f2a40c5b6f..24d4a298d2b 100644
--- a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -48,7 +48,7 @@ exports[`Alert Theme: jobStreet Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -88,7 +88,7 @@ exports[`Alert Theme: jobStreet Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -130,7 +130,7 @@ exports[`Alert Theme: seekAnz Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -164,7 +164,7 @@ exports[`Alert Theme: seekAnz Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -204,7 +204,7 @@ exports[`Alert Theme: seekAnz Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -246,7 +246,7 @@ exports[`Alert Theme: seekAsia Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -280,7 +280,7 @@ exports[`Alert Theme: seekAsia Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -320,7 +320,7 @@ exports[`Alert Theme: seekAsia Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -362,7 +362,7 @@ exports[`Alert Theme: wireframe Tones critical 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -396,7 +396,7 @@ exports[`Alert Theme: wireframe Tones default 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
@@ -436,7 +436,7 @@ exports[`Alert Theme: wireframe Tones info 1`] = `
         class="Box__root borderColor__standard paddingRight__small"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__white Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__white Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 30 30"
           width="16"
diff --git a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 0fca6797923..5ccc9c0e0b2 100644
--- a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -135,7 +135,7 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -233,7 +233,7 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -331,7 +331,7 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -420,7 +420,7 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -469,7 +469,7 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -535,7 +535,7 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -624,7 +624,7 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -722,7 +722,7 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -820,7 +820,7 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -909,7 +909,7 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -958,7 +958,7 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1024,7 +1024,7 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1113,7 +1113,7 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1211,7 +1211,7 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1309,7 +1309,7 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1398,7 +1398,7 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1447,7 +1447,7 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1513,7 +1513,7 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1602,7 +1602,7 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1700,7 +1700,7 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1798,7 +1798,7 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1887,7 +1887,7 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
           <svg
-            class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+            class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
             height="16"
             viewBox="90.471 302.809 823 823"
             width="16"
@@ -1936,7 +1936,7 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
index 139c292e0a4..2d8a1ffcb6b 100644
--- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
+++ b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -132,7 +132,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -220,7 +220,7 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -308,7 +308,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -396,7 +396,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -484,7 +484,7 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -572,7 +572,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -660,7 +660,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -748,7 +748,7 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -836,7 +836,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -924,7 +924,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
@@ -1012,7 +1012,7 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = `
             class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
           >
             <svg
-              class="Icon__root fill__white Icon__fillSize Box__root borderColor__standard"
+              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="90.471 302.809 823 823"
               width="16"
diff --git a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
index 9fc5c81a880..4e16521de16 100644
--- a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
+++ b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`FieldMessage Theme: jobStreet Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -98,7 +98,7 @@ exports[`FieldMessage Theme: jobStreet Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__positive Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -134,7 +134,7 @@ exports[`FieldMessage Theme: seekAnz Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -214,7 +214,7 @@ exports[`FieldMessage Theme: seekAnz Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__positive Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -250,7 +250,7 @@ exports[`FieldMessage Theme: seekAsia Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -330,7 +330,7 @@ exports[`FieldMessage Theme: seekAsia Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__positive Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -366,7 +366,7 @@ exports[`FieldMessage Theme: wireframe Critical 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 512 512"
           width="16"
@@ -446,7 +446,7 @@ exports[`FieldMessage Theme: wireframe Positive 1`] = `
         class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
       >
         <svg
-          class="Icon__root width__standardText height__standardText fill__positive Box__root borderColor__standard"
+          class="width__standardText height__standardText fill__positive Icon__block Box__root borderColor__standard"
           height="16"
           viewBox="0 0 16 16"
           width="16"
diff --git a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
index e5c1f215b81..450c122d47b 100644
--- a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -404,7 +404,7 @@ exports[`Radio Theme: jobStreet With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -828,7 +828,7 @@ exports[`Radio Theme: seekAnz With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1252,7 +1252,7 @@ exports[`Radio Theme: seekAsia With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
@@ -1676,7 +1676,7 @@ exports[`Radio Theme: wireframe With message 1`] = `
             class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
           >
             <svg
-              class="Icon__root width__standardText height__standardText fill__critical Box__root borderColor__standard"
+              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
               height="16"
               viewBox="0 0 512 512"
               width="16"
diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
index 49703feb125..4f34abb2d5e 100644
--- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
+++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`ChevronIcon Theme: jobStreet Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -22,7 +22,7 @@ exports[`ChevronIcon Theme: jobStreet Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -39,7 +39,7 @@ exports[`ChevronIcon Theme: jobStreet Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -56,7 +56,7 @@ exports[`ChevronIcon Theme: jobStreet Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -73,7 +73,7 @@ exports[`ChevronIcon Theme: jobStreet Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -90,7 +90,7 @@ exports[`ChevronIcon Theme: jobStreet Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -107,7 +107,7 @@ exports[`ChevronIcon Theme: jobStreet Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -124,7 +124,7 @@ exports[`ChevronIcon Theme: seekAnz Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -141,7 +141,7 @@ exports[`ChevronIcon Theme: seekAnz Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -158,7 +158,7 @@ exports[`ChevronIcon Theme: seekAnz Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -175,7 +175,7 @@ exports[`ChevronIcon Theme: seekAnz Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -192,7 +192,7 @@ exports[`ChevronIcon Theme: seekAnz Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -209,7 +209,7 @@ exports[`ChevronIcon Theme: seekAnz Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -226,7 +226,7 @@ exports[`ChevronIcon Theme: seekAnz Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -243,7 +243,7 @@ exports[`ChevronIcon Theme: seekAsia Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -260,7 +260,7 @@ exports[`ChevronIcon Theme: seekAsia Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -277,7 +277,7 @@ exports[`ChevronIcon Theme: seekAsia Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -294,7 +294,7 @@ exports[`ChevronIcon Theme: seekAsia Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -311,7 +311,7 @@ exports[`ChevronIcon Theme: seekAsia Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -328,7 +328,7 @@ exports[`ChevronIcon Theme: seekAsia Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -345,7 +345,7 @@ exports[`ChevronIcon Theme: seekAsia Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -362,7 +362,7 @@ exports[`ChevronIcon Theme: wireframe Default 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -379,7 +379,7 @@ exports[`ChevronIcon Theme: wireframe Down 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -396,7 +396,7 @@ exports[`ChevronIcon Theme: wireframe Inline 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -413,7 +413,7 @@ exports[`ChevronIcon Theme: wireframe Left 1`] = `
   class="ChevronIcon__root ChevronIcon__left Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -430,7 +430,7 @@ exports[`ChevronIcon Theme: wireframe Right 1`] = `
   class="ChevronIcon__root ChevronIcon__right Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -447,7 +447,7 @@ exports[`ChevronIcon Theme: wireframe Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -464,7 +464,7 @@ exports[`ChevronIcon Theme: wireframe Up 1`] = `
   class="ChevronIcon__root ChevronIcon__up Box__root borderColor__standard"
 >
   <svg
-    class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
diff --git a/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap b/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
index 1addb71fb17..b891e2a88ca 100644
--- a/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
+++ b/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ErrorIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -15,7 +15,7 @@ exports[`ErrorIcon Theme: jobStreet Default 1`] = `
 
 exports[`ErrorIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -28,7 +28,7 @@ exports[`ErrorIcon Theme: jobStreet Inline 1`] = `
 
 exports[`ErrorIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -41,7 +41,7 @@ exports[`ErrorIcon Theme: jobStreet Sized 1`] = `
 
 exports[`ErrorIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -54,7 +54,7 @@ exports[`ErrorIcon Theme: seekAnz Default 1`] = `
 
 exports[`ErrorIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -67,7 +67,7 @@ exports[`ErrorIcon Theme: seekAnz Inline 1`] = `
 
 exports[`ErrorIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -80,7 +80,7 @@ exports[`ErrorIcon Theme: seekAnz Sized 1`] = `
 
 exports[`ErrorIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -93,7 +93,7 @@ exports[`ErrorIcon Theme: seekAsia Default 1`] = `
 
 exports[`ErrorIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -106,7 +106,7 @@ exports[`ErrorIcon Theme: seekAsia Inline 1`] = `
 
 exports[`ErrorIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -119,7 +119,7 @@ exports[`ErrorIcon Theme: seekAsia Sized 1`] = `
 
 exports[`ErrorIcon Theme: wireframe Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -132,7 +132,7 @@ exports[`ErrorIcon Theme: wireframe Default 1`] = `
 
 exports[`ErrorIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
@@ -145,7 +145,7 @@ exports[`ErrorIcon Theme: wireframe Inline 1`] = `
 
 exports[`ErrorIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 512 512"
   width="16"
diff --git a/lib/components/icons/Icon/Icon.css.js b/lib/components/icons/Icon/Icon.css.js
index c5537b3f970..266f9e2a5f5 100644
--- a/lib/components/icons/Icon/Icon.css.js
+++ b/lib/components/icons/Icon/Icon.css.js
@@ -1,5 +1,5 @@
 export default {
-  '.root': {
+  '.block': {
     display: 'block'
   },
   '.fillSize': {
diff --git a/lib/components/icons/Icon/Icon.css.js.d.ts b/lib/components/icons/Icon/Icon.css.js.d.ts
index fe4c408e0aa..bddd099b67f 100644
--- a/lib/components/icons/Icon/Icon.css.js.d.ts
+++ b/lib/components/icons/Icon/Icon.css.js.d.ts
@@ -1,5 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const block: string;
 export const fillSize: string;
 export const inline: string;
-export const root: string;
diff --git a/lib/components/icons/Icon/Icon.tsx b/lib/components/icons/Icon/Icon.tsx
index 25249680340..be0a6a5719e 100644
--- a/lib/components/icons/Icon/Icon.tsx
+++ b/lib/components/icons/Icon/Icon.tsx
@@ -42,13 +42,13 @@ export default class Icon extends Component<IconProps> {
             <Box
               component={svgComponent}
               className={classnames(
-                styles.root,
                 widthAtom,
                 heightAtom,
                 theme.atoms.fill[fill!],
                 {
                   [styles.fillSize]: size === 'fill',
-                  [styles.inline]: inline
+                  [styles.inline]: inline,
+                  [styles.block]: !inline
                 }
               )}
             />
diff --git a/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap b/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
index 3e3e0d4d3ca..aef4b2e97c7 100644
--- a/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
+++ b/lib/components/icons/InfoIcon/__snapshots__/InfoIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`InfoIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -23,7 +23,7 @@ exports[`InfoIcon Theme: jobStreet Default 1`] = `
 
 exports[`InfoIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -44,7 +44,7 @@ exports[`InfoIcon Theme: jobStreet Inline 1`] = `
 
 exports[`InfoIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -65,7 +65,7 @@ exports[`InfoIcon Theme: jobStreet Sized 1`] = `
 
 exports[`InfoIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -86,7 +86,7 @@ exports[`InfoIcon Theme: seekAnz Default 1`] = `
 
 exports[`InfoIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -107,7 +107,7 @@ exports[`InfoIcon Theme: seekAnz Inline 1`] = `
 
 exports[`InfoIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -128,7 +128,7 @@ exports[`InfoIcon Theme: seekAnz Sized 1`] = `
 
 exports[`InfoIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -149,7 +149,7 @@ exports[`InfoIcon Theme: seekAsia Default 1`] = `
 
 exports[`InfoIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -170,7 +170,7 @@ exports[`InfoIcon Theme: seekAsia Inline 1`] = `
 
 exports[`InfoIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -191,7 +191,7 @@ exports[`InfoIcon Theme: seekAsia Sized 1`] = `
 
 exports[`InfoIcon Theme: wireframe Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -212,7 +212,7 @@ exports[`InfoIcon Theme: wireframe Default 1`] = `
 
 exports[`InfoIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
@@ -233,7 +233,7 @@ exports[`InfoIcon Theme: wireframe Inline 1`] = `
 
 exports[`InfoIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 30 30"
   width="16"
diff --git a/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap b/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap
index 0137fdb945e..ba400385405 100644
--- a/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap
+++ b/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TickCircleIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -15,7 +15,7 @@ exports[`TickCircleIcon Theme: jobStreet Default 1`] = `
 
 exports[`TickCircleIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -28,7 +28,7 @@ exports[`TickCircleIcon Theme: jobStreet Inline 1`] = `
 
 exports[`TickCircleIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -41,7 +41,7 @@ exports[`TickCircleIcon Theme: jobStreet Sized 1`] = `
 
 exports[`TickCircleIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -54,7 +54,7 @@ exports[`TickCircleIcon Theme: seekAnz Default 1`] = `
 
 exports[`TickCircleIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -67,7 +67,7 @@ exports[`TickCircleIcon Theme: seekAnz Inline 1`] = `
 
 exports[`TickCircleIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -80,7 +80,7 @@ exports[`TickCircleIcon Theme: seekAnz Sized 1`] = `
 
 exports[`TickCircleIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -93,7 +93,7 @@ exports[`TickCircleIcon Theme: seekAsia Default 1`] = `
 
 exports[`TickCircleIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -106,7 +106,7 @@ exports[`TickCircleIcon Theme: seekAsia Inline 1`] = `
 
 exports[`TickCircleIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -119,7 +119,7 @@ exports[`TickCircleIcon Theme: seekAsia Sized 1`] = `
 
 exports[`TickCircleIcon Theme: wireframe Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -132,7 +132,7 @@ exports[`TickCircleIcon Theme: wireframe Default 1`] = `
 
 exports[`TickCircleIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
@@ -145,7 +145,7 @@ exports[`TickCircleIcon Theme: wireframe Inline 1`] = `
 
 exports[`TickCircleIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="0 0 16 16"
   width="16"
diff --git a/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap b/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap
index 9400e867a63..950c036d036 100644
--- a/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap
+++ b/lib/components/icons/TickIcon/__snapshots__/TickIcon.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TickIcon Theme: jobStreet Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -15,7 +15,7 @@ exports[`TickIcon Theme: jobStreet Default 1`] = `
 
 exports[`TickIcon Theme: jobStreet Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -28,7 +28,7 @@ exports[`TickIcon Theme: jobStreet Inline 1`] = `
 
 exports[`TickIcon Theme: jobStreet Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -41,7 +41,7 @@ exports[`TickIcon Theme: jobStreet Sized 1`] = `
 
 exports[`TickIcon Theme: seekAnz Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -54,7 +54,7 @@ exports[`TickIcon Theme: seekAnz Default 1`] = `
 
 exports[`TickIcon Theme: seekAnz Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -67,7 +67,7 @@ exports[`TickIcon Theme: seekAnz Inline 1`] = `
 
 exports[`TickIcon Theme: seekAnz Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -80,7 +80,7 @@ exports[`TickIcon Theme: seekAnz Sized 1`] = `
 
 exports[`TickIcon Theme: seekAsia Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -93,7 +93,7 @@ exports[`TickIcon Theme: seekAsia Default 1`] = `
 
 exports[`TickIcon Theme: seekAsia Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -106,7 +106,7 @@ exports[`TickIcon Theme: seekAsia Inline 1`] = `
 
 exports[`TickIcon Theme: seekAsia Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -119,7 +119,7 @@ exports[`TickIcon Theme: seekAsia Sized 1`] = `
 
 exports[`TickIcon Theme: wireframe Default 1`] = `
 <svg
-  class="Icon__root width__standardText height__standardText Box__root borderColor__standard"
+  class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -132,7 +132,7 @@ exports[`TickIcon Theme: wireframe Default 1`] = `
 
 exports[`TickIcon Theme: wireframe Inline 1`] = `
 <svg
-  class="Icon__root width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
+  class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
@@ -145,7 +145,7 @@ exports[`TickIcon Theme: wireframe Inline 1`] = `
 
 exports[`TickIcon Theme: wireframe Sized 1`] = `
 <svg
-  class="Icon__root width__largeText height__largeText Box__root borderColor__standard"
+  class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
   height="16"
   viewBox="90.471 302.809 823 823"
   width="16"
diff --git a/lib/components/private/examplesForIcon.tsx b/lib/components/private/examplesForIcon.tsx
index 683db66346b..b70f19b5552 100644
--- a/lib/components/private/examplesForIcon.tsx
+++ b/lib/components/private/examplesForIcon.tsx
@@ -21,11 +21,7 @@ export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
       label: 'Standard Inline',
       render: () => (
         <Text>
-          Standard
-          <Box marginLeft="xsmall" marginRight="xsmall">
-            <Icon inline />
-          </Box>
-          text
+          Standard <Icon inline /> text
         </Text>
       )
     },
@@ -46,11 +42,7 @@ export default (Icon: ComponentType<Omit<IconProps, 'svgComponent'>>) => {
       label: 'Large Inline',
       render: () => (
         <Text size="large">
-          Large
-          <Box marginLeft="xsmall" marginRight="xsmall">
-            <Icon size="large" inline />
-          </Box>
-          text
+          Large <Icon size="large" inline /> text
         </Text>
       )
     }

From 512273837027a61f1e133aad2af5e9b267448f6c Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 15 Feb 2019 15:04:51 +1100
Subject: [PATCH 07/14] fix(Card): Use padding instead of margin to prevent
 collapse

---
 lib/components/Card/Card.docs.tsx             |    1 -
 lib/components/Card/Card.tsx                  |    4 +-
 .../Card/__snapshots__/Card.test.tsx.snap     |   32 +-
 .../__snapshots__/ChecklistCard.test.tsx.snap | 1584 +++++++++--------
 4 files changed, 826 insertions(+), 795 deletions(-)

diff --git a/lib/components/Card/Card.docs.tsx b/lib/components/Card/Card.docs.tsx
index e7f71551094..1a9e53a37fa 100644
--- a/lib/components/Card/Card.docs.tsx
+++ b/lib/components/Card/Card.docs.tsx
@@ -13,7 +13,6 @@ const docs: ComponentDocs = {
           paddingLeft="small"
           paddingRight="small"
           paddingTop="small"
-          paddingBottom="small"
           style={{ backgroundColor: '#ccc' }}
         >
           <Card>
diff --git a/lib/components/Card/Card.tsx b/lib/components/Card/Card.tsx
index af47f4309a9..0f5528711f0 100644
--- a/lib/components/Card/Card.tsx
+++ b/lib/components/Card/Card.tsx
@@ -12,8 +12,8 @@ export default class Card extends Component<CardProps> {
     const { children } = this.props;
 
     return (
-      <Box backgroundColor="card" marginBottom="medium">
-        {children}
+      <Box paddingBottom="medium">
+        <Box backgroundColor="card">{children}</Box>
       </Box>
     );
   }
diff --git a/lib/components/Card/__snapshots__/Card.test.tsx.snap b/lib/components/Card/__snapshots__/Card.test.tsx.snap
index 7b8fe529365..7031be0ad96 100644
--- a/lib/components/Card/__snapshots__/Card.test.tsx.snap
+++ b/lib/components/Card/__snapshots__/Card.test.tsx.snap
@@ -2,32 +2,48 @@
 
 exports[`Card Theme: jobStreet Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
-  Children
+  <div
+    class="Box__root backgroundColor__card borderColor__standard"
+  >
+    Children
+  </div>
 </div>
 `;
 
 exports[`Card Theme: seekAnz Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
-  Children
+  <div
+    class="Box__root backgroundColor__card borderColor__standard"
+  >
+    Children
+  </div>
 </div>
 `;
 
 exports[`Card Theme: seekAsia Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
-  Children
+  <div
+    class="Box__root backgroundColor__card borderColor__standard"
+  >
+    Children
+  </div>
 </div>
 `;
 
 exports[`Card Theme: wireframe Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
-  Children
+  <div
+    class="Box__root backgroundColor__card borderColor__standard"
+  >
+    Children
+  </div>
 </div>
 `;
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
index 2d8a1ffcb6b..7c808c82ff9 100644
--- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
+++ b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
@@ -2,260 +2,264 @@
 
 exports[`ChecklistCard Theme: jobStreet Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
   <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
+    class="Box__root backgroundColor__card borderColor__standard"
   >
-    <input
-      aria-describedby="1-message"
-      class="Checkbox__realCheckbox"
-      id="1"
-      type="checkbox"
-    />
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="1"
-        style="min-height: 44px;"
+      <input
+        aria-describedby="1-message"
+        class="Checkbox__realCheckbox"
+        id="1"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 24px; height: 24px; margin-top: 10px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="1"
+          style="min-height: 44px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 24px; height: 24px; margin-top: 10px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 1
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 1
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="1-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="1-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="2-message"
-      class="Checkbox__realCheckbox"
-      id="2"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="2"
-        style="min-height: 44px;"
+      <input
+        aria-describedby="2-message"
+        class="Checkbox__realCheckbox"
+        id="2"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 24px; height: 24px; margin-top: 10px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="2"
+          style="min-height: 44px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 24px; height: 24px; margin-top: 10px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 2
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 2
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="2-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="2-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="3-message"
-      class="Checkbox__realCheckbox"
-      id="3"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="3"
-        style="min-height: 44px;"
+      <input
+        aria-describedby="3-message"
+        class="Checkbox__realCheckbox"
+        id="3"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 24px; height: 24px; margin-top: 10px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="3"
+          style="min-height: 44px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 24px; height: 24px; margin-top: 10px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 3
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 3
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="3-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="3-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
@@ -266,260 +270,264 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = `
 
 exports[`ChecklistCard Theme: seekAnz Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
   <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
+    class="Box__root backgroundColor__card borderColor__standard"
   >
-    <input
-      aria-describedby="1-message"
-      class="Checkbox__realCheckbox"
-      id="1"
-      type="checkbox"
-    />
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="1"
-        style="min-height: 48px;"
+      <input
+        aria-describedby="1-message"
+        class="Checkbox__realCheckbox"
+        id="1"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 30px; height: 30px; margin-top: 9px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="1"
+          style="min-height: 48px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 30px; height: 30px; margin-top: 9px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 1
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 1
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="1-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="1-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="2-message"
-      class="Checkbox__realCheckbox"
-      id="2"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="2"
-        style="min-height: 48px;"
+      <input
+        aria-describedby="2-message"
+        class="Checkbox__realCheckbox"
+        id="2"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 30px; height: 30px; margin-top: 9px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="2"
+          style="min-height: 48px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 30px; height: 30px; margin-top: 9px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 2
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 2
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="2-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="2-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="3-message"
-      class="Checkbox__realCheckbox"
-      id="3"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="3"
-        style="min-height: 48px;"
+      <input
+        aria-describedby="3-message"
+        class="Checkbox__realCheckbox"
+        id="3"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 30px; height: 30px; margin-top: 9px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="3"
+          style="min-height: 48px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 30px; height: 30px; margin-top: 9px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 3
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 3
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="3-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="3-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
@@ -530,260 +538,264 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = `
 
 exports[`ChecklistCard Theme: seekAsia Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
   <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
+    class="Box__root backgroundColor__card borderColor__standard"
   >
-    <input
-      aria-describedby="1-message"
-      class="Checkbox__realCheckbox"
-      id="1"
-      type="checkbox"
-    />
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="1"
-        style="min-height: 44px;"
+      <input
+        aria-describedby="1-message"
+        class="Checkbox__realCheckbox"
+        id="1"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 24px; height: 24px; margin-top: 10px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="1"
+          style="min-height: 44px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 24px; height: 24px; margin-top: 10px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 1
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 1
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="1-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="1-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="2-message"
-      class="Checkbox__realCheckbox"
-      id="2"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="2"
-        style="min-height: 44px;"
+      <input
+        aria-describedby="2-message"
+        class="Checkbox__realCheckbox"
+        id="2"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 24px; height: 24px; margin-top: 10px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="2"
+          style="min-height: 44px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 24px; height: 24px; margin-top: 10px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 2
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 2
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="2-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="2-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="3-message"
-      class="Checkbox__realCheckbox"
-      id="3"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="3"
-        style="min-height: 44px;"
+      <input
+        aria-describedby="3-message"
+        class="Checkbox__realCheckbox"
+        id="3"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 24px; height: 24px; margin-top: 10px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="3"
+          style="min-height: 44px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 24px; height: 24px; margin-top: 10px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 3
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 3
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="3-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="3-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
@@ -794,260 +806,264 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = `
 
 exports[`ChecklistCard Theme: wireframe Default 1`] = `
 <div
-  class="Box__root backgroundColor__card borderColor__standard marginBottom__medium"
+  class="Box__root borderColor__standard paddingBottom__medium"
 >
   <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
+    class="Box__root backgroundColor__card borderColor__standard"
   >
-    <input
-      aria-describedby="1-message"
-      class="Checkbox__realCheckbox"
-      id="1"
-      type="checkbox"
-    />
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="1"
-        style="min-height: 48px;"
+      <input
+        aria-describedby="1-message"
+        class="Checkbox__realCheckbox"
+        id="1"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 30px; height: 30px; margin-top: 9px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="1"
+          style="min-height: 48px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 30px; height: 30px; margin-top: 9px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 1
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 1
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="1-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="1-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="2-message"
-      class="Checkbox__realCheckbox"
-      id="2"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="2"
-        style="min-height: 48px;"
+      <input
+        aria-describedby="2-message"
+        class="Checkbox__realCheckbox"
+        id="2"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 30px; height: 30px; margin-top: 9px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="2"
+          style="min-height: 48px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 30px; height: 30px; margin-top: 9px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 2
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 2
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="2-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="2-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="Divider__root Box__root borderColor__standard"
-  >
     <div
-      class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-    />
-  </div>
-  <div
-    class="Box__root borderColor__standard paddingBottom__xsmall"
-  >
-    <input
-      aria-describedby="3-message"
-      class="Checkbox__realCheckbox"
-      id="3"
-      type="checkbox"
-    />
+      class="Divider__root Box__root borderColor__standard"
+    >
+      <div
+        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
+      />
+    </div>
     <div
-      class="Checkbox__content"
+      class="Box__root borderColor__standard paddingBottom__xsmall"
     >
-      <label
-        class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-        for="3"
-        style="min-height: 48px;"
+      <input
+        aria-describedby="3-message"
+        class="Checkbox__realCheckbox"
+        id="3"
+        type="checkbox"
+      />
+      <div
+        class="Checkbox__content"
       >
-        <div
-          class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-          style="width: 30px; height: 30px; margin-top: 9px;"
+        <label
+          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
+          for="3"
+          style="min-height: 48px;"
         >
           <div
-            class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-          />
-          <div
-            class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
+            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
+            style="width: 30px; height: 30px; margin-top: 9px;"
           >
-            <svg
-              class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="90.471 302.809 823 823"
-              width="16"
+            <div
+              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
+            />
+            <div
+              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
             >
-              <path
-                d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-              />
-            </svg>
+              <svg
+                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
+                height="16"
+                viewBox="90.471 302.809 823 823"
+                width="16"
+              >
+                <path
+                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-        >
-          Label 3
-        </div>
-      </label>
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-    >
+          <div
+            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
+          >
+            Label 3
+          </div>
+        </label>
+      </div>
       <div
-        class="Box__root borderColor__standard paddingBottom__small"
-        id="3-message"
-        tabindex="-1"
+        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
       >
         <div
-          class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+          class="Box__root borderColor__standard paddingBottom__small"
+          id="3-message"
+          tabindex="-1"
         >
           <div
-            class="FieldMessage__content"
+            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
           >
             <div
-              class="height__standardText"
-            />
-            <div />
+              class="FieldMessage__content"
+            >
+              <div
+                class="height__standardText"
+              />
+              <div />
+            </div>
           </div>
         </div>
       </div>

From 5426058e923e05403cabfd8683b4f54899d40808 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 15 Feb 2019 15:13:56 +1100
Subject: [PATCH 08/14] fix(ChevronIcon): Support inline prop

---
 .../icons/ChevronIcon/ChevronIcon.css.js         |  3 +++
 .../icons/ChevronIcon/ChevronIcon.css.js.d.ts    |  1 +
 lib/components/icons/ChevronIcon/ChevronIcon.tsx |  9 +++++----
 .../__snapshots__/ChevronIcon.test.tsx.snap      | 16 ++++++++--------
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.css.js b/lib/components/icons/ChevronIcon/ChevronIcon.css.js
index 3bc800db328..6df3a1f809a 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.css.js
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.css.js
@@ -3,6 +3,9 @@ export default {
     transition: 'transform 0.3s ease',
     transformOrigin: '50% 50%'
   },
+  '.inline': {
+    display: 'inline-block'
+  },
   '.left': {
     transform: 'rotate(90deg)'
   },
diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts b/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts
index 6354db7a5ac..7aee2740f17 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts
@@ -1,5 +1,6 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const inline: string;
 export const left: string;
 export const right: string;
 export const root: string;
diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.tsx b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
index 1786e682dd8..f5513cc2112 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.tsx
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { Omit } from 'utility-types';
 import Box from '../../Box/Box';
 import Icon, { IconProps } from '../Icon/Icon';
 import ChevronSvg from './ChevronSvg';
 import styles from './ChevronIcon.css.js';
 
-export interface ChevronIconProps extends Omit<IconProps, 'svgComponent'> {
+export interface ChevronIconProps
+  extends Pick<IconProps, 'svgComponent' | 'inline'> {
   direction?: 'up' | 'down' | 'left' | 'right';
 }
 
@@ -14,17 +14,18 @@ export default class ChevronIcon extends Component<ChevronIconProps> {
   static displayName = 'ChevronIcon';
 
   render() {
-    const { direction = 'down' } = this.props;
+    const { direction = 'down', inline } = this.props;
 
     return (
       <Box
         className={classnames(styles.root, {
+          [styles.inline]: inline,
           [styles.up]: direction === 'up',
           [styles.left]: direction === 'left',
           [styles.right]: direction === 'right'
         })}
       >
-        <Icon svgComponent={ChevronSvg} />
+        <Icon svgComponent={ChevronSvg} inline={inline} />
       </Box>
     );
   }
diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
index 4f34abb2d5e..c4f59fc1fe4 100644
--- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
+++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
@@ -36,10 +36,10 @@ exports[`ChevronIcon Theme: jobStreet Down 1`] = `
 
 exports[`ChevronIcon Theme: jobStreet Inline 1`] = `
 <div
-  class="ChevronIcon__root Box__root borderColor__standard"
+  class="ChevronIcon__root ChevronIcon__inline Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -155,10 +155,10 @@ exports[`ChevronIcon Theme: seekAnz Down 1`] = `
 
 exports[`ChevronIcon Theme: seekAnz Inline 1`] = `
 <div
-  class="ChevronIcon__root Box__root borderColor__standard"
+  class="ChevronIcon__root ChevronIcon__inline Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -274,10 +274,10 @@ exports[`ChevronIcon Theme: seekAsia Down 1`] = `
 
 exports[`ChevronIcon Theme: seekAsia Inline 1`] = `
 <div
-  class="ChevronIcon__root Box__root borderColor__standard"
+  class="ChevronIcon__root ChevronIcon__inline Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -393,10 +393,10 @@ exports[`ChevronIcon Theme: wireframe Down 1`] = `
 
 exports[`ChevronIcon Theme: wireframe Inline 1`] = `
 <div
-  class="ChevronIcon__root Box__root borderColor__standard"
+  class="ChevronIcon__root ChevronIcon__inline Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__standardTextInline height__standardTextInline Icon__inline Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"

From e2ebb2ec8883ed3404b9cb1478c83cd9239338ca Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 15 Feb 2019 15:27:10 +1100
Subject: [PATCH 09/14] fix(ChevronIcon): Fix props

---
 lib/components/icons/ChevronIcon/ChevronIcon.tsx          | 8 ++++----
 .../ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.tsx b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
index f5513cc2112..cb13844725c 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.tsx
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
+import { Omit } from 'utility-types';
 import Box from '../../Box/Box';
 import Icon, { IconProps } from '../Icon/Icon';
 import ChevronSvg from './ChevronSvg';
 import styles from './ChevronIcon.css.js';
 
-export interface ChevronIconProps
-  extends Pick<IconProps, 'svgComponent' | 'inline'> {
+export interface ChevronIconProps extends Omit<IconProps, 'svgComponent'> {
   direction?: 'up' | 'down' | 'left' | 'right';
 }
 
@@ -14,7 +14,7 @@ export default class ChevronIcon extends Component<ChevronIconProps> {
   static displayName = 'ChevronIcon';
 
   render() {
-    const { direction = 'down', inline } = this.props;
+    const { direction = 'down', inline, ...restProps } = this.props;
 
     return (
       <Box
@@ -25,7 +25,7 @@ export default class ChevronIcon extends Component<ChevronIconProps> {
           [styles.right]: direction === 'right'
         })}
       >
-        <Icon svgComponent={ChevronSvg} inline={inline} />
+        <Icon svgComponent={ChevronSvg} inline={inline} {...restProps} />
       </Box>
     );
   }
diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
index c4f59fc1fe4..b129d91366d 100644
--- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
+++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
@@ -90,7 +90,7 @@ exports[`ChevronIcon Theme: jobStreet Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -209,7 +209,7 @@ exports[`ChevronIcon Theme: seekAnz Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -328,7 +328,7 @@ exports[`ChevronIcon Theme: seekAsia Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"
@@ -447,7 +447,7 @@ exports[`ChevronIcon Theme: wireframe Sized 1`] = `
   class="ChevronIcon__root Box__root borderColor__standard"
 >
   <svg
-    class="width__standardText height__standardText Icon__block Box__root borderColor__standard"
+    class="width__largeText height__largeText Icon__block Box__root borderColor__standard"
     height="16"
     viewBox="0 0 1024 1024"
     width="16"

From a8a1da3114154ded30a5bc806eebec803e0a0190 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 18 Feb 2019 08:36:44 +1100
Subject: [PATCH 10/14] docs: Balance white space in Card example

---
 lib/components/Card/Card.docs.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/Card/Card.docs.tsx b/lib/components/Card/Card.docs.tsx
index 1a9e53a37fa..a3f52761611 100644
--- a/lib/components/Card/Card.docs.tsx
+++ b/lib/components/Card/Card.docs.tsx
@@ -10,9 +10,9 @@ const docs: ComponentDocs = {
       label: 'Standard Card',
       render: () => (
         <Box
-          paddingLeft="small"
-          paddingRight="small"
-          paddingTop="small"
+          paddingLeft="gutter"
+          paddingRight="gutter"
+          paddingTop="medium"
           style={{ backgroundColor: '#ccc' }}
         >
           <Card>

From 5e8cac9cb0a4b9a9fef887a3ccf7f108101d9df1 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Mon, 18 Feb 2019 16:03:40 +1100
Subject: [PATCH 11/14] fix: Fix onChange for Checkbox and Radio

---
 lib/components/Checkbox/Checkbox.tsx | 2 ++
 lib/components/Radio/Radio.tsx       | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index 31c2a8a1d59..47da2083270 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -68,6 +68,7 @@ export default class Checkbox extends Component<CheckboxProps, State> {
             variant,
             id,
             checked,
+            onChange,
             label,
             disabled = false,
             tone,
@@ -97,6 +98,7 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                 type="checkbox"
                 id={id}
                 checked={checked}
+                onChange={onChange}
                 disabled={disabled}
                 aria-describedby={fieldMessageId}
               />
diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx
index 04867d5f21c..db424561636 100644
--- a/lib/components/Radio/Radio.tsx
+++ b/lib/components/Radio/Radio.tsx
@@ -67,6 +67,7 @@ export default class Radio extends Component<RadioProps, State> {
             id,
             label,
             checked,
+            onChange,
             disabled = false,
             tone = 'neutral',
             message,
@@ -96,6 +97,7 @@ export default class Radio extends Component<RadioProps, State> {
                 type="radio"
                 id={id}
                 checked={checked}
+                onChange={onChange}
                 disabled={disabled}
                 aria-describedby={fieldMessageId}
               />

From f33db9e4742e93942fd9145802fcd61e926eb085 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Tue, 19 Feb 2019 11:43:33 +1100
Subject: [PATCH 12/14] feat: Remove ChecklistCard

BREAKING CHANGE: Removed ChecklistCard
---
 lib/components/Checkbox/Checkbox.tsx          |   71 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |  784 ++++--------
 .../ChecklistCard/ChecklistCard.docs.tsx      |  121 --
 .../ChecklistCard/ChecklistCard.test.tsx      |   23 -
 .../ChecklistCard/ChecklistCard.tsx           |   43 -
 .../__snapshots__/ChecklistCard.test.tsx.snap | 1073 -----------------
 lib/components/Radio/Radio.tsx                |   67 +-
 .../Radio/__snapshots__/Radio.test.tsx.snap   |  784 ++++--------
 lib/components/index.ts                       |    1 -
 9 files changed, 561 insertions(+), 2406 deletions(-)
 delete mode 100644 lib/components/ChecklistCard/ChecklistCard.docs.tsx
 delete mode 100644 lib/components/ChecklistCard/ChecklistCard.test.tsx
 delete mode 100644 lib/components/ChecklistCard/ChecklistCard.tsx
 delete mode 100644 lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap

diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index 47da2083270..6394159b878 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -27,7 +27,6 @@ type OptionalInputProps = 'disabled' | 'children';
 export interface CheckboxProps
   extends Required<Pick<InputProps, RequiredInputProps>>,
     Pick<InputProps, OptionalInputProps> {
-  variant?: 'default' | 'inChecklistCard';
   label: ReactNode;
   tone?: 'neutral' | 'critical' | 'positive';
   message?: ReactNode | false;
@@ -65,7 +64,6 @@ export default class Checkbox extends Component<CheckboxProps, State> {
       <ThemeConsumer>
         {theme => {
           const {
-            variant,
             id,
             checked,
             onChange,
@@ -77,22 +75,11 @@ export default class Checkbox extends Component<CheckboxProps, State> {
           } = this.props;
           const { hovered } = this.state;
 
-          const inChecklistCard = variant === 'inChecklistCard';
           const fieldMessageId = `${id}-message`;
           const checkboxSize = getCheckboxRadioSize(theme);
 
           return (
-            <Box
-              {...(inChecklistCard && tone === 'critical'
-                ? { borderWidth: 'standard', borderColor: 'critical' }
-                : {})}
-              backgroundColor={
-                inChecklistCard && (checked || hovered) && !disabled
-                  ? 'selection'
-                  : undefined
-              }
-              paddingBottom={inChecklistCard ? 'xsmall' : undefined}
-            >
+            <div>
               <input
                 className={styles.realCheckbox}
                 type="checkbox"
@@ -105,13 +92,6 @@ export default class Checkbox extends Component<CheckboxProps, State> {
               <div className={styles.content}>
                 <Box
                   component="label"
-                  {...(inChecklistCard
-                    ? {
-                        paddingLeft: 'gutter',
-                        paddingRight: 'gutter',
-                        paddingTop: 'xsmall'
-                      }
-                    : {})}
                   className={classnames({
                     [styles.label]: true
                   })}
@@ -125,7 +105,7 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                   onMouseOut={this.handleMouseOut}
                 >
                   <Box
-                    marginRight={inChecklistCard ? 'medium' : 'small'}
+                    marginRight="small"
                     className={styles.checkboxContainer}
                     style={{
                       width: px(checkboxSize),
@@ -187,21 +167,6 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                         theme.atoms.transition.fast
                       )}
                     />
-                    {!inChecklistCard ? (
-                      <Box
-                        borderColor="critical"
-                        borderWidth="standard"
-                        style={{
-                          opacity: tone === 'critical' ? 1 : 0
-                        }}
-                        className={classnames(
-                          styles.checkbox,
-                          styles.checkboxCritical,
-                          theme.atoms.borderRadius.standard,
-                          theme.atoms.transition.fast
-                        )}
-                      />
-                    ) : null}
                     <Box
                       className={classnames(
                         styles.checkboxIcon,
@@ -221,33 +186,23 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                 </Box>
                 {children ? (
                   <Box
-                    paddingLeft={inChecklistCard ? 'gutter' : 'none'}
-                    paddingRight={inChecklistCard ? 'gutter' : 'none'}
+                    paddingLeft="small"
+                    paddingBottom="small"
+                    className={styles.children}
+                    style={{ marginLeft: px(checkboxSize) }}
                   >
-                    <Box
-                      paddingLeft={inChecklistCard ? 'medium' : 'small'}
-                      paddingBottom="small"
-                      className={styles.children}
-                      style={{ marginLeft: px(checkboxSize) }}
-                    >
-                      {children}
-                    </Box>
+                    {children}
                   </Box>
                 ) : null}
               </div>
               {message !== false ? (
-                <Box
-                  paddingLeft={inChecklistCard ? 'gutter' : 'none'}
-                  paddingRight={inChecklistCard ? 'gutter' : 'none'}
-                >
-                  <FieldMessage
-                    id={fieldMessageId}
-                    tone={tone}
-                    message={message}
-                  />
-                </Box>
+                <FieldMessage
+                  id={fieldMessageId}
+                  tone={tone}
+                  message={message}
+                />
               ) : null}
-            </Box>
+            </div>
           );
         }}
       </ThemeConsumer>
diff --git a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 5ccc9c0e0b2..32f37e7bbe1 100644
--- a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Checkbox Theme: jobStreet Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -38,10 +36,6 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -65,24 +59,20 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -90,9 +80,7 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
 `;
 
 exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -127,10 +115,6 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -153,35 +137,27 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -189,9 +165,7 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
 `;
 
 exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -225,10 +199,6 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -251,35 +221,27 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -287,9 +249,7 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -323,10 +283,6 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -350,24 +306,20 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -375,9 +327,7 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: jobStreet With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -412,10 +362,6 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -438,50 +384,42 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
@@ -490,9 +428,7 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAnz Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -527,10 +463,6 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -554,24 +486,20 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -579,9 +507,7 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -616,10 +542,6 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -642,35 +564,27 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -678,9 +592,7 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -714,10 +626,6 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -740,35 +648,27 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -776,9 +676,7 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -812,10 +710,6 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -839,24 +733,20 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -864,9 +754,7 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAnz With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -901,10 +789,6 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -927,50 +811,42 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
@@ -979,9 +855,7 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAsia Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1016,10 +890,6 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1043,24 +913,20 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1068,9 +934,7 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1105,10 +969,6 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1131,35 +991,27 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1167,9 +1019,7 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -1203,10 +1053,6 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1229,35 +1075,27 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1265,9 +1103,7 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -1301,10 +1137,6 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1328,24 +1160,20 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1353,9 +1181,7 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: seekAsia With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1390,10 +1216,6 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1416,50 +1238,42 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
@@ -1468,9 +1282,7 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
 `;
 
 exports[`Checkbox Theme: wireframe Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1505,10 +1317,6 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1532,24 +1340,20 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1557,9 +1361,7 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
 `;
 
 exports[`Checkbox Theme: wireframe Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1594,10 +1396,6 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1620,35 +1418,27 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1656,9 +1446,7 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
 `;
 
 exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -1692,10 +1480,6 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1718,35 +1502,27 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1754,9 +1530,7 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: wireframe Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Checkbox__realCheckbox"
@@ -1790,10 +1564,6 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1817,24 +1587,20 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1842,9 +1608,7 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
 `;
 
 exports[`Checkbox Theme: wireframe With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1879,10 +1643,6 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1905,50 +1665,42 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Checkbox__children Box__root borderColor__standard paddingBottom__small paddingLeft__small"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
diff --git a/lib/components/ChecklistCard/ChecklistCard.docs.tsx b/lib/components/ChecklistCard/ChecklistCard.docs.tsx
deleted file mode 100644
index b6c9cc58c4b..00000000000
--- a/lib/components/ChecklistCard/ChecklistCard.docs.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import ChecklistCard from './ChecklistCard';
-import Checkbox from '../Checkbox/Checkbox';
-import Text from '../Text/Text';
-import { ComponentDocs } from '../../../docs/src/types';
-
-const handleChange = () => undefined;
-
-const docs: ComponentDocs = {
-  examples: [
-    {
-      label: 'Standard Checklist Card',
-      render: ({ id }) => (
-        <ChecklistCard>
-          <Checkbox
-            id={`${id}_1`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          />
-          <Checkbox
-            id={`${id}_2`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          />
-          <Checkbox
-            id={`${id}_3`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          />
-        </ChecklistCard>
-      )
-    },
-    {
-      label: 'Nested Checklist Card',
-      render: ({ id }) => (
-        <ChecklistCard>
-          <Checkbox
-            id={`${id}_1`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-          <Checkbox
-            id={`${id}_2`}
-            label="This is a checkbox"
-            checked={true}
-            message={false}
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-          <Checkbox
-            id={`${id}_3`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-        </ChecklistCard>
-      )
-    },
-    {
-      label: 'Nested Checklist Card With Critical Messages',
-      render: ({ id }) => (
-        <ChecklistCard>
-          <Checkbox
-            id={`${id}_1`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-          <Checkbox
-            id={`${id}_2`}
-            label="This is a checkbox"
-            checked={false}
-            tone="critical"
-            message="This is a critical message"
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-          <Checkbox
-            id={`${id}_3`}
-            label="This is a checkbox"
-            checked={true}
-            tone="critical"
-            message="This is a critical message"
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-          <Checkbox
-            id={`${id}_4`}
-            label="This is a checkbox"
-            checked={false}
-            message={false}
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-        </ChecklistCard>
-      )
-    }
-  ]
-};
-
-export default docs;
diff --git a/lib/components/ChecklistCard/ChecklistCard.test.tsx b/lib/components/ChecklistCard/ChecklistCard.test.tsx
deleted file mode 100644
index f11dd5b2c5c..00000000000
--- a/lib/components/ChecklistCard/ChecklistCard.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { ChecklistCard, Checkbox } from '..';
-import { render } from 'react-testing-library';
-import forEachTheme from '../../test/utils/forEachTheme';
-
-const noop = () => undefined;
-
-describe('ChecklistCard', () => {
-  forEachTheme(({ ThemeProvider }) => {
-    test('Default', () => {
-      const { container } = render(
-        <ThemeProvider>
-          <ChecklistCard>
-            <Checkbox id="1" label="Label 1" checked={false} onChange={noop} />
-            <Checkbox id="2" label="Label 2" checked={false} onChange={noop} />
-            <Checkbox id="3" label="Label 3" checked={false} onChange={noop} />
-          </ChecklistCard>
-        </ThemeProvider>
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-});
diff --git a/lib/components/ChecklistCard/ChecklistCard.tsx b/lib/components/ChecklistCard/ChecklistCard.tsx
deleted file mode 100644
index b01e6d3bcdf..00000000000
--- a/lib/components/ChecklistCard/ChecklistCard.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component, Fragment, ReactElement } from 'react';
-import Card, { CardProps } from '../Card/Card';
-import Divider from '../Divider/Divider';
-import { CheckboxProps } from '../Checkbox/Checkbox';
-import { RadioProps } from '../Radio/Radio';
-
-export interface ChecklistCardProps extends CardProps {
-  children:
-    | Array<ReactElement<CheckboxProps>>
-    | Array<ReactElement<RadioProps>>
-    | ReactElement<CheckboxProps>
-    | ReactElement<RadioProps>;
-}
-
-export default class ChecklistCard extends Component<ChecklistCardProps> {
-  static displayName = 'ChecklistCard';
-
-  render() {
-    const { children, ...restProps } = this.props;
-    return (
-      <Card {...restProps}>
-        {React.Children.map(children, (child, i) => {
-          if (typeof child !== 'object') {
-            return null;
-          }
-
-          const checkboxChild = child as ReactElement<CheckboxProps>;
-
-          return (
-            <Fragment>
-              {i > 0 && checkboxChild.props.tone !== 'critical' ? (
-                <Divider />
-              ) : null}
-              {React.cloneElement(child, {
-                variant: 'inChecklistCard'
-              })}
-            </Fragment>
-          );
-        })}
-      </Card>
-    );
-  }
-}
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
deleted file mode 100644
index 7c808c82ff9..00000000000
--- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
+++ /dev/null
@@ -1,1073 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ChecklistCard Theme: jobStreet Default 1`] = `
-<div
-  class="Box__root borderColor__standard paddingBottom__medium"
->
-  <div
-    class="Box__root backgroundColor__card borderColor__standard"
-  >
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="1-message"
-        class="Checkbox__realCheckbox"
-        id="1"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="1"
-          style="min-height: 44px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 24px; height: 24px; margin-top: 10px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 1
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="1-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="2-message"
-        class="Checkbox__realCheckbox"
-        id="2"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="2"
-          style="min-height: 44px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 24px; height: 24px; margin-top: 10px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 2
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="2-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="3-message"
-        class="Checkbox__realCheckbox"
-        id="3"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="3"
-          style="min-height: 44px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 24px; height: 24px; margin-top: 10px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 3
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="3-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ChecklistCard Theme: seekAnz Default 1`] = `
-<div
-  class="Box__root borderColor__standard paddingBottom__medium"
->
-  <div
-    class="Box__root backgroundColor__card borderColor__standard"
-  >
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="1-message"
-        class="Checkbox__realCheckbox"
-        id="1"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="1"
-          style="min-height: 48px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 30px; height: 30px; margin-top: 9px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 1
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="1-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="2-message"
-        class="Checkbox__realCheckbox"
-        id="2"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="2"
-          style="min-height: 48px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 30px; height: 30px; margin-top: 9px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 2
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="2-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="3-message"
-        class="Checkbox__realCheckbox"
-        id="3"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="3"
-          style="min-height: 48px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 30px; height: 30px; margin-top: 9px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 3
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="3-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ChecklistCard Theme: seekAsia Default 1`] = `
-<div
-  class="Box__root borderColor__standard paddingBottom__medium"
->
-  <div
-    class="Box__root backgroundColor__card borderColor__standard"
-  >
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="1-message"
-        class="Checkbox__realCheckbox"
-        id="1"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="1"
-          style="min-height: 44px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 24px; height: 24px; margin-top: 10px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 1
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="1-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="2-message"
-        class="Checkbox__realCheckbox"
-        id="2"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="2"
-          style="min-height: 44px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 24px; height: 24px; margin-top: 10px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 2
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="2-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="3-message"
-        class="Checkbox__realCheckbox"
-        id="3"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="3"
-          style="min-height: 44px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 24px; height: 24px; margin-top: 10px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 3
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="3-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ChecklistCard Theme: wireframe Default 1`] = `
-<div
-  class="Box__root borderColor__standard paddingBottom__medium"
->
-  <div
-    class="Box__root backgroundColor__card borderColor__standard"
-  >
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="1-message"
-        class="Checkbox__realCheckbox"
-        id="1"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="1"
-          style="min-height: 48px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 30px; height: 30px; margin-top: 9px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 1
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="1-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="2-message"
-        class="Checkbox__realCheckbox"
-        id="2"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="2"
-          style="min-height: 48px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 30px; height: 30px; margin-top: 9px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 2
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="2-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Divider__root Box__root borderColor__standard"
-    >
-      <div
-        class="Divider__divider Box__root borderColor__standard borderWidth__standard"
-      />
-    </div>
-    <div
-      class="Box__root borderColor__standard paddingBottom__xsmall"
-    >
-      <input
-        aria-describedby="3-message"
-        class="Checkbox__realCheckbox"
-        id="3"
-        type="checkbox"
-      />
-      <div
-        class="Checkbox__content"
-      >
-        <label
-          class="Checkbox__label Box__root borderColor__standard paddingTop__xsmall paddingRight__gutter paddingLeft__gutter"
-          for="3"
-          style="min-height: 48px;"
-        >
-          <div
-            class="Checkbox__checkboxContainer Box__root borderColor__standard marginRight__medium"
-            style="width: 30px; height: 30px; margin-top: 9px;"
-          >
-            <div
-              class="Checkbox__checkbox borderRadius__standard Box__root backgroundColor__input borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxHover borderRadius__standard Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxFocus boxShadow__focus borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxChecked backgroundColor__formAccent borderRadius__standard transition__fast Box__root backgroundColor__input borderColor__formAccent borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
-            />
-            <div
-              class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
-            >
-              <svg
-                class="fill__white Icon__fillSize Icon__block Box__root borderColor__standard"
-                height="16"
-                viewBox="90.471 302.809 823 823"
-                width="16"
-              >
-                <path
-                  d="M365.407 1022.185L90.677 747.457l67.883-67.882L365.406 886.42l479.977-479.988 67.883 67.882"
-                />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__interaction fontWeight__regular Box__root borderColor__standard"
-          >
-            Label 3
-          </div>
-        </label>
-      </div>
-      <div
-        class="Box__root borderColor__standard paddingRight__gutter paddingLeft__gutter"
-      >
-        <div
-          class="Box__root borderColor__standard paddingBottom__small"
-          id="3-message"
-          tabindex="-1"
-        >
-          <div
-            class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
-          >
-            <div
-              class="FieldMessage__content"
-            >
-              <div
-                class="height__standardText"
-              />
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx
index db424561636..5a824d8f0ce 100644
--- a/lib/components/Radio/Radio.tsx
+++ b/lib/components/Radio/Radio.tsx
@@ -26,7 +26,6 @@ type OptionalInputProps = 'disabled' | 'children';
 export interface RadioProps
   extends Required<Pick<InputProps, RequiredInputProps>>,
     Pick<InputProps, OptionalInputProps> {
-  variant?: 'default' | 'inChecklistCard';
   label: ReactNode;
   tone?: 'neutral' | 'critical' | 'positive';
   message?: ReactNode | false;
@@ -63,7 +62,6 @@ export default class Radio extends Component<RadioProps, State> {
       <ThemeConsumer>
         {theme => {
           const {
-            variant = 'default',
             id,
             label,
             checked,
@@ -76,22 +74,11 @@ export default class Radio extends Component<RadioProps, State> {
 
           const { hovered } = this.state;
 
-          const inChecklistCard = variant === 'inChecklistCard';
           const fieldMessageId = `${id}-message`;
           const radioSize = getCheckboxRadioSize(theme);
 
           return (
-            <Box
-              {...(inChecklistCard && tone === 'critical'
-                ? { borderWidth: 'standard', borderColor: 'critical' }
-                : {})}
-              backgroundColor={
-                inChecklistCard && (checked || hovered) && !disabled
-                  ? 'selection'
-                  : undefined
-              }
-              paddingBottom={inChecklistCard ? 'xsmall' : undefined}
-            >
+            <div>
               <input
                 className={styles.realRadio}
                 type="radio"
@@ -104,14 +91,6 @@ export default class Radio extends Component<RadioProps, State> {
               <div className={styles.content}>
                 <Box
                   component="label"
-                  {...(inChecklistCard
-                    ? {
-                        paddingLeft: 'gutter',
-                        paddingRight: 'gutter',
-                        paddingTop: 'xxsmall',
-                        paddingBottom: 'xxsmall'
-                      }
-                    : {})}
                   className={classnames({
                     [styles.label]: true
                   })}
@@ -167,18 +146,6 @@ export default class Radio extends Component<RadioProps, State> {
                         theme.atoms.transition.fast
                       )}
                     />
-                    {!inChecklistCard ? (
-                      <Box
-                        borderColor="critical"
-                        borderWidth="standard"
-                        style={{ opacity: tone === 'critical' ? 1 : 0 }}
-                        className={classnames(
-                          styles.radio,
-                          styles.radioCritical,
-                          theme.atoms.transition.fast
-                        )}
-                      />
-                    ) : null}
                     <Box
                       backgroundColor={
                         disabled ? 'formAccentDisabled' : 'formAccent'
@@ -198,33 +165,23 @@ export default class Radio extends Component<RadioProps, State> {
                 </Box>
                 {children ? (
                   <Box
-                    paddingLeft={inChecklistCard ? 'gutter' : 'none'}
-                    paddingRight={inChecklistCard ? 'gutter' : 'none'}
+                    paddingLeft="medium"
+                    paddingBottom="medium"
+                    className={styles.children}
+                    style={{ marginLeft: px(radioSize) }}
                   >
-                    <Box
-                      paddingLeft="medium"
-                      paddingBottom="medium"
-                      className={styles.children}
-                      style={{ marginLeft: px(radioSize) }}
-                    >
-                      {children}
-                    </Box>
+                    {children}
                   </Box>
                 ) : null}
               </div>
               {message !== false ? (
-                <Box
-                  paddingLeft={inChecklistCard ? 'gutter' : 'none'}
-                  paddingRight={inChecklistCard ? 'gutter' : 'none'}
-                >
-                  <FieldMessage
-                    id={fieldMessageId}
-                    tone={tone}
-                    message={message}
-                  />
-                </Box>
+                <FieldMessage
+                  id={fieldMessageId}
+                  tone={tone}
+                  message={message}
+                />
               ) : null}
-            </Box>
+            </div>
           );
         }}
       </ThemeConsumer>
diff --git a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
index 450c122d47b..484f44559e0 100644
--- a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Radio Theme: jobStreet Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -36,10 +34,6 @@ exports[`Radio Theme: jobStreet Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -52,24 +46,20 @@ exports[`Radio Theme: jobStreet Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -77,9 +67,7 @@ exports[`Radio Theme: jobStreet Checked 1`] = `
 `;
 
 exports[`Radio Theme: jobStreet Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -112,10 +100,6 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -127,35 +111,27 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -163,9 +139,7 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = `
 `;
 
 exports[`Radio Theme: jobStreet Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -197,10 +171,6 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -212,35 +182,27 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -248,9 +210,7 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = `
 `;
 
 exports[`Radio Theme: jobStreet Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -282,10 +242,6 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -298,24 +254,20 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -323,9 +275,7 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = `
 `;
 
 exports[`Radio Theme: jobStreet With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -358,10 +308,6 @@ exports[`Radio Theme: jobStreet With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -373,50 +319,42 @@ exports[`Radio Theme: jobStreet With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
@@ -425,9 +363,7 @@ exports[`Radio Theme: jobStreet With message 1`] = `
 `;
 
 exports[`Radio Theme: seekAnz Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -460,10 +396,6 @@ exports[`Radio Theme: seekAnz Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -476,24 +408,20 @@ exports[`Radio Theme: seekAnz Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -501,9 +429,7 @@ exports[`Radio Theme: seekAnz Checked 1`] = `
 `;
 
 exports[`Radio Theme: seekAnz Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -536,10 +462,6 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -551,35 +473,27 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -587,9 +501,7 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = `
 `;
 
 exports[`Radio Theme: seekAnz Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -621,10 +533,6 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -636,35 +544,27 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -672,9 +572,7 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = `
 `;
 
 exports[`Radio Theme: seekAnz Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -706,10 +604,6 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -722,24 +616,20 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -747,9 +637,7 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = `
 `;
 
 exports[`Radio Theme: seekAnz With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -782,10 +670,6 @@ exports[`Radio Theme: seekAnz With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -797,50 +681,42 @@ exports[`Radio Theme: seekAnz With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
@@ -849,9 +725,7 @@ exports[`Radio Theme: seekAnz With message 1`] = `
 `;
 
 exports[`Radio Theme: seekAsia Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -884,10 +758,6 @@ exports[`Radio Theme: seekAsia Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -900,24 +770,20 @@ exports[`Radio Theme: seekAsia Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -925,9 +791,7 @@ exports[`Radio Theme: seekAsia Checked 1`] = `
 `;
 
 exports[`Radio Theme: seekAsia Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -960,10 +824,6 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -975,35 +835,27 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1011,9 +863,7 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = `
 `;
 
 exports[`Radio Theme: seekAsia Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -1045,10 +895,6 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1060,35 +906,27 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1096,9 +934,7 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = `
 `;
 
 exports[`Radio Theme: seekAsia Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -1130,10 +966,6 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1146,24 +978,20 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1171,9 +999,7 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = `
 `;
 
 exports[`Radio Theme: seekAsia With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1206,10 +1032,6 @@ exports[`Radio Theme: seekAsia With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1221,50 +1043,42 @@ exports[`Radio Theme: seekAsia With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 24px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 24px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
@@ -1273,9 +1087,7 @@ exports[`Radio Theme: seekAsia With message 1`] = `
 `;
 
 exports[`Radio Theme: wireframe Checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1308,10 +1120,6 @@ exports[`Radio Theme: wireframe Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1324,24 +1132,20 @@ exports[`Radio Theme: wireframe Checked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1349,9 +1153,7 @@ exports[`Radio Theme: wireframe Checked 1`] = `
 `;
 
 exports[`Radio Theme: wireframe Children when checked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1384,10 +1186,6 @@ exports[`Radio Theme: wireframe Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1399,35 +1197,27 @@ exports[`Radio Theme: wireframe Children when checked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1435,9 +1225,7 @@ exports[`Radio Theme: wireframe Children when checked 1`] = `
 `;
 
 exports[`Radio Theme: wireframe Children when unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -1469,10 +1257,6 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1484,35 +1268,27 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1520,9 +1296,7 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = `
 `;
 
 exports[`Radio Theme: wireframe Unchecked 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     class="Radio__realRadio"
@@ -1554,10 +1328,6 @@ exports[`Radio Theme: wireframe Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 0;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1570,24 +1340,20 @@ exports[`Radio Theme: wireframe Unchecked 1`] = `
     </label>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__neutral fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
-        >
-          <div
-            class="height__standardText"
-          />
-          <div />
-        </div>
+          class="height__standardText"
+        />
+        <div />
       </div>
     </div>
   </div>
@@ -1595,9 +1361,7 @@ exports[`Radio Theme: wireframe Unchecked 1`] = `
 `;
 
 exports[`Radio Theme: wireframe With message 1`] = `
-<div
-  class="Box__root borderColor__standard"
->
+<div>
   <input
     aria-describedby="id-message"
     checked=""
@@ -1630,10 +1394,6 @@ exports[`Radio Theme: wireframe With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
-        <div
-          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
-          style="opacity: 1;"
-        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1645,50 +1405,42 @@ exports[`Radio Theme: wireframe With message 1`] = `
       </div>
     </label>
     <div
-      class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+      class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
+      style="margin-left: 30px;"
     >
-      <div
-        class="Radio__children Box__root borderColor__standard paddingBottom__medium paddingLeft__medium"
-        style="margin-left: 30px;"
-      >
-        Children
-      </div>
+      Children
     </div>
   </div>
   <div
-    class="Box__root borderColor__standard paddingRight__none paddingLeft__none"
+    class="Box__root borderColor__standard paddingBottom__small"
+    id="id-message"
+    tabindex="-1"
   >
     <div
-      class="Box__root borderColor__standard paddingBottom__small"
-      id="id-message"
-      tabindex="-1"
+      class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
     >
       <div
-        class="Text__block fontFamily__text color__critical fontSize__standard fontWeight__regular transform__standardText Box__root borderColor__standard"
+        class="FieldMessage__content"
       >
         <div
-          class="FieldMessage__content"
+          class="height__standardText"
+        />
+        <div
+          class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
         >
-          <div
-            class="height__standardText"
-          />
-          <div
-            class="FieldMessage__icon Box__root borderColor__standard paddingRight__xsmall"
+          <svg
+            class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
+            height="16"
+            viewBox="0 0 512 512"
+            width="16"
           >
-            <svg
-              class="width__standardText height__standardText fill__critical Icon__block Box__root borderColor__standard"
-              height="16"
-              viewBox="0 0 512 512"
-              width="16"
-            >
-              <path
-                d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
-              />
-            </svg>
-          </div>
-          <div>
-            Message
-          </div>
+            <path
+              d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
+            />
+          </svg>
+        </div>
+        <div>
+          Message
         </div>
       </div>
     </div>
diff --git a/lib/components/index.ts b/lib/components/index.ts
index 3201cbba691..bdb79d64eb1 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -18,7 +18,6 @@ export { default as FieldMessage } from './FieldMessage/FieldMessage';
 export { default as Radio } from './Radio/Radio';
 export { default as Strong } from './Strong/Strong';
 export { default as Text } from './Text/Text';
-export { default as ChecklistCard } from './ChecklistCard/ChecklistCard';
 export { default as ChevronIcon } from './icons/ChevronIcon/ChevronIcon';
 export { default as ErrorIcon } from './icons/ErrorIcon/ErrorIcon';
 export { default as InfoIcon } from './icons/InfoIcon/InfoIcon';

From fc360256590dfeb995e1275a2967fb3256e05727 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Tue, 19 Feb 2019 11:49:36 +1100
Subject: [PATCH 13/14] fix: Reinstate error border on Checkbox and Radio

---
 lib/components/Checkbox/Checkbox.tsx          | 13 +++
 .../__snapshots__/Checkbox.test.tsx.snap      | 80 +++++++++++++++++++
 lib/components/Radio/Radio.tsx                | 10 +++
 .../Radio/__snapshots__/Radio.test.tsx.snap   | 80 +++++++++++++++++++
 4 files changed, 183 insertions(+)

diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
index 6394159b878..f7948b49a90 100644
--- a/lib/components/Checkbox/Checkbox.tsx
+++ b/lib/components/Checkbox/Checkbox.tsx
@@ -167,6 +167,19 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                         theme.atoms.transition.fast
                       )}
                     />
+                    <Box
+                      borderColor="critical"
+                      borderWidth="standard"
+                      style={{
+                        opacity: tone === 'critical' ? 1 : 0
+                      }}
+                      className={classnames(
+                        styles.checkbox,
+                        styles.checkboxCritical,
+                        theme.atoms.borderRadius.standard,
+                        theme.atoms.transition.fast
+                      )}
+                    />
                     <Box
                       className={classnames(
                         styles.checkboxIcon,
diff --git a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 32f37e7bbe1..5efcca48293 100644
--- a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -36,6 +36,10 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -115,6 +119,10 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -199,6 +207,10 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -283,6 +295,10 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -362,6 +378,10 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -463,6 +483,10 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -542,6 +566,10 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -626,6 +654,10 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -710,6 +742,10 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -789,6 +825,10 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -890,6 +930,10 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -969,6 +1013,10 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1053,6 +1101,10 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1137,6 +1189,10 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1216,6 +1272,10 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1317,6 +1377,10 @@ exports[`Checkbox Theme: wireframe Checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1396,6 +1460,10 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1480,6 +1548,10 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1564,6 +1636,10 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
@@ -1643,6 +1719,10 @@ exports[`Checkbox Theme: wireframe With message 1`] = `
         <div
           class="Checkbox__checkbox Checkbox__checkboxDisabled borderRadius__standard transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Checkbox__checkbox Checkbox__checkboxCritical borderRadius__standard transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Checkbox__checkboxIcon transition__fast Box__root borderColor__standard"
         >
diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx
index 5a824d8f0ce..16def89da89 100644
--- a/lib/components/Radio/Radio.tsx
+++ b/lib/components/Radio/Radio.tsx
@@ -146,6 +146,16 @@ export default class Radio extends Component<RadioProps, State> {
                         theme.atoms.transition.fast
                       )}
                     />
+                    <Box
+                      borderColor="critical"
+                      borderWidth="standard"
+                      style={{ opacity: tone === 'critical' ? 1 : 0 }}
+                      className={classnames(
+                        styles.radio,
+                        styles.radioCritical,
+                        theme.atoms.transition.fast
+                      )}
+                    />
                     <Box
                       backgroundColor={
                         disabled ? 'formAccentDisabled' : 'formAccent'
diff --git a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
index 484f44559e0..f599b2eb9f0 100644
--- a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -34,6 +34,10 @@ exports[`Radio Theme: jobStreet Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -100,6 +104,10 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -171,6 +179,10 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -242,6 +254,10 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -308,6 +324,10 @@ exports[`Radio Theme: jobStreet With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -396,6 +416,10 @@ exports[`Radio Theme: seekAnz Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -462,6 +486,10 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -533,6 +561,10 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -604,6 +636,10 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -670,6 +706,10 @@ exports[`Radio Theme: seekAnz With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -758,6 +798,10 @@ exports[`Radio Theme: seekAsia Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -824,6 +868,10 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -895,6 +943,10 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -966,6 +1018,10 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1032,6 +1088,10 @@ exports[`Radio Theme: seekAsia With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1120,6 +1180,10 @@ exports[`Radio Theme: wireframe Checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1186,6 +1250,10 @@ exports[`Radio Theme: wireframe Children when checked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1257,6 +1325,10 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1328,6 +1400,10 @@ exports[`Radio Theme: wireframe Unchecked 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 0;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />
@@ -1394,6 +1470,10 @@ exports[`Radio Theme: wireframe With message 1`] = `
         <div
           class="Radio__radio Radio__radioDisabled transition__fast Box__root backgroundColor__inputDisabled borderColor__standard borderWidth__standard"
         />
+        <div
+          class="Radio__radio Radio__radioCritical transition__fast Box__root borderColor__critical borderWidth__standard"
+          style="opacity: 1;"
+        />
         <div
           class="Radio__radioIcon transition__fast Box__root backgroundColor__formAccent borderColor__standard"
         />

From 44a6a9666f957fbaa4170d585a48240b71febf59 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Tue, 19 Feb 2019 15:15:34 +1100
Subject: [PATCH 14/14] fix: Fix nested checkbox visibility, add nested Radio
 example

---
 lib/components/Checkbox/Checkbox.css.js |  2 +-
 lib/components/Radio/Radio.docs.tsx     | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lib/components/Checkbox/Checkbox.css.js b/lib/components/Checkbox/Checkbox.css.js
index 6c09204099c..a8212aa1ff6 100644
--- a/lib/components/Checkbox/Checkbox.css.js
+++ b/lib/components/Checkbox/Checkbox.css.js
@@ -67,7 +67,7 @@ export default {
   '.children': {
     display: 'none'
   },
-  '.realCheckbox:checked ~ .content > * > .children': {
+  '.realCheckbox:checked ~ .content > .children': {
     display: 'block'
   }
 };
diff --git a/lib/components/Radio/Radio.docs.tsx b/lib/components/Radio/Radio.docs.tsx
index 5cabbb35390..e24f95d9c91 100644
--- a/lib/components/Radio/Radio.docs.tsx
+++ b/lib/components/Radio/Radio.docs.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Radio from './Radio';
+import Text from '../Text/Text';
 import { ComponentDocs } from '../../../docs/src/types';
 
 const handleChange = () => undefined;
@@ -74,6 +75,20 @@ const docs: ComponentDocs = {
           tone="positive"
         />
       )
+    },
+    {
+      label: 'Nested Radio Button',
+      render: ({ id }) => (
+        <Radio
+          id={id}
+          checked={true}
+          onChange={handleChange}
+          label="Label"
+          message={false}
+        >
+          <Text>This text is visible when the radio button is checked.</Text>
+        </Radio>
+      )
     }
   ]
 };