test: not actual test but QAing radio label customizations

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.

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) => (
+                  <Box as="li" key={bullet} mb={0}>
+                    {bullet}
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </FlexBox>
+    </FlexBox>
+  );
+};
+
+export const KnowledgeSourceSelection: Story = {
+  render: () => <KnowledgeSourceSelectionComponent />,
+};