From 5b98243a3ddd85ef90068849b69ce02cf55c53fd Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 10 Nov 2025 15:50:50 -0500
Subject: [PATCH 1/2] prelimary step

---
 .../src/lib/Atoms/FormInputs/Radio/Radio.mdx  |  2 +
 .../Atoms/FormInputs/Radio/Radio.stories.tsx  | 95 ++++++++++++++++++-
 2 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.mdx b/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.mdx
index 5783f5d7200..78030814cdd 100644
--- a/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.mdx
+++ b/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.mdx
@@ -24,6 +24,8 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+<Canvas of={RadioStories.KnowledgeSourceSelection} />
+
 ## Usage
 
 Use Radio to handle single selection within a group of options. Use RadioGroup to group multiple Radio components together semantically.
diff --git a/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx b/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx
index f70443a392b..78c9efbd4a5 100644
--- a/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx
@@ -1,5 +1,7 @@
-import { Radio, RadioGroup } from '@codecademy/gamut';
+import { Box, FlexBox, Radio, RadioGroup, Text } from '@codecademy/gamut';
+import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
 import { infotipNestedArgTypes } from '~styleguide/argTypes';
@@ -81,3 +83,94 @@ export const CustomLabel: Story = {
     label: 'Option with infotip',
   },
 };
+
+const PadlessBoldedRadio = styled(Radio)`
+  label {
+    padding: 0;
+    font-weight: bold;
+  }
+`;
+
+const KnowledgeSourceSelectionComponent = () => {
+  const [selectedType, setSelectedType] = useState<
+    'workspace' | 'project' | 'content'
+  >('project');
+
+  const workspaceName = 'workspace name';
+  const projectName = 'project name';
+  const contentName = 'content name';
+
+  const options = [
+    {
+      type: 'workspace' as const,
+      label: `Workspace: ${workspaceName}`,
+      bullets: [
+        `Accessible across all projects in your "${workspaceName}" workspace.`,
+        'Can be shared to other projects or workspaces later if needed.',
+        'Best for broad references like brand, legal, or voice guidelines.',
+      ],
+    },
+    {
+      type: 'project' as const,
+      label: `Project: ${projectName}`,
+      bullets: [
+        `Accessible to all content items within your "${projectName}" project.`,
+        'Can be shared to other projects or workspaces later if needed.',
+        'Ideal for project‑specific datasets, briefs, or design standards.',
+      ],
+    },
+    {
+      type: 'content' as const,
+      label: `Content item: ${contentName}`,
+      bullets: [
+        `Applied only to "${contentName}".`,
+        "Won't surface in search or be discoverable elsewhere.",
+        'Best for highly tailored or one‑off content.',
+      ],
+    },
+  ];
+
+  return (
+    <FlexBox column gap={16} maxWidth={600}>
+      <Text as="h3" fontSize={20} fontWeight="title" lineHeight="title">
+        Select where this knowledge source will be available
+      </Text>
+      <FlexBox column gap={16}>
+        {options.map((option) => (
+          <Box
+            border={selectedType === option.type ? 2 : 1}
+            borderColor={
+              selectedType === option.type ? 'hyper-500' : 'border-primary'
+            }
+            borderRadius="md"
+            key={option.type}
+            p={16}
+            pt={12}
+          >
+            <PadlessBoldedRadio
+              checked={selectedType === option.type}
+              htmlFor={`knowledge-source-${option.type}`}
+              label={option.label}
+              name="knowledge-source"
+              value={option.type}
+              onChange={() => setSelectedType(option.type)}
+            />
+            <Box pl={28 as any}>
+              <Box as="ul" color="text-secondary" fontSize={14}>
+                {option.bullets.map((bullet) => (
+                  <li key={bullet} style={{ marginBottom: 0 }}>
+                    {bullet}
+                  </li>
+                ))}
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </FlexBox>
+    </FlexBox>
+  );
+};
+
+export const KnowledgeSourceSelection: Story = {
+  render: () => <KnowledgeSourceSelectionComponent />,
+};

From b154a19c2f224f408fe650953f7d68cf0e833867 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 10 Nov 2025 15:55:23 -0500
Subject: [PATCH 2/2] tiny fix up for styling

---
 .../src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx b/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx
index 78c9efbd4a5..9ba19dda2f9 100644
--- a/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx
@@ -158,9 +158,9 @@ const KnowledgeSourceSelectionComponent = () => {
             <Box pl={28 as any}>
               <Box as="ul" color="text-secondary" fontSize={14}>
                 {option.bullets.map((bullet) => (
-                  <li key={bullet} style={{ marginBottom: 0 }}>
+                  <Box as="li" key={bullet} mb={0}>
                     {bullet}
-                  </li>
+                  </Box>
                 ))}
               </Box>
             </Box>