From 84da49f55e792a22648ac8af92212005cbf7b0a8 Mon Sep 17 00:00:00 2001
From: Nathaniel Waldschmidt <nathaniel.waldsch@gmail.com>
Date: Wed, 26 Jun 2024 16:24:44 -0500
Subject: [PATCH] feat: radio button improvements

---
 .../LegacyModal/LegacyModal.stories.js        |   8 +-
 src/components/MegaButton/MegaButton.mdx      |  39 --
 .../MegaButton/MegaButton.stories.js          | 184 -------
 src/components/MegaButton/MegaButton.vue      | 195 --------
 .../MegaButton/__tests__/MegaButton.spec.js   | 369 --------------
 src/components/Modal/Modal.stories.js         |   8 +-
 .../RadioButton/RadioButton.stories.js        |  79 ++-
 src/components/RadioButton/RadioButton.vue    | 461 +++++++++++-------
 .../RadioButton/RadioButtonGroup.vue          |  65 +++
 ...adioButton.spec.js => RadioButton.spec.ts} |  16 +-
 .../__tests__/RadioButtonGroup.spec.ts        |  38 ++
 src/components/RadioButton/constants.ts       |   9 +
 src/components/RadioButton/index.ts           |   3 +
 .../RadioButtonLarge/RadioButtonLarge.mdx     |  50 --
 .../RadioButtonLarge.stories.js               |  84 ----
 .../RadioButtonLarge/RadioButtonLarge.vue     | 228 ---------
 .../__tests__/RadioButtonLarge.spec.js        |  81 ---
 src/components/RadioGroup/RadioGroup.mdx      |  32 --
 .../RadioGroup/RadioGroup.stories.js          | 216 --------
 src/components/RadioGroup/RadioGroup.vue      |  37 --
 .../RadioGroup/__tests__/RadioGroup.spec.js   |  20 -
 src/components/index.js                       |   4 -
 src/main.ts                                   |   1 +
 src/types/Variant.ts                          |   3 +-
 24 files changed, 483 insertions(+), 1747 deletions(-)
 delete mode 100644 src/components/MegaButton/MegaButton.mdx
 delete mode 100644 src/components/MegaButton/MegaButton.stories.js
 delete mode 100644 src/components/MegaButton/MegaButton.vue
 delete mode 100644 src/components/MegaButton/__tests__/MegaButton.spec.js
 create mode 100644 src/components/RadioButton/RadioButtonGroup.vue
 rename src/components/RadioButton/__tests__/{RadioButton.spec.js => RadioButton.spec.ts} (82%)
 create mode 100644 src/components/RadioButton/__tests__/RadioButtonGroup.spec.ts
 create mode 100644 src/components/RadioButton/constants.ts
 create mode 100644 src/components/RadioButton/index.ts
 delete mode 100644 src/components/RadioButtonLarge/RadioButtonLarge.mdx
 delete mode 100644 src/components/RadioButtonLarge/RadioButtonLarge.stories.js
 delete mode 100644 src/components/RadioButtonLarge/RadioButtonLarge.vue
 delete mode 100644 src/components/RadioButtonLarge/__tests__/RadioButtonLarge.spec.js
 delete mode 100644 src/components/RadioGroup/RadioGroup.mdx
 delete mode 100644 src/components/RadioGroup/RadioGroup.stories.js
 delete mode 100644 src/components/RadioGroup/RadioGroup.vue
 delete mode 100644 src/components/RadioGroup/__tests__/RadioGroup.spec.js

diff --git a/src/components/LegacyModal/LegacyModal.stories.js b/src/components/LegacyModal/LegacyModal.stories.js
index d57ce62c9..cceb5fb90 100644
--- a/src/components/LegacyModal/LegacyModal.stories.js
+++ b/src/components/LegacyModal/LegacyModal.stories.js
@@ -1,7 +1,7 @@
 import Dropdown from '../Dropdown/Dropdown.vue';
 import LobButton from '../Button/Button.vue';
 import RadioButton from '../RadioButton/RadioButton.vue';
-import RadioGroup from '../RadioGroup/RadioGroup.vue';
+import RadioButtonGroup from '../RadioButton/RadioButtonGroup.vue';
 import LegacyModal from './LegacyModal.vue';
 import mdx from './LegacyModal.mdx';
 
@@ -20,7 +20,7 @@ const radioModel = 'yes';
 
 const PrimaryTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { LegacyModal, LobButton, RadioButton, RadioGroup },
+  components: { LegacyModal, LobButton, RadioButton, RadioButtonGroup },
   setup: () => ({ args }),
   data: () => ({ isModalVisible, radioModel }),
   template: `
@@ -36,10 +36,10 @@ const PrimaryTemplate = (args, { argTypes }) => ({
       @close="isModalVisible = false"
     >
       Would you like to export an additional CSV of associated tracking events?
-      <RadioGroup>
+      <RadioButtonGroup>
         <radio-button name="exportCSV" id="yes" value="yes" label="Yes" v-model="radioModel"/>
         <radio-button name="exportCSV" id="no" value="no" label="No" v-model="radioModel" />
-      </RadioGroup>
+      </RadioButtonGroup>
 
       <template v-slot:footer>
         <div class="flex self-end">
diff --git a/src/components/MegaButton/MegaButton.mdx b/src/components/MegaButton/MegaButton.mdx
deleted file mode 100644
index 5de63f5db..000000000
--- a/src/components/MegaButton/MegaButton.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { MegaText, WithImage, SmallText } from './MegaButton.stories';
-
-# MegaButton
-
-<Canvas of={MegaText} />
-<Canvas of={WithImage} />
-<Canvas of={SmallText} />
-
-## How to Use
-
-There are 3 forms of megabuttons:
-
-1. A large text, or mega text version, which just shows the label, given as either a prop or a `#label` slot. Unsurprisingly, this form uses a much larger text size than the others.
-
-2. The label with text version, which uses its label as a heading and accepts a text prop or a `#text` slot.
-
-3. An image version, which uses an imageSource prop to (you're not going to believe this) display an image.
-
-The format changes automatically based on which props you provide. Just give it a label, and it'll be a mega text. Provide an imageSource and you get the image version. Give it text and it'll format itself appropriately.
-
-Example of using this component in its mega text format in a template:
-
-```html
-<MegaButton
-  name="reward-choice"
-  id="kitten"
-  value="kitten"
-  label="Free Kitten"
-/>
-```
-
-## MegaButtonGroup
-
-If using a group of MegaButtons, wrap them in a `RadioGroup` so that they get wrapped in a `fieldset` and have an associated `legend`.
-
-## Props
-
-<ArgTypes story={PRIMARY_STORY} />
diff --git a/src/components/MegaButton/MegaButton.stories.js b/src/components/MegaButton/MegaButton.stories.js
deleted file mode 100644
index b4aad0f3e..000000000
--- a/src/components/MegaButton/MegaButton.stories.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import MegaButton from './MegaButton.vue';
-import RadioGroup from '../RadioGroup/RadioGroup.vue';
-import mdx from './MegaButton.mdx';
-import image from '@/assets/images/floofyboi.jpg';
-
-export default {
-  title: 'Components/Mega Button',
-  component: MegaButton,
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  },
-  argTypes: {
-    label: {
-      control: {
-        type: 'text'
-      }
-    },
-    text: {
-      control: {
-        type: 'text'
-      }
-    },
-    imageSource: {
-      control: {
-        type: 'text',
-        required: false
-      }
-    }
-  }
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MegaButton },
-  setup: () => ({ args }),
-  template: '<MegaButton v-bind="args" />'
-});
-
-export const MegaText = Template.bind({});
-MegaText.args = {
-  name: 'cat-type',
-  id: 'tortie',
-  label: 'Tortie',
-  value: 'tortoiseshell'
-};
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  name: 'cat-type',
-  id: 'floofyboi',
-  value: 'floofyboi',
-  label: 'Floofyboi',
-  disabled: false,
-  disabledBanner: null,
-  imageSource: image
-};
-
-export const SmallText = Template.bind({});
-SmallText.args = {
-  name: 'cat-type',
-  id: 'ginger',
-  value: 'ginger',
-  label: 'Ginger',
-  disabled: false,
-  disabledBanner: null,
-  text: 'The himbos of the cat world'
-};
-
-export const WithImageAndSmallText = Template.bind({});
-WithImageAndSmallText.args = {
-  name: 'cat-type',
-  id: 'floofyboi',
-  value: 'floofyboi',
-  label: 'Floofyboi',
-  disabled: false,
-  disabledBanner: null,
-  text: 'Minimum 80% fur by weight',
-  imageSource: image
-};
-
-export const WithTopFullImage = Template.bind({});
-WithTopFullImage.args = {
-  name: 'cat-type',
-  id: 'floofyboi',
-  value: 'floofyboi',
-  label: 'Floofyboi',
-  disabled: false,
-  disabledBanner: null,
-  text: 'Minimum 80% fur by weight',
-  imageSource:
-    'https://s3.us-west-2.amazonaws.com/public.lob.com/dashboard/campaigns/card-with-enterprise-badge.png',
-  topFullImage: true
-};
-
-const megaButtonModel = '';
-
-const GroupTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MegaButton, RadioGroup },
-  setup: () => ({ args }),
-  data: () => ({ megaButtonModel }),
-  template: `
-  <div style="width: 700px">
-    <RadioGroup legend="Cat Type" style="column-gap: 1.5rem">
-      <mega-button
-        id="ginger"
-        name="catType"
-        label="Ginger"
-        value="ginger"
-        v-bind="args"
-        v-model="megaButtonModel"
-      />
-      <mega-button
-        id="calico"
-        name="catType"
-        label="Calico"
-        value="calico"
-        v-bind="args"
-        v-model="megaButtonModel"
-      />
-      <mega-button
-        id="void"
-        name="catType"
-        label="Voidcat"
-        value="voidcat"
-        :disabled="true"
-        disabledBanner="Hiding in closet!"
-        v-bind="args"
-        v-model="megaButtonModel"
-      />
-    </RadioGroup>
-  </div>
-  `
-});
-
-export const Group = GroupTemplate.bind({});
-
-const GroupWithImageTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MegaButton, RadioGroup },
-  setup: () => ({ args }),
-  data: () => ({ megaButtonModel }),
-  template: `
-  <div>
-    <RadioGroup legend="Cat Type" style="column-gap: 1.5rem">
-      <mega-button
-        id="ginger"
-        name="catType"
-        label="Ginger"
-        value="ginger"
-        v-bind="args"
-        v-model="megaButtonModel"
-        imageSource=${image}
-        text="Minimum 80% fur by weight"
-      />
-      <mega-button
-        id="calico"
-        name="catType"
-        label="Calico"
-        value="calico"
-        v-bind="args"
-        v-model="megaButtonModel"
-        imageSource=${image}
-        text="Small. Cute and Sneaky. Not to be trusted around plants, glasses of water, toilets, or nice linen furniture."
-
-      />
-      <mega-button
-        id="siberian"
-        name="catType"
-        label="Siberian"
-        value="siberian"
-        v-bind="args"
-        v-model="megaButtonModel"
-        imageSource=${image}
-        text="Minimum 80% fur by weight. Very very very very big boy."
-      />
-    </RadioGroup>
-  </div>
-  `
-});
-
-export const GroupWithImage = GroupWithImageTemplate.bind({});
diff --git a/src/components/MegaButton/MegaButton.vue b/src/components/MegaButton/MegaButton.vue
deleted file mode 100644
index 33dea26b4..000000000
--- a/src/components/MegaButton/MegaButton.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div class="relative">
-    <input
-      :id="id"
-      type="radio"
-      class="absolute top-1/2 left-1/2 opacity-0 peer"
-      :name="name"
-      :value="value.toString()"
-      :checked="checked"
-      :disabled="disabled"
-      :aria-disabled="ariaDisabled"
-      @input="onInput"
-      @click="onClick"
-    />
-    <label
-      :for="id"
-      :style="{ width: customWidth }"
-      :class="[
-        'text-gray-900',
-        'h-full flex justify-center relative cursor-pointer',
-        'rounded-lg border border-transparent shadow-input',
-        'peer-focus-visible:outline-dashed peer-focus-visible:outline-black peer-focus-visible:outline-offset-1 peer-focus-visible:outline-1',
-        'peer-hover:shadow',
-        'peer-checked:border peer-checked:border-black peer-checked:shadow',
-        'peer-disabled:cursor-not-allowed peer-disabled:shadow-none peer-disabled:text-gray-100',
-        'peer-disabled:border peer-checked:border-disabled-gray',
-        smallText ? `max-w-[${customWidth}]` : '',
-        imageSource && !smallText ? `min-w-[160px] max-w-[${customWidth}]` : '',
-        { 'items-center': !hasDisabledBanner && !smallText },
-        { 'border-0': topFullImage && !checked }
-      ]"
-    >
-      <div class="w-full">
-        <div
-          v-if="imageSource"
-          data-testId="imageContainer"
-          :class="['mx-4 my-6', { '!m-0': topFullImage }]"
-        >
-          <div
-            v-if="hasDisabledBanner"
-            class="bottom-[60%] inset-x-0 absolute text-center bg-turquoise-100 uppercase text-gray-700 text-sm tracking-wide font-bold p-1"
-            data-testId="imageDisabledBanner"
-          >
-            {{ disabledBanner }}
-          </div>
-          <img
-            :class="[
-              'max-h-20 mx-auto rounded-t-lg',
-              { '!max-h-full': topFullImage },
-              { 'opacity-60': disabled }
-            ]"
-            :src="imageSource"
-            :alt="imageAltText"
-          />
-        </div>
-        <div
-          v-if="hasDisabledBanner && !imageSource"
-          class="mt-0 top-0 inset-x-0 absolute text-center bg-turquoise-100 uppercase text-gray-700 text-sm tracking-wide font-bold p-1 rounded-t-lg"
-          data-testId="disabledBanner"
-        >
-          {{ disabledBanner }}
-        </div>
-        <div
-          :class="[
-            { 'mx-6 xl:mx-10': !imageSource && !smallText },
-            { 'mx-6': smallText },
-            { 'my-8': !hasDisabledBanner },
-            { 'mt-12 mb-6': hasDisabledBanner && !imageSource },
-            { 'mt-12 mb-6': hasDisabledBanner }
-          ]"
-        >
-          <div
-            :class="[
-              'text-lg font-medium',
-              { 'text-center': !smallText },
-              { 'text-left': smallText },
-              { 'text-[1.25rem] 2xl:text-[2rem] whitespace-nowrap': megaText }
-            ]"
-          >
-            <slot name="label">
-              {{ label }}
-            </slot>
-          </div>
-          <div v-if="smallText" class="text-left mt-1 text-[14px]">
-            <slot name="text">
-              <p>{{ text }}</p>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </label>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MegaButton',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: [String, Boolean],
-      default: null
-    },
-    name: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: [String, Boolean],
-      default: ''
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    disabledBanner: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    imageSource: {
-      type: String,
-      default: null
-    },
-    imageAltText: {
-      type: String,
-      default: ''
-    },
-    topFullImage: {
-      type: Boolean,
-      default: false
-    },
-    ariaDisabled: {
-      type: Boolean,
-      default: false
-    },
-    customWidth: {
-      type: String,
-      default: '240px'
-    }
-  },
-  emits: ['update:modelValue', 'input', 'click'],
-  computed: {
-    checked() {
-      return this.modelValue === this.value;
-    },
-    hasDisabledBanner() {
-      return this.disabled && this.disabledBanner;
-    },
-    megaText() {
-      return this.labelContent && !this.textContent && !this.imageSource;
-    },
-    smallText() {
-      return this.labelContent && this.textContent;
-    },
-    labelContent() {
-      return this.$slots.label || this.label;
-    },
-    textContent() {
-      return this.$slots.text || this.text;
-    }
-  },
-  methods: {
-    onInput() {
-      this.$emit('update:modelValue', this.value);
-      this.$emit('input', this.value);
-    },
-    onClick($event) {
-      this.$emit('click', $event);
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-label {
-  box-shadow: 0 4.32px 12.95px rgba(0, 0, 0, 0.08);
-}
-
-input[type='radio']:disabled + label {
-  border: 1px solid #c4c4c4;
-  color: #8c8c8c;
-  box-shadow: none;
-}
-</style>
diff --git a/src/components/MegaButton/__tests__/MegaButton.spec.js b/src/components/MegaButton/__tests__/MegaButton.spec.js
deleted file mode 100644
index afce7804c..000000000
--- a/src/components/MegaButton/__tests__/MegaButton.spec.js
+++ /dev/null
@@ -1,369 +0,0 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import MegaButton from '../MegaButton.vue';
-
-describe('Megabutton', () => {
-  describe('Megatext format', () => {
-    const megatextProps = {
-      id: 'megabutton',
-      modelValue: '',
-      name: 'Chonky Boi',
-      label: 'Megabutton',
-      value: 'bigOlButton',
-      disabled: false
-    };
-
-    it('disables the input when disabled prop is true', () => {
-      const props = {
-        ...megatextProps,
-        disabled: true
-      };
-
-      const { getByLabelText } = render(MegaButton, {
-        props
-      });
-
-      const mega = getByLabelText(props.label);
-      expect(mega).toBeDisabled();
-    });
-
-    it('checks the input when the value matches the modelValue', () => {
-      const props = {
-        ...megatextProps,
-        modelValue: megatextProps.value
-      };
-      const { getByLabelText } = render(MegaButton, {
-        props
-      });
-
-      const mega = getByLabelText(props.label);
-      expect(mega).toBeChecked();
-    });
-
-    it('fires the input and click events when the input is clicked', async () => {
-      const props = megatextProps;
-      const { getByLabelText, emitted } = render(MegaButton, {
-        props
-      });
-      const mega = getByLabelText(props.label);
-
-      await userEvent.click(mega);
-      const emittedEvent = emitted();
-      expect(emittedEvent).toHaveProperty('click');
-      expect(emittedEvent).toHaveProperty('input');
-      expect(emittedEvent.input[0]).toEqual([props.value]);
-    });
-
-    describe('when disabled', () => {
-      describe('without disabled banner', () => {
-        it('has faded text and not allowed cursor', () => {
-          const props = {
-            ...megatextProps,
-            disabled: true
-          };
-
-          const { getByText } = render(MegaButton, {
-            props
-          });
-
-          const label = getByText(props.label).closest('label');
-          expect(label).toHaveClass('peer-disabled:text-gray-100');
-          expect(label).toHaveClass('peer-disabled:cursor-not-allowed');
-        });
-
-        it('does not display a banner box', () => {
-          const props = {
-            ...megatextProps,
-            disabled: true
-          };
-
-          const { queryByTestId } = render(MegaButton, {
-            props
-          });
-
-          const disabledBanner = queryByTestId('disabledBanner');
-          expect(disabledBanner).toBeNull;
-          const imageDisabledBanner = queryByTestId('imageDisabledBanner');
-          expect(imageDisabledBanner).toBeNull;
-        });
-      });
-
-      describe('with disabled banner', () => {
-        it('has faded text and not allowed cursor', () => {
-          const props = {
-            ...megatextProps,
-            disabled: true,
-            disabledBanner: 'Bruce'
-          };
-
-          const { getByText } = render(MegaButton, {
-            props
-          });
-
-          const label = getByText(props.label).closest('label');
-          expect(label).toHaveClass('peer-disabled:text-gray-100');
-          expect(label).toHaveClass('peer-disabled:cursor-not-allowed');
-        });
-
-        it('does not display the strikethru line', () => {
-          const props = {
-            ...megatextProps,
-            disabled: true,
-            disabledBanner: 'Bruce'
-          };
-
-          const { queryByTestId } = render(MegaButton, {
-            props
-          });
-
-          const strikethruBox = queryByTestId('strikethru');
-          expect(strikethruBox).toBeNull;
-        });
-
-        it('displays the standard banner box', () => {
-          const props = {
-            ...megatextProps,
-            disabled: true,
-            disabledBanner: 'Bruce'
-          };
-
-          const { queryByTestId } = render(MegaButton, {
-            props
-          });
-
-          const disabledBanner = queryByTestId('disabledBanner');
-          expect(disabledBanner).toHaveTextContent(props.disabledBanner);
-
-          const imageDisabledBanner = queryByTestId('imageDisabledBanner');
-          expect(imageDisabledBanner).toBeNull;
-        });
-      });
-    });
-  });
-
-  describe('Small text', () => {
-    const smallTextProps = {
-      id: 'megabutton',
-      modelValue: '',
-      name: 'Fine print',
-      label: 'Megabutton with text',
-      text: 'This is some text',
-      value: 'bigOlButton'
-    };
-
-    it('renders the label in smaller text', () => {
-      const props = smallTextProps;
-
-      const { getByText } = render(MegaButton, {
-        props
-      });
-
-      const label = getByText(props.label);
-      expect(label).toHaveClass('text-lg');
-    });
-
-    it('renders the text', () => {
-      const props = smallTextProps;
-
-      const { getByText } = render(MegaButton, {
-        props
-      });
-
-      const text = getByText(props.text);
-      expect(text).toBeInTheDocument();
-    });
-  });
-
-  describe('Small text with image', () => {
-    const textWithImageProps = {
-      id: 'megabutton',
-      modelValue: '',
-      name: 'Fine print',
-      label: 'Megabutton with text',
-      text: 'This also has an image',
-      imageSource: 'fake_image.egg',
-      value: 'bigOlButton'
-    };
-
-    it('renders the label in smaller text', () => {
-      const props = textWithImageProps;
-
-      const { getByText } = render(MegaButton, {
-        props
-      });
-
-      const label = getByText(props.label);
-      expect(label).toHaveClass('text-lg');
-    });
-
-    it('renders the text', () => {
-      const props = textWithImageProps;
-
-      const { getByText } = render(MegaButton, {
-        props
-      });
-
-      const text = getByText(props.text);
-      expect(text).toBeInTheDocument();
-    });
-
-    it('displays the image', () => {
-      const props = textWithImageProps;
-
-      const { getByTestId } = render(MegaButton, {
-        props
-      });
-
-      const imageContainer = getByTestId('imageContainer');
-      expect(imageContainer).toBeInTheDocument();
-    });
-
-    describe('with disabled banner', () => {
-      it('has faded text and not allowed cursor', () => {
-        const props = {
-          ...textWithImageProps,
-          disabled: true,
-          disabledBanner: 'Bruce'
-        };
-
-        const { getByText } = render(MegaButton, {
-          props
-        });
-
-        const label = getByText(props.label).closest('label');
-        expect(label).toHaveClass('peer-disabled:text-gray-100');
-        expect(label).toHaveClass('peer-disabled:cursor-not-allowed');
-      });
-
-      it('does not display the strikethru line', () => {
-        const props = {
-          ...textWithImageProps,
-          disabled: true,
-          disabledBanner: 'Bruce'
-        };
-
-        const { queryByTestId } = render(MegaButton, {
-          props
-        });
-
-        const strikethruBox = queryByTestId('strikethru');
-        expect(strikethruBox).toBeNull;
-      });
-
-      it('displays the standard banner box', () => {
-        const props = {
-          ...textWithImageProps,
-          disabled: true,
-          disabledBanner: 'Bruce'
-        };
-
-        const { queryByTestId } = render(MegaButton, {
-          props
-        });
-
-        const disabledBanner = queryByTestId('disabledBanner');
-        expect(disabledBanner).toBeNull;
-
-        const imageDisabledBanner = queryByTestId('imageDisabledBanner');
-        expect(imageDisabledBanner).toHaveTextContent(props.disabledBanner);
-      });
-    });
-  });
-
-  describe('Small text with image', () => {
-    const textWithImageProps = {
-      id: 'megabutton',
-      modelValue: '',
-      name: 'Fine print',
-      label: 'Megabutton with text',
-      text: 'This also has an image',
-      imageSource: 'fake_image.egg',
-      value: 'bigOlButton'
-    };
-
-    it('renders the label in smaller text', () => {
-      const props = textWithImageProps;
-
-      const { getByText } = render(MegaButton, {
-        props
-      });
-
-      const label = getByText(props.label);
-      expect(label).toHaveClass('text-lg');
-    });
-
-    it('renders the text', () => {
-      const props = textWithImageProps;
-
-      const { getByText } = render(MegaButton, {
-        props
-      });
-
-      const text = getByText(props.text);
-      expect(text).toBeInTheDocument();
-    });
-
-    it('displays the image', () => {
-      const props = textWithImageProps;
-
-      const { getByTestId } = render(MegaButton, {
-        props
-      });
-
-      const imageContainer = getByTestId('imageContainer');
-      expect(imageContainer).toBeInTheDocument();
-    });
-
-    describe('with disabled banner', () => {
-      it('has faded text and not allowed cursor', () => {
-        const props = {
-          ...textWithImageProps,
-          disabled: true,
-          disabledBanner: 'Bruce'
-        };
-
-        const { getByText } = render(MegaButton, {
-          props
-        });
-
-        const label = getByText(props.label).closest('label');
-        expect(label).toHaveClass('peer-disabled:text-gray-100');
-        expect(label).toHaveClass('peer-disabled:cursor-not-allowed');
-      });
-
-      it('does not display the strikethru line', () => {
-        const props = {
-          ...textWithImageProps,
-          disabled: true,
-          disabledBanner: 'Bruce'
-        };
-
-        const { queryByTestId } = render(MegaButton, {
-          props
-        });
-
-        const strikethruBox = queryByTestId('strikethru');
-        expect(strikethruBox).toBeNull;
-      });
-
-      it('displays the standard banner box', () => {
-        const props = {
-          ...textWithImageProps,
-          disabled: true,
-          disabledBanner: 'Bruce'
-        };
-
-        const { queryByTestId } = render(MegaButton, {
-          props
-        });
-
-        const disabledBanner = queryByTestId('disabledBanner');
-        expect(disabledBanner).toBeNull;
-
-        const imageDisabledBanner = queryByTestId('imageDisabledBanner');
-        expect(imageDisabledBanner).toHaveTextContent(props.disabledBanner);
-      });
-    });
-  });
-});
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index 569d22773..df0274a58 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -1,6 +1,6 @@
 import LobButton from '../Button/Button.vue';
 import RadioButton from '../RadioButton/RadioButton.vue';
-import RadioGroup from '../RadioGroup/RadioGroup.vue';
+import RadioButtonGroup from '../RadioButton/RadioButtonGroup.vue';
 import Icon from '../Icon/Icon.vue';
 import { IconName } from '../Icon/types';
 
@@ -48,7 +48,7 @@ const radioModel = 'yes';
 
 const PrimaryTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Icon, Modal, LobButton, RadioButton, RadioGroup },
+  components: { Icon, Modal, LobButton, RadioButton, RadioButtonGroup },
   setup: () => ({ args }),
   data: () => ({ isModalVisible, radioModel }),
   template: `
@@ -67,7 +67,7 @@ const PrimaryTemplate = (args, { argTypes }) => ({
     
       <template #default>
         <p>Would you like to export an additional CSV of associated tracking events?</p>
-        <RadioGroup>
+        <RadioButtonGroup>
           <radio-button
             name="exportCSV"
             value="yes"
@@ -75,7 +75,7 @@ const PrimaryTemplate = (args, { argTypes }) => ({
             v-model="radioModel"
           />
           <radio-button name="exportCSV" value="no" label="No" v-model="radioModel" />
-        </RadioGroup>
+        </RadioButtonGroup>
       </template>
     
       <template #footer>
diff --git a/src/components/RadioButton/RadioButton.stories.js b/src/components/RadioButton/RadioButton.stories.js
index 8b6b2b7ad..87257451c 100644
--- a/src/components/RadioButton/RadioButton.stories.js
+++ b/src/components/RadioButton/RadioButton.stories.js
@@ -1,5 +1,8 @@
 import RadioButton from './RadioButton.vue';
+import RadioButtonGroup from './RadioButtonGroup.vue';
 import mdx from './RadioButton.mdx';
+import { RadioButtonVariant } from './constants';
+import { IconName } from '../Icon';
 
 export default {
   title: 'Components/Radio Button',
@@ -8,6 +11,30 @@ export default {
     docs: {
       page: mdx
     }
+  },
+  argTypes: {
+    icon: {
+      options: Object.values(IconName),
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(IconName).join(' | ')
+        }
+      }
+    },
+    variant: {
+      options: Object.values(RadioButtonVariant),
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(RadioButtonVariant).join(' | ')
+        }
+      }
+    }
   }
 };
 
@@ -18,31 +45,61 @@ const Template = (args, { argTypes }) => ({
   components: { RadioButton },
   data: () => ({ vModel }),
   setup: () => ({ args }),
-  template: '<radio-button v-bind="args" v-model="vModel"/>'
+  template:
+    '<RadioButton v-bind="args" v-model="vModel"><template #content>Some random text content for card</template></RadioButton>'
 });
 
 export const Primary = Template.bind({});
 Primary.args = {
   name: 'postcard-size',
+  src: 'https://via.placeholder.com/150',
   id: '4x6',
   label: '4x6',
   value: '4x6'
 };
 
-const WithHelperTextTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioButton },
-  data: () => ({ vModel }),
-  setup: () => ({ args }),
-  template:
-    '<div style="width:200px"><radio-button v-bind="args" v-model="vModel" /></div>'
-});
-
-export const WithHelperText = WithHelperTextTemplate.bind({});
+export const WithHelperText = Template.bind({});
 WithHelperText.args = {
   name: 'postcard-size',
+  icon: 'Envelope',
   id: '4x6',
   label: '4x6',
   value: '4x6',
   helperText: 'Standard Postcard Size and a second line of text'
 };
+
+const GroupTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { RadioButton, RadioButtonGroup },
+  data: () => ({ vModel }),
+  setup: () => ({ args }),
+  template:
+    '<RadioButtonGroup v-bind="args.group"><RadioButton v-bind="args.input1" v-model="vModel"/><RadioButton v-bind="args.input2" v-model="vModel" /><RadioButton v-bind="args.input3" v-model="vModel" /></RadioButtonGroup>'
+});
+export const Group = GroupTemplate.bind({});
+Group.args = {
+  group: {
+    label: 'Postcard Size'
+  },
+  input1: {
+    name: 'postcard-size',
+    icon: 'Envelope',
+    id: '4x6',
+    label: '4x6',
+    value: '4x6'
+  },
+  input2: {
+    name: 'postcard-size-2',
+    icon: 'Envelope',
+    id: '5x7',
+    label: '5x7',
+    value: '5x7'
+  },
+  input3: {
+    name: 'postcard-size-3',
+    icon: 'Envelope',
+    id: '6x9',
+    label: '6x9',
+    value: '6x9'
+  }
+};
diff --git a/src/components/RadioButton/RadioButton.vue b/src/components/RadioButton/RadioButton.vue
index eeca4aa7a..fe128497f 100644
--- a/src/components/RadioButton/RadioButton.vue
+++ b/src/components/RadioButton/RadioButton.vue
@@ -1,209 +1,324 @@
 <template>
-  <div class="customOutline py-1 mr-5 relative">
+  <label
+    v-bind="labelAttributes"
+    :for="id"
+    :class="['uic-radio-button-container', `variant-${variant}`, { error }]"
+  >
     <input
       :id="id"
+      v-model="modelValue"
+      v-bind="inputAttributes"
+      class="uic-radio-button-input"
+      :disabled="disabled || loading"
+      :name
+      :readonly
+      :required
       type="radio"
-      :class="[
-        'absolute opacity-0',
-        { 'radio__input--error': error },
-        { '!cursor-not-allowed': disabled }
-      ]"
-      :name="name"
-      :value="value.toString()"
-      :checked="checked"
-      :disabled="disabled"
-      :required="required"
-      :readonly="readonly"
-      @input="onInput"
-      @click="onClick"
+      :value
+      @input="$emit('input', value)"
+      @click="$emit('click', $event)"
     />
-    <label
-      :for="id"
-      :class="[
-        'relative flex type-base-500 left-[31px] pr-10 cursor-pointer',
-        { 'text-gray-400 !cursor-not-allowed': disabled }
-      ]"
-    >
-      <div>
-        <slot>
-          {{ label }}
-        </slot>
-        <div
-          v-if="helperText"
-          :class="['type-xs-400 text-gray-500', { '!text-gray-300': disabled }]"
-        >
-          {{ helperText }}
-        </div>
+    <div class="uic-radio-button-artificial-container">
+      <span
+        v-if="variant !== RadioButtonVariant.CARD"
+        class="uic-radio-button-artificial-input"
+      />
+      <span
+        v-if="variant === RadioButtonVariant.CARD && icon"
+        class="uic-radio-button-icon-container"
+      >
+        <Icon
+          :icon="icon"
+          :size="RadioButtonVariant.CARD ? 'xxl' : undefined"
+        />
+      </span>
+      <div
+        v-if="variant === RadioButtonVariant.CARD && src"
+        class="uic-radio-button-image-container"
+      >
+        <img v-bind="imgAttributes" class="uic-radio-button-image" :src />
       </div>
-    </label>
-  </div>
+      <span v-bind="labelContainerAttributes" class="uic-radio-button-label">
+        <slot>{{ label }}</slot>
+        <LoadingSpinnerIcon v-if="loading" class="ml-1" height="24" />
+      </span>
+      <div
+        v-if="variant === RadioButtonVariant.CARD"
+        class="uic-radio-button-content"
+      >
+        <slot name="content" />
+      </div>
+      <span v-if="helperText" class="uic-radio-button-helper">{{
+        helperText
+      }}</span>
+    </div>
+  </label>
 </template>
 
-<script>
-import { getCurrentInstance } from 'vue';
-
-export default {
-  name: 'RadioButton',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: [String, Boolean],
-      default: null
-    },
-    name: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: [String, Boolean],
-      default: ''
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    helperText: {
-      type: String,
-      default: ''
-    },
-    error: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'click'],
-  data() {
-    return {
-      parent: null
-    };
-  },
-  computed: {
-    checked() {
-      return this.modelValue === this.value;
-    }
-  },
-  created() {
-    this.parent = getCurrentInstance().parent;
-  },
-  methods: {
-    onInput() {
-      this.$emit('update:modelValue', this.value);
-      this.$emit('input', this.value);
-    },
-    onClick($event) {
-      this.$emit('click', $event);
-    }
+<script setup lang="ts">
+import {
+  HTMLAttributes,
+  ImgHTMLAttributes,
+  InputHTMLAttributes,
+  LabelHTMLAttributes
+} from 'vue';
+
+import { Icon, IconName } from '../Icon';
+import { RadioButtonVariant } from './constants';
+import { LoadingSpinnerIcon } from '../LoadingSpinnerIcon';
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    /** Will only display with the `card` variant. */
+    icon?: IconName;
+    id: string;
+    imgAttributes?: ImgHTMLAttributes;
+    /** Will only display with the `card` variant. Image source. */
+    src?: string;
+    inputAttributes?: InputHTMLAttributes;
+    label: string;
+    labelContainerAttributes?: HTMLAttributes;
+    labelAttributes?: LabelHTMLAttributes;
+    loading?: boolean;
+    name: string;
+    readonly?: boolean;
+    required?: boolean;
+    value: string;
+    variant?: RadioButtonVariant;
+  }>(),
+  {
+    disabled: false,
+    error: undefined,
+    helperText: undefined,
+    icon: undefined,
+    imgAttributes: () => ({}),
+    inputAttributes: () => ({}),
+    labelContainerAttributes: () => ({}),
+    labelAttributes: () => ({}),
+    loading: false,
+    readonly: false,
+    required: false,
+    src: undefined,
+    variant: RadioButtonVariant.PRIMARY
   }
-};
+);
+
+defineEmits<{
+  (e: 'click', event: Event): void; // eslint-disable-line no-unused-vars
+  (e: 'input', value: string): void; // eslint-disable-line no-unused-vars
+}>();
+
+defineSlots<{
+  /** Only shown with the `card` variant. */
+  default: () => void;
+  content: () => void;
+}>();
+
+const modelValue = defineModel<string>();
 </script>
 
 <style scoped lang="scss">
-input {
-  + label {
-    &::before {
-      content: '';
-      top: 3px;
-      left: -22px;
-
-      @apply absolute;
-      @apply bg-white;
-      @apply border-gray-400;
-      @apply border-solid;
-      @apply border;
-      @apply h-4;
-      @apply rounded-lg;
-      @apply w-4;
-    }
-
-    &::after {
-      content: '';
-      left: -17px;
-
-      @apply top-2;
-      @apply absolute;
-      @apply h-1.5;
-      @apply inline-block;
-      @apply rounded-full;
-      @apply w-1.5;
-      @apply bg-white;
-    }
-  }
+$radio-class: '.uic-radio-button-input';
+$focused-radio: '.uic-radio-button-input:focus-visible';
+$hovered-radio: '.uic-radio-button-input:hover:not(:disabled):not(:checked)';
+$checked-radio: '.uic-radio-button-input:checked';
+$disabled-radio: '.uic-radio-button-input:disabled';
 
-  &.radio__input--error + label::before {
-    @apply border-red-500;
+.uic-radio-button {
+  &-container {
+    @apply relative;
   }
 
-  &:disabled:not(:checked) + label::before {
-    @apply border-gray-300;
-    @apply bg-gray-50;
+  // Actual checkbox that is not shown.
+  &-input {
+    @apply absolute;
+    @apply opacity-0;
+    @apply cursor-pointer;
+    @apply w-0 h-0;
   }
 
-  &:disabled:not(:checked) + label::after {
-    @apply bg-gray-50;
-  }
+  &-artificial-container {
+    @apply cursor-pointer;
+    @apply outline-1 outline-dashed outline-offset-2 outline-transparent;
+    @apply transition-all;
+    @apply overflow-hidden;
 
-  &:disabled:checked + label::before {
-    @apply border-gray-300;
-    @apply bg-gray-300;
-  }
+    .variant-primary &,
+    .variant-outlined & {
+      @apply grid items-center gap-x-1.5;
+      grid-template-columns: auto 1fr;
+      @apply px-1 rounded-sm;
+    }
+    .variant-outlined &,
+    .variant-card & {
+      @apply border border-gray-200;
+    }
+    .variant-outlined.error &,
+    .variant-card.error & {
+      @apply border-error;
+    }
 
-  &.radio__input--error:checked + label::before {
-    @apply border;
-    @apply border-error;
-  }
+    .variant-outlined & {
+      @apply px-6 py-3;
+    }
+
+    .variant-card & {
+      @apply rounded-md;
+      @apply p-4;
+    }
+
+    // Focused styles
+    #{$focused-radio} ~ & {
+      @apply outline-black;
+    }
+
+    // Hovered styles
+    #{$hovered-radio} ~ & {
+      .variant-outlined &,
+      .variant-card & {
+        @apply border-gray-300;
+        box-shadow: 0px 2px 4px 0px #17161713 !important;
+      }
+      .variant-outlined.error &,
+      .variant-card.error & {
+        @apply border-error;
+        box-shadow: 0px 2px 4px 0px #17161713 !important;
+      }
+    }
+
+    // Checked styles
+    #{$checked-radio} ~ & {
+      .variant-outlined &,
+      .variant-card & {
+        @apply border border-gray-800;
+      }
+      .variant-outlined.error & {
+        @apply border-error;
+      }
+      .variant-card.error & {
+        @apply border-gray-800;
+      }
+    }
 
-  &.radio__input--error:not(:checked) + label::before {
-    @apply bg-red-50;
+    // Disabled styles
+    #{$disabled-radio} ~ & {
+      @apply cursor-not-allowed;
+    }
   }
 
-  &.radio__input--error:not(:checked) + label::after {
-    @apply bg-red-50;
+  &-artificial-input {
+    @apply rounded-full;
+    @apply border border-gray-300;
+    @apply w-4 h-4;
+    @apply transition-colors;
+
+    .error & {
+      @apply border-error;
+    }
+
+    #{$hovered-radio} ~ .uic-radio-button-artificial-container & {
+      .variant-primary &,
+      .variant-outlined & {
+        @apply bg-gray-50;
+        @apply border-gray-400;
+      }
+      .variant-primary.error &,
+      .variant-outlined.error & {
+        @apply bg-error-light;
+        @apply border-error;
+      }
+    }
+
+    #{$checked-radio} ~ .uic-radio-button-artificial-container & {
+      .variant-primary &,
+      .variant-outlined & {
+        @apply border-gray-800 border-[5px];
+        @apply bg-transparent;
+      }
+      .variant-primary.error &,
+      .variant-outlined.error & {
+        @apply border-error;
+      }
+    }
+
+    #{$disabled-radio} ~ .uic-radio-button-artificial-container & {
+      .variant-primary &,
+      .variant-outlined &,
+      .variant-primary.error &,
+      .variant-outlined.error & {
+        @apply border-gray-200;
+        @apply bg-transparent;
+      }
+    }
   }
 
-  &.radio__input--error:checked:not(:disabled) + label::before {
-    @apply bg-red-500;
+  &-icon-container {
+    .variant-card & {
+      @apply flex items-center justify-center;
+      @apply w-9 h-9;
+      @apply rounded-full;
+      @apply bg-gray-25;
+      @apply text-gray-800;
+
+      .error & {
+        @apply bg-error-light;
+        @apply text-error;
+      }
+    }
+
+    #{$disabled-radio} ~ .uic-radio-button-artificial-container & {
+      @apply text-gray-400;
+    }
   }
 
-  &.radio__input--error:checked:not(:disabled) + label::after {
-    @apply bg-white;
+  &-image-container {
+    @apply -mx-4 -mt-4;
+    @apply flex items-center justify-center;
   }
 
-  &:checked:not(:disabled):not(.radio__input--error) + label::before {
-    @apply bg-black;
-    @apply border-black;
+  &-image {
+    @apply max-w-full max-h-full;
   }
 
-  &:hover:not(:disabled):not(:checked):not(.radio__input--error)
-    + label::before {
-    @apply border-gray-500;
-    @apply bg-gray-50;
+  &-label {
+    @apply flex gap-1 items-center;
+    @apply truncate;
+
+    .variant-primary &,
+    .variant-outlined & {
+      @apply type-base-500;
+    }
+    .variant-card & {
+      @apply type-base-600;
+      @apply mt-2;
+    }
+
+    #{$disabled-radio} ~ .uic-radio-button-artificial-container & {
+      @apply text-gray-400;
+    }
   }
 
-  &:hover:not(:disabled):not(:checked):not(.radio__input--error)
-    + label::after {
-    @apply bg-gray-50;
+  &-content {
+    @apply type-small-400;
+    @apply mt-1;
+
+    #{$disabled-radio} ~ .uic-radio-button-artificial-container & {
+      @apply text-gray-400;
+    }
   }
-}
 
-.customOutline:has(:focus-visible) {
-  @apply outline-1;
-  @apply outline-dashed;
-  @apply outline-black;
-  @apply outline-offset-1;
+  &-helper {
+    @apply type-xs-400 text-gray-500;
+    grid-column: 2 / 3;
+
+    .uic-radio-button-input:disabled
+      ~ .uic-radio-button-artificial-container
+      & {
+      @apply text-gray-300;
+    }
+  }
 }
 </style>
diff --git a/src/components/RadioButton/RadioButtonGroup.vue b/src/components/RadioButton/RadioButtonGroup.vue
new file mode 100644
index 000000000..3e268fc44
--- /dev/null
+++ b/src/components/RadioButton/RadioButtonGroup.vue
@@ -0,0 +1,65 @@
+<template>
+  <fieldset :disabled>
+    <legend
+      v-if="label"
+      data-testid="uic-radio-button-group-legend"
+      :class="['uic-radio-button-group-legend', { 'sr-only': srLabel }]"
+    >
+      {{ label }}
+      <span v-if="required" class="text-error">*</span>
+    </legend>
+
+    <div
+      :class="[
+        'uic-radio-button-group-container',
+        { vertical, 'mt-2': !srLabel }
+      ]"
+    >
+      <slot></slot>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    label?: string;
+    /** Simply adds an asterisk to the `legend`, does not enforce required on `RadioButton`s. */
+    required?: boolean;
+    srLabel?: boolean;
+    vertical?: boolean;
+  }>(),
+  {
+    disabled: false,
+    label: undefined,
+    required: false,
+    srLabel: false,
+    vertical: false
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.uic-radio-button-group {
+  &-legend {
+    @apply type-small-700 text-gray-800;
+
+    fieldset:disabled > & {
+      @apply text-gray-500;
+    }
+  }
+
+  &-container {
+    @apply flex items-start;
+
+    &:not(.vertical) {
+      @apply flex-row gap-10;
+    }
+
+    &.vertical {
+      @apply flex-col gap-2;
+    }
+  }
+}
+</style>
diff --git a/src/components/RadioButton/__tests__/RadioButton.spec.js b/src/components/RadioButton/__tests__/RadioButton.spec.ts
similarity index 82%
rename from src/components/RadioButton/__tests__/RadioButton.spec.js
rename to src/components/RadioButton/__tests__/RadioButton.spec.ts
index d21d5180f..7404cd7a8 100644
--- a/src/components/RadioButton/__tests__/RadioButton.spec.js
+++ b/src/components/RadioButton/__tests__/RadioButton.spec.ts
@@ -13,7 +13,7 @@ const initialProps = {
   disabled: false
 };
 
-describe('Radio Button', () => {
+describe('RadioButton', () => {
   it('does not check the input when the value does not match the modelValue', () => {
     const props = initialProps;
     const { getByLabelText } = render(RadioButton, {
@@ -37,20 +37,6 @@ describe('Radio Button', () => {
     expect(radio).toBeChecked();
   });
 
-  it('adds an error class to the input when error prop is true', () => {
-    const props = {
-      ...initialProps,
-      error: true
-    };
-
-    const { getByLabelText } = render(RadioButton, {
-      props
-    });
-
-    const radio = getByLabelText(props.label);
-    expect(radio).toHaveClass('radio__input--error');
-  });
-
   it('disables the input when disabled prop is true', () => {
     const props = {
       ...initialProps,
diff --git a/src/components/RadioButton/__tests__/RadioButtonGroup.spec.ts b/src/components/RadioButton/__tests__/RadioButtonGroup.spec.ts
new file mode 100644
index 000000000..fd622676e
--- /dev/null
+++ b/src/components/RadioButton/__tests__/RadioButtonGroup.spec.ts
@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom';
+import { render, within } from '@testing-library/vue';
+import RadioButtonGroup from '../RadioButtonGroup.vue';
+
+describe('RadioButtonGroup', () => {
+  it('renders', () => {
+    const { getByRole, getByText } = render(RadioButtonGroup, {
+      props: { label: 'testing label' }
+    });
+
+    expect(getByRole('group')).toBeVisible();
+    expect(getByText('testing label')).toBeVisible();
+  });
+
+  it('renders required asterisk', () => {
+    const { getByText } = render(RadioButtonGroup, {
+      props: { label: 'testing label', required: true }
+    });
+
+    expect(within(getByText('testing label')).getByText('*')).toBeVisible();
+  });
+
+  it('disables', () => {
+    const { getByRole } = render(RadioButtonGroup, {
+      props: { disabled: true }
+    });
+
+    expect(getByRole('group')).toBeDisabled();
+  });
+
+  it('hides label', () => {
+    const { getByText } = render(RadioButtonGroup, {
+      props: { label: 'testing label', hideLabel: true }
+    });
+
+    expect(getByText('testing label')).not.toBeVisible();
+  });
+});
diff --git a/src/components/RadioButton/constants.ts b/src/components/RadioButton/constants.ts
new file mode 100644
index 000000000..659d27b88
--- /dev/null
+++ b/src/components/RadioButton/constants.ts
@@ -0,0 +1,9 @@
+import { Variant } from '@/types';
+
+export const RadioButtonVariant = {
+  PRIMARY: Variant.PRIMARY,
+  OUTLINED: Variant.OUTLINED,
+  CARD: Variant.CARD
+} as const;
+export type RadioButtonVariant =
+  (typeof RadioButtonVariant)[keyof typeof RadioButtonVariant];
diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts
new file mode 100644
index 000000000..6dba00a96
--- /dev/null
+++ b/src/components/RadioButton/index.ts
@@ -0,0 +1,3 @@
+export * from './constants';
+export { default as RadioButton } from './RadioButton.vue';
+export { default as RadioButtonGroup } from './RadioButtonGroup.vue';
diff --git a/src/components/RadioButtonLarge/RadioButtonLarge.mdx b/src/components/RadioButtonLarge/RadioButtonLarge.mdx
deleted file mode 100644
index e82c5f324..000000000
--- a/src/components/RadioButtonLarge/RadioButtonLarge.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { Primary } from './RadioButtonLarge.stories';
-
-# Radio Button
-
-A radio button typically represents a single option in a group of related choices. Only one can be selected at a time.
-
-<Canvas of={Primary} />
-
-## How to Use
-
-Most of the time, radio buttons should be grouped together using a `radio-group` component. The `name` prop should be the same across the group so that (1) HTML can use it to figure out which group a radio button is in, and ensure that only one button in the group is selected and (2) screen readers can accurately group options together.
-
-You can pass in the `v-model` prop to bind radio buttons to the parent component's data model.
-
-You can pass in a `@click` handler to trigger a custom function on click events. The `event` object will be emitted along with the `click` event.
-
-If nothing is provided in the slot, the label will be rendered by default. Alternatively, you can provide any sort of content to be rendered in place of the label.
-
-```html
-<RadioButtonLarge
-  name="postcard-size"
-  value="4x6"
-  label="4x6"
-  v-model="postcard.size"
-  @click="handleClick"
-/>
-```
-
-Example with slot that contains label and tooltip
-
-```html
-<RadioButtonLarge
-  name="postcard-size"
-  value="4x6"
-  label="4x6"
-  v-model="postcard.size"
-  @click="handleClick"
->
-  <div class="flex">
-    {{ service.description }}
-    <!-- this becomes the label -->
-    <Tooltip />
-  </div>
-</RadioButtonLarge>
-```
-
-## Props
-
-<ArgTypes story={PRIMARY_STORY} />
diff --git a/src/components/RadioButtonLarge/RadioButtonLarge.stories.js b/src/components/RadioButtonLarge/RadioButtonLarge.stories.js
deleted file mode 100644
index 78a6aa119..000000000
--- a/src/components/RadioButtonLarge/RadioButtonLarge.stories.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import RadioButtonLarge from './RadioButtonLarge.vue';
-import mdx from './RadioButtonLarge.mdx';
-
-export default {
-  title: 'Components/Radio Button Large',
-  component: RadioButtonLarge,
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  }
-};
-
-const vModel = '';
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioButtonLarge },
-  data: () => ({ vModel }),
-  setup: () => ({ args }),
-  template: '<radio-button-large v-bind="args" v-model="vModel" />'
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  name: 'postcard-size',
-  id: '4x6',
-  label: '4x6',
-  value: '4x6'
-};
-
-const WithHelperTextTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioButtonLarge },
-  data: () => ({ vModel }),
-  setup: () => ({ args }),
-  template: '<radio-button-large v-bind="args" v-model="vModel" />'
-});
-
-export const WithHelperText = WithHelperTextTemplate.bind({});
-WithHelperText.args = {
-  name: 'postcard-size',
-  id: '4x6',
-  label: '4x6',
-  value: '4x6',
-  helperText: 'Standard postcard size'
-};
-
-const WithShortHelperTextTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioButtonLarge },
-  data: () => ({ vModel }),
-  setup: () => ({ args }),
-  template: '<radio-button-large v-bind="args" v-model="vModel" />'
-});
-
-export const WithShortHelperText = WithShortHelperTextTemplate.bind({});
-WithShortHelperText.args = {
-  name: 'postcard-size',
-  id: '4x6',
-  label: '4x6',
-  value: '4x6',
-  helperText: 'Looks good'
-};
-
-const WithFullWidthTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioButtonLarge },
-  data: () => ({ vModel }),
-  setup: () => ({ args }),
-  template:
-    '<div style="width: 800px"><radio-button-large v-bind="args" v-model="vModel" /></div>'
-});
-
-export const WithFullWidth = WithFullWidthTemplate.bind({});
-WithFullWidth.args = {
-  name: 'postcard-size',
-  id: '4x6',
-  label: '4x6',
-  value: '4x6',
-  helperText:
-    'Standard postcard size. This is a very long description so we can see what happens when the text takes up two (or more) lines. All of the text should show inside the radio button, and not overflow outside of it.',
-  fullWidth: true
-};
diff --git a/src/components/RadioButtonLarge/RadioButtonLarge.vue b/src/components/RadioButtonLarge/RadioButtonLarge.vue
deleted file mode 100644
index d7efd2a86..000000000
--- a/src/components/RadioButtonLarge/RadioButtonLarge.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <div
-    :class="[
-      'buttonContainer cursor-pointer border border-gray-300 rounded-sm pt-3 pb-3 mr-4 mb-1 customOutline',
-      fullWidth ? 'w-full' : 'w-[234px]',
-      { 'h-full': fullHeight },
-      { '!pb-8': helperText },
-      { 'hover:border-gray-400': !disabled && !error },
-      { '!border-black checked': checked && !disabled && !error },
-      { 'disabled !cursor-not-allowed border-gray-100': disabled },
-      { '!border-red-500 radio__input--error': error && !disabled }
-    ]"
-    @click="onInput"
-  >
-    <input
-      :id="id"
-      ref="radioInput"
-      type="radio"
-      :class="[
-        'absolute opacity-0',
-        { 'radio__input--error': error },
-        { '!cursor-not-allowed': disabled }
-      ]"
-      :name="name"
-      :value="value.toString()"
-      :checked="checked"
-      :disabled="disabled"
-      :required="required"
-      @input="onInput"
-      @click="onClick"
-    />
-    <label
-      :for="id"
-      :class="[
-        'relative flex type-base-500 top-[1px] left-[46px] cursor-pointer h-full pr-16',
-        { 'text-gray-400 !cursor-not-allowed': disabled }
-      ]"
-    >
-      <div>
-        <slot>
-          {{ label }}
-        </slot>
-        <div
-          :class="[
-            'type-xs-400 text-gray-500',
-            { '!text-gray-300': disabled },
-            { '-mb-4': helperText }
-          ]"
-        >
-          {{ helperText }}
-        </div>
-      </div>
-    </label>
-  </div>
-</template>
-
-<script>
-import { getCurrentInstance } from 'vue';
-
-export default {
-  name: 'RadioButtonLarge',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: [String, Boolean],
-      default: null
-    },
-    name: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: [String, Boolean],
-      default: ''
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    helperText: {
-      type: String,
-      default: ''
-    },
-    error: {
-      type: Boolean,
-      default: false
-    },
-    fullHeight: {
-      type: Boolean,
-      default: false
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'click'],
-  data() {
-    return {
-      parent: null
-    };
-  },
-  computed: {
-    checked() {
-      return this.modelValue === this.value;
-    }
-  },
-  created() {
-    this.parent = getCurrentInstance().parent;
-  },
-  methods: {
-    onInput($event) {
-      if (!this.disabled) {
-        this.$emit('update:modelValue', this.value);
-        this.$emit('input', this.value);
-        this.$emit('click', $event);
-        if (this.$refs.radioInput) this.$refs.radioInput.focus();
-      }
-    },
-    onClick($event) {
-      this.$emit('click', $event);
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-input {
-  + label {
-    &::before {
-      content: '';
-      top: 3px;
-      left: -22px;
-
-      @apply absolute;
-      @apply bg-white;
-      @apply border-gray-400;
-      @apply border-solid;
-      @apply border;
-      @apply h-4;
-      @apply rounded-lg;
-      @apply w-4;
-    }
-
-    &::after {
-      content: '';
-      left: -17px;
-
-      @apply top-2;
-      @apply absolute;
-      @apply h-1.5;
-      @apply inline-block;
-      @apply rounded-full;
-      @apply w-1.5;
-      @apply bg-white;
-    }
-  }
-
-  &.radio__input--error + label::before {
-    @apply border;
-    @apply border-red-500;
-  }
-
-  &:disabled:not(:checked) + label::before {
-    @apply border-gray-300;
-    @apply bg-gray-50;
-  }
-
-  &:disabled:not(:checked) + label::after {
-    @apply bg-gray-50;
-  }
-
-  &:disabled:checked + label::before {
-    @apply border-gray-300;
-    @apply bg-gray-300;
-  }
-
-  &.radio__input--error:not(:checked):not(:disabled) + label::before {
-    @apply bg-red-50;
-  }
-
-  &.radio__input--error:not(:checked):not(:disabled) + label::after {
-    @apply bg-red-50;
-  }
-
-  &.radio__input--error:checked:not(:disabled) + label::before {
-    @apply bg-red-500;
-  }
-
-  &.radio__input--error:checked:not(:disabled) + label::after {
-    @apply bg-white;
-  }
-
-  &:checked:not(:disabled):not(.radio__input--error) + label::before {
-    @apply bg-black;
-    @apply border-black;
-  }
-}
-
-.buttonContainer:hover:not(.radio__input--error):not(.disabled):not(.checked)
-  label::before {
-  @apply border-gray-500;
-  @apply bg-gray-50;
-}
-
-.buttonContainer:hover:not(.radio__input--error):not(.disabled):not(.checked)
-  label::after {
-  @apply bg-gray-50;
-}
-
-.customOutline:has(:focus-visible) {
-  @apply outline-1;
-  @apply outline-dashed;
-  @apply outline-black;
-  @apply outline-offset-1;
-}
-</style>
diff --git a/src/components/RadioButtonLarge/__tests__/RadioButtonLarge.spec.js b/src/components/RadioButtonLarge/__tests__/RadioButtonLarge.spec.js
deleted file mode 100644
index f85126053..000000000
--- a/src/components/RadioButtonLarge/__tests__/RadioButtonLarge.spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import RadioButtonLarge from '../RadioButtonLarge.vue';
-
-const initialProps = {
-  id: 'test',
-  modelValue: '',
-  name: 'test name',
-  label: 'Test',
-  value: 'test',
-  error: false,
-  disabled: false
-};
-
-describe('Radio Button', () => {
-  it('does not check the input when the value does not match the modelValue', () => {
-    const props = initialProps;
-    const { getByLabelText } = render(RadioButtonLarge, {
-      props
-    });
-
-    const radio = getByLabelText(props.label);
-    expect(radio).not.toBeChecked();
-  });
-
-  it('checks the input when the value matches the modelValue', () => {
-    const props = {
-      ...initialProps,
-      modelValue: initialProps.value
-    };
-    const { getByLabelText } = render(RadioButtonLarge, {
-      props
-    });
-
-    const radio = getByLabelText(props.label);
-    expect(radio).toBeChecked();
-  });
-
-  it('adds an error class to the input when error prop is true', () => {
-    const props = {
-      ...initialProps,
-      error: true
-    };
-
-    const { getByLabelText } = render(RadioButtonLarge, {
-      props
-    });
-
-    const radio = getByLabelText(props.label);
-    expect(radio).toHaveClass('radio__input--error');
-  });
-
-  it('disables the input when disabled prop is true', () => {
-    const props = {
-      ...initialProps,
-      disabled: true
-    };
-
-    const { getByLabelText } = render(RadioButtonLarge, {
-      props
-    });
-
-    const radio = getByLabelText(props.label);
-    expect(radio).toBeDisabled();
-  });
-
-  it('fires the input and click events when the input is clicked', async () => {
-    const props = initialProps;
-    const { getByLabelText, emitted } = render(RadioButtonLarge, {
-      props
-    });
-    const radio = getByLabelText(props.label);
-
-    await userEvent.click(radio);
-    const emittedEvent = emitted();
-    expect(emittedEvent).toHaveProperty('click');
-    expect(emittedEvent).toHaveProperty('input');
-    expect(emittedEvent.input[0]).toEqual([props.value]);
-  });
-});
diff --git a/src/components/RadioGroup/RadioGroup.mdx b/src/components/RadioGroup/RadioGroup.mdx
deleted file mode 100644
index 91a4cd388..000000000
--- a/src/components/RadioGroup/RadioGroup.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { Primary } from './RadioGroup.stories';
-
-# Radio Group
-
-A radio group represents a group of radio buttons.
-
-<Canvas of={Primary} />
-
-## How to Use
-
-Wrap all radio buttons in a radio group with the title of the group passed in through the `legend` prop.
-
-If using MegaButtons, you should also wrap those with this component, since they're radio buttons under the hood.
-
-Customizations exist for<br />
-(1) if radio buttons are on the same line or separate lines,<br />
-(2) if the legend is hidden, or<br />
-(3) if the input field is required.<br />
-If the legend is hidden, it will still be accessible to screen readers.
-
-```html
-<radio-group legend="Postcard Size">
-  <radio-button name="postcard-size" value="4x6" label="4x6" />
-  <radio-button name="postcard-size" value="5x7" label="5x7" />
-  <radio-button name="postcard-size" value="big" label="Really Big" />
-</radio-group>
-```
-
-## Props
-
-<ArgTypes story={PRIMARY_STORY} />
diff --git a/src/components/RadioGroup/RadioGroup.stories.js b/src/components/RadioGroup/RadioGroup.stories.js
deleted file mode 100644
index bd34e2373..000000000
--- a/src/components/RadioGroup/RadioGroup.stories.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import RadioGroup from './RadioGroup.vue';
-import RadioButton from '../RadioButton/RadioButton.vue';
-import RadioButtonLarge from '../RadioButtonLarge/RadioButtonLarge.vue';
-import mdx from './RadioGroup.mdx';
-
-export default {
-  title: 'Components/Radio Group',
-  component: RadioGroup,
-  subcomponents: { RadioButton, RadioButtonLarge },
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  }
-};
-
-const radioModel = '4x6';
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioGroup, RadioButton },
-  data: () => ({ radioModel }),
-  setup: () => ({ args }),
-  template: `
-    <radio-group v-bind="args">
-      <radio-button
-        id="4x6"
-        name="postcard-size"
-        label="4x6"
-        value="4x6"
-        v-model="radioModel"
-      />
-      <radio-button
-        id="5x7"
-        name="postcard-size"
-        label="5x7"
-        value="5x7"
-        v-model="radioModel"
-      />
-      <radio-button
-        id="big"
-        name="postcard-size"
-        label="Really Big"
-        value="big"
-        v-model="radioModel"
-      />
-    </radio-group>
-  `
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  legend: 'Postcard Size',
-  separateLines: false
-};
-
-const booleanModel = '';
-
-const BooleanTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioGroup, RadioButton },
-  data: () => ({ booleanModel }),
-  setup: () => ({ args }),
-  template: `
-    <radio-group v-bind="args">
-      <radio-button
-        id="included"
-        name="returnEnvelope"
-        label="Included"
-        :value="true"
-        v-model="booleanModel"
-      />
-      <radio-button
-        id="notIncluded"
-        name="returnEnvelope"
-        label="Not included"
-        :value="false"
-        v-model="booleanModel"
-      />
-    </radio-group>
-  `
-});
-
-export const Boolean = BooleanTemplate.bind({});
-Boolean.args = {
-  legend: 'Postcard Size',
-  separateLines: false
-};
-
-const withHelperTextModel = '';
-
-const WithHelperTextTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioGroup, RadioButton },
-  data: () => ({ withHelperTextModel }),
-  setup: () => ({ args }),
-  template: `
-    <radio-group v-bind="args">
-    <radio-button
-    id="4x6"
-    name="postcard-size"
-    label="4x6"
-    value="4x6"
-    v-model="withHelperTextModel"
-    helper-text="This is helper text"
-  />
-  <radio-button
-    id="5x7"
-    name="postcard-size"
-    label="5x7"
-    value="5x7"
-    v-model="withHelperTextModel"
-    helper-text="This is helper text"
-  />
-  <radio-button
-    id="big"
-    name="postcard-size"
-    label="Really Big"
-    value="big"
-    v-model="withHelperTextModel"
-    helper-text="This is helper text"
-  />
-    </radio-group>
-  `
-});
-
-export const WithHelperText = WithHelperTextTemplate.bind({});
-WithHelperText.args = {
-  legend: 'Postcard Size',
-  separateLines: false
-};
-
-const largeGroupModel = '4x6';
-
-const LargeGroupTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioGroup, RadioButtonLarge },
-  data: () => ({ largeGroupModel }),
-  setup: () => ({ args }),
-  template: `
-    <radio-group large v-bind="args">
-    <radio-button-large
-    id="4x6"
-    name="postcard-size"
-    label="4x6"
-    value="4x6"
-    v-model="largeGroupModel"
-  />
-  <radio-button-large
-    id="5x7"
-    name="postcard-size"
-    label="5x7"
-    value="5x7"
-    v-model="largeGroupModel"
-  />
-  <radio-button-large
-    id="big"
-    name="postcard-size"
-    label="Really Big"
-    value="big"
-    v-model="largeGroupModel"
-  />
-    </radio-group>
-  `
-});
-
-export const LargeGroup = LargeGroupTemplate.bind({});
-LargeGroup.args = {
-  legend: 'Postcard Size',
-  separateLines: false
-};
-
-const largeGroupWithFullHeightModel = '';
-
-const LargeGroupWithFullHeightTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioGroup, RadioButtonLarge },
-  data: () => ({ largeGroupWithFullHeightModel }),
-  setup: () => ({ args }),
-  template: `
-    <radio-group large v-bind="args">
-      <div style="width: 50%; margin-right: 10px">
-        <radio-button-large
-          id="4x6"
-          name="postcard-size"
-          label="4x6"
-          value="4x6"
-          v-model="largeGroupWithFullHeightModel"
-          helper-text="This is a short description"
-          full-width
-          full-height
-        />
-      </div>
-      <div style="width: 50%">
-        <radio-button-large
-          id="5x7"
-          name="postcard-size"
-          label="5x7"
-          value="5x7"
-          v-model="largeGroupWithFullHeightModel"
-          helper-text="This is a very long description so we can see what happens when the text takes up two (or more) lines. All of the text should show inside the radio button, and not overflow outside of it."
-          full-width
-          full-height
-        />
-      </div>
-    </radio-group>
-  `
-});
-
-export const LargeGroupWithFullHeight = LargeGroupWithFullHeightTemplate.bind(
-  {}
-);
-LargeGroupWithFullHeight.args = {
-  legend: 'Postcard Size',
-  separateLines: false
-};
diff --git a/src/components/RadioGroup/RadioGroup.vue b/src/components/RadioGroup/RadioGroup.vue
deleted file mode 100644
index 0492081a6..000000000
--- a/src/components/RadioGroup/RadioGroup.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <fieldset :class="['border-none flex']">
-    <legend
-      :class="srOnlyLegend ? 'sr-only' : 'type-small-700 text-black mb-1.5'"
-    >
-      {{ legend }}
-      <span v-if="required" class="text-sm text-red-500"> * </span>
-    </legend>
-    <div :class="['flex w-full', { 'flex-col': separateLines }]">
-      <slot />
-    </div>
-  </fieldset>
-</template>
-
-<script>
-export default {
-  name: 'RadioGroup',
-  props: {
-    legend: {
-      type: String,
-      default: ''
-    },
-    srOnlyLegend: {
-      type: Boolean,
-      default: false
-    },
-    separateLines: {
-      type: Boolean,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      default: false
-    }
-  }
-};
-</script>
diff --git a/src/components/RadioGroup/__tests__/RadioGroup.spec.js b/src/components/RadioGroup/__tests__/RadioGroup.spec.js
deleted file mode 100644
index 4c2dc1ced..000000000
--- a/src/components/RadioGroup/__tests__/RadioGroup.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
-import RadioGroup from '../RadioGroup.vue';
-
-const initialProps = {
-  legend: 'legend',
-  srOnlyLegend: true
-};
-
-describe('Radio Group', () => {
-  it('renders a legend for accessibility', () => {
-    const props = initialProps;
-    const { queryByText } = render(RadioGroup, {
-      props
-    });
-
-    const legend = queryByText(props.legend);
-    expect(legend).toBeInTheDocument();
-  });
-});
diff --git a/src/components/index.js b/src/components/index.js
index 923e32691..37325b65e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -18,13 +18,9 @@ export { default as LobLabel } from './Label/Label';
 export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as MainNavigationItem } from './MainNavigation/MainNavigationItem';
 export { default as MainNavigationChildItem } from './MainNavigation/MainNavigationChildItem';
-export { default as MegaButton } from './MegaButton/MegaButton';
 export { default as Multiselect } from './Multiselect/Multiselect';
 export { default as NumberInput } from './NumberInput/NumberInput.vue';
 export { default as ProgressBar } from './ProgressBar/ProgressBar';
-export { default as RadioButton } from './RadioButton/RadioButton';
-export { default as RadioButtonLarge } from './RadioButtonLarge/RadioButtonLarge';
-export { default as RadioGroup } from './RadioGroup/RadioGroup';
 export { default as SearchBar } from './SearchBar/SearchBar';
 export { default as Subnavigation } from './Subnavigation/Subnavigation';
 export { default as SubnavigationItem } from './Subnavigation/SubnavigationItem';
diff --git a/src/main.ts b/src/main.ts
index 21dd8bd98..269522704 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -41,6 +41,7 @@ export * from './components/Modal';
 export * from './components/Overlay';
 export * from './components/Panel';
 export * from './components/Pagination';
+export * from './components/RadioButton';
 export * from './components/Skeleton';
 export * from './components/Steps';
 export * from './components/Table';
diff --git a/src/types/Variant.ts b/src/types/Variant.ts
index 1c7165f46..d7bc10f2d 100644
--- a/src/types/Variant.ts
+++ b/src/types/Variant.ts
@@ -1,6 +1,7 @@
 export const Variant = {
   OUTLINED: 'outlined',
   PRIMARY: 'primary',
-  TEXT: 'text'
+  TEXT: 'text',
+  CARD: 'card'
 } as const;
 export type Variant = (typeof Variant)[keyof typeof Variant];