diff --git a/.storybook/main.js b/.storybook/main.js
index 76303bda..38c20d86 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -14,7 +14,6 @@ const config = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-controls',
     '@storybook/addon-links',
-    '@storybook/addon-knobs',
     '@storybook/addon-storysource',
     '@storybook/addon-mdx-gfm'
   ],
diff --git a/.storybook/preview.js b/.storybook/preview.js
index ff8afb73..c469437a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,14 @@
 import colors from '../src/Styles/colors/palette';
 
 const preview = {
+  decorators: [
+    (Story) => (
+      <div className="Synthesized">
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     backgrounds: {
       default: '$ux-white',
diff --git a/package.json b/package.json
index c518a154..da99ff68 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,6 @@
     "@storybook/addon-controls": "^7.4.1",
     "@storybook/addon-docs": "7.4.1",
     "@storybook/addon-jest": "7.4.1",
-    "@storybook/addon-knobs": "7.0.2",
     "@storybook/addon-links": "7.4.1",
     "@storybook/addon-mdx-gfm": "7.4.1",
     "@storybook/addon-storyshots": "7.4.1",
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
index 7ee97d5a..bc1d8d33 100644
--- a/spec/__snapshots__/Storyshots.test.js.snap
+++ b/spec/__snapshots__/Storyshots.test.js.snap
@@ -5139,9 +5139,6 @@ exports[`Storyshots Components/Card Default 1`] = `
   >
     Subtitle
   </h3>
-  <div>
-    Use knobs to try out the different card sizes
-  </div>
 </section>
 `;
 
@@ -7286,13 +7283,6 @@ exports[`Storyshots Components/Form Elements/CheckboxButtonGroup Default 1`] = `
     htmlFor="checkbox-button-group"
   >
     Legend
-    <span
-      className="InputLegend__helper-text"
-    >
-       (
-      use the knobs to try out different variations
-      )
-    </span>
   </legend>
   <div
     className="CheckboxButtonGroup"
@@ -8115,7 +8105,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
     name=""
   >
     <label
-      className="FormControlLabel FormControlLabel--active"
+      className="FormControlLabel FormControlLabel--bordered FormControlLabel--active"
       htmlFor="value-1"
     >
       <span
@@ -8135,7 +8125,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
       </span>
     </label>
     <label
-      className="FormControlLabel"
+      className="FormControlLabel FormControlLabel--bordered"
       htmlFor="value-2"
     >
       <span
@@ -8155,7 +8145,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Radio Button Group
       </span>
     </label>
     <label
-      className="FormControlLabel"
+      className="FormControlLabel FormControlLabel--bordered"
       htmlFor="value-3"
     >
       <span
@@ -8666,13 +8656,6 @@ exports[`Storyshots Components/Form Elements/RadioButtonGroup Default 1`] = `
     htmlFor="radio-button-group"
   >
     Legend
-    <span
-      className="InputLegend__helper-text"
-    >
-       (
-      use the knobs to try out different variations
-      )
-    </span>
   </legend>
   <div
     className="RadioButtonGroup"
@@ -11718,6 +11701,57 @@ Array [
 ]
 `;
 
+exports[`Storyshots Components/RichTextEditor Set Content 1`] = `
+Array [
+  <button
+    className="Button btn btn-primary"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Set content to "Oh hey"
+  </button>,
+  <span
+    aria-busy={true}
+    aria-live="polite"
+  >
+    <span
+      className="react-loading-skeleton LoadingSkeleton"
+      style={
+        Object {
+          "--base-color": "#E1E1E1",
+          "borderRadius": "4px",
+          "height": 40,
+          "width": "100%",
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>,
+  <span
+    aria-busy={true}
+    aria-live="polite"
+  >
+    <span
+      className="react-loading-skeleton LoadingSkeleton"
+      style={
+        Object {
+          "--base-color": "#E1E1E1",
+          "borderRadius": "4px",
+          "height": 70,
+          "width": "100%",
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>,
+]
+`;
+
 exports[`Storyshots Components/Selects/Async Default 1`] = `
 <div
   className="FormGroup"
@@ -25206,7 +25240,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
@@ -25228,7 +25262,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
@@ -25250,7 +25284,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
@@ -25272,7 +25306,7 @@ Array [
   />,
   <div>
     <p>
-      Click the button to see a toast message.  Use the knobs to try different types!
+      Click the button to see a toast message.
     </p>
     <button
       className="Button btn btn-primary"
diff --git a/src/Alert/Alert.stories.jsx b/src/Alert/Alert.stories.jsx
index 30ae54a3..a6a7dd35 100644
--- a/src/Alert/Alert.stories.jsx
+++ b/src/Alert/Alert.stories.jsx
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { boolean, text, withKnobs } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import { Alert, MessageTypes } from 'src/Alert';
@@ -14,7 +13,6 @@ import '../../scss/global.scss';
 export default {
   title: 'Components/Alert',
   component: Alert,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -25,9 +23,9 @@ export default {
 export const Success = () => (
   <Alert
     id="1"
-    message={text('Message', 'Success message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Success title')}
+    message="Success message"
+    removeBorderLeft={false}
+    title="Success title"
     type={MessageTypes.SUCCESS}
   />
 );
@@ -35,9 +33,9 @@ export const Success = () => (
 export const Info = () => (
   <Alert
     id="2"
-    message={text('Message', 'Info message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Info title')}
+    message="Info message"
+    removeBorderLeft={false}
+    title="Info title"
     type={MessageTypes.INFO}
   />
 );
@@ -45,9 +43,9 @@ export const Info = () => (
 export const Feature = () => (
   <Alert
     id="3"
-    message={text('Message', 'Some context around new feature if needed.')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'New feature alert!')}
+    message="Some context around new feature if needed."
+    removeBorderLeft={false}
+    title="New feature alert!"
     type={MessageTypes.FEATURE}
   />
 );
@@ -55,9 +53,9 @@ export const Feature = () => (
 export const Error = () => (
   <Alert
     id="4"
-    message={text('Message', 'Error message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Error title')}
+    message="Error message"
+    removeBorderLeft={false}
+    title="Error title"
     type={MessageTypes.ERROR}
   />
 );
@@ -65,9 +63,9 @@ export const Error = () => (
 export const Warning = () => (
   <Alert
     id="5"
-    message={text('Message', 'Warning message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Warning title')}
+    message="Warning message"
+    removeBorderLeft={false}
+    title="Warning title"
     type={MessageTypes.WARNING}
   />
 );
@@ -79,9 +77,9 @@ const onDismiss = (id) => {
 export const WithDismiss = () => (
   <Alert
     id="6"
-    message={text('Message', 'Default message')}
-    removeBorderLeft={boolean('removeBorderLeft', false)}
-    title={text('Title', 'Default title')}
+    message="Default message"
+    removeBorderLeft={false}
+    title="Default title"
     type={MessageTypes.SUCCESS}
     onDismiss={onDismiss}
   />
@@ -114,7 +112,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="8"
       message="Success message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Success title"
       type={MessageTypes.SUCCESS}
       onDismiss={onDismiss}
@@ -123,7 +121,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="9"
       message="Info message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Info title"
       type={MessageTypes.INFO}
       onDismiss={onDismiss}
@@ -132,7 +130,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="11"
       message="Error message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Error title"
       type={MessageTypes.ERROR}
       onDismiss={onDismiss}
@@ -141,7 +139,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="12"
       message="Warning message"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="Warning title"
       type={MessageTypes.WARNING}
       onDismiss={onDismiss}
@@ -150,7 +148,7 @@ export const WithCallToAction = () => (
       action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
       id="13"
       message="Some context around new feature if needed"
-      removeBorderLeft={boolean('removeBorderLeft', false)}
+      removeBorderLeft={false}
       title="New feature alert!"
       type={MessageTypes.FEATURE}
       onDismiss={onDismiss}
@@ -167,8 +165,8 @@ export const WithCallToAction = () => (
           <GoogleCalendarButton />
         </Fragment>
       )}
-      removeBorderLeft={boolean('removeBorderLeft', false)}
-      title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
+      removeBorderLeft={false}
+      title="Connect to Google Calendar to create reminders automatically"
       type={MessageTypes.ANNOUNCEMENT}
       onDismiss={onDismiss}
     />
@@ -177,10 +175,10 @@ export const WithCallToAction = () => (
     <Alert
       action={<GoogleCalendarButton />}
       id="8"
-      message={text('Message', `When you confirm a session we’ll automatically
-      add an event and reminders to your Google Calendar.`)}
-      removeBorderLeft={boolean('removeBorderLeft', false)}
-      title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
+      message={`When you confirm a session we’ll automatically
+      add an event and reminders to your Google Calendar.`}
+      removeBorderLeft={false}
+      title="Connect to Google Calendar to create reminders automatically"
       type={MessageTypes.ANNOUNCEMENT}
       onDismiss={onDismiss}
     />
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 5f4c8826..d45527b8 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { boolean, text, withKnobs } from '@storybook/addon-knobs';
-
 import Button from 'src/Button';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faFileAlt, faCaretDown, faPaperPlane } from '@fortawesome/pro-regular-svg-icons';
@@ -13,7 +11,6 @@ import mdx from './Button.mdx';
 export default {
   title: 'Components/Button',
   component: Button,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -488,9 +485,9 @@ export const Brands = () => (
 export const Loading = () => (
   <>
     <Button
-      isLoading={boolean('isLoading', true)}
+      isLoading
       leadingIcon={faFileAlt as IconDefinition}
-      loadingText={text('loadingText', 'Loading...')}
+      loadingText="Loading..."
       size="sm"
       variant="primary"
     >
@@ -498,9 +495,9 @@ export const Loading = () => (
     </Button>
     {' '}
     <Button
-      isLoading={boolean('isLoading', true)}
+      isLoading
       leadingIcon={faFileAlt as IconDefinition}
-      loadingText={text('loadingText', 'Loading...')}
+      loadingText="Loading..."
       size="sm"
       variant="outline-primary"
     >
@@ -508,18 +505,18 @@ export const Loading = () => (
     </Button>
     {' '}
     <Button
-      isLoading={boolean('isLoading', true)}
+      isLoading
       leadingIcon={faFileAlt as IconDefinition}
-      loadingText={text('loadingText', 'Loading...')}
+      loadingText="Loading..."
       variant="primary"
     >
       Confirm
     </Button>
     {' '}
     <Button
-      isLoading={boolean('isLoading', true)}
+      isLoading
       leadingIcon={faFileAlt as IconDefinition}
-      loadingText={text('loadingText', 'Loading...')}
+      loadingText="Loading..."
       variant="outline-primary"
     >
       Confirm
diff --git a/src/Card/Card.stories.jsx b/src/Card/Card.stories.jsx
index d36b8c2c..4a675099 100644
--- a/src/Card/Card.stories.jsx
+++ b/src/Card/Card.stories.jsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import {
-  withKnobs, text, select, boolean, number,
-} from '@storybook/addon-knobs';
 
 import Card, { CardSizes } from 'src/Card';
 import { LoadingSkeleton } from 'src/LoadingSkeleton';
@@ -12,7 +9,6 @@ import mdx from './Card.mdx';
 export default {
   title: 'Components/Card',
   component: Card,
-  decorators: [withKnobs({ escapeHTML: false })],
   parameters: {
     docs: {
       page: mdx,
@@ -22,17 +18,13 @@ export default {
 
 export const Default = () => (
   <Card
-    divided={boolean('divided', false)}
-    helperText={text('helperText', '(helper text)')}
-    noPadding={boolean('noPadding', false)}
-    size={select('size', CardSizes, undefined)}
-    subTitle={text('subTitle', 'Subtitle')}
-    title={text('title', 'Default card title')}
-  >
-    <div>
-      Use knobs to try out the different card sizes
-    </div>
-  </Card>
+    divided={false}
+    helperText="(helper text)"
+    noPadding={false}
+    size={undefined}
+    subTitle="Subtitle"
+    title="Default card title"
+  />
 );
 
 export const Sizes = () => (
@@ -71,13 +63,13 @@ export const Sizes = () => (
 
 export const LoadingDefault = () => (
   <Card
-    divided={boolean('divided', false)}
-    helperText={text('helperText', '(helper text)')}
-    isLoading={boolean('isLoading', true)}
-    noPadding={boolean('noPadding', false)}
-    size={select('size', CardSizes, undefined)}
-    subTitle={text('subTitle', 'Subtitle')}
-    title={text('title', 'Default card title')}
+    divided={false}
+    helperText="(helper text)"
+    isLoading
+    noPadding={false}
+    size={undefined}
+    subTitle="Subtitle"
+    title="Default card title"
   >
     <Text>
       Powerful panel management and recruitment automation.
@@ -89,14 +81,14 @@ export const LoadingDefault = () => (
 
 export const LoadingParagraphCount = () => (
   <Card
-    divided={boolean('divided', false)}
-    helperText={text('helperText', '(helper text)')}
-    isLoading={boolean('isLoading', true)}
-    loadingSkeletonParagraphCount={number('loadingSkeletonParagraphCount', 2)}
-    noPadding={boolean('noPadding', false)}
-    size={select('size', CardSizes, undefined)}
-    subTitle={text('subTitle', 'Subtitle')}
-    title={text('title', 'Default card title')}
+    divided={false}
+    helperText="(helper text)"
+    isLoading
+    loadingSkeletonParagraphCount={2}
+    noPadding={false}
+    size={undefined}
+    subTitle="Subtitle"
+    title="Default card title"
   >
     <Text>
       Powerful panel management and recruitment automation.
@@ -126,14 +118,14 @@ export const LoadingCustom = () => {
 
   return (
     <Card
-      divided={boolean('divided', false)}
-      helperText={text('helperText', '(helper text)')}
-      isLoading={boolean('isLoading', true)}
+      divided={false}
+      helperText="(helper text)"
+      isLoading
       loadingSkeleton={CustomLoadingSkeleton}
-      noPadding={boolean('noPadding', false)}
-      size={select('size', CardSizes, CardSizes.SMALL)}
-      subTitle={text('subTitle', 'Subtitle')}
-      title={text('title', 'Default card title')}
+      noPadding={false}
+      size={CardSizes.SMALL}
+      subTitle="Subtitle"
+      title="Default card title"
     />
   );
 };
diff --git a/src/CardStack/CardStack.stories.jsx b/src/CardStack/CardStack.stories.jsx
index 96ceb3c4..a3dfc781 100644
--- a/src/CardStack/CardStack.stories.jsx
+++ b/src/CardStack/CardStack.stories.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Card, { CardSizes } from 'src/Card';
-import { withKnobs, select } from '@storybook/addon-knobs';
 import { Flex } from 'src/Flex';
 import CardStack from './CardStack';
 
@@ -9,7 +8,6 @@ import mdx from './CardStack.mdx';
 
 export default {
   title: 'Layouts/CardStack',
-  decorators: [withKnobs],
   component: CardStack,
   parameters: {
     docs: {
@@ -19,7 +17,7 @@ export default {
 };
 
 export const Default = () => (
-  <CardStack size={select('size', Object.values(CardSizes), CardSizes.SMALL)}>
+  <CardStack size={CardSizes.SMALL}>
     <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>CardStack</h1>
     <Card title="Card 1">
       <p>A layout container for a vertical stack of <code>Card</code> components</p>
@@ -32,7 +30,7 @@ export const Default = () => (
 
 export const Centered = () => (
   <Flex container justifyContent="center">
-    <CardStack size={select('size', Object.values(CardSizes), CardSizes.SMALL)}>
+    <CardStack size={CardSizes.SMALL}>
       <h1 style={{ fontSize: '1.5rem', fontWeight: 700 }}>CardStack</h1>
       <Card title="Card 1">
         <p>Many pages consist of <code>CardStack</code> containers centered on the page.</p>
diff --git a/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx b/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx
index 3301fe5d..685554a7 100644
--- a/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx
+++ b/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx
@@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-import {
- boolean, radios, text, withKnobs,
-} from '@storybook/addon-knobs';
 import { ORIENTATIONS } from '../ControlButtonGroup';
 import CheckboxButtonGroup from './index';
 import CheckboxButton from '../CheckboxButton';
@@ -12,7 +9,6 @@ import mdx from './CheckboxButtonGroup.mdx';
 export default {
   title: 'Components/Form Elements/CheckboxButtonGroup',
   component: CheckboxButtonGroup,
-  decorators: [withKnobs()],
   parameters: {
     docs: {
       page: mdx,
@@ -61,22 +57,18 @@ const CheckboxButtonGroupComponent = ({
 /* eslint-enable react/prop-types */
 
 export const Default = () => {
-  const orientation = radios(
-    'Orientation',
-    Object.values(ORIENTATIONS),
-    ORIENTATIONS.COLUMN,
-  );
-  const bordered = boolean('Bordered buttons', false);
+  const orientation = ORIENTATIONS.COLUMN;
+  const bordered = false;
 
   return (
     <CheckboxButtonGroupComponent
-      bordered={boolean('Bordered Form Group', false)}
+      bordered={false}
       defaultValue={[]}
       elementType="fieldset"
-      fullWidth={boolean('Full width', false)}
+      fullWidth={false}
       id="with-checkbox-button-group"
       label="Legend"
-      labelHelperText="use the knobs to try out different variations"
+      labelHelperText=""
       labelHtmlFor="checkbox-button-group"
       orientation={orientation}
     >
@@ -84,21 +76,21 @@ export const Default = () => {
         bordered={bordered}
         Control={CheckboxButton}
         id="value-1"
-        text={text('Label 1', 'Value 1')}
+        text="Value 1"
         value="1"
       />
       <FormControlLabel
         bordered={bordered}
         Control={CheckboxButton}
         id="value-2"
-        text={text('Label 2', 'Value 2')}
+        text="Value 2"
         value="2"
       />
       <FormControlLabel
         bordered={bordered}
         Control={CheckboxButton}
         id="value-3"
-        text={text('Label 3', 'Value 3')}
+        text="Value 3"
         value="3"
       />
     </CheckboxButtonGroupComponent>
diff --git a/src/Container/Container.stories.jsx b/src/Container/Container.stories.jsx
index 187c639d..ea6bdb25 100644
--- a/src/Container/Container.stories.jsx
+++ b/src/Container/Container.stories.jsx
@@ -1,11 +1,5 @@
 import React from 'react';
 
-import {
-  boolean,
-  select,
-  withKnobs,
-} from '@storybook/addon-knobs';
-
 import Card from 'src/Card';
 import { Col, Container, Row } from 'src/Container';
 import mdx from './Container.mdx';
@@ -13,7 +7,6 @@ import mdx from './Container.mdx';
 export default {
   title: 'Layouts/Container',
   component: Container,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -35,7 +28,7 @@ export const Default = () => (
 );
 
 export const FluidContainer = () => (
-  <Container fluid={boolean('fluid', true)}>
+  <Container fluid>
     <Row>
       <Col>
         <Card title="Fluid container">
@@ -47,7 +40,7 @@ export const FluidContainer = () => (
 );
 
 export const FluidContainerWithBreakpoints = () => (
-  <Container fluid={select('breakpoint', ['sm', 'md', 'lg', 'xl', 'xxl'], 'md')}>
+  <Container fluid="md">
     <Row>
       <Col>
         <Card title="Fluid container with breakpoints">
@@ -90,7 +83,7 @@ export const AutoLayoutColumns = () => (
 );
 
 export const SettingOneColumnWidth = () => {
-  const xs = select('column width', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 8);
+  const xs = 8;
 
   return (
     <Container>
diff --git a/src/CopyToClipboard/CopyToClipboard.stories.jsx b/src/CopyToClipboard/CopyToClipboard.stories.jsx
index 761ebecb..99fca238 100644
--- a/src/CopyToClipboard/CopyToClipboard.stories.jsx
+++ b/src/CopyToClipboard/CopyToClipboard.stories.jsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import { withKnobs, text } from '@storybook/addon-knobs';
 
 import CopyToClipboard from 'src/CopyToClipboard';
 
 export default {
   title: 'Components/Copy To Clipboard',
   component: CopyToClipboard,
-  decorators: [withKnobs({ escapeHTML: false })],
 };
 
 export const Default = () => (
   <CopyToClipboard
-    copyText={text('Copy text', 'Copy me!')}
+    copyText="Copy me!"
     trackingEvent="copy-text"
   />
 );
diff --git a/src/CopyToClipboardButton/CopyToClipboardButton.stories.jsx b/src/CopyToClipboardButton/CopyToClipboardButton.stories.jsx
index 5647780f..8337fd85 100644
--- a/src/CopyToClipboardButton/CopyToClipboardButton.stories.jsx
+++ b/src/CopyToClipboardButton/CopyToClipboardButton.stories.jsx
@@ -1,26 +1,24 @@
 import React from 'react';
-import { withKnobs, text } from '@storybook/addon-knobs';
 
 import CopyToClipboardButton from 'src/CopyToClipboardButton';
 
 export default {
   title: 'Components/Copy To Clipboard Button',
   component: CopyToClipboardButton,
-  decorators: [withKnobs({ escapeHTML: false })],
 };
 
 export const Default = () => (
   <CopyToClipboardButton
-    copyText={text('Copy text', 'Copy me!')}
-    displayText={text('Display text', 'Click to copy')}
+    copyText="Copy me!"
+    displayText="Click to copy"
     trackingEvent="copy-text"
   />
 );
 
 export const Secondary = () => (
   <CopyToClipboardButton
-    copyText={text('Copy text', 'Copy me!')}
-    displayText={text('Display text', 'Click to copy')}
+    copyText="Copy me!"
+    displayText="Click to copy"
     trackingEvent="copy-text"
     variant="secondary"
   />
diff --git a/src/Drawer/Drawer.mdx b/src/Drawer/Drawer.mdx
index c50a8855..57a47cf1 100644
--- a/src/Drawer/Drawer.mdx
+++ b/src/Drawer/Drawer.mdx
@@ -1,24 +1,29 @@
-import { ArgTypes,  Canvas } from '@storybook/blocks';
-import Drawer from './Drawer';
-import DrawerHeader from './DrawerHeader';
-import DrawerBody from './DrawerBody';
-import DrawerFooter from './DrawerFooter';
-import * as ComponentStories from './Drawer.stories';
+import { ArgTypes, Canvas } from "@storybook/blocks";
+import Drawer from "./Drawer";
+import DrawerHeader from "./DrawerHeader";
+import DrawerBody from "./DrawerBody";
+import DrawerFooter from "./DrawerFooter";
+import * as ComponentStories from "./Drawer.stories";
 
 # Drawer
 
 ##
 
 <h4>
-  Drawers are container elements which slide in and sit on top of an application's main window. To return to the main interface users must click outside of the drawer, click an action within the drawer such as a close or cancel button, or press the escape key.
+  Drawers are container elements which slide in and sit on top of an
+  application's main window. To return to the main interface users must click
+  outside of the drawer, click an action within the drawer such as a close or
+  cancel button, or press the escape key.
 </h4>
 
 <Canvas of={ComponentStories.Default} />
 
 ### When to use
+
 When we want to focus the user’s attention on an interactive interface or a large amount of information
 
 ### When to not use
+
 When there is too much negative space with the content required. Consider a modal in those cases.
 
 ## Props
@@ -26,23 +31,24 @@ When there is too much negative space with the content required. Consider a moda
 <ArgTypes of={Drawer} />
 
 ## Anatomy:
-* **Drawer**
-    * This the parent component and the only one truly required, but its child components are highly encouraged
-    * If you do need to do something fully custom, Drawer can be used as a general purpose container for your own components
-    * Drawer features padding at the top as it is intended to sit behind a navigation bar
-* **DrawerHeader**
-    * Provides a header with a close button, a title (optional) and a button to expand the drawer to the viewport's full width (optional based on a prop to Drawer)
-    * There is also a prop for whether there is a border separating the header from the body. Turning the border off is a good option for drawer's without titles
-* **DrawerBody**
-  * Wraps your components to provide correct spacing within the drawer
-* **DrawerFooter**
-  * Includes a primary action button and a secondary action button (often used for Cancel)
-  * The primary and secondary action buttons are encouraged but not required
-  * If additional actions or other components are required, children of this component are included to the left of the footer (see example below)
+
+- **Drawer**
+  - This the parent component and the only one truly required, but its child components are highly encouraged
+  - If you do need to do something fully custom, Drawer can be used as a general purpose container for your own components
+  - Drawer features padding at the top as it is intended to sit behind a navigation bar
+- **DrawerHeader**
+  - Provides a header with a close button, a title (optional) and a button to expand the drawer to the viewport's full width (optional based on a prop to Drawer)
+  - There is also a prop for whether there is a border separating the header from the body. Turning the border off is a good option for drawer's without titles
+- **DrawerBody**
+  - Wraps your components to provide correct spacing within the drawer
+- **DrawerFooter**
+  - Includes a primary action button and a secondary action button (often used for Cancel)
+  - The primary and secondary action buttons are encouraged but not required
+  - If additional actions or other components are required, children of this component are included to the left of the footer (see example below)
 
 ### Size
 
-There are three `size` options, `sm` (default), `md` and `lg`. Choose size via the knobs to see examples.
+There are three `size` options, `sm` (default), `md` and `lg`.
 
 ### Orientation
 
diff --git a/src/Drawer/Drawer.stories.jsx b/src/Drawer/Drawer.stories.jsx
index 47549d2f..12e2111b 100644
--- a/src/Drawer/Drawer.stories.jsx
+++ b/src/Drawer/Drawer.stories.jsx
@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
-import {
-  withKnobs, select, boolean,
-} from '@storybook/addon-knobs';
 
 import {
- Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerSizes,
+ Drawer, DrawerBody, DrawerFooter, DrawerHeader,
 } from 'src/Drawer';
 
 import Button from 'src/Button';
@@ -19,7 +16,6 @@ import mdx from './Drawer.mdx';
 export default {
   title: 'Components/Drawer',
   component: Drawer,
-  decorators: [withKnobs({ escapeHTML: false })],
   parameters: {
     docs: {
       page: mdx,
@@ -36,17 +32,17 @@ export const Default = () => {
     <>
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
-        behindNav={(boolean('behindNav', true))}
-        defaultExpanded={boolean('defaultExpanded', false)}
-        expandable={boolean('expandable', false)}
-        hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
-        orientation={select('orientation', ['left', 'right'], 'right')}
-        size={select('size', DrawerSizes, 'sm')}
+        behindNav
+        defaultExpanded={false}
+        expandable={false}
+        hasBackgroundOverlay
+        orientation="right"
+        size="sm"
         visible={isVisible}
         onRequestClose={toggleVisible}
       >
         <DrawerHeader
-          bordered={boolean('bordered', true)}
+          bordered
           title="Title goes here"
           onRequestClose={toggleVisible}
         />
@@ -89,17 +85,17 @@ export const Orientation = () => {
     <>
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
-        behindNav={(boolean('behindNav', true))}
-        defaultExpanded={boolean('defaultExpanded', false)}
-        expandable={boolean('expandable', false)}
-        hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
-        orientation={select('orientation', ['left', 'right'], 'left')}
-        size={select('size', DrawerSizes, 'sm')}
+        behindNav
+        defaultExpanded={false}
+        expandable={false}
+        hasBackgroundOverlay
+        orientation="left"
+        size="sm"
         visible={isVisible}
         onRequestClose={toggleVisible}
       >
         <DrawerHeader
-          bordered={boolean('bordered', true)}
+          bordered
           title="Title goes here"
           onRequestClose={toggleVisible}
         />
@@ -142,17 +138,17 @@ export const Expandable = () => {
     <>
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
-        behindNav={(boolean('behindNav', true))}
-        defaultExpanded={boolean('defaultExpanded', false)}
-        expandable={boolean('expandable', true)}
-        hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
-        orientation={select('orientation', ['left', 'right'], 'right')}
-        size={select('size', DrawerSizes, 'sm')}
+        behindNav
+        defaultExpanded={false}
+        expandable
+        hasBackgroundOverlay
+        orientation="right"
+        size="sm"
         visible={isVisible}
         onRequestClose={toggleVisible}
       >
         <DrawerHeader
-          bordered={boolean('bordered', true)}
+          bordered
           title="Title goes here"
           onRequestClose={toggleVisible}
         />
@@ -195,17 +191,17 @@ export const DefaultExpanded = () => {
     <>
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
-        behindNav={(boolean('behindNav', true))}
-        defaultExpanded={boolean('defaultExpanded', true)}
-        expandable={boolean('expandable', false)}
-        hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
-        orientation={select('orientation', ['left', 'right'], 'right')}
-        size={select('size', DrawerSizes, 'sm')}
+        behindNav
+        defaultExpanded
+        expandable={false}
+        hasBackgroundOverlay
+        orientation="right"
+        size="sm"
         visible={isVisible}
         onRequestClose={toggleVisible}
       >
         <DrawerHeader
-          bordered={boolean('bordered', true)}
+          bordered
           title="Title goes here"
           onRequestClose={toggleVisible}
         />
@@ -248,17 +244,17 @@ export const AdditionalActions = () => {
     <>
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
-        behindNav={(boolean('behindNav', true))}
-        defaultExpanded={boolean('defaultExpanded', false)}
-        expandable={boolean('expandable', true)}
-        hasBackgroundOverlay={boolean('hasBackgroundOverlay', false)}
-        orientation={select('orientation', ['left', 'right'], 'right')}
-        size={select('size', DrawerSizes, 'sm')}
+        behindNav
+        defaultExpanded={false}
+        expandable
+        hasBackgroundOverlay={false}
+        orientation="right"
+        size="sm"
         visible={isVisible}
         onRequestClose={toggleVisible}
       >
         <DrawerHeader
-          bordered={boolean('bordered', false)}
+          bordered={false}
           onRequestClose={toggleVisible}
         />
         <DrawerBody>
diff --git a/src/FormControlLabel/FormControlLabel.stories.jsx b/src/FormControlLabel/FormControlLabel.stories.jsx
index ae7146f0..56aa74db 100644
--- a/src/FormControlLabel/FormControlLabel.stories.jsx
+++ b/src/FormControlLabel/FormControlLabel.stories.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, withKnobs } from '@storybook/addon-knobs';
 
 import FormControlLabel from 'src/FormControlLabel';
 import CheckboxButton from 'src/CheckboxButton';
@@ -9,7 +8,6 @@ import RadioButton from 'src/RadioButton';
 export default {
   title: 'Components/Form Elements/Form Control Label',
   component: FormControlLabel,
-  decorators: [withKnobs()],
 };
 
 const FormControlLabelControlComponent = (props) => {
@@ -30,9 +28,9 @@ const FormControlLabelControlComponent = (props) => {
 
 export const Checkbox = () => (
   <FormControlLabelControlComponent
-    bordered={boolean('Bordered button', false)}
+    bordered={false}
     Control={CheckboxButton}
-    disabled={boolean('Disabled', false)}
+    disabled={false}
     id="checkbox"
     name="checkbox"
     text="Labeled checkbox"
@@ -42,7 +40,7 @@ export const Checkbox = () => (
 
 export const CheckboxWithChildren = () => (
   <FormControlLabelControlComponent
-    bordered={boolean('Bordered button', true)}
+    bordered
     Control={CheckboxButton}
     id="checkbox"
     name="checkbox"
@@ -55,7 +53,7 @@ export const CheckboxWithChildren = () => (
 
 export const Radio = () => (
   <FormControlLabelControlComponent
-    bordered={boolean('Bordered radio', false)}
+    bordered={false}
     Control={RadioButton}
     id="radio"
     name="radio"
@@ -66,7 +64,7 @@ export const Radio = () => (
 
 export const RadioWithChildren = () => (
   <FormControlLabelControlComponent
-    bordered={boolean('Bordered radio', true)}
+    bordered
     Control={RadioButton}
     id="radio"
     name="radio"
diff --git a/src/FormGroup/FormGroup.stories.jsx b/src/FormGroup/FormGroup.stories.jsx
index d940db90..1304676c 100644
--- a/src/FormGroup/FormGroup.stories.jsx
+++ b/src/FormGroup/FormGroup.stories.jsx
@@ -1,11 +1,5 @@
 import React, { useState } from 'react';
 import { faSearch } from '@fortawesome/pro-solid-svg-icons';
-import {
-  boolean,
-  radios,
-  text,
-  withKnobs,
-} from '@storybook/addon-knobs';
 
 import FormGroup from 'src/FormGroup';
 import Input from 'src/Input';
@@ -19,7 +13,6 @@ import mdx from './FormGroup.mdx';
 export default {
   title: 'Components/Form Elements/Form Group',
   component: FormGroup,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -68,7 +61,7 @@ export const WithLabelTooltip = () => (
     id="with-label"
     label="Label"
     labelHtmlFor="input"
-    labelTooltip={text('Tooltip', 'Some tooltip text')}
+    labelTooltip="Some tooltip text"
   >
     <InputComponent id="input" name="with-label" />
   </FormGroup>
@@ -247,23 +240,16 @@ const ButtonGroupComponent = ({
 /* eslint-enable react/prop-types */
 
 export const WithRadioButtonGroup = () => {
-  const orientation = radios(
-    'Orientation',
-    Object.values(ORIENTATIONS),
-    ORIENTATIONS.COLUMN,
-  );
-  let bordered = true;
-  if (orientation === ORIENTATIONS.COLUMN) {
-    bordered = boolean('Bordered buttons (only toggleable on column layout)', false);
-  }
+  const orientation = ORIENTATIONS.COLUMN;
+  const bordered = true;
 
   return (
     <ButtonGroupComponent
-      bordered={boolean('Bordered Form Group', true)}
+      bordered
       ButtonGroup={RadioButtonGroup}
       defaultValue="1"
       elementType="fieldset"
-      fullWidth={boolean('Full width', false)}
+      fullWidth={false}
       id="with-radio-button-group"
       label="Form Group with radio button group"
       labelHelperText="with some helper text"
@@ -275,7 +261,7 @@ export const WithRadioButtonGroup = () => {
         Control={RadioButton}
         id="value-1"
         name="choice"
-        text={text('Label 1', 'Value 1')}
+        text="Value 1"
         value="1"
       />
       <FormControlLabel
@@ -283,7 +269,7 @@ export const WithRadioButtonGroup = () => {
         Control={RadioButton}
         id="value-2"
         name="choice"
-        text={text('Label 2', 'Value 2')}
+        text="Value 2"
         value="2"
       />
       <FormControlLabel
@@ -291,7 +277,7 @@ export const WithRadioButtonGroup = () => {
         Control={RadioButton}
         id="value-3"
         name="choice"
-        text={text('Label 3', 'Value 3')}
+        text="Value 3"
         value="3"
       />
     </ButtonGroupComponent>
diff --git a/src/LoadingSkeleton/LoadingSkeleton.stories.jsx b/src/LoadingSkeleton/LoadingSkeleton.stories.jsx
index c1737484..ba634fed 100644
--- a/src/LoadingSkeleton/LoadingSkeleton.stories.jsx
+++ b/src/LoadingSkeleton/LoadingSkeleton.stories.jsx
@@ -1,16 +1,11 @@
 import React from 'react';
 
-import {
-  withKnobs, boolean, number, text,
-} from '@storybook/addon-knobs';
-
 import LoadingSkeleton from './LoadingSkeleton';
 import mdx from './LoadingSkeleton.mdx';
 
 export default {
   title: 'Components/LoadingSkeleton',
   component: LoadingSkeleton,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -23,13 +18,13 @@ export const Default = () => (
 );
 
 export const MultiLine = () => (
-  <LoadingSkeleton count={number('count', 3)} />
+  <LoadingSkeleton count={3} />
 );
 
 export const HeightAndWidth = () => (
-  <LoadingSkeleton height={text('height', '44px')} width={text('width', '200px')} />
+  <LoadingSkeleton height="44px" width="200px" />
 );
 
 export const Circle = () => (
-  <LoadingSkeleton circle={boolean('circle', true)} height={44} width={44} />
+  <LoadingSkeleton circle height={44} width={44} />
 );
diff --git a/src/Pill/Pill.stories.jsx b/src/Pill/Pill.stories.jsx
index 9de70de6..cedcd502 100644
--- a/src/Pill/Pill.stories.jsx
+++ b/src/Pill/Pill.stories.jsx
@@ -1,10 +1,5 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import {
-  withKnobs,
-  text,
-  select,
-} from '@storybook/addon-knobs';
 import {
  faClock, faGiftCard, faGlobe, faMicrophone, faUsers,
 } from '@fortawesome/pro-solid-svg-icons';
@@ -15,7 +10,6 @@ import mdx from './Pill.mdx';
 export default {
   title: 'Components/Pill',
   component: Pill,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -31,10 +25,10 @@ export const Default = () => (
   <div>
     <h4 style={{ marginBottom: '32px' }}>Test Pill</h4>
     <Pill
-      color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
+      color={PILL_COLORS.BLUE}
       id="1"
     >
-      {text('Text', 'Text')}
+      Text
     </Pill>
     <h4 style={{ marginBottom: '32px', marginTop: '32px' }}>Colors</h4>
     <Pill
@@ -146,29 +140,29 @@ export const WithContainer = () => (
 
 export const WithLeadingIcon = () => (
   <Pill
-    color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
+    color={PILL_COLORS.BLUE}
     icon={faUsers}
     id="2"
   >
-    {text('Text', 'Text')}
+    Text
   </Pill>
 );
 
 export const WithClose = () => (
   <Pill
-    color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
+    color={PILL_COLORS.BLUE}
     id="3"
     onClose={handleClose}
   >
-    {text('Text', 'Text')}
+    Text
   </Pill>
 );
 
 export const WithLink = () => (
   <Pill
-    color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
+    color={PILL_COLORS.BLUE}
     id="3"
   >
-    <a href="https://www.userinterviews.com/" rel="noreferrer" target="_blank">{text('Link text', 'Visit our site')}</a>
+    <a href="https://www.userinterviews.com/" rel="noreferrer" target="_blank">Visit our site</a>
   </Pill>
 );
diff --git a/src/Popover/Popover.stories.jsx b/src/Popover/Popover.stories.jsx
index 490d4f5b..a51aab76 100644
--- a/src/Popover/Popover.stories.jsx
+++ b/src/Popover/Popover.stories.jsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
-import { withKnobs, select } from '@storybook/addon-knobs';
 
 import Button from 'src/Button';
 import FormGroup from 'src/FormGroup';
 import Input from 'src/Input';
 
-import { OverlayTrigger, OVERLAY_TRIGGER_PLACEMENT } from 'src/OverlayTrigger';
+import { OverlayTrigger } from 'src/OverlayTrigger';
 import { Popover, PopoverBody, PopoverCard } from 'src/Popover';
 
 import mdx from './Popover.mdx';
@@ -13,7 +12,6 @@ import mdx from './Popover.mdx';
 export default {
   title: 'Components/Popover',
   component: Popover,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -30,7 +28,7 @@ export const Default = () => (
         </PopoverBody>
       </Popover>
     )}
-    placement={select('placement', OVERLAY_TRIGGER_PLACEMENT, 'auto')}
+    placement="auto"
     trigger="click"
   >
     <Button variant="primary">Filter</Button>
@@ -46,7 +44,7 @@ export const Placement = () => (
         </PopoverBody>
       </Popover>
     )}
-    placement={select('placement', OVERLAY_TRIGGER_PLACEMENT, 'bottom')}
+    placement="bottom"
     trigger="click"
   >
     <Button variant="primary">Try different placements</Button>
@@ -67,7 +65,7 @@ export const CardPopover = () => {
           id="popover-basic"
         >
           <PopoverCard
-            size={select('size', ['sm', 'md'], 'sm')}
+            size="sm"
           >
             <h3 style={{ fontSize: '1rem', fontWeight: '700', marginBottom: '24px' }}>Popover with Card styling</h3>
             <FormGroup
diff --git a/src/Popper/Popper.stories.jsx b/src/Popper/Popper.stories.jsx
index e52ab621..0b9779ca 100644
--- a/src/Popper/Popper.stories.jsx
+++ b/src/Popper/Popper.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { withKnobs, text } from '@storybook/addon-knobs';
 
 import Popper from 'src/Popper';
 import mdx from './Popper.mdx';
@@ -7,7 +6,6 @@ import mdx from './Popper.mdx';
 export default {
   title: 'Components/Popper',
   component: Popper,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -16,13 +14,13 @@ export default {
 };
 
 export const Default = () => (
-  <Popper text={text('Popper Text', 'Default Popper')} visible>
+  <Popper text="Default Popper" visible>
     <p>reference element</p>
   </Popper>
 );
 
 export const Dark = () => (
-  <Popper dark text={text('Popper Text', 'Dark Popper')} visible>
+  <Popper dark text="Dark Popper" visible>
     <p>reference element</p>
   </Popper>
 );
diff --git a/src/ProfileCell/ProfileCell.stories.jsx b/src/ProfileCell/ProfileCell.stories.jsx
index ee983b1f..4ddb6de7 100644
--- a/src/ProfileCell/ProfileCell.stories.jsx
+++ b/src/ProfileCell/ProfileCell.stories.jsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import {
- withKnobs, text, number, boolean,
-} from '@storybook/addon-knobs';
 import { faShieldCheck } from '@fortawesome/pro-solid-svg-icons';
 import ProfileCell from 'src/ProfileCell';
 import ProfileCellSkeleton from './ProfileCellSkeleton';
@@ -11,7 +8,6 @@ export default {
   title: 'Components/Profile Cell',
   component: ProfileCell,
   subcomponents: { ProfileCellSkeleton },
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -45,20 +41,20 @@ const userWithImage = {
 
 export const Small = () => (
   <ProfileCell
-    colorId={number('Color ID', undefined)}
-    maxWidth={text('Max Text Width (e.g. 8rem)', '')}
-    showAlert={boolean('Show Alert', false)}
-    subtitle={text('Subtitle Text', `riley@userinterviews.com`)}
+    colorId={undefined}
+    maxWidth=""
+    showAlert={false}
+    subtitle="riley@userinterviews.com"
     user={userNoImage}
   />
 );
 
 export const Large = () => (
   <ProfileCell
-    colorId={number('Color ID', undefined)}
+    colorId={undefined}
     large
-    maxWidth={text('Max Text Width (e.g. 8rem)', '')}
-    showAlert={boolean('Show Alert', false)}
+    maxWidth=""
+    showAlert={false}
     subtitle={largeSubtitle}
     user={userNoImage}
   />
@@ -67,8 +63,8 @@ export const Large = () => (
 export const WithImage = () => (
   <ProfileCell
     large
-    maxWidth={text('Max Text Width (e.g. 8rem)', '')}
-    showAlert={boolean('Show Alert', false)}
+    maxWidth=""
+    showAlert={false}
     subtitle={largeSubtitle}
     user={userWithImage}
   />
@@ -76,10 +72,10 @@ export const WithImage = () => (
 
 export const WithTrailingIcon = () => (
   <ProfileCell
-    colorId={number('Color ID', undefined)}
-    maxWidth={text('Max Text Width (e.g. 8rem)', '')}
-    showAlert={boolean('Show Alert', false)}
-    subtitle={text('Subtitle Text', `riley@userinterviews.com`)}
+    colorId={undefined}
+    maxWidth=""
+    showAlert={false}
+    subtitle="riley@userinterviews.com"
     trailingIcon={faShieldCheck}
     user={userWithImage}
   />
@@ -88,14 +84,14 @@ export const WithTrailingIcon = () => (
 export const Loading = () => (
   <>
     <ProfileCell
-      colorId={number('Color ID', undefined)}
+      colorId={undefined}
       isLoading
-      maxWidth={text('Max Text Width (e.g. 8rem)', '')}
-      showAlert={boolean('Show Alert', false)}
-      subtitle={text('Subtitle Text', `riley@userinterviews.com`)}
+      maxWidth=""
+      showAlert={false}
+      subtitle="riley@userinterviews.com"
       user={userNoImage}
     />
     <br />
-    <ProfileCellSkeleton maxWidth={text('Max Text Width (e.g. 8rem)', '')} />
+    <ProfileCellSkeleton maxWidth="" />
   </>
 );
diff --git a/src/RadioButtonGroup/RadioButtonGroup.stories.jsx b/src/RadioButtonGroup/RadioButtonGroup.stories.jsx
index d0cb53ef..115474bd 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.stories.jsx
+++ b/src/RadioButtonGroup/RadioButtonGroup.stories.jsx
@@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-import {
-  boolean, radios, text, withKnobs,
-} from '@storybook/addon-knobs';
 import { ORIENTATIONS } from '../ControlButtonGroup';
 import RadioButtonGroup from './index';
 import RadioButton from '../RadioButton';
@@ -12,7 +9,6 @@ import mdx from './RadioButtonGroup.mdx';
 export default {
   title: 'Components/Form Elements/RadioButtonGroup',
   component: RadioButtonGroup,
-  decorators: [withKnobs()],
   parameters: {
     docs: {
       page: mdx,
@@ -61,22 +57,18 @@ const RadioButtonGroupComponent = ({
 /* eslint-enable react/prop-types */
 
 export const Default = () => {
-  const orientation = radios(
-    'Orientation',
-    Object.values(ORIENTATIONS),
-    ORIENTATIONS.COLUMN,
-  );
-  const bordered = boolean('Bordered buttons', false);
+  const orientation = ORIENTATIONS.COLUMN;
+  const bordered = false;
 
   return (
     <RadioButtonGroupComponent
-      bordered={boolean('Bordered Form Group', false)}
+      bordered={false}
       defaultValue={null}
       elementType="fieldset"
-      fullWidth={boolean('Full width', false)}
+      fullWidth={false}
       id="with-radio-button-group"
       label="Legend"
-      labelHelperText="use the knobs to try out different variations"
+      labelHelperText=""
       labelHtmlFor="radio-button-group"
       orientation={orientation}
     >
@@ -84,21 +76,21 @@ export const Default = () => {
         bordered={bordered}
         Control={RadioButton}
         id="value-1"
-        text={text('Label 1', 'Value 1')}
+        text="Value 1"
         value="1"
       />
       <FormControlLabel
         bordered={bordered}
         Control={RadioButton}
         id="value-2"
-        text={text('Label 2', 'Value 2')}
+        text="Value 2"
         value="2"
       />
       <FormControlLabel
         bordered={bordered}
         Control={RadioButton}
         id="value-3"
-        text={text('Label 3', 'Value 3')}
+        text="Value 3"
         value="3"
       />
     </RadioButtonGroupComponent>
diff --git a/src/Table/Table.stories.jsx b/src/Table/Table.stories.jsx
index 23833869..a4bb467d 100644
--- a/src/Table/Table.stories.jsx
+++ b/src/Table/Table.stories.jsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
 
-import { withKnobs, boolean, number } from '@storybook/addon-knobs';
-
 import { faFileAlt, faEllipsisV, faThumbtack } from '@fortawesome/pro-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -18,7 +16,6 @@ import mdx from './Table.mdx';
 export default {
   title: 'Components/Table',
   component: Table,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -95,7 +92,7 @@ export const Default = () => (
 );
 
 export const LoadingDefault = () => (
-  <Table isLoading={boolean('isLoading', true)}>
+  <Table isLoading>
     <TableHead>
       <TableRow>
         <TableCell header />
@@ -128,7 +125,7 @@ export const LoadingDefault = () => (
 );
 
 export const LoadingCustomColumns = () => (
-  <Table isLoading={boolean('isLoading', true)} loadingColumns={[75, 100, 250, 250, 100]} loadingRows={number('loadingRows', 4)}>
+  <Table isLoading loadingColumns={[75, 100, 250, 250, 100]} loadingRows={4}>
     <TableHead>
       <TableRow>
         <TableCell header />
diff --git a/src/Toast/Toast.stories.jsx b/src/Toast/Toast.stories.jsx
index 89c46846..852239eb 100644
--- a/src/Toast/Toast.stories.jsx
+++ b/src/Toast/Toast.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { withKnobs, text, radios } from '@storybook/addon-knobs';
 
 import { MessageTypes } from 'src/Alert';
 import Button from 'src/Button';
@@ -11,7 +10,6 @@ import '../../scss/global.scss';
 export default {
   title: 'Components/Toast',
   component: withToast,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -23,7 +21,7 @@ const DummyComponent = ({
  action, type, message, title, setToastMessage,
 }) => (
   <div>
-    <p>Click the button to see a toast message.  Use the knobs to try different types!</p>
+    <p>Click the button to see a toast message.</p>
     <Button
       variant="primary"
       onClick={() => setToastMessage({
@@ -42,9 +40,9 @@ const ToastDummyComponent = withToast(DummyComponent);
 
 export const Default = () => (
   <ToastDummyComponent
-    message={text('Message', 'Your action was a success!')}
-    title={text('Title', 'Title')}
-    type={radios('Message Type', MessageTypes, MessageTypes.SUCCESS)}
+    message="Your action was a success!"
+    title="Title"
+    type={MessageTypes.SUCCESS}
   />
 );
 
@@ -55,8 +53,8 @@ export const ToastCustomMessage = () => (
         <strong>[Some strong text]</strong> and additional text that is wrapped in a fragment.
       </>
     )}
-    title={text('Title', 'Normal string title')}
-    type={radios('Message Type', MessageTypes, MessageTypes.SUCCESS)}
+    title="Normal string title"
+    type={MessageTypes.SUCCESS}
   />
 );
 
@@ -64,17 +62,17 @@ const ManualDismissToastComponent = withToast(DummyComponent, { autoDismiss: fal
 
 export const ManualDismissToast = () => (
   <ManualDismissToastComponent
-    message={text('Message', 'Your action was a success!')}
-    title={text('Title', 'Title')}
-    type={radios('Message Type', MessageTypes, MessageTypes.SUCCESS)}
+    message="Your action was a success!"
+    title="Title"
+    type={MessageTypes.SUCCESS}
   />
 );
 
 export const ToastWithAction = () => (
   <ManualDismissToastComponent
     action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
-    message={text('Message', 'Your action was a success!')}
-    title={text('Title', 'Title')}
-    type={radios('Message Type', MessageTypes, MessageTypes.SUCCESS)}
+    message="Your action was a success!"
+    title="Title"
+    type={MessageTypes.SUCCESS}
   />
 );
diff --git a/src/ToggleInput/ToggleInput.stories.jsx b/src/ToggleInput/ToggleInput.stories.jsx
index c835a82b..ad4eb216 100644
--- a/src/ToggleInput/ToggleInput.stories.jsx
+++ b/src/ToggleInput/ToggleInput.stories.jsx
@@ -1,14 +1,11 @@
 import React, { useState } from 'react';
 import { ToggleInput } from 'src/ToggleInput';
 
-import { boolean, text, withKnobs } from '@storybook/addon-knobs';
-
 import mdx from './ToggleInput.mdx';
 
 export default {
   title: 'Components/ToggleInput',
   component: ToggleInput,
-  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -27,8 +24,8 @@ export const Default = () => {
     <ToggleInput
       id="1"
       isChecked={isChecked}
-      labelLeft={boolean('Label left', false)}
-      labelText={text('Label text', 'Label')}
+      labelLeft={false}
+      labelText="Label"
       onToggle={handleChange}
     />
   );
@@ -45,8 +42,8 @@ export const Checked = () => {
     <ToggleInput
       id="1"
       isChecked={isChecked}
-      labelLeft={boolean('Label left', false)}
-      labelText={text('Label text', 'Label')}
+      labelLeft={false}
+      labelText="Label"
       onToggle={handleChange}
     />
   );
@@ -64,7 +61,7 @@ export const LabelLeft = () => {
       id="1"
       isChecked={isChecked}
       labelLeft
-      labelText={text('Label text', 'Label')}
+      labelText="Label"
       onToggle={handleChange}
     />
   );
@@ -82,8 +79,8 @@ export const Disabled = () => {
       disabled
       id="2"
       isChecked={isChecked}
-      labelLeft={boolean('Label left', false)}
-      labelText={text('Label text', 'Label')}
+      labelLeft={false}
+      labelText="Label"
       onToggle={handleChange}
     />
   );
diff --git a/src/Tooltip/Tooltip.stories.jsx b/src/Tooltip/Tooltip.stories.jsx
index 21264757..8ebdc2c4 100644
--- a/src/Tooltip/Tooltip.stories.jsx
+++ b/src/Tooltip/Tooltip.stories.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, radios, text } from '@storybook/addon-knobs';
 
 import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons';
 
@@ -12,7 +11,7 @@ const withContainer = (story) => <div style={{ padding: '4rem' }}>{story()}</div
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
-  decorators: [withKnobs, withContainer],
+  decorators: [withContainer],
   parameters: {
     docs: {
       page: mdx,
@@ -22,30 +21,30 @@ export default {
 
 export const Default = () => (
   <Tooltip
-    placement={radios('Placement', ['right', 'top', 'bottom', 'left', 'auto'], 'right')}
-    text={text('Tooltip Text', 'Default Tooltip')}
+    placement="right"
+    text="Default Tooltip"
   />
 );
 
 export const Light = () => (
   <Tooltip
     placement="right"
-    text={text('Tooltip Text', 'Light Tooltip')}
+    text="Light Tooltip"
     theme="light"
   />
 );
 
 export const WithHeader = () => (
   <Tooltip
-    header={text('Header Text', 'Default Header')}
+    header="Default Header"
     placement="right"
-    text={text('Tooltip Text', 'Tooltip with Header')}
+    text="Tooltip with Header"
   />
 );
 
 export const WithHtml = () => (
   <Tooltip
-    header={text('Header Text', 'Default Header')}
+    header="Default Header"
     placement="right"
     text={(
       <span>
@@ -60,7 +59,7 @@ export const NeutralIcon = () => (
   <Tooltip
     iconClasses="Tooltip__icon--neutral"
     placement="right"
-    text={text('Tooltip Text', 'Neutral Icon')}
+    text="Neutral Icon"
   />
 );
 
@@ -69,7 +68,7 @@ export const WarningIcon = () => (
     icon={faExclamationTriangle}
     iconClasses="Tooltip__icon--warning"
     placement="right"
-    text={text('Tooltip Text', 'Warning Icon')}
+    text="Warning Icon"
   />
 );
 
@@ -78,14 +77,14 @@ export const ErrorIcon = () => (
     icon={faExclamationTriangle}
     iconClasses="Tooltip__icon--error"
     placement="right"
-    text={text('Tooltip Text', 'Error Icon')}
+    text="Error Icon"
   />
 );
 
 export const WithHover = () => (
   <Tooltip
-    placement={radios('Placement', ['right', 'top', 'bottom', 'left', 'auto'], 'right')}
-    text={text('Tooltip Text', 'Default Tooltip')}
+    placement="right"
+    text="Default Tooltip"
     withHover
   />
 );
@@ -102,7 +101,7 @@ const handleShow = () => {
 export const WithTracking = () => (
   <Tooltip
     placement="right"
-    text={text('Tooltip Text', 'Tracked Tooltip')}
+    text="Tracked Tooltip"
     onShow={handleShow}
   />
 );
diff --git a/yarn.lock b/yarn.lock
index f433535f..93e2270a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2451,23 +2451,6 @@
     tiny-invariant "^1.3.1"
     upath "^2.0.1"
 
-"@storybook/addon-knobs@7.0.2":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-7.0.2.tgz#f28fd180d8a283df6eb67f8f2578f1563b7b7615"
-  integrity sha512-PzKuscxcBPhA2jpDxJ/F+BvBRqHJ8qBki1kS1IOjmJbAfE96WFnweXZ73ImyAJnRtmtReCL6p0ZmFkrNDMDpUw==
-  dependencies:
-    copy-to-clipboard "^3.3.3"
-    core-js "^3.29.0"
-    escape-html "^1.0.3"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    prop-types "^15.8.1"
-    qs "^6.11.1"
-    react-colorful "^5.6.1"
-    react-lifecycles-compat "^3.0.4"
-    react-select "^5.7.0"
-
 "@storybook/addon-links@7.4.1":
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.4.1.tgz#6e19886a00224ef605d5363839afabdbcfe0bdb9"
@@ -5528,7 +5511,7 @@ cookie@0.6.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
-copy-to-clipboard@^3.3.1, copy-to-clipboard@^3.3.3:
+copy-to-clipboard@^3.3.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
   integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
@@ -5552,7 +5535,7 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.29.0, core-js@^3.3.2:
+core-js@^3.3.2:
   version "3.32.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.2.tgz#172fb5949ef468f93b4be7841af6ab1f21992db7"
   integrity sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==
@@ -5949,11 +5932,6 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
-dom-walk@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
-  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
-
 domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
@@ -6306,7 +6284,7 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@^1.0.3, escape-html@~1.0.3:
+escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -7228,14 +7206,6 @@ glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
-  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
-  dependencies:
-    min-document "^2.19.0"
-    process "^0.11.10"
-
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -9615,13 +9585,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-min-document@^2.19.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
-  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
-  dependencies:
-    dom-walk "^0.1.0"
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -10849,7 +10812,7 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.10.0, qs@^6.11.1, qs@^6.11.2:
+qs@^6.10.0, qs@^6.11.2:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
   integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
@@ -10916,7 +10879,7 @@ react-bootstrap@^2.5.0:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
-react-colorful@^5.1.2, react-colorful@^5.6.1:
+react-colorful@^5.1.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
@@ -11089,7 +11052,7 @@ react-router@5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-select@^5.0.0, react-select@^5.7.0:
+react-select@^5.0.0:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.4.tgz#d8cad96e7bc9d6c8e2709bdda8f4363c5dd7ea7d"
   integrity sha512-NhuE56X+p9QDFh4BgeygHFIvJJszO1i1KSkg/JPcIJrbovyRtI+GuOEa4XzFCEpZRAEoEI8u/cAHK+jG/PgUzQ==