Icu 6424 deprecate @storybook/addon knobs (#1386)

✅ Closes: ICU-6424

addons/rose/.storybook/main.js

@@ -6,10 +6,10 @@ module.exports = {
     '../stories/**/*.stories.mdx',
   ],
   addons: [
-    '@storybook/addon-knobs',
-    '@storybook/addon-actions',
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-controls',
   ],
   emberOptions: {
     polyfills: [namedBlockPolyfill],

addons/rose/.storybook/preview.js

@@ -1,5 +1,7 @@
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
-// Registers and enables handlebars language support
+// Registers and enables language support
 SyntaxHighlighter.registerLanguage('handlebars', handlebars);
+SyntaxHighlighter.registerLanguage('scss', scss);

addons/rose/addon/components/rose/anonymous/index.stories.mdx

@@ -1,7 +1,4 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Rose/Anonymous" component="Anonymous" />
 

addons/rose/addon/components/rose/badge/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Badge" component="Badge" />
 
@@ -19,44 +17,45 @@ Styles: outline, dark, informational, informational-outline, success, success-ou
 >Badge</Rose::Badge>
 ```
 
-<Preview>
-  <Story name="Basic">
-    {{
-      template: hbs`<Rose::Badge
+export const Template = (args) => ({
+  template: hbs`<Rose::Badge
       @style={{style}}
       @icon={{icon}}>
       {{text}}
       </Rose::Badge>`,
-      context: {
-        text: text('text', 'Badge'),
-        style: select(
-          'style',
-          {
-            none: 'none',
-            outline: 'outline',
-            dark: 'dark',
-            informational: 'informational',
-            'informational-outline': 'informational-outline',
-            success: 'success',
-            'success-outline': 'success-outline',
-            alert: 'alert',
-            'alert-outline': 'alert-outline',
-            error: 'error',
-            'error-outline': 'error-outline',
-            warning: 'warning',
-            'warning-outline': 'warning-outline',
-          },
-          'none'
-        ),
-        icon: select(
-          'icon',
-          {
-            'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          },
-          'flight-icons/svg/org-16'
-        ),
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Test"
+    args={{
+      text: 'Badge',
+      style: 'none',
+      icon: 'flight-icons/svg/org-16',
+    }}
+    argTypes={{
+      style: {
+        control: 'select',
+        options: [
+          'none',
+          'outline',
+          'dark',
+          'informational',
+          'informational-outline',
+          'success',
+          'success-outline',
+          'alert',
+          'alert-outline',
+          'error',
+          'error-outline',
+          'warning',
+          'warning-outline',
+        ],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/button/index.stories.mdx

@@ -1,9 +1,22 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose/Button" component="Button" />
+<Meta
+  title="Rose/Button"
+  component="Button"
+  argTypes={{
+    style: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'ghost',
+        'inline-link-action',
+      ],
+    },
+  }}
+/>
 
 # Button
 
@@ -17,59 +30,53 @@ other routes. For accessibility, use links instead.
 </Rose::Button>
 ```
 
-<Preview>
-  <Story name="Advanced">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Button
         @submit={{submit}}
         @disabled={{disabled}}
         @style={{style}}
         @iconLeft={{iconLeft}}
         @iconRight={{iconRight}}
+        @iconOnly={{iconOnly}}
         {{on "click" onClick}}
       >
         {{text}}
       </Rose::Button>
     `,
-      context: {
-        text: text('text', 'Action'),
-        submit: boolean('submit', true),
-        disabled: boolean('disabled', false),
-        style: select(
-          'style',
-          {
-            primary: 'primary',
-            secondary: 'secondary',
-            warning: 'warning',
-            ghost: 'ghost',
-            'inline-link-action': 'inline-link-action',
-          },
-          'primary'
-        ),
-        iconLeft: select(
-          'iconLeft',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/check-circle-16'
-        ),
-        iconRight: select(
-          'iconRight',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/clipboard-copy-16'
-        ),
-        onClick: action('clicked'),
-      },
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Advanced"
+    args={{
+      text: 'Action',
+      submit: true,
+      disabled: false,
+      style: 'primary',
+      iconLeft: 'flight-icons/svg/check-circle-16',
+      iconRight: 'flight-icons/svg/clipboard-copy-16',
     }}
+    argTypes={{
+      iconLeft: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
+      },
+      iconRight: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
+      },
+      onClick: { action: 'clicked' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
@@ -77,25 +84,23 @@ Buttons may show only an icon. You should still pass block content into the
 button in this case for accessibility.
 
 <Preview>
-  <Story name="Icon Only">
-    {{
-      template: hbs`
-      <Rose::Button @style="secondary" @iconOnly={{iconOnly}}>
-        Icon Only
-      </Rose::Button>
-    `,
-      context: {
-        iconOnly: select(
-          'iconOnly',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/check-circle-16'
-        ),
+  <Story
+    name="Icon Only"
+    args={{
+      text: 'Icon Only',
+      style: 'secondary',
+      iconOnly: 'flight-icons/svg/check-circle-16',
+    }}
+    argTypes={{
+      iconOnly: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/card/link/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { text, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Card/Link" component="Link" />
 
@@ -18,10 +17,8 @@ Card link component wraps content with `LinkTo` component. Supports title and de
 />
 ```
 
-<Preview>
-  <Story name="Basic">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Card::Link
         @title={{title}}
         @description={{description}}
@@ -29,19 +26,20 @@ Card link component wraps content with `LinkTo` component. Supports title and de
         @icon={{icon}}
       />
     `,
-      context: {
-        title: text('title', 'Card title'),
-        description: text('description', 'Card description'),
-        id: text('id', 'resource_id_1234'),
-        icon: select(
-          'icon',
-          {
-            'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          },
-          'flight-icons/svg/org-16'
-        ),
-      },
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic"
+    args={{
+      title: 'Card title',
+      description: 'Card description',
+      id: 'resource_id_1234',
+      icon: 'flight-icons/svg/org-16',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/cards/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Cards" component="Cards" />
 

addons/rose/addon/components/rose/code-editor/index.stories.mdx

@@ -10,10 +10,10 @@ CodeEditor::fieldEditor is where the provided code is displayed with syntax high
 CodeEditor::toolbar is intended to go on top of the fieldEditor and provides a 'Copy code' button as well as other optional user-provided actions.
 
 ```handlebars
-<CodeEditor @codeValue={{this.codeIWantToSee}} as |c|>
+<Rose::CodeEditor @codeValue={{this.codeIWantToSee}} as |c|>
   <c.toolbar />
   <c.fieldEditor />
-</CodeEditor>
+</Rose::CodeEditor>
 ```
 
 <!-- mdx seems to not be able to handle template literals -->
@@ -32,59 +32,59 @@ export const codeValue =
   '   }\n' +
   '}';
 
-<Preview>
-  <Story name="Readonly">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::CodeEditor @codeValue={{codeValue}} as |c|>
         <c.toolbar />
         <c.fieldEditor @options={{options}} />
       </Rose::CodeEditor>`,
-      context: {
-        codeValue: codeValue,
-        options: {
-          mode: 'hcl',
-          readOnly: true,
-        },
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="ReadOnly"
+    height="15rem"
+    args={{
+      codeValue: codeValue,
+      options: {
+        mode: 'hcl',
+        readOnly: true,
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
 <Preview>
-  <Story name="CodeEditorShell">
-    {{
-      template: hbs`
-      <Rose::CodeEditor @codeValue={{codeValue}} as |c|>
-        <c.toolbar />
-        <c.fieldEditor class='rose-autosize' @options={{options}} />
-      </Rose::CodeEditor>`,
-      context: {
-        codeValue: 'mkdir /home/ubuntu/boundary/',
-        options: {
-          mode: 'shell',
-          readOnly: true,
-        },
+  <Story
+    name="CodeEditorShell"
+    height="15rem"
+    args={{
+      codeValue: 'mkdir /home/ubuntu/boundary/',
+      options: {
+        mode: 'shell',
+        readOnly: true,
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
 <Preview>
-  <Story name="CodeEditorShellEditable">
-    {{
-      template: hbs`
-      <Rose::CodeEditor @codeValue={{codeValue}} as |c|>
-        <c.toolbar />
-        <c.fieldEditor class='autosize' @options={{options}} />
-      </Rose::CodeEditor>`,
-      context: {
-        codeValue: 'mkdir /home/ubuntu/boundary/',
-        options: {
-          mode: 'shell',
-          readOnly: false,
-        },
+  <Story
+    name="CodeEditorShellEditable"
+    height="15rem"
+    args={{
+      codeValue: 'mkdir /home/ubuntu/boundary/',
+      options: {
+        mode: 'shell',
+        readOnly: false,
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/dialog/cover/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Dialog/Cover" component="Cover" />
 
@@ -13,10 +12,8 @@ Structure design system.
 Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
 `dependencies` rather than `devDependencies`.
 
-<Preview>
-  <Story name="Cover" height="15rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
     <Rose::Dialog::Cover>
       <:header>
         <h1>Cover Header</h1>
@@ -26,7 +23,12 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
       </:body>
     </Rose::Dialog::Cover>
     `,
-    }}
+  context: args,
+});
+
+<Preview>
+  <Story name="Cover" height="15rem">
+    {Template.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/dialog/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Dialog" component="Dialog" />
 
@@ -9,10 +7,8 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 A dialog component with optional modal capabilities.
 
-<Preview>
-  <Story name="Dialog" height="15rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Dialog
         @modal={{modal}}
         @dismiss={{dismiss}}
@@ -29,27 +25,38 @@ A dialog component with optional modal capabilities.
         </dialog.footer>
       </Rose::Dialog>
     `,
-      context: {
-        modal: boolean('modal', false),
-        heading: text('heading', 'Dialog Heading Text'),
-        dismissButtonText: text('dismissButtonText', 'Dismiss'),
-        icon: select(
-          'icon',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/check-circle-16'
-        ),
-        style: select('style', {
-          default: '',
-          warning: 'warning',
-        }),
-        dismiss: action('dismiss'),
-      },
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Dialog"
+    height="15rem"
+    args={{
+      modal: false,
+      heading: 'Dialog Heading Text',
+      dismissButtonText: 'Dismiss',
+      icon: 'flight-icons/svg/check-circle-16',
     }}
+    argTypes={{
+      icon: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
+      },
+      style: {
+        control: {
+          type: 'inline-radio',
+          labels: { '': 'default (none)' },
+        },
+        options: ['', 'warning'],
+      },
+      dismiss: { action: 'dismiss' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { number, boolean, object } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Dropdown" component="Dropdown" />
 
@@ -9,11 +7,24 @@ import { action } from '@storybook/addon-actions';
 
 A simple dropdown component with support for links and buttons.
 
-<Preview>
-  <Story name="Basic Dropdown" height="7rem">
-    {{
-      template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @count={{count}} @icon="flight-icons/svg/org-16" @showCaret={{showCaret}} as |dropdown|>
+```handlebars
+<Rose::Dropdown @text='Choose One' as |dropdown|>
+  <dropdown.link @route='index'>Menu item</dropdown.link>
+  <dropdown.link @route='about'>Menu item</dropdown.link>
+  <dropdown.button>Button menu item</dropdown.button>
+  <dropdown.separator />
+  <dropdown.section
+    @title='Dropdown Section Title'
+    @icon='flight-icons/svg/tag-16'
+  >
+    <dropdown.link @route='index'>Menu item</dropdown.link>
+  </dropdown.section>
+</Rose::Dropdown>
+```
+
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Dropdown @text={{text}} @count={{count}} @icon={{icon}} @showCaret={{showCaret}} iconOnly={{iconOnly}} @dropdownRight={{dropdownRight}} @style={{style}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
@@ -22,35 +33,43 @@ A simple dropdown component with support for links and buttons.
         <dropdown.section @title="Dropdown Section Title" @icon="flight-icons/svg/tag-16">
           <dropdown.link @route="index">Menu item</dropdown.link>
         </dropdown.section>
-      </Rose::Dropdown>
-    `,
-      context: {
-        count: number('count', 0),
-        showCaret: boolean('showCaret', true),
-      },
+      </Rose::Dropdown>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Dropdown"
+    height="7rem"
+    args={{
+      text: 'Choose One',
+      count: 0,
+      showCaret: true,
+      icon: 'flight-icons/svg/org-16',
+      dropdownRight: false,
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
 <Preview>
-  <Story name="Icon-only Dropdown" height="5rem">
-    {{
-      template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="flight-icons/svg/org-16" @iconOnly={{true}} as |dropdown|>
-        <dropdown.link @route="index">Menu item</dropdown.link>
-        <dropdown.link @route="about">Menu item</dropdown.link>
-        <dropdown.separator />
-        <dropdown.button>Button menu item</dropdown.button>
-      </Rose::Dropdown>
-    `,
+  <Story
+    name="Icon-only Dropdown"
+    height="5rem"
+    args={{
+      text: '',
+      showCaret: true,
+      icon: 'flight-icons/svg/org-16',
+      iconOnly: true,
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Dropdown with Radio Buttons" height="13rem">
-    {{
-      template: hbs`
+export const RadioTemplate = (args) => ({
+  template: hbs`
       <Rose::Form as |form|>
         <form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
           <Rose::Dropdown @text="Color" as |dropdown|>
@@ -67,50 +86,112 @@ A simple dropdown component with support for links and buttons.
         </form.radioGroup>
       </Rose::Form>
     `,
-    }}
+  context: args,
+});
+
+<Preview>
+  <Story name="Dropdown with Radio Buttons" height="13rem">
+    {RadioTemplate.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Dropdown with Key Value Items" height="13rem">
-    {{
-      template: hbs`
-      <Rose::Dropdown @text="View details" @showCaret={{showCaret}} @ignoreClickInside={{true}} as |dropdown|>
+<!-- Webpack might not be able to handle this syntax, storybook doesn't use broccoli -->
+
+export const KeyValueTemplate = (args) => ({
+  template: hbs`
+      <Rose::Dropdown @text={{text}} @showCaret={{showCaret}} @ignoreClickInside={{ignoreClickInside}} as |dropdown|>
         <dropdown.key-value>
-          <:key>Name</:key>
-          <:value>Key/Value</:value>
+          <:key>ID</:key>
+          <:value>cl_nbv9375hLHs</:value>
         </dropdown.key-value>
         <dropdown.separator />
         <dropdown.key-value>
           <:key>Description</:key>
-          <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
+          <:value>Lorem ipsum</:value>
         </dropdown.key-value>
-      </Rose::Dropdown>
-    `,
+      </Rose::Dropdown>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Dropdown with Key Value Items"
+    height="13rem"
+    args={{
+      text: 'View details',
+      showCaret: true,
+      ignoreClickInside: true,
     }}
+  >
+    {KeyValueTemplate.bind({})}
   </Story>
 </Preview>
 
 ```handlebars
-<Rose::Dropdown @text='Choose One&hellip;' as |dropdown|>
-  <dropdown.link @route='index'>Menu item</dropdown.link>
-  <dropdown.link @route='about'>Menu item</dropdown.link>
-  <dropdown.button>Button menu item</dropdown.button>
-  <dropdown.separator />
-  <dropdown.section
-    @title='Dropdown Section Title'
-    @icon='flight-icons/svg/tag-16'
-  >
-    <dropdown.link @route='index'>Menu item</dropdown.link>
-  </dropdown.section>
-</Rose::Dropdown>
+<Rose::Form as |form|>
+  <Rose::Dropdown @text='Items' @ignoreClickInside={{true}} as |dropdown|>
+    <Rose::Form::Checkbox::Group
+      @name='checkbox-group'
+      @items={{this.items}}
+      @selectedItems={{this.selectedItems}}
+      @onChange={{fn this.onChange}}
+      as |group|
+    >
+      <dropdown.item>
+        <group.checkbox @label={{group.item.name}} value={{group.item.id}} />
+      </dropdown.item>
+    </Rose::Form::Checkbox::Group>
+  </Rose::Dropdown>
+</Rose::Form>
 ```
 
+export const CheckboxTemplate = (args) => ({
+  template: hbs`
+      <Rose::Form as |form|>
+        <Rose::Dropdown @ignoreClickInside={{true}} @text={{text}} as |dropdown|>
+          <Rose::Form::Checkbox::Group
+            @name={{name}}
+            @disabled={{disabled}}
+            @items={{items}}
+            @selectedItems={{selectedItems}}
+            @onChange={{onChange}}
+            as |group|
+          >
+            <dropdown.item>
+              <group.checkbox @label={{group.item.name}} value={{group.item.id}} />
+            </dropdown.item>
+          </Rose::Form::Checkbox::Group>
+        </Rose::Dropdown>
+      </Rose::Form>
+  `,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Dropdown with Checkboxes"
+    height="10rem"
+    args={{
+      text: 'Items',
+      disabled: false,
+      items: [
+        { id: 1, name: 'Foo' },
+        { id: 2, name: 'Bar' },
+        { id: 3, name: 'Baz' },
+      ],
+      selectedItems: [],
+    }}
+    argTypes={{ onChange: { action: 'changed' } }}
+  >
+    {CheckboxTemplate.bind({})}
+  </Story>
+</Preview>
+
 Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
 
 ```handlebars
 <Rose::Dropdown
-  @text='Choose One&hellip;'
+  @text='Choose One'
   style='float: right'
   @dropdownRight={{true}}
   as |dropdown|
@@ -165,64 +246,7 @@ form fields.
 </Rose::Form>
 ```
 
-```handlebars
-<Rose::Form as |form|>
-  <Rose::Dropdown @text='Items' @ignoreClickInside={{true}} as |dropdown|>
-    <Rose::Form::Checkbox::Group
-      @name='checkbox-group'
-      @items={{this.items}}
-      @selectedItems={{this.selectedItems}}
-      @onChange={{fn this.onChange}}
-      as |group|
-    >
-      <dropdown.item>
-        <group.checkbox @label={{group.item.name}} value={{group.item.id}} />
-      </dropdown.item>
-    </Rose::Form::Checkbox::Group>
-
-  </Rose::Dropdown>
-</Rose::Form>
-```
-
-<Preview>
-  <Story name="Dropdown with Checkboxes" height="10rem">
-    {{
-      template: hbs`
-  <Rose::Form as |form|>
-   <Rose::Dropdown   @ignoreClickInside={{true}} @text="Items" as |dropdown|>
-    <Rose::Form::Checkbox::Group
-      @name={{name}}
-      @disabled={{disabled}}
-      @items={{items}}
-      @selectedItems={{selectedItems}}
-      @onChange={{onChange}}
-      as |group|
-    >
-    <dropdown.item>
-      <group.checkbox
-        @label={{group.item.name}}
-        value={{group.item.id}}
-      />
-        </dropdown.item>
-    </Rose::Form::Checkbox::Group>
-     </Rose::Dropdown>
-    </Rose::Form>
-  `,
-      context: {
-        disabled: boolean('disabled', false),
-        items: object('items', [
-          { id: 1, name: 'Foo' },
-          { id: 2, name: 'Bar' },
-          { id: 3, name: 'Baz' },
-        ]),
-        selectedItems: object('selectedItems', []),
-        onChange: action('changed'),
-      },
-    }}
-  </Story>
-</Preview>
-
-Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
+Closing dropdown after clicking inside its content can be ignored using `ignoreClickInside`. This is useful when the dropdown contains key-value items that users need to select/copy/interact with.
 
 ```handlebars
 <Rose::Dropdown

addons/rose/addon/components/rose/footer/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Footer" component="Footer" />
 
@@ -20,23 +18,27 @@ A footer component that allows four distinct sections to be configured: brand, n
 </Rose::Footer>
 ```
 
-<Preview>
-  <Story name="Basic">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Footer as |footer|>
-        <footer.brand @logo="logo" @text={{brandName}} />
+        <footer.brand @logo="logo" @text={{titleText}} />
         <footer.text>{{footerText}}</footer.text>
         <footer.nav as |nav|>
           <nav.link @route="index">Section</nav.link>
           <nav.link @href="index">Section</nav.link>
         </footer.nav>
-      </Rose::Footer>
-    `,
-      context: {
-        brandName: text('brandName', 'Brand Name'),
-        footerText: text('footerText', 'Text'),
-      },
+      </Rose::Footer>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic"
+    args={{
+      titleText: 'Brand Name',
+      footerText: 'Footer Text',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/actions/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Actions" component="Form/Actions" />
 
@@ -22,24 +20,30 @@ support actions. The cancel button supports a cancel action.
 />
 ```
 
-<Preview>
-  <Story name="Basic Form Actions">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Actions
         @submitText={{submitText}}
         @cancelText={{cancelText}}
         @showCancel={{showCancel}}
         @submitDisabled={{submitDisabled}}
-        @cancel={{onCancel}} />
-    `,
-      context: {
-        submitText: text('submitText', 'Save'),
-        cancelText: text('cancelText', 'Cancel'),
-        showCancel: boolean('showCancel', true),
-        submitDisabled: boolean('submitDisabled', false),
-        onCancel: action('cancel'),
-      },
+        @cancel={{onCancel}} />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Form Actions"
+    args={{
+      submitText: 'Save',
+      cancelText: 'Cancel',
+      showCancel: true,
+      submitDisabled: false,
     }}
+    argTypes={{
+      onCancel: { action: 'cancel' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select, object } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Checkbox/Group" component="Form/Checkbox/Group" />
 
@@ -21,36 +19,45 @@ Renders a form checkboxfield group.
 </Rose::Form::Checkbox::Group>
 ```
 
-<Preview>
-  <Story name="Basic" height="10rem">
-    {{
-      template: hbs`
-    <Rose::Form::Checkbox::Group
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Form::Checkbox::Group
       @name={{name}}
       @inline={{inline}}
       @disabled={{disabled}}
       @items={{items}}
       @selectedItems={{selectedItems}}
       @onChange={{onChange}}
+      @itemEqualityFunc={{itemEqualityFunc}}
       as |group|
     >
       <group.checkbox
         @label={{group.item.name}}
         value={{group.item.id}} />
-    </Rose::Form::Checkbox::Group>
-  `,
-      context: {
-        inline: boolean('inline', true),
-        disabled: boolean('disabled', false),
-        items: object('items', [
-          { id: 1, name: 'Foo' },
-          { id: 2, name: 'Bar' },
-          { id: 3, name: 'Baz' },
-        ]),
-        selectedItems: object('selectedItems', []),
-        onChange: action('changed'),
-      },
+    </Rose::Form::Checkbox::Group>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic"
+    height="10rem"
+    args={{
+      name: 'Name',
+      inline: true,
+      disabled: false,
+      items: [
+        { id: 1, name: 'Foo' },
+        { id: 2, name: 'Bar' },
+        { id: 3, name: 'Baz' },
+      ],
+      selectedItems: [],
     }}
+    argTypes={{
+      onChange: { action: 'changed' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
@@ -68,36 +75,25 @@ Renders a form checkboxfield group.
 ```
 
 <Preview>
-  <Story name="WithCustomEquality" height="10rem">
-    {{
-      template: hbs`
-    <Rose::Form::Checkbox::Group
-      @name={{name}}
-      @inline={{inline}}
-      @disabled={{disabled}}
-      @items={{items}}
-      @selectedItems={{selectedItems}}
-      @onChange={{onChange}}
-      @itemEqualityFunc={{isEqual}}
-      as |group|
-    >
-      <group.checkbox
-        @label={{group.item.name}}
-        value={{group.item.id}} />
-    </Rose::Form::Checkbox::Group>
-  `,
-      context: {
-        inline: boolean('inline', true),
-        disabled: boolean('disabled', false),
-        items: object('items', [
-          { id: 1, name: 'Foo' },
-          { id: 2, name: 'Bar' },
-          { id: 3, name: 'Baz' },
-        ]),
-        selectedItems: object('selectedItems', []),
-        onChange: action('changed'),
-        isEqual: (item1, item2) => item1 === item2,
-      },
+  <Story
+    name="WithCustomEquality"
+    height="10rem"
+    args={{
+      name: 'Name',
+      inline: true,
+      disabled: false,
+      items: [
+        { id: 1, name: 'Foo' },
+        { id: 2, name: 'Bar' },
+        { id: 3, name: 'Baz' },
+      ],
+      selectedItems: [{ id: 1, name: 'Foo' }],
+      itemEqualityFunc: (item1, item2) => item1.name === item2.name,
     }}
+    argTypes={{
+      onChange: { action: 'changed' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/checkbox/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Checkbox" component="Form/Checkbox" />
 
@@ -19,10 +17,8 @@ Renders a form input checkbox.
 />
 ```
 
-<Preview>
-  <Story name="Basic Checkbox" height="10rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Checkbox
         @name={{name}}
         @label={{label}}
@@ -31,25 +27,30 @@ Renders a form input checkbox.
         @checked={{checked}}
         @error={{error}}
         @disabled={{disabled}}
-        />
-    `,
-      context: {
-        label: text('text', 'Checkbox 🛎'),
-        description: text('description', 'Short description in label'),
-        helperText: text('helperText', 'This is an optional help text.'),
-        name: text('name', 'checkbox-1'),
-        checked: boolean('checked', false),
-        error: boolean('error', false),
-        disabled: boolean('disabled', false),
-      },
+        />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Checkbox"
+    height="10rem"
+    args={{
+      name: 'checkbox-1',
+      label: 'Checkbox 🛎',
+      description: 'Short description in label',
+      helperText: 'This is an optional help text.',
+      checked: false,
+      error: false,
+      disabled: false,
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Checkbox with errors" height="10rem">
-    {{
-      template: hbs`
+export const ErrorTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Checkbox
         @name={{name}}
         @label={{label}}
@@ -61,15 +62,22 @@ Renders a form input checkbox.
         <field.errors as |errors|>
           <errors.message>An error occurred.</errors.message>
         </field.errors>
-      </Rose::Form::Checkbox>
-    `,
-      context: {
-        label: text('text', 'Checkbox 🛎'),
-        name: text('name', 'checkbox-1'),
-        checked: boolean('checked', false),
-        disabled: boolean('disabled', false),
-      },
+      </Rose::Form::Checkbox>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Checkbox with errors"
+    height="10rem"
+    args={{
+      name: 'checkbox-1',
+      label: 'Checkbox 🛎',
+      checked: false,
+      disabled: false,
     }}
+  >
+    {ErrorTemplate.bind({})}
   </Story>
 </Preview>
 
@@ -84,10 +92,8 @@ Renders a form input checkbox.
 />
 ```
 
-<Preview>
-  <Story name="Checkbox with inline style" height="10rem">
-    {{
-      template: hbs`
+export const InlineTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Checkbox
         @name='checkbox-1'
         @label='Checkbox1 🛎'
@@ -117,16 +123,23 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
-        />
-    `,
-      context: {
-        description: text('description', 'Short description in label'),
-        helperText: text('helperText', 'This is an optional help text.'),
-        checked: boolean('checked', false),
-        error: boolean('error', false),
-        disabled: boolean('disabled', false),
-        inline: boolean('inline', false),
-      },
+        />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Checkbox with inline style"
+    height="10rem"
+    args={{
+      description: 'Short description in label',
+      helperText: 'This is an optional help text.',
+      checked: false,
+      error: false,
+      disabled: false,
+      inline: false,
     }}
+  >
+    {InlineTemplate.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/errors/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Errors" component="Form/Errors" />
 
@@ -16,16 +14,15 @@ Use this component to display one or more error messages.
 </Rose::Form::Errors>
 ```
 
-<Preview>
-  <Story name="Basic Form Errors">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Errors as |errors|>
         <errors.message>An error message goes here.</errors.message>
         <errors.message>Another message goes here.</errors.message>
-      </Rose::Form::Errors>
-    `,
-      context: {},
-    }}
-  </Story>
+      </Rose::Form::Errors>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Basic Form Errors">{Template.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/form/errors/message/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Errors/Message" component="Form/Errors/Message" />
 
@@ -17,15 +15,14 @@ of the `Rose::Form::Errors` component.
 </Rose::Form::Errors::Message>
 ```
 
-<Preview>
-  <Story name="Basic Form Error Message">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Errors::Message>
         An error message goes here.
-      </Rose::Form::Errors::Message>
-    `,
-      context: {},
-    }}
-  </Story>
+      </Rose::Form::Errors::Message>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Basic Form Error Message">{Template.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/form/fieldset/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Fieldset" component="Form/Fieldset" />
 
@@ -17,18 +15,23 @@ Renders a simple fieldset with title, description and body and an optional helpe
 </Rose::Form::Fieldset>
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Form::Fieldset @helperText={{helperText}}>
+        <:title>Title</:title>
+        <:description>Description</:description>
+        <:body>Rest of the form</:body>
+      </Rose::Form::Fieldset>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic Fieldset">
-    {{
-      template: hbs`
-        <Rose::Form::Fieldset @helperText={{helperText}}>
-          <:title>Title</:title>
-          <:description>Description</:description>
-          <:body>Rest of the form</:body>
-        </Rose::Form::Fieldset>`,
-      context: {
-        helperText: text('helperText', 'This is an optional help text.'),
-      },
+  <Story
+    name="Basic Fieldset"
+    args={{
+      helperText: 'This is an optional help text.',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/helper-text/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/HelperText" component="Form/HelperText" />
 
@@ -20,19 +18,23 @@ by form fields and should not be used directly.
 </Rose::Form::HelperText>
 ```
 
-<Preview>
-  <Story name="HelperText">
-    {{
-      template: hbs`
-      <Rose::Form::HelperText @error={{this.error}} @link={{this.link}} @linkText={{this.linkText}}>
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Form::HelperText @error={{error}} @link={{link}} @linkText={{linkText}}>
         Helper text
-      </Rose::Form::HelperText>
-    `,
-      context: {
-        error: boolean('error', false),
-        link: text('link', 'http://www.example.net/'),
-        linkText: text('linkText', 'sample link text'),
-      },
+      </Rose::Form::HelperText>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="HelperText"
+    args={{
+      error: false,
+      link: 'http://www.example.net/',
+      linkText: 'sample link text',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form" component="Form" />
 
@@ -10,72 +8,61 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 A component for building accessible forms. Yields contextual fields
 and actions.
 
-<Preview>
-  <Story name="Form" height="35rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form
         @onSubmit={{submit}}
         @cancel={{cancel}}
         @showEditToggle={{showEditToggle}}
         @disabled={{disabled}}
-        as |form|>
-        <form.input
-          @label="Label"
-          @helperText="Helper text"
-          @value="Text"
-          />
-        <form.textarea
-          @label="Label"
-          @helperText="Helper text"
-          @value="Text"
-          />
+        as |form|
+      >
+        <form.input @label='Label' @helperText='Helper text' @value='Text' />
+        <form.textarea @label='Label' @helperText='Helper text' @value='Text' />
         <form.select
-          @label="Label"
-          @helperText="Helper text"
+          @label='Label'
+          @helperText='Helper text'
           @onChange={{selectChange}}
           as |field|
         >
           <field.field as |select|>
             <select.option>Choose an option</select.option>
-            <select.option @value="value-1">Value 1</select.option>
-            <select.option @value="value-2">Value 2</select.option>
-            <select.option @value="value-3">Value 3</select.option>
+            <select.option @value='value-1'>Value 1</select.option>
+            <select.option @value='value-2'>Value 2</select.option>
+            <select.option @value='value-3'>Value 3</select.option>
           </field.field>
         </form.select>
-        <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
-          <radioGroup.radio
-            @label="Red"
-            @value="red"
-          />
-          <radioGroup.radio
-            @label="Green"
-            @value="green"
-          />
-          <radioGroup.radio
-            @label="Blue"
-            @value="blue"
-          />
+        <form.radioGroup @name='color' @selectedValue='green' as |radioGroup|>
+          <radioGroup.radio @label='Red' @value='red' />
+          <radioGroup.radio @label='Green' @value='green' />
+          <radioGroup.radio @label='Blue' @value='blue' />
         </form.radioGroup>
-        <form.checkbox
-          @label="Label"
-          @checked={{true}}
-          />
+        <form.checkbox @label='Label' @checked={{true}} />
         <form.actions
-          @submitText="Save"
-          @cancelText="Cancel"
-          @enableEditText="Edit"
-          @showCancel={{true}} />
-      </Rose::Form>
-    `,
-      context: {
-        showEditToggle: boolean('showEditToggle', false),
-        disabled: boolean('disabled', false),
-        submit: action('submit'),
-        cancel: action('cancel'),
-        selectChange: action('selectChange'),
-      },
+          @submitText='Save'
+          @cancelText='Cancel'
+          @enableEditText='Edit'
+          @showCancel={{true}}
+        />
+      </Rose::Form>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Form"
+    height="35rem"
+    args={{
+      showEditToggle: false,
+      disabled: false,
     }}
+    argTypes={{
+      submit: { action: 'submit' },
+      cancel: { action: 'cancel' },
+      selectChange: { action: 'selectChange' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/form/input/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Input" component="Form/Input" />
 
@@ -43,10 +41,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
 />
 ```
 
-<Preview>
-  <Story name="Basic Field">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Input
         @type={{type}}
         @name={{type}}
@@ -59,43 +55,37 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         @disabled={{disabled}}
         readonly={{read-only}}
         @icon={{icon}}
-        />
-    `,
-      context: {
-        type: select(
-          'type',
-          {
-            text: 'text',
-            email: 'email',
-            number: 'number',
-            password: 'password',
-          },
-          'text'
-        ),
-        value: text('value', 'Value'),
-        label: text('label', 'Label'),
-        helperText: text('helperText', 'Helper text'),
-        link: text('link', 'link goes here'),
-        linkText: text('linkText', 'link text'),
-        disabled: boolean('disabled', false),
-        'read-only': boolean('readonly', false),
-        icon: select(
-          'icon',
-          {
-            none: null,
-            'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
-          },
-          'flight-icons/svg/search-16'
-        ),
+        />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Field"
+    args={{
+      type: 'text',
+      value: 'Value',
+      label: 'Label',
+      helperText: 'Helper text',
+      link: 'link goes here',
+      linkText: 'link text',
+      disabled: false,
+      'read-only': false,
+      icon: 'flight-icons/svg/search-16',
+    }}
+    argTypes={{
+      type: {
+        control: 'select',
+        options: ['text', 'email', 'number', 'password'],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Field with Errors">
-    {{
-      template: hbs`
+export const ErrorTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Input
         @type={{type}}
         @name={{type}}
@@ -112,35 +102,36 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         <field.errors as |errors|>
           <errors.message>An error occurred.</errors.message>
         </field.errors>
-      </Rose::Form::Input>
-    `,
-      context: {
-        type: select(
-          'type',
-          {
-            text: 'text',
-            email: 'email',
-            number: 'number',
-            password: 'password',
-          },
-          'text'
-        ),
-        value: text('value', 'Value'),
-        label: text('label', 'Label'),
-        helperText: text('helperText', 'Helper text'),
-        link: text('link', 'link goes here'),
-        linkText: text('linkText', 'link text'),
-        disabled: boolean('disabled', false),
-        'read-only': boolean('readonly', false),
+      </Rose::Form::Input>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Field with Errors"
+    args={{
+      type: 'text',
+      value: 'Value',
+      label: 'Label',
+      helperText: 'Helper text',
+      link: 'link goes here',
+      linkText: 'link text',
+      disabled: false,
+      'read-only': false,
+    }}
+    argTypes={{
+      type: {
+        control: 'select',
+        options: ['text', 'email', 'number', 'password'],
       },
     }}
+  >
+    {ErrorTemplate.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Fully Contextual Input">
-    {{
-      template: hbs`
+export const ContextualTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Input @value="Text" @error={{true}} @contextual={{true}} as |field|>
         <hr />
         <field.label>Label</field.label>
@@ -153,9 +144,10 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
           <errors.message>An error occurred.</errors.message>
         </field.errors>
         <hr />
-      </Rose::Form::Input>
-    `,
-      context: {},
-    }}
-  </Story>
+      </Rose::Form::Input>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Fully Contextual Input">{ContextualTemplate.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/form/label/index.stories.mdx

@@ -1,13 +1,11 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Label" component="Form/Label" />
 
 # Form Label
 
-Renders a simple form label. This componet is used and yielded by form fields
+Renders a simple form label. This component is used and yielded by form fields
 and should not be used directly.
 
 ```handlebars
@@ -16,17 +14,21 @@ and should not be used directly.
 </Rose::Form::Label>
 ```
 
-<Preview>
-  <Story name="Form Label">
-    {{
-      template: hbs`
-      <Rose::Form::Label @for="my-field-id" @error={{this.error}}>
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Form::Label @for='my-field-id' @error={{error}}>
         Form Label
-      </Rose::Form::Label>
-    `,
-      context: {
-        error: boolean('error', false),
-      },
+      </Rose::Form::Label>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Form Label"
+    args={{
+      error: false,
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/radio/card/index.stories.mdx

@@ -1,8 +1,25 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose/Form/Radio/Radio/Card" component="Form/Radio/Radio/Card" />
+<Meta
+  title="Rose/Form/Radio/Radio/Card"
+  component="Form/Radio/Radio/Card"
+  args={{
+    label: 'Azure',
+    error: false,
+    value: 'value and selectedValue must match to select radiofield',
+    selectedValue: 'value and selectedValue must match to select radiofield',
+    helperText: 'Record financial transactions using',
+    disabled: false,
+  }}
+  argTypes={{
+    Layout: {
+      control: 'inline-radio',
+      options: ['wide', 'tile'],
+      name: 'layout',
+    },
+  }}
+/>
 
 # Form Radiofield in a wide format
 
@@ -20,39 +37,6 @@ Renders a form radiofield in a Wide format.
 />
 ```
 
-<Preview>
-  <Story name="Wide" height="10rem">
-    {{
-      template: hbs`
-      <Rose::Form::Radio::Card
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @helperText={{helperText}}
-        @layout='wide'
-        />
-    `,
-      context: {
-        label: text('text', 'Azure'),
-        error: boolean('error', false),
-        value: text(
-          'value',
-          'value and selectedValue must match to select radiofield'
-        ),
-        selectedValue: text(
-          'selectedValue',
-          'value and selectedValue must match to select radiofield'
-        ),
-        helperText: text('helperText', 'Record financial transactions using'),
-        disabled: boolean('disabled', false),
-      },
-    }}
-  </Story>
-</Preview>
-
 Renders a form radiofield in a tile format.
 
 ```handlebars
@@ -67,10 +51,8 @@ Renders a form radiofield in a tile format.
 />
 ```
 
-<Preview>
-  <Story name="Tile" height="10rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Radio::Card
         @label={{label}}
         @error={{error}}
@@ -79,32 +61,19 @@ Renders a form radiofield in a tile format.
         @disabled={{disabled}}
         @icon={{icon}}
         @helperText={{helperText}}
-        @layout='tile'
-        />
-    `,
-      context: {
-        label: text('text', 'Azure'),
-        error: boolean('error', false),
-        value: text(
-          'value',
-          'value and selectedValue must match to select radiofield'
-        ),
-        selectedValue: text(
-          'selectedValue',
-          'value and selectedValue must match to select radiofield'
-        ),
-        helperText: text('helperText', 'Record financial transactions using'),
-        disabled: boolean('disabled', false),
-        icon: select(
-          'icon',
-          {
-            none: null,
-            'flight-icons/svg/azure-color-16':
-              'flight-icons/svg/azure-color-16',
-          },
-          null
-        ),
-      },
+        @layout={{Layout}}
+      />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Card"
+    height="10rem"
+    args={{
+      Layout: 'wide',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/radio/group/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Radio/Group" component="Form/Radio/Group" />
 
@@ -24,56 +22,56 @@ Renders a form radiofield group.
 </Rose::Form::Radio::Group>
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Form::Radio::Group
+        @disabled={{disabled}}
+        @name={{name}}
+        @selectedValue={{selectedValue}}
+        @changed={{changed}}
+        @inline={{inline}}
+        as |radioGroup|
+      >
+        <radioGroup.radio
+          @label={{firstFieldLabel}}
+          @value={{firstFieldValue}}
+          @icon={{firstFieldIcon}}
+        />
+        <radioGroup.radio @label={{secondFieldLabel}} @value={{secondFieldValue}} />
+        <radioGroup.radio @label={{thirdFieldLabel}} @value={{thirdFieldValue}} />
+      </Rose::Form::Radio::Group>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic" height="10rem">
-    {{
-      template: hbs`
-    <Rose::Form::Radio::Group
-      @disabled={{disabled}}
-      @name={{name}}
-      @selectedValue={{selectedValue}}
-      @changed={{changed}}
-      @inline={{inline}}
-      as |radioGroup|
-    >
-      <radioGroup.radio
-        @label={{firstFieldLabel}}
-        @value={{firstFieldValue}}
-        @icon={{firstFieldIcon}}
-      />
-      <radioGroup.radio
-        @label={{secondFieldLabel}}
-        @value={{secondFieldValue}}
-      />
-      <radioGroup.radio
-        @label={{thirdFieldLabel}}
-        @value={{thirdFieldValue}}
-      />
-    </Rose::Form::Radio::Group>
-  `,
-      context: {
-        name: text('name', 'mustagree'),
-        disabled: boolean('disabled', false),
-        inline: boolean('inline', true),
-        selectedValue: text('selectedValue', 'disagree'),
-        firstFieldLabel: text('first label', 'Agree'),
-        firstFieldValue: text('first value', 'agree'),
-        firstFieldIcon: select(
-          'first icon',
-          {
-            'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/org-16'
-        ),
-        secondFieldLabel: text('second label', 'Maybe'),
-        secondFieldValue: text('second value', 'maybe'),
-        thirdFieldLabel: text('third label', 'Disagree'),
-        thirdFieldValue: text('third value', 'disagree'),
-        changed: action('changed'),
-      },
+  <Story
+    name="Basic"
+    height="10rem"
+    args={{
+      name: 'mustagree',
+      disabled: false,
+      inline: true,
+      selectedValue: 'disagree',
+      firstFieldLabel: 'Agree',
+      firstFieldValue: 'agree',
+      secondFieldLabel: 'Maybe',
+      secondFieldValue: 'maybe',
+      thirdFieldLabel: 'Disagree',
+      thirdFieldValue: 'disagree',
+      firstFieldIcon: 'flight-icons/svg/org-16',
     }}
+    argTypes={{
+      firstFieldIcon: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
+      },
+      changed: { action: 'changed' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
@@ -107,80 +105,6 @@ Renders a form radiofield group.
 </Rose::Form::Radio::Group>
 ```
 
-<Preview>
-  <Story name="Card:  Tile" height="10rem">
-    {{
-      template: hbs`
-    <Rose::Form::Radio::Group
-      @disabled={{disabled}}
-      @name={{name}}
-      @selectedValue={{selectedValue}}
-      @changed={{changed}}
-      as |radioGroup|
-    >
-      <radioGroup.card
-        @label={{firstFieldLabel}}
-        @value={{firstFieldValue}}
-        @icon={{firstFieldIcon}}
-        @layout='tile'
-      />
-      <radioGroup.card
-        @label={{secondFieldLabel}}
-        @value={{secondFieldValue}}
-        @icon={{secondFieldIcon}}
-        @layout="tile"
-      />
-      <radioGroup.card
-        @label={{thirdFieldLabel}}
-        @value={{thirdFieldValue}}
-        @icon={{thirdFieldIcon}}
-        @layout="tile"
-      />
-    </Rose::Form::Radio::Group>
-  `,
-      context: {
-        name: text('name', 'mustagree'),
-        disabled: boolean('disabled', false),
-        selectedValue: text('selectedValue', 'disagree'),
-        firstFieldLabel: text('first label', 'Agree'),
-        firstFieldValue: text('first value', 'agree'),
-        firstFieldIcon: select(
-          'firstFieldIcon',
-          {
-            none: null,
-            'flight-icons/svg/azure-color-16':
-              'flight-icons/svg/azure-color-16',
-          },
-          null
-        ),
-        secondFieldIcon: select(
-          'secondFieldIcon',
-          {
-            none: null,
-            'flight-icons/svg/azure-color-16':
-              'flight-icons/svg/azure-color-16',
-          },
-          null
-        ),
-        thirdFieldIcon: select(
-          'thirdFieldIcon',
-          {
-            none: null,
-            'flight-icons/svg/azure-color-16':
-              'flight-icons/svg/azure-color-16',
-          },
-          null
-        ),
-        secondFieldLabel: text('second label', 'Maybe'),
-        secondFieldValue: text('second value', 'maybe'),
-        thirdFieldLabel: text('third label', 'Disagree'),
-        thirdFieldValue: text('third value', 'disagree'),
-        changed: action('changed'),
-      },
-    }}
-  </Story>
-</Preview>
-
 ```handlebars
 <Rose::Form::Radio::Group
   @disabled={{false}}
@@ -195,11 +119,9 @@ Renders a form radiofield group.
 </Rose::Form::Radio::Group>
 ```
 
-<Preview>
-  <Story name="Card:  Wide" height="10rem">
-    {{
-      template: hbs`
-    <Rose::Form::Radio::Group
+export const CardTemplate = (args) => ({
+  template: hbs`
+      <Rose::Form::Radio::Group
       @disabled={{disabled}}
       @name={{name}}
       @selectedValue={{selectedValue}}
@@ -210,41 +132,74 @@ Renders a form radiofield group.
         @label={{firstFieldLabel}}
         @value={{firstFieldValue}}
         @icon={{firstFieldIcon}}
-        @layout="wide"
+        @layout={{Layout}}
       />
       <radioGroup.card
         @label={{secondFieldLabel}}
         @value={{secondFieldValue}}
-        @layout="wide"
+        @icon={{secondFieldIcon}}
+        @layout={{Layout}}
       />
       <radioGroup.card
         @label={{thirdFieldLabel}}
         @value={{thirdFieldValue}}
-        @layout="wide"
+        @icon={{thirdFieldIcon}}
+        @layout={{Layout}}
       />
-    </Rose::Form::Radio::Group>
-  `,
-      context: {
-        name: text('name', 'mustagree'),
-        disabled: boolean('disabled', false),
-        selectedValue: text('selectedValue', 'disagree'),
-        firstFieldLabel: text('first label', 'Agree'),
-        firstFieldValue: text('first value', 'agree'),
-        firstFieldIcon: select(
-          'firstFieldIcon',
-          {
-            none: null,
-            'flight-icons/svg/azure-color-16':
-              'flight-icons/svg/azure-color-16',
-          },
-          null
-        ),
-        secondFieldLabel: text('second label', 'Maybe'),
-        secondFieldValue: text('second value', 'maybe'),
-        thirdFieldLabel: text('third label', 'Disagree'),
-        thirdFieldValue: text('third value', 'disagree'),
-        changed: action('changed'),
-      },
+    </Rose::Form::Radio::Group>`,
+  context: args,
+});
+
+
+<Preview>
+  <Story
+    name="Card"
+    height="10rem"
+    args={{
+      Layout: 'tile',
+      name: 'mustagree',
+      disabled: false,
+      selectedValue: 'disagree',
+      firstFieldLabel: 'Agree',
+      firstFieldValue: 'agree',
+      secondFieldLabel: 'Maybe',
+      secondFieldValue: 'maybe',
+      thirdFieldLabel: 'Disagree',
+      thirdFieldValue: 'disagree',
+      firstFieldIcon: '',
+      secondFieldIcon: '',
+      thirdFieldIcon: '',
     }}
+    argTypes={{
+      Layout: {
+        control: 'inline-radio',
+        options: ['wide', 'tile'],
+        name: 'layout',
+      },
+      firstFieldIcon: {
+        control: {
+          type: 'inline-radio',
+          labels: { '': 'none' },
+        },
+        options: ['', 'flight-icons/svg/azure-color-16'],
+      },
+      secondFieldIcon: {
+        control: {
+          type: 'inline-radio',
+          labels: { '': 'none' },
+        },
+        options: ['', 'flight-icons/svg/azure-color-16'],
+      },
+      thirdFieldIcon: {
+        control: {
+          type: 'inline-radio',
+          labels: { '': 'none' },
+        },
+        options: ['', 'flight-icons/svg/azure-color-16'],
+      },
+      changed: { action: 'changed' },
+    }}
+  >
+    {CardTemplate.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -1,8 +1,23 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose/Form/Radio/Radio" component="Form/Radio/Radio" />
+<Meta
+  title="Rose/Form/Radio/Radio"
+  component="Form/Radio/Radio"
+  argTypes={{
+    icon: {
+      control: {
+        type: 'select',
+        labels: { '': 'none' },
+      },
+      options: [
+        '',
+        'flight-icons/svg/org-16',
+        'flight-icons/svg/clipboard-copy-16',
+      ],
+    },
+  }}
+/>
 
 # Form Radiofield
 
@@ -19,10 +34,8 @@ Renders a form radiofield.
 />
 ```
 
-<Preview>
-  <Story name="Basic" height="10rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Radio::Radio
         @label={{label}}
         @error={{error}}
@@ -31,33 +44,25 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @helperText={{helperText}}
-        />
-    `,
-      context: {
-        label: text('text', 'Radiofield'),
-        error: boolean('error', false),
-        value: text(
-          'value',
-          'value and selectedValue must match to select radiofield'
-        ),
-        helperText: text('helperText', 'Helper text'),
-        selectedValue: text(
-          'selectedValue',
-          'value and selectedValue must match to select radiofield'
-        ),
-        disabled: boolean('disabled', false),
-        icon: select(
-          'icon',
-          {
-            none: null,
-            'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          null
-        ),
-      },
+      />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic"
+    height="10rem"
+    args={{
+      label: 'Radiofield',
+      error: false,
+      value: 'value and selectedValue must match to select radiofield',
+      selectedValue: 'value and selectedValue must match to select radiofield',
+      helperText: 'Helper text',
+      disabled: false,
+      icon: '',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
@@ -74,10 +79,8 @@ Renders a form radiofield.
 />
 ```
 
-<Preview>
-  <Story name="Radio with inline style" height="10rem">
-    {{
-      template: hbs`
+export const InlineTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Radio::Radio
         @label='Radiofield1'
         @error={{error}}
@@ -87,7 +90,7 @@ Renders a form radiofield.
         @icon={{icon}}
         @inline={{inline}}
         @helperText={{helperText}}
-        />
+      />
       <Rose::Form::Radio::Radio
         @label='Radiofield2'
         @error={{error}}
@@ -97,7 +100,7 @@ Renders a form radiofield.
         @icon={{icon}}
         @inline={{inline}}
         @helperText={{helperText}}
-        />
+      />
       <Rose::Form::Radio::Radio
         @label='Radiofield3'
         @error={{error}}
@@ -107,32 +110,23 @@ Renders a form radiofield.
         @icon={{icon}}
         @inline={{inline}}
         @helperText={{helperText}}
-        />
-    `,
-      context: {
-        error: boolean('error', false),
-        value: text(
-          'value',
-          'value and selectedValue must match to select radiofield'
-        ),
-        selectedValue: text(
-          'selectedValue',
-          'value and selectedValue must match to select radiofield'
-        ),
-        helperText: text('helperText', 'Helper text'),
-        disabled: boolean('disabled', false),
-        icon: select(
-          'icon',
-          {
-            none: null,
-            'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          null
-        ),
-        inline: boolean('inline', false),
-      },
+      />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Radio with inline style"
+    height="10rem"
+    args={{
+      inline: false,
+      error: false,
+      value: 'value and selectedValue must match to select radiofield',
+      selectedValue: 'value and selectedValue must match to select radiofield',
+      helperText: 'Helper text',
+      disabled: false,
     }}
+  >
+    {InlineTemplate.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/form/select/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Select" component="Form/Select" />
 
@@ -28,10 +26,8 @@ Renders a form select element.
 </Rose::Form::Select>
 ```
 
-<Preview>
-  <Story name="Basic" height="10rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Select
         @name={{name}}
         @value={{value}}
@@ -44,37 +40,35 @@ Renders a form select element.
       >
         <field.field as |select|>
           <select.option>Choose an option</select.option>
-          <select.option @value="value-1">Value 1</select.option>
-          <select.option @value="value-2">Value 2</select.option>
-          <select.option @value="value-3">Value 3</select.option>
+          <select.option @value='value-1'>Value 1</select.option>
+          <select.option @value='value-2'>Value 2</select.option>
+          <select.option @value='value-3'>Value 3</select.option>
         </field.field>
-      </Rose::Form::Select>
-    `,
-      context: {
-        value: select(
-          'value',
-          {
-            null: null,
-            'value-1': 'value-1',
-            'value-2': 'value-2',
-            'value-3': 'value-3',
-          },
-          null
-        ),
-        name: text('name', 'select-name'),
-        label: text('label', 'Label'),
-        helperText: text('helperText', 'Helper text'),
-        disabled: boolean('disabled', false),
-        onChange: action('changed'),
-      },
+      </Rose::Form::Select>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic"
+    height="10rem"
+    args={{
+      name: 'select-name',
+      label: 'Label',
+      helperText: 'Helper text',
+      disabled: false,
     }}
+    argTypes={{
+      value: { control: 'select', options: ['value-1', 'value-2', 'value-3'] },
+      onChange: { action: 'changed' },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Select with Errors" height="10rem">
-    {{
-      template: hbs`
+export const ErrorTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Select
         @name={{name}}
         @value={{value}}
@@ -87,59 +81,63 @@ Renders a form select element.
       >
         <field.field as |select|>
           <select.option>Choose an option</select.option>
-          <select.option @value="value-1">Value 1</select.option>
-          <select.option @value="value-2">Value 2</select.option>
-          <select.option @value="value-3">Value 3</select.option>
+          <select.option @value='value-1'>Value 1</select.option>
+          <select.option @value='value-2'>Value 2</select.option>
+          <select.option @value='value-3'>Value 3</select.option>
         </field.field>
         <field.errors as |errors|>
           <errors.message>An error occurred.</errors.message>
         </field.errors>
-      </Rose::Form::Select>
-    `,
-      context: {
-        value: select(
-          'value',
-          {
-            null: null,
-            'value-1': 'value-1',
-            'value-2': 'value-2',
-            'value-3': 'value-3',
-          },
-          null
-        ),
-        name: text('name', 'select-name'),
-        label: text('label', 'Label'),
-        helperText: text('helperText', 'Helper text'),
-        disabled: boolean('disabled', false),
-        onChange: action('changed'),
-      },
+      </Rose::Form::Select>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Select with Errors"
+    height="10rem"
+    args={{
+      name: 'select-name',
+      label: 'Label',
+      helperText: 'Helper text',
+      disabled: false,
     }}
+    argTypes={{
+      value: { control: 'select', options: ['value-1', 'value-2', 'value-3'] },
+      onChange: { action: 'changed' },
+    }}
+  >
+    {ErrorTemplate.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Fully Contextual Select">
-    {{
-      template: hbs`
-      <Rose::Form::Select @value="value-3" @error={{true}} @contextual={{true}} as |field|>
+export const ContextualTemplate = (args) => ({
+  template: hbs`
+      <Rose::Form::Select
+        @value='value-3'
+        @error={{true}}
+        @contextual={{true}}
+        as |field|
+      >
         <hr />
         <field.label>Label</field.label>
         <hr />
         <field.helperText>Help</field.helperText>
         <hr />
         <field.field as |select|>
-          <select.option @value="value-1">Value 1</select.option>
-          <select.option @value="value-2">Value 2</select.option>
-          <select.option @value="value-3">Value 3</select.option>
+          <select.option @value='value-1'>Value 1</select.option>
+          <select.option @value='value-2'>Value 2</select.option>
+          <select.option @value='value-3'>Value 3</select.option>
         </field.field>
         <hr />
         <field.errors as |errors|>
           <errors.message>An error occurred.</errors.message>
         </field.errors>
         <hr />
-      </Rose::Form::Select>
-    `,
-      context: {},
-    }}
-  </Story>
+      </Rose::Form::Select>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Fully Contextual Select">{ContextualTemplate.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/form/textarea/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Form/Textarea" component="Form/Textarea" />
 
@@ -23,12 +21,10 @@ Renders a simple form textarea.
 />
 ```
 
-<Preview>
-  <Story name="Basic Textarea" height="10rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Form::Textarea
-        @name="field"
+        @name='field'
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
@@ -37,55 +33,71 @@ Renders a simple form textarea.
         readonly={{read-only}}
         @link='www.example.net'
         @linkText='link text goes here'
-        />
-    `,
-      context: {
-        value: text('value', 'Value'),
-        label: text('label', 'Label'),
-        helperText: text('helperText', 'Helper text'),
-        link: text('link', 'link'),
-        linkText: text('linkText', 'link text goes here'),
-        disabled: boolean('disabled', false),
-        'read-only': boolean('readonly', false),
-      },
+      />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Textarea"
+    height="10rem"
+    args={{
+      value: 'Value',
+      label: 'Label',
+      helperText: 'Helper text',
+      link: 'link',
+      linkText: 'link text goes here',
+      disabled: false,
+      'read-only': false,
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Textarea with Errors" height="10rem">
-    {{
-      template: hbs`
+export const ErrorTemplate = (args) => ({
+  template: hbs`
       <Rose::Form::Textarea
-        @name="field"
+        @name='field'
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
         @error={{true}}
         @disabled={{disabled}}
         readonly={{read-only}}
-        as |field|>
+        as |field|
+      >
         <field.errors as |errors|>
           <errors.message>An error occurred.</errors.message>
         </field.errors>
-      </Rose::Form::Textarea>
-    `,
-      context: {
-        value: text('value', 'Value'),
-        label: text('label', 'Label'),
-        helperText: text('helperText', 'Helper text'),
-        disabled: boolean('disabled', false),
-        'read-only': boolean('readonly', false),
-      },
+      </Rose::Form::Textarea>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Textarea with Errors"
+    height="10rem"
+    args={{
+      value: 'Value',
+      label: 'Label',
+      helperText: 'Helper text',
+      disabled: false,
+      'read-only': false,
     }}
+  >
+    {ErrorTemplate.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Fully Contextual Textarea">
-    {{
-      template: hbs`
-      <Rose::Form::Textarea @value="Text" @error={{true}} @contextual={{true}} as |field|>
+export const ContextualTemplate = (args) => ({
+  template: hbs`
+      <Rose::Form::Textarea
+        @value='Text'
+        @error={{true}}
+        @contextual={{true}}
+        as |field|
+      >
         <hr />
         <field.label>Label</field.label>
         <hr />
@@ -97,9 +109,10 @@ Renders a simple form textarea.
           <errors.message>An error occurred.</errors.message>
         </field.errors>
         <hr />
-      </Rose::Form::Textarea>
-    `,
-      context: {},
-    }}
-  </Story>
+      </Rose::Form::Textarea>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Fully Contextual Textarea">{ContextualTemplate.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/frame/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Frame" component="Frame" />
 
@@ -24,8 +23,7 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
       <:body>
         <p>Frame body</p>
       </:body>
-    </Rose::Frame>
-    `,
+    </Rose::Frame>`,
     }}
   </Story>
 </Preview>

addons/rose/addon/components/rose/header/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Header" component="Header" />
 
@@ -38,49 +36,54 @@ A header component that allows three distinct sections to be configured: brand,
 </Rose::Header>
 ```
 
-<Preview>
-  <Story name="Basic">
-    {{
-      template: hbs`
-    <Rose::Header as |header|>
-      <header.brand @logo="logo" @text={{brandName}} />
-      <header.nav as |nav|>
-        <nav.dropdown @text="org-name" as |dropdown|>
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.link @route="about">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </nav.dropdown>
-        <nav.link @route="index">Section</nav.link>
-        <nav.link @route="about">Section</nav.link>
-      </header.nav>
-      <header.utilities as |utilities|>
-        <utilities.dropdown
-          @text="user@example.net"
-          @iconOnly={{true}}
-          @icon={{dropdownIcon}} as |dropdown|
-        >
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.link @route="about">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </utilities.dropdown>
-      </header.utilities>
-    </Rose::Header>
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Header as |header|>
+        <header.brand @logo='logo' @text={{titleText}} />
+        <header.nav as |nav|>
+          <nav.dropdown @text='org-name' as |dropdown|>
+            <dropdown.link @route='index'>Menu item</dropdown.link>
+            <dropdown.link @route='about'>Menu item</dropdown.link>
+            <dropdown.button>Button menu item</dropdown.button>
+          </nav.dropdown>
+          <nav.link @route='index'>Section</nav.link>
+          <nav.link @route='about'>Section</nav.link>
+        </header.nav>
+        <header.utilities as |utilities|>
+          <utilities.dropdown
+            @text='user@example.net'
+            @iconOnly={{true}}
+            @icon={{dropdownIcon}}
+            as |dropdown|
+          >
+            <dropdown.link @route='index'>Menu item</dropdown.link>
+            <dropdown.link @route='about'>Menu item</dropdown.link>
+            <dropdown.button>Button menu item</dropdown.button>
+          </utilities.dropdown>
+        </header.utilities>
+      </Rose::Header>
     `,
-      context: {
-        brandName: text('brandName', 'Brand Name'),
-        dropdownIcon: select(
-          'dropdownIcon',
-          {
-            'flight-icons/svg/user-circle-16':
-              'flight-icons/svg/user-circle-16',
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/user-circle-16'
-        ),
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic"
+    args={{
+      titleText: 'Brand Name',
+      dropdownIcon: 'flight-icons/svg/user-circle-16',
+    }}
+    argTypes={{
+      dropdownIcon: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/user-circle-16',
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/icon/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Icon" component="Icon" />
 
@@ -13,24 +11,36 @@ Renders a simple icon.
 <Rose::Icon @name={{name}} @size={{size}} />
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Icon @name={{name}} @size={{size}} />`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic">
-    {{
-      template: hbs`
-      <Rose::Icon @name={{name}} @size={{size}} />
-    `,
-      context: {
-        name: select(
-          'name',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/check-circle-16'
-        ),
+  <Story
+    name="Basic"
+    args={{
+      name: 'flight-icons/svg/check-circle-16',
+      size: '',
+    }}
+    argTypes={{
+      name: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
+      },
+      size: {
+        control: {
+          type: 'inline-radio',
+          labels: { '': 'default (none)' },
+        },
+        options: ['small', 'medium', '', 'extra-large'],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/layout/centered/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Layout/Centered" component="Centered" />
 

addons/rose/addon/components/rose/layout/page/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Layout/Page" component="Page" />
 
@@ -25,7 +24,7 @@ A page layout/positioning component that allows five distinct sections to be con
     <Rose::Layout::Page as |page|>
       <page.breadcrumbs style="background: var(--brand-gray-4);">Breadcrumbs</page.breadcrumbs>
       <page.header style="background: var(--brand-gray-5);">Header</page.header>
-      <page.actions style="background: var(--brand-gray-8);">Actions</page.actions>
+      <page.actions style="background: var(--brand-gray-3);">Actions</page.actions>
       <page.navigation style="background: var(--brand-gray-6);">Navigation</page.navigation>
       <page.body style="background: var(--brand-gray-7);">Body</page.body>
     </Rose::Layout::Page>

addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Layout/Sidebar" component="SidebarLayout" />
 

addons/rose/addon/components/rose/link-button/index.stories.mdx

@@ -1,13 +1,26 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose/LinkButton" component="LinkButton" />
+<Meta
+  title="Rose/LinkButton"
+  component="LinkButton"
+  argTypes={{
+    style: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'ghost',
+        'inline-link-action',
+      ],
+    },
+  }}
+/>
 
 # LinkButton
 
-An achor element component styled to mimic `Rose::Button` component.
+An anchor element component styled to mimic `Rose::Button` component.
 Styles supported: primary, secondary, warning, and ghost.
 Disabling link button is not supported as it is an action on form components only.
 
@@ -21,54 +34,48 @@ Disabling link button is not supported as it is an action on form components onl
 </Rose::LinkButton>
 ```
 
-<Preview>
-  <Story name="Advanced">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::LinkButton
-        @route="index"
+        @route='index'
         @style={{style}}
         @iconLeft={{iconLeft}}
         @iconRight={{iconRight}}
+        @iconOnly={{iconOnly}}
       >
         {{text}}
       </Rose::LinkButton>
     `,
-      context: {
-        text: text('text', 'Content'),
-        style: select(
-          'style',
-          {
-            primary: 'primary',
-            secondary: 'secondary',
-            warning: 'warning',
-            ghost: 'ghost',
-            'inline-link-action': 'inline-link-action',
-          },
-          'primary'
-        ),
-        iconLeft: select(
-          'iconLeft',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/clipboard-copy-16'
-        ),
-        iconRight: select(
-          'iconRight',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/clipboard-copy-16':
-              'flight-icons/svg/clipboard-copy-16',
-          },
-          'flight-icons/svg/clipboard-copy-16'
-        ),
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Advanced"
+    args={{
+      text: 'Content',
+      style: 'primary',
+      iconLeft: 'flight-icons/svg/check-circle-16',
+      iconRight: 'flight-icons/svg/clipboard-copy-16',
+    }}
+    argTypes={{
+      iconLeft: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
+      },
+      iconRight: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
@@ -83,33 +90,23 @@ Similar to `Rose::Button`, icon only link button is supported.
 ```
 
 <Preview>
-  <Story name="Icon Only">
-    {{
-      template: hbs`
-    <Rose::LinkButton @route="" @style={{style}} @iconOnly={{iconOnly}} />
-    `,
-      context: {
-        style: select(
-          'style',
-          {
-            primary: 'primary',
-            secondary: 'secondary',
-            warning: 'warning',
-            ghost: 'ghost',
-            'inline-link-action': 'inline-link-action',
-          },
-          'primary'
-        ),
-        iconOnly: select(
-          'iconOnly',
-          {
-            'flight-icons/svg/check-circle-16':
-              'flight-icons/svg/check-circle-16',
-            'flight-icons/svg/help-16': 'flight-icons/svg/help-16',
-          },
-          'flight-icons/svg/help-16'
-        ),
+  <Story
+    name="Icon Only"
+    args={{
+      style: 'primary',
+      iconOnly: 'flight-icons/svg/check-circle-16',
+    }}
+    argTypes={{
+      iconOnly: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/help-16',
+          'flight-icons/svg/check-circle-16',
+          'flight-icons/svg/clipboard-copy-16',
+        ],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/list/key-value/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/List/KeyValue" component="List/KeyValue" />
 
@@ -12,47 +11,50 @@ A simple key/value list with support for embedded form fields and buttons.
   <Story name="Basic Key/Value List" height="17rem">
     {{
       template: hbs`
-    <Rose::List::KeyValue as |list|>
-      <list.item as |item|>
-        <item.key>Key</item.key>
-        <item.cell>Value</item.cell>
-      </list.item>
-      <list.item as |item|>
-        <item.key>Key</item.key>
-        <item.cell>Value</item.cell>
-      </list.item>
-      <list.item as |item|>
-        <item.key>Key</item.key>
-        <item.cell>Value</item.cell>
-      </list.item>
-      <Rose::Form::Input @contextual={{true}} as |input|>
+      <Rose::List::KeyValue as |list|>
         <list.item as |item|>
-          <item.key>
-            <input.label>Key</input.label>
-          </item.key>
-          <item.cell>
-            <input.field />
-          </item.cell>
-          <item.cell>
-            <Rose::Button @style="secondary">Add</Rose::Button>
-          </item.cell>
+          <item.key>Key</item.key>
+          <item.cell>Value</item.cell>
         </list.item>
-      </Rose::Form::Input>
-      <Rose::Form::Input @contextual={{true}} as |input|>
         <list.item as |item|>
-          <item.key>
-            <input.label>Key</input.label>
-          </item.key>
-          <item.cell>
-            <input.field />
-          </item.cell>
-          <item.cell>
-            <Rose::Button @style="secondary" @iconOnly="flight-icons/svg/trash-16" title="Remove">Remove</Rose::Button>
-          </item.cell>
+          <item.key>Key</item.key>
+          <item.cell>Value</item.cell>
         </list.item>
-      </Rose::Form::Input>
-    </Rose::List::KeyValue>
-    `,
+        <list.item as |item|>
+          <item.key>Key</item.key>
+          <item.cell>Value</item.cell>
+        </list.item>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          <list.item as |item|>
+            <item.key>
+              <input.label>Key</input.label>
+            </item.key>
+            <item.cell>
+              <input.field />
+            </item.cell>
+            <item.cell>
+              <Rose::Button @style='secondary'>Add</Rose::Button>
+            </item.cell>
+          </list.item>
+        </Rose::Form::Input>
+        <Rose::Form::Input @contextual={{true}} as |input|>
+          <list.item as |item|>
+            <item.key>
+              <input.label>Key</input.label>
+            </item.key>
+            <item.cell>
+              <input.field />
+            </item.cell>
+            <item.cell>
+              <Rose::Button
+                @style='secondary'
+                @iconOnly='flight-icons/svg/trash-16'
+                title='Remove'
+              >Remove</Rose::Button>
+            </item.cell>
+          </list.item>
+        </Rose::Form::Input>
+      </Rose::List::KeyValue>`,
     }}
   </Story>
 </Preview>

addons/rose/addon/components/rose/message/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Message" component="Message" />
 
@@ -10,41 +8,51 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 A message component containing a title, description, and nav links.
 Title can be configured with optional icon and subtitle.
 
-<Preview>
-  <Story name="Advanced Message" height="12rem">
-    {{
-      template: hbs`
-    <Rose::Message @title={{title}} @subtitle={{subtitle}} @icon={{icon}} as |message|>
-      <message.description>
-        {{description}}
-      </message.description>
-      <message.link @route="index">
-        <Rose::Icon @name="flight-icons/svg/chevron-left-16" />
-        Go back
-      </message.link>
-      <message.link @route="index">
-        Need help?
-      </message.link>
-    </Rose::Message>
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Message
+        @title={{title}}
+        @subtitle={{subtitle}}
+        @icon={{icon}}
+        as |message|
+      >
+        <message.description>
+          {{description}}
+        </message.description>
+        <message.link @route='index'>
+          <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
+          Go back
+        </message.link>
+        <message.link @route='index'>
+          Need help?
+        </message.link>
+      </Rose::Message>
     `,
-      context: {
-        title: text('title', 'Page not found'),
-        subtitle: text('subtitle', 'Error 404'),
-        description: text(
-          'description',
-          'Sorry, we could not find the page you were looking for.  Navigate to another page with the links below.'
-        ),
-        icon: select(
-          'icon',
-          {
-            'flight-icons/svg/alert-circle-16':
-              'flight-icons/svg/alert-circle-16',
-            'flight-icons/svg/help-16': 'flight-icons/svg/help-16',
-          },
-          'flight-icons/svg/help-16'
-        ),
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Advanced Message"
+    height="12rem"
+    args={{
+      title: 'Page not found',
+      subtitle: 'Error 404',
+      description:
+        'Sorry, we could not find the page you were looking for.  Navigate to another page with the links below.',
+      icon: 'flight-icons/svg/help-16',
+    }}
+    argTypes={{
+      icon: {
+        control: 'select',
+        options: [
+          'flight-icons/svg/help-16',
+          'flight-icons/svg/check-circle-16',
+        ],
       },
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
@@ -69,24 +77,27 @@ Title can be configured with optional icon and subtitle.
 
 Message can be configured without icons and navigation links.
 
+export const BasicTemplate = (args) => ({
+  template: hbs`
+      <Rose::Message @title={{title}} as |message|>
+        <message.description>
+          {{description}}
+        </message.description>
+      </Rose::Message>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic Message" height="8rem">
-    {{
-      template: hbs`
-    <Rose::Message @title="No logs received yet" as |message|>
-      <message.description>
-        {{description}}
-      </message.description>
-    </Rose::Message>
-    `,
-      context: {
-        title: text('title', 'No logs received yet'),
-        description: text(
-          'description',
-          'Sorry, we could not find the page you were looking for.  Navigate to another page with the links below.'
-        ),
-      },
+  <Story
+    name="Basic Message"
+    height="8rem"
+    args={{
+      title: 'No logs received yet',
+      description:
+        'Sorry, we could not find the page you were looking for.  Navigate to another page with the links below.',
     }}
+  >
+    {BasicTemplate.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Nav/Breadcrumbs" component="Nav/Breadcrumbs" />
 
@@ -15,15 +14,15 @@ A breadcrumbs component with links as crumbs.
 </Rose::Nav::Breadcrumbs>
 ```
 
-<Preview>
-  <Story name="Basic Breadcrumbs">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Nav::Breadcrumbs as |breadcrumbs|>
-        <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
-        <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
-      </Rose::Nav::Breadcrumbs>
-    `,
-    }}
-  </Story>
+        <breadcrumbs.link @route='about'>Level 1</breadcrumbs.link>
+        <breadcrumbs.link @route='index'>Level 2</breadcrumbs.link>
+      </Rose::Nav::Breadcrumbs>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Basic Breadcrumbs">{Template.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/nav/link/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Nav/Link" component="Nav/Link" />
 
@@ -13,13 +11,12 @@ Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`.
 <Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic Nav Link">
-    {{
-      template: hbs`
-      <Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>
-    `,
-      context: {},
-    }}
-  </Story>
+  <Story name="Basic Nav Link">{Template.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Nav/Sidebar" component="Nav/Sidebar" />
 
@@ -9,19 +7,18 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 A simple navigation component intended for use in the sidebar layout region.
 
-<Preview>
-  <Story name="Basic Sidebar Nav" height="8rem">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Nav::Sidebar @title={{title}} as |nav|>
         <nav.link @route="index" class="active">Item Name</nav.link>
         <nav.link @route="index">Item Name</nav.link>
-      </Rose::Nav::Sidebar>
-    `,
-      context: {
-        title: text('title', 'Title'),
-      },
-    }}
+      </Rose::Nav::Sidebar>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Basic Sidebar Nav" height="8rem" args={{ title: 'Title' }}>
+    {Template.bind({})}
   </Story>
 </Preview>
 

addons/rose/addon/components/rose/nav/tabs/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Nav/Tabs" component="Nav/Tabs" />
 
@@ -17,17 +15,16 @@ A simple tabbed navigation component.
 </Rose::Nav::Tabs>
 ```
 
-<Preview>
-  <Story name="Basic Tabs">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Nav::Tabs as |nav|>
         <nav.link @route='index' class="active">Text</nav.link>
         <nav.link @route='index'>Text</nav.link>
         <nav.link @route='index'>Text</nav.link>
-      </Rose::Nav::Tabs>
-    `,
-      context: {},
-    }}
-  </Story>
+      </Rose::Nav::Tabs>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Basic Tabs">{Template.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/notification/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Notification" component="Notification" />
 
@@ -27,62 +25,81 @@ handler takes appropriate action and hides the notification.
 </Rose::Notification>
 ```
 
-<Preview>
-  <Story name="Basic Notification">
-    {{
-      template: hbs`
+export const Template = (args) => ({
+  template: hbs`
       <Rose::Notification
-        @style="info"
-        @heading="Notification without dismissal"
+        @style={{style}}
+        @heading={{heading}}
+        @dismiss={{dismiss}}
+        @dismissText={{dismissText}}
       >
-        Some useful information.
-      </Rose::Notification>
-    `,
-      context: {},
+        {{text}}
+      </Rose::Notification>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Notification"
+    args={{
+      text: 'Some useful information',
+      heading: 'Notification without dismissal',
+      style: 'info',
     }}
+    argTypes={{
+      style: {
+        control: 'select',
+        options: ['info', 'success', 'warning', 'error'],
+      },
+    }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Basic Notifications with Dismissal" height="30rem">
-    {{
-      template: hbs`
+export const AllNotificationsTemplate = (args) => ({
+  template: hbs`
       <Rose::Notification
-        @style="info"
-        @heading="Dismissible Notification"
+        @style='info'
+        @heading='Dismissible Notification'
         @dismiss={{dismiss}}
-        @dismissText="Dismiss"
+        @dismissText='Dismiss'
       >
         Some useful information.
       </Rose::Notification>
       <Rose::Notification
-        @style="success"
-        @heading="Success"
+        @style='success'
+        @heading='Success'
         @dismiss={{dismiss}}
-        @dismissText="Dismiss"
+        @dismissText='Dismiss'
       >
         Good job!
       </Rose::Notification>
       <Rose::Notification
-        @style="warning"
-        @heading="Warning"
+        @style='warning'
+        @heading='Warning'
         @dismiss={{dismiss}}
-        @dismissText="Dismiss"
+        @dismissText='Dismiss'
       >
         Careful now.
       </Rose::Notification>
       <Rose::Notification
-        @style="error"
-        @heading="Error"
+        @style='error'
+        @heading='Error'
         @dismiss={{dismiss}}
-        @dismissText="Dismiss"
+        @dismissText='Dismiss'
       >
         An error occurred.
-      </Rose::Notification>
-    `,
-      context: {
-        dismiss: action('dismiss'),
-      },
-    }}
+      </Rose::Notification>`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Basic Notifications with Dismissal"
+    height="30rem"
+    argTypes={{ dismiss: { action: 'dismiss' } }}
+  >
+    {AllNotificationsTemplate.bind({})}
   </Story>
 </Preview>

addons/rose/addon/components/rose/separator/index.stories.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose/Separator" component="Separator" />
 
@@ -9,15 +7,14 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 A simple styled `<hr>` element.
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Separator />`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic Separator">
-    {{
-      template: hbs`
-      <Rose::Separator />
-    `,
-      context: {},
-    }}
-  </Story>
+  <Story name="Basic Separator">{Template.bind({})}</Story>
 </Preview>
 
 ```handlebars

addons/rose/addon/components/rose/table/index.stories.mdx

@@ -1,14 +1,27 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose/Table" component="Table" />
+<Meta
+  title="Rose/Table"
+  component="Table"
+  argTypes={{
+    style: {
+      control: {
+        type: 'inline-radio',
+        labels: { '': 'default (none)' },
+      },
+      options: ['', 'condensed'],
+    },
+  }}
+/>
 
 # Table
 
-A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, and cells can be shrinked to its content with, and center/right cell alignment is supported.
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions.
+Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element.
+Rows can be visually hidden, and cells can be shrunk to its content width, and center/right cell alignment is supported.
 
-Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
+Cell shrink should be applied to all the cells in a row. Otherwise, the bigger cell with shrink applied will determine the width of the row.
 
 ```handlebars
 <Rose::Table @style={{style}} as |table|>
@@ -48,69 +61,94 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
 </Rose::Table>
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Table @style={{style}} as |table|>
+        <table.header as |header|>
+          <header.row @hidden={{hideHeaderRow}} as |row|>
+            <row.headerCell
+              @shrink={{cellShrink}}
+              @alignCenter={{cellAlignmentCenter}}
+              @alignRight={{cellAlignmentRight}}
+            >Address</row.headerCell>
+            <row.headerCell
+              @alignCenter={{cellAlignmentCenter}}
+              @alignRight={{cellAlignmentRight}}
+            >Host Set</row.headerCell>
+            <row.headerCell
+              @shrink={{cellShrink}}
+              @alignCenter={{cellAlignmentCenter}}
+              @alignRight={{cellAlignmentRight}}
+            >Name</row.headerCell>
+            <row.headerCell
+              @alignCenter={{cellAlignmentCenter}}
+              @alignRight={{cellAlignmentRight}}
+            >Description</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          <body.row as |row|>
+            <row.cell @shrink={{cellShrink}}>1.1.1.1</row.cell>
+            <row.cell>host-set-1, host-set-2</row.cell>
+            <row.cell @shrink={{cellShrink}}>optional name</row.cell>
+            <row.cell>description</row.cell>
+          </body.row>
+          <body.row as |row|>
+            <row.cell
+              @shrink={{cellShrink}}
+              @alignCenter={{cellAlignmentCenter}}
+            >1.1.1.1</row.cell>
+            <row.cell @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
+            <row.cell
+              @shrink={{cellShrink}}
+              @alignCenter={{cellAlignmentCenter}}
+            >optional name</row.cell>
+            <row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
+          </body.row>
+          <body.row as |row|>
+            <row.cell
+              @shrink={{cellShrink}}
+              @alignRight={{cellAlignmentRight}}
+            >1.1.1.1</row.cell>
+            <row.cell @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
+            <row.cell
+              @shrink={{cellShrink}}
+              @alignRight={{cellAlignmentRight}}
+            >optional name</row.cell>
+            <row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
+          </body.row>
+        </table.body>
+        <table.footer as |footer|>
+          <footer.row as |row|>
+            <row.cell>Footer</row.cell>
+          </footer.row>
+        </table.footer>
+      </Rose::Table>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Basic">
-    {{
-      template: hbs`
-    <Rose::Table @style={{style}} as |table|>
-      <table.header as |header|>
-        <header.row @hidden={{hideHeaderRow}} as |row|>
-          <row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Address</row.headerCell>
-          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Host Set</row.headerCell>
-          <row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Name</row.headerCell>
-          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Description</row.headerCell>
-        </header.row>
-      </table.header>
-      <table.body as |body|>
-        <body.row as |row|>
-          <row.cell @shrink={{cellShrink}}>1.1.1.1</row.cell>
-          <row.cell>host-set-1, host-set-2</row.cell>
-          <row.cell @shrink={{cellShrink}}>optional name</row.cell>
-          <row.cell>description</row.cell>
-        </body.row>
-        <body.row as |row|>
-          <row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>1.1.1.1</row.cell>
-          <row.cell @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
-          <row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>optional name</row.cell>
-          <row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
-        </body.row>
-        <body.row as |row|>
-          <row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>1.1.1.1</row.cell>
-          <row.cell @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
-          <row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>optional name</row.cell>
-          <row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
-        </body.row>
-      </table.body>
-      <table.footer as |footer|>
-        <footer.row as |row|>
-          <row.cell>Footer</row.cell>
-        </footer.row>
-      </table.footer>
-    </Rose::Table>
-    `,
-      context: {
-        hideHeaderRow: boolean('hideHeaderRow', false),
-        cellShrink: boolean('cellShrink', false),
-        style: select('style', {
-          default: '',
-          condensed: 'condensed',
-        }),
-        cellAlignmentCenter: boolean('cellAlignmentCenter', false),
-        cellAlignmentRight: boolean('cellAlignmentRight', false),
-      },
+  <Story
+    name="Basic"
+    args={{
+      hidehideHeaderRow: false,
+      cellShrink: false,
+      cellAlignmentCenter: false,
+      cellAlignmentRight: false,
+      style: '',
     }}
+  >
+    {Template.bind({})}
   </Story>
 </Preview>
 
-<Preview>
-  <Story name="Basic Key/Value Table">
-    {{
-      template: hbs`
+export const KeyValueTemplate = (args) => ({
+  template: hbs`
       <Rose::Table @style={{style}} as |table|>
         <table.header as |header|>
-          <header.row  as |row|>
+          <header.row as |row|>
             <row.headerCell @shrink={{true}}>Key</row.headerCell>
-            <row.headerCell colspan="2">Value</row.headerCell>
+            <row.headerCell colspan='2'>Value</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
@@ -122,26 +160,27 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
               </Rose::Form::Input>
             </row.cell>
             <row.cell @shrink={{true}} @alignRight={{true}}>
-              <Rose::Button @style="secondary" @iconOnly="flight-icons/svg/trash-16" title="Remove">Remove</Rose::Button>
+              <Rose::Button
+                @style='secondary'
+                @iconOnly='flight-icons/svg/trash-16'
+                title='Remove'
+              >Remove</Rose::Button>
             </row.cell>
           </body.row>
           <body.row as |row|>
             <row.cell>Key</row.cell>
             <row.cell>
-              <Rose::Form::Select
-                @name="Test select"
-                as |field|
-              >
+              <Rose::Form::Select @name='Test select' as |field|>
                 <field.field as |select|>
                   <select.option>Choose an option</select.option>
-                  <select.option @value="value-1">Value 1</select.option>
-                  <select.option @value="value-2">Value 2</select.option>
-                  <select.option @value="value-3">Value 3</select.option>
+                  <select.option @value='value-1'>Value 1</select.option>
+                  <select.option @value='value-2'>Value 2</select.option>
+                  <select.option @value='value-3'>Value 3</select.option>
                 </field.field>
               </Rose::Form::Select>
             </row.cell>
             <row.cell @shrink={{true}} @alignRight={{true}}>
-              <Rose::Button @style="secondary">Add</Rose::Button>
+              <Rose::Button @style='secondary'>Add</Rose::Button>
             </row.cell>
           </body.row>
           <body.row as |row|>
@@ -152,35 +191,28 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
               </Rose::Form::Input>
             </row.cell>
             <row.cell @alignRight={{true}}>
-              <Rose::Button @style="secondary">Add</Rose::Button>
+              <Rose::Button @style='secondary'>Add</Rose::Button>
             </row.cell>
           </body.row>
           <body.row as |row|>
             <row.cell>Key</row.cell>
             <row.cell>
-              <Rose::Form::Textarea
-                @name="field"
-                readonly={{false}}
-              />
+              <Rose::Form::Textarea @name='field' readonly={{false}} />
             </row.cell>
             <row.cell @alignRight={{true}}>
-              <Rose::Button @style="secondary">Add</Rose::Button>
+              <Rose::Button @style='secondary'>Add</Rose::Button>
             </row.cell>
           </body.row>
         </table.body>
         <table.footer @hidden={{true}} as |footer|>
           <footer.row as |row|>
-            <row.cell colspan="3">Footer</row.cell>
+            <row.cell colspan='3'>Footer</row.cell>
           </footer.row>
         </table.footer>
-      </Rose::Table>
-    `,
-      context: {
-        style: select('style', {
-          condensed: 'condensed',
-          default: '',
-        }),
-      },
-    }}
-  </Story>
+      </Rose::Table>`,
+  context: args,
+});
+
+<Preview>
+  <Story name="Basic Key/Value Table">{KeyValueTemplate.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/toolbar/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Toolbar" component="Toolbar" />
 
@@ -21,14 +20,14 @@ predefined "regions" for left and right alignment, respectively.
 </Rose::Toolbar>
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Toolbar as |toolbar|>
+        toolbar
+      </Rose::Toolbar>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Toolbar">
-    {{
-      template: hbs`
-    <Rose::Toolbar as |toolbar|>
-    toolbar
-     </Rose::Toolbar>
-    `,
-    }}
-  </Story>
+  <Story name="Toolbar">{Template.bind({})}</Story>
 </Preview>

addons/rose/addon/components/rose/toolbar/info/index.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose/Toolbar/Info" component="Toolbar Info" />
 
@@ -14,14 +13,14 @@ Used to display non-interactive information in a toolbar.
 </Rose::Toolbar>
 ```
 
+export const Template = (args) => ({
+  template: hbs`
+      <Rose::Toolbar>
+        <Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
+      </Rose::Toolbar>`,
+  context: args,
+});
+
 <Preview>
-  <Story name="Toolbar Info">
-    {{
-      template: hbs`
-    <Rose::Toolbar>
-      <Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
-    </Rose::Toolbar>
-    `,
-    }}
-  </Story>
+  <Story name="Toolbar Info">{Template.bind({})}</Story>
 </Preview>

addons/rose/package.json

@@ -55,8 +55,8 @@
     "@hashicorp/flight-icons": "^2.6.0",
     "@storybook/addon-a11y": "^6.3.12",
     "@storybook/addon-actions": "^6.3.10",
+    "@storybook/addon-controls": "^6.5.12",
     "@storybook/addon-docs": "^6.3.8",
-    "@storybook/addon-knobs": "^6.3.1",
     "@storybook/addons": "^6.3.9",
     "@storybook/api": "^6.3.12",
     "@storybook/cli": "^6.3.10",

addons/rose/stories/colors.stories.mdx

@@ -1,21 +1,19 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Style Guide/Colors" />
 
 # Colors
 
-Colors are available using CSS custom properties.  Find the color swatch you
+Colors are available using CSS custom properties. Find the color swatch you
 need and copy the CSS custom property variable into your stylesheet.
 Use only these properties when specifying colors instead of absolute SCSS color
-variables.  This ensures consistency and dark mode compatibility.
+variables. This ensures consistency and dark mode compatibility.
 
-**Tip**:  Try it out in dark mode.  Set your system to dark mode to see these
+**Tip**: Try it out in dark mode. Set your system to dark mode to see these
 swatches in a different light.
 
 For example...
+
 ```css
 .my-component {
   color: var(--stark);
@@ -25,7 +23,7 @@ For example...
 
 ## Relative Poles
 
-These colors depend on light or dark mode.  Use these most often
+These colors depend on light or dark mode. Use these most often
 when specifying primary foreground and background colors.
 
 <ul class="swatches">
@@ -46,7 +44,7 @@ when specifying primary foreground and background colors.
 
 ## Absolute Poles
 
-Some colors don't change in dark vs light mode.  Use these values sparingly.
+Some colors don't change in dark vs light mode. Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
@@ -70,37 +68,52 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-3)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--info-subtler-3)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--info-subtler-3</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--info-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--info-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--info-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--info-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--info)"}}></div>
+    <div class="swatch-chip" style={{ backgroundColor: 'var(--info)' }}></div>
     <div class="swatch-detail">
       <code>--info</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--info-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--info-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--info-starker-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--info-starker-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--info-starker-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--info-starker-2</code>
     </div>
@@ -111,25 +124,34 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--alert-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--alert-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--alert-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--alert-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--alert-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--alert-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--alert)"}}></div>
+    <div class="swatch-chip" style={{ backgroundColor: 'var(--alert)' }}></div>
     <div class="swatch-detail">
       <code>--alert</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--alert-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--alert-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--alert-starker-1</code>
     </div>
@@ -140,25 +162,37 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--warning-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--warning-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--warning-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--warning-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--warning-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--warning-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--warning)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--warning)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--warning</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--warning-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--warning-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--warning-starker-1</code>
     </div>
@@ -169,25 +203,37 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--failure-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--failure-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--failure-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--failure-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--failure-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--failure-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--failure)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--failure)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--failure</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--failure-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--failure-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--failure-starker-1</code>
     </div>
@@ -198,25 +244,37 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--success-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--success-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--success-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--success-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--success-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--success-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--success)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--success)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--success</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--success-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--success-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--success-starker-1</code>
     </div>
@@ -227,25 +285,34 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--action-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--action-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--action-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--action-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--action-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--action-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--action)"}}></div>
+    <div class="swatch-chip" style={{ backgroundColor: 'var(--action)' }}></div>
     <div class="swatch-detail">
       <code>--action</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--action-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--action-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--action-starker-1</code>
     </div>
@@ -256,13 +323,19 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-border-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-border-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-border-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-border)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-border)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-border</code>
     </div>
@@ -273,67 +346,100 @@ Some colors don't change in dark vs light mode.  Use these values sparingly.
 
 <ul class="swatches">
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-6)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-subtler-6)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-subtler-6</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-5)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-subtler-5)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-subtler-5</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-4)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-subtler-4)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-subtler-4</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-3)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-subtler-3)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-subtler-3</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-subtler-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-subtler-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-subtler-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-subtler-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-1)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-starker-1)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-starker-1</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-2)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-starker-2)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-starker-2</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-3)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-starker-3)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-starker-3</code>
     </div>
   </li>
   <li class="swatch">
-    <div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-4)"}}></div>
+    <div
+      class="swatch-chip"
+      style={{ backgroundColor: 'var(--ui-gray-starker-4)' }}
+    ></div>
     <div class="swatch-detail">
       <code>--ui-gray-starker-4</code>
     </div>

addons/rose/stories/sizing.stories.mdx

@@ -1,21 +1,18 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Style Guide/Sizing" />
 
 # Sizing
 
 Use sizing function for things like margins,
-padding, and borders.  Sizes are returned in rem units rather than
+padding, and borders. Sizes are returned in rem units rather than
 pixels, but have been calibrated with pixel equivalents in mind.
 
 To use the rems sizing function, first import the sizing module,
-then use it in your code wherever you normally specify a size.  For example...
+then use it in your code wherever you normally specify a size. For example...
 
 ```scss
-@import "variables/sizing";
+@import 'variables/sizing';
 border: sizing.rems(xxxxs) solid;
 ```
 
@@ -30,63 +27,103 @@ border: sizing.rems(xxxxs) solid;
 <tbody>
 
 <tr>
-<th scope="row"><code>xxl</code></th>
-<td class="number-col">48</td>
-<td><code>sizing.rems(xxl)</code></td>
+  <th scope="row">
+    <code>xxl</code>
+  </th>
+  <td class="number-col">48</td>
+  <td>
+    <code>sizing.rems(xxl)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>xl</code></th>
-<td class="number-col">36</td>
-<td><code>sizing.rems(xl)</code></td>
+  <th scope="row">
+    <code>xl</code>
+  </th>
+  <td class="number-col">36</td>
+  <td>
+    <code>sizing.rems(xl)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>l</code></th>
-<td class="number-col">24</td>
-<td><code>sizing.rems(l)</code></td>
+  <th scope="row">
+    <code>l</code>
+  </th>
+  <td class="number-col">24</td>
+  <td>
+    <code>sizing.rems(l)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>m</code></th>
-<td class="number-col">16</td>
-<td><code>sizing.rems(m)</code></td>
+  <th scope="row">
+    <code>m</code>
+  </th>
+  <td class="number-col">16</td>
+  <td>
+    <code>sizing.rems(m)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>s</code></th>
-<td class="number-col">12</td>
-<td><code>sizing.rems(s)</code></td>
+  <th scope="row">
+    <code>s</code>
+  </th>
+  <td class="number-col">12</td>
+  <td>
+    <code>sizing.rems(s)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>xs</code></th>
-<td class="number-col">8</td>
-<td><code>sizing.rems(xs)</code></td>
+  <th scope="row">
+    <code>xs</code>
+  </th>
+  <td class="number-col">8</td>
+  <td>
+    <code>sizing.rems(xs)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>off-xs</code></th>
-<td class="number-col">5</td>
-<td><code>sizing.rems(off-xs)</code></td>
+  <th scope="row">
+    <code>off-xs</code>
+  </th>
+  <td class="number-col">5</td>
+  <td>
+    <code>sizing.rems(off-xs)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>xxs</code></th>
-<td class="number-col">4</td>
-<td><code>sizing.rems(xxs)</code></td>
+  <th scope="row">
+    <code>xxs</code>
+  </th>
+  <td class="number-col">4</td>
+  <td>
+    <code>sizing.rems(xxs)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>xxxs</code></th>
-<td class="number-col">2</td>
-<td><code>sizing.rems(xxxs)</code></td>
+  <th scope="row">
+    <code>xxxs</code>
+  </th>
+  <td class="number-col">2</td>
+  <td>
+    <code>sizing.rems(xxxs)</code>
+  </td>
 </tr>
 
 <tr>
-<th scope="row"><code>xxxxs</code></th>
-<td class="number-col">1</td>
-<td><code>sizing.rems(xxxxs)</code></td>
+  <th scope="row">
+    <code>xxxxs</code>
+  </th>
+  <td class="number-col">1</td>
+  <td>
+    <code>sizing.rems(xxxxs)</code>
+  </td>
 </tr>
 
 </tbody>

addons/rose/stories/typography.stories.mdx

@@ -1,21 +1,18 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Style Guide/Typography" />
 
 # Typography
 
 To specify custom typography, use the SCSS mixin.
-The <code>type</code> mixin accepts two parameters:  a font size name
+The <code>type</code> mixin accepts two parameters: a font size name
 (required) and an optional font weight name (normal, semibold, bold).
 This mixin sets both font size and line height, and optionally weight.
 
 For example...
 
 ```scss
-@import "utilities/type";
+@import 'utilities/type';
 .my-component {
   @include type.type(m, bold);
 }
@@ -94,42 +91,36 @@ For example...
 </tr>
 
 <tr>
-<th scope="row">
-<code>h1</code>
-</th>
-<td class="number-col">28</td>
-<td>
-<code>@include type.type(h1);</code>
-</td>
-<td>
-Same as xl, but different line height.
-</td>
+  <th scope="row">
+    <code>h1</code>
+  </th>
+  <td class="number-col">28</td>
+  <td>
+    <code>@include type.type(h1);</code>
+  </td>
+  <td>Same as xl, but different line height.</td>
 </tr>
 
 <tr>
-<th scope="row">
-<code>h2</code>
-</th>
-<td class="number-col">20</td>
-<td>
-<code>@include type.type(h2);</code>
-</td>
-<td>
-Same as l, but different line height.
-</td>
+  <th scope="row">
+    <code>h2</code>
+  </th>
+  <td class="number-col">20</td>
+  <td>
+    <code>@include type.type(h2);</code>
+  </td>
+  <td>Same as l, but different line height.</td>
 </tr>
 
 <tr>
-<th scope="row">
-<code>h3</code>
-</th>
-<td class="number-col">16</td>
-<td>
-<code>@include type.type(h3);</code>
-</td>
-<td>
-Same as m, but different line height.
-</td>
+  <th scope="row">
+    <code>h3</code>
+  </th>
+  <td class="number-col">16</td>
+  <td>
+    <code>@include type.type(h3);</code>
+  </td>
+  <td>Same as m, but different line height.</td>
 </tr>
 
 <tr>

yarn.lock

@@ -1641,6 +1641,16 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-proposal-private-property-in-object@^7.12.1", "@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
+  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-proposal-private-property-in-object@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.5.tgz#9f65a4d0493a940b4c01f8aa9d3f1894a587f636"
@@ -1671,16 +1681,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
-  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
 "@babel/plugin-proposal-unicode-property-regex@^7.14.5", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz#0f95ee0e757a5d647f378daa0eca7e93faa8bbe8"
@@ -3194,7 +3194,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
   integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
@@ -4077,7 +4077,7 @@
     broccoli-funnel "^3.0.5"
     ember-cli-babel "^7.23.1"
 
-"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
+"@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
   integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
@@ -4087,7 +4087,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@^10.0.9", "@emotion/core@^10.1.1":
+"@emotion/core@^10.1.1":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
   integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
@@ -4099,7 +4099,7 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
-"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
+"@emotion/css@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
   integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
@@ -5102,6 +5102,24 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
+"@storybook/addon-controls@^6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.12.tgz#01978f624b3ef29610e8e573e93fa063be37d7af"
+  integrity sha512-UoaamkGgAQXplr0kixkPhROdzkY+ZJQpG7VFDU6kmZsIgPRNfX/QoJFR5vV6TpDArBIjWaUUqWII+GHgPRzLgQ==
+  dependencies:
+    "@storybook/addons" "6.5.12"
+    "@storybook/api" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/components" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/node-logger" "6.5.12"
+    "@storybook/store" "6.5.12"
+    "@storybook/theming" "6.5.12"
+    core-js "^3.8.2"
+    lodash "^4.17.21"
+    ts-dedent "^2.0.0"
+
 "@storybook/addon-docs@^6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.8.tgz#14ef3faebecc80e33e29fa6581659311a730ebe8"
@@ -5152,23 +5170,6 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-knobs@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-6.3.1.tgz#2115c6f0d5759e4fe73d5f25710f4a94ebd6f0db"
-  integrity sha512-2GGGnQSPXXUhHHYv4IW6pkyQlCPYXKYiyGzfhV7Zhs95M2Ban08OA6KLmliMptWCt7U9tqTO8dB5u0C2cWmCTw==
-  dependencies:
-    copy-to-clipboard "^3.3.1"
-    core-js "^3.8.2"
-    escape-html "^1.0.3"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.20"
-    prop-types "^15.7.2"
-    qs "^6.10.0"
-    react-colorful "^5.1.2"
-    react-lifecycles-compat "^3.0.4"
-    react-select "^3.2.0"
-
 "@storybook/addons@6.3.10":
   version "6.3.10"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.10.tgz#a9fab13e6b81279f1dcdc54220dc4becac4b7a21"
@@ -5214,6 +5215,23 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addons@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.12.tgz#891767b5f88ea99b956cf19e9e2893594068adc7"
+  integrity sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==
+  dependencies:
+    "@storybook/api" "6.5.12"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.12"
+    "@storybook/theming" "6.5.12"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/addons@^6.3.9":
   version "6.3.9"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.9.tgz#e12c8d4351b861d67cb6b8d64ed33b1f6b90994f"
@@ -5333,6 +5351,29 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/api@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.12.tgz#7cc82087fc9298be03f15bf4ab9c4aab294b3bac"
+  integrity sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==
+  dependencies:
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.12"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.5.12"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/builder-webpack4@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.8.tgz#9ffe866fbd50a94b3cf3ecde1fe4d5f29dd337e8"
@@ -5484,6 +5525,15 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/channels@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.12.tgz#98baf01691d263e2ac341853361ec69c1a6621bc"
+  integrity sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==
+  dependencies:
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/cli@^6.3.10":
   version "6.3.10"
   resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-6.3.10.tgz#5ad3438a0b73299870deda09728dba77717573bf"
@@ -5628,6 +5678,14 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
+"@storybook/client-logger@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.12.tgz#d9809e13dc7939eb61452a5e94b1ccb61c4a022c"
+  integrity sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==
+  dependencies:
+    core-js "^3.8.2"
+    global "^4.4.0"
+
 "@storybook/codemod@6.3.10":
   version "6.3.10"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-6.3.10.tgz#aad0ee5ca8ef59b4d134ff45e213e198d64c9974"
@@ -5737,6 +5795,20 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/components@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.12.tgz#e137f0683ea92e22de116bfa62cfd65ce4efe01d"
+  integrity sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==
+  dependencies:
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/theming" "6.5.12"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    util-deprecate "^1.0.2"
+
 "@storybook/core-client@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.8.tgz#9223b9f22ab86d205dac605bcef15ba0f0068e15"
@@ -5814,6 +5886,62 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
+"@storybook/core-common@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.12.tgz#9f8d5cb3812382c49c84dcfb4279a39e228a1b83"
+  integrity sha512-gG20+eYdIhwQNu6Xs805FLrOCWtkoc8Rt8gJiRt8yXzZh9EZkU4xgCRoCxrrJ03ys/gTiCFbBOfRi749uM3z4w==
+  dependencies:
+    "@babel/core" "^7.12.10"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-decorators" "^7.12.12"
+    "@babel/plugin-proposal-export-default-from" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.7"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-private-property-in-object" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.12"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/preset-env" "^7.12.11"
+    "@babel/preset-react" "^7.12.10"
+    "@babel/preset-typescript" "^7.12.7"
+    "@babel/register" "^7.12.1"
+    "@storybook/node-logger" "6.5.12"
+    "@storybook/semver" "^7.3.2"
+    "@types/node" "^14.0.10 || ^16.0.0"
+    "@types/pretty-hrtime" "^1.0.0"
+    babel-loader "^8.0.0"
+    babel-plugin-macros "^3.0.1"
+    babel-plugin-polyfill-corejs3 "^0.1.0"
+    chalk "^4.1.0"
+    core-js "^3.8.2"
+    express "^4.17.1"
+    file-system-cache "^1.0.5"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.0.4"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    handlebars "^4.7.7"
+    interpret "^2.2.0"
+    json5 "^2.1.3"
+    lazy-universal-dotenv "^3.0.1"
+    picomatch "^2.3.0"
+    pkg-dir "^5.0.0"
+    pretty-hrtime "^1.0.3"
+    resolve-from "^5.0.0"
+    slash "^3.0.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+    webpack "4"
+
 "@storybook/core-events@6.3.10":
   version "6.3.10"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.10.tgz#82b41291b8baf1fae8848c603f0b825b3c42e3b5"
@@ -5842,6 +5970,13 @@
   dependencies:
     core-js "^3.8.2"
 
+"@storybook/core-events@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.12.tgz#28bd727cc4216012409bfac412fcb708346c56bc"
+  integrity sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core-events@^6.3.0":
   version "6.4.13"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.4.13.tgz#caf1adafd743f8d53a151bc402449f841896cb9c"
@@ -5944,6 +6079,13 @@
   dependencies:
     lodash "^4.17.15"
 
+"@storybook/csf@0.0.2--canary.4566f4d.1":
+  version "0.0.2--canary.4566f4d.1"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz#dac52a21c40ef198554e71fe4d20d61e17f65327"
+  integrity sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==
+  dependencies:
+    lodash "^4.17.15"
+
 "@storybook/ember-cli-storybook@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@storybook/ember-cli-storybook/-/ember-cli-storybook-0.5.0.tgz#b97fc212e6920871f0d6ac4348d663c335ff61b4"
@@ -6037,6 +6179,17 @@
     npmlog "^4.1.2"
     pretty-hrtime "^1.0.3"
 
+"@storybook/node-logger@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.12.tgz#0f9efcd1a37c7aae493b22fe33cacca87c135b9b"
+  integrity sha512-jdLtT3mX5GQKa+0LuX0q0sprKxtCGf6HdXlKZGD5FEuz4MgJUGaaiN0Hgi+U7Z4tVNOtSoIbYBYXHqfUgJrVZw==
+  dependencies:
+    "@types/npmlog" "^4.1.2"
+    chalk "^4.1.0"
+    core-js "^3.8.2"
+    npmlog "^5.0.1"
+    pretty-hrtime "^1.0.3"
+
 "@storybook/postinstall@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.8.tgz#9c3a4ad631a4b952b3fdf686cf60716c62f3e131"
@@ -6108,6 +6261,17 @@
     qs "^6.10.0"
     ts-dedent "^2.0.0"
 
+"@storybook/router@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.12.tgz#58efbc1f2f301c8584802af1c710b2f6f03f948c"
+  integrity sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==
+  dependencies:
+    "@storybook/client-logger" "6.5.12"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/semver@^7.3.2":
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
@@ -6132,6 +6296,27 @@
     prettier "~2.2.1"
     regenerator-runtime "^0.13.7"
 
+"@storybook/store@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.12.tgz#f1624ba942162cb9627a2ddcac72bfc9062e17a2"
+  integrity sha512-SMQOr0XvV0mhTuqj3XOwGGc4kTPVjh3xqrG1fqkj9RGs+2jRdmO6mnwzda5gPwUmWNTorZ7FxZ1iEoyfYNtuiQ==
+  dependencies:
+    "@storybook/addons" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    slash "^3.0.0"
+    stable "^0.1.8"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/theming@6.3.10":
   version "6.3.10"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.10.tgz#9a46bff3517fd6bfcc816376b426476811712f2e"
@@ -6204,6 +6389,16 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/theming@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.12.tgz#7df1b52913d49c5e84fc1f2e837c02d9fa8cc639"
+  integrity sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA==
+  dependencies:
+    "@storybook/client-logger" "6.5.12"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/theming@^6.3.0":
   version "6.4.13"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.4.13.tgz#1a8aadeddb6c3a115f739aa1a4bbd7e65d4a3830"
@@ -6641,6 +6836,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.9.tgz#b97c057e6138adb7b720df2bd0264b03c9f504fd"
   integrity sha512-CMjgRNsks27IDwI785YMY0KLt3co/c0cQ5foxHYv/shC2w8oOnVwz5Ubq1QG5KzrcW+AXk6gzdnxIkDnTvzu3g==
 
+"@types/node@^14.0.10 || ^16.0.0":
+  version "16.11.67"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.67.tgz#b499556b395182e4ab9e591cb0b4d2561580a4b0"
+  integrity sha512-A+ogdyb7/N8SzE4H9o6yXqSez+acp2XCYSv/PBx2yP7yUVRWf+hO4lSqwt27G9F+4KxnWxybJIe+4FV+Zv+iEg==
+
 "@types/node@^9.6.0":
   version "9.6.61"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.61.tgz#29f124eddd41c4c74281bd0b455d689109fc2a2d"
@@ -7579,6 +7779,14 @@ archy@~1.0.0:
   resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
   integrity sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==
 
+are-we-there-yet@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c"
+  integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^3.6.0"
+
 are-we-there-yet@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz#ba20bd6b553e31d62fc8c31bd23d22b95734390d"
@@ -7997,6 +8205,16 @@ babel-jest@^27.4.6:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-loader@^8.0.0, babel-loader@^8.2.5:
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
 babel-loader@^8.0.6, babel-loader@^8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -8007,16 +8225,6 @@ babel-loader@^8.0.6, babel-loader@^8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-loader@^8.2.5:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
-  dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^2.0.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
-
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -10244,7 +10452,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-support@^1.1.3:
+color-support@^1.1.2, color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
@@ -11397,14 +11605,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -13382,7 +13582,7 @@ escape-goat@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
   integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
 
-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 sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
@@ -14953,6 +15153,21 @@ galactus@^0.2.1:
     flora-colossus "^1.0.0"
     fs-extra "^4.0.0"
 
+gauge@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
+  integrity sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==
+  dependencies:
+    aproba "^1.0.3 || ^2.0.0"
+    color-support "^1.1.2"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.1"
+    object-assign "^4.1.1"
+    signal-exit "^3.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+    wide-align "^1.1.2"
+
 gauge@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"
@@ -15515,7 +15730,7 @@ gzip-size@5.1.1:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
-handlebars@^4.0.13, handlebars@^4.0.4, handlebars@^4.3.1, handlebars@^4.4.2, handlebars@^4.7.3:
+handlebars@^4.0.13, handlebars@^4.0.4, handlebars@^4.3.1, handlebars@^4.4.2, handlebars@^4.7.3, handlebars@^4.7.7:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
   integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
@@ -19271,11 +19486,6 @@ memfs@^3.1.2:
   dependencies:
     fs-monkey "1.0.3"
 
-memoize-one@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -20498,6 +20708,16 @@ npmlog@^4.1.2, npmlog@~4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+npmlog@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
+  integrity sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==
+  dependencies:
+    are-we-there-yet "^2.0.0"
+    console-control-strings "^1.1.0"
+    gauge "^3.0.0"
+    set-blocking "^2.0.0"
+
 npmlog@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-6.0.2.tgz#c8166017a42f2dea92d6453168dd865186a70830"
@@ -21318,7 +21538,7 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-picomatch@^2.3.1:
+picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -21896,7 +22116,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -22298,13 +22518,6 @@ react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-input-autosize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
-  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"
@@ -22346,20 +22559,6 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-select@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
-  integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/cache" "^10.0.9"
-    "@emotion/core" "^10.0.9"
-    "@emotion/css" "^10.0.9"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    react-input-autosize "^3.0.0"
-    react-transition-group "^4.3.0"
-
 react-sizeme@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.1.tgz#4d12f4244e0e6a0fb97253e7af0314dc7c83a5a0"
@@ -22401,16 +22600,6 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react-transition-group@^4.3.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@16.14.0, react@^16:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -24946,6 +25135,11 @@ sync-disk-cache@^2.0.0:
     rimraf "^3.0.0"
     username-sync "^1.0.2"
 
+synchronous-promise@^2.0.15:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.16.tgz#669b75e86b4295fdcc1bb0498de9ac1af6fd51a9"
+  integrity sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A==
+
 tabbable@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
@@ -25020,6 +25214,20 @@ telejson@^5.3.2:
     lodash "^4.17.21"
     memoizerific "^1.11.3"
 
+telejson@^6.0.8:
+  version "6.0.8"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7"
+  integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==
+  dependencies:
+    "@types/is-function" "^1.0.0"
+    global "^4.4.0"
+    is-function "^1.0.2"
+    is-regex "^1.1.2"
+    is-symbol "^1.0.3"
+    isobject "^4.0.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
@@ -26556,7 +26764,7 @@ wide-align@1.1.3, wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
-wide-align@^1.1.5:
+wide-align@^1.1.2, wide-align@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
   integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==