From 16ef7c301c74966907beb7d194f28b54b20167ac Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 3 Feb 2025 10:49:46 -0500
Subject: [PATCH 01/10] fix(Fieldset): rmv orientation and role

---
 .../src/components/fieldset/fieldset.test.tsx |  72 ++------
 .../fieldset/fieldset.test.tsx.snap           | 157 ++++++------------
 .../src/components/fieldset/fieldset.tsx      |  22 +--
 .../components/fieldset/legend.test.tsx.snap  |  24 +--
 .../react/src/components/fieldset/styled.ts   |   9 +-
 .../react/src/components/fieldset/types.ts    |   9 +-
 .../storybook/stories/fieldset.stories.tsx    |  28 +---
 7 files changed, 96 insertions(+), 225 deletions(-)

diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx b/packages/react/src/components/fieldset/fieldset.test.tsx
index 5c04f00ec4..a6283b07eb 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx
@@ -21,38 +21,28 @@ describe('Fieldset Component', () => {
 
         it('generates an ID if none is provided', () => {
             const tree = mountWithProviders(
-                <Fieldset>
+                <Fieldset legend={{ text: 'Legend Text' }}>
                     Test Content
                 </Fieldset>,
             );
 
             const fieldset = tree.find('fieldset');
-
-            expect(fieldset.props()).toHaveProperty('id');
-        });
-
-        it('does not render a legend when not provided', () => {
-            const tree = mountWithProviders(
-                <Fieldset>
-                    Test Content
-                </Fieldset>,
-            );
-
             const legend = tree.find(Legend);
 
-            expect(legend.exists()).toBeFalsy();
+            expect(fieldset.props()).toHaveProperty('id');
+            expect(legend.props()).toHaveProperty('id', `${fieldset.props().id}-legend`);
         });
 
-        it('renders a legend when props provided', () => {
+        it('renders a legend with provided text', () => {
             const tree = mountWithProviders(
-                <Fieldset legend={{ text: 'Legend text' }}>
+                <Fieldset legend={{ text: 'Legend Text' }}>
                     Test Content
                 </Fieldset>,
             );
 
             const legend = tree.find(Legend);
 
-            expect(legend.prop('children')).toBe('Legend text');
+            expect(legend.prop('children')).toBe('Legend Text');
         });
 
         it('updates legend text dynamically', () => {
@@ -71,7 +61,7 @@ describe('Fieldset Component', () => {
     describe('Styling', () => {
         it('matches default', () => {
             const tree = mountWithProviders(
-                <Fieldset>
+                <Fieldset legend={{ text: 'Default Legend' }}>
                     Test Content
                 </Fieldset>,
             );
@@ -81,7 +71,7 @@ describe('Fieldset Component', () => {
 
         it('matches with bold legend', () => {
             const tree = mountWithProviders(
-                <Fieldset legend={{ text: 'Text Legend', bold: true }}>
+                <Fieldset legend={{ text: 'Bold Legend', bold: true }}>
                     Test Content
                 </Fieldset>,
             );
@@ -91,45 +81,21 @@ describe('Fieldset Component', () => {
 
         it('matches with disabled legend', () => {
             const tree = mountWithProviders(
-                <Fieldset disabled legend={{ text: 'Text Legend' }}>
+                <Fieldset disabled legend={{ text: 'Disabled Legend' }}>
                     Test Content
                 </Fieldset>,
             );
 
             expect(tree).toMatchSnapshot();
         });
-
-        it('matches vertical orientation', () => {
-            const tree = mountWithProviders(
-                <Fieldset orientation='vertical'>
-                    Test Content
-                </Fieldset>,
-            );
-
-            const fieldset = tree.find('fieldset');
-
-            expect(tree).toMatchSnapshot();
-            expect(fieldset.props()).toHaveProperty('data-orientation', 'vertical');
-        });
-
-        it('matches horizontal orientation', () => {
-            const tree = mountWithProviders(
-                <Fieldset orientation='horizontal'>
-                    Test Content
-                </Fieldset>,
-            );
-
-            const fieldset = tree.find('fieldset');
-
-            expect(tree).toMatchSnapshot();
-            expect(fieldset.props()).toHaveProperty('data-orientation', 'horizontal');
-        });
     });
 
     describe('Accessibility', () => {
         it('applies aria-label when provided', () => {
             const tree = mountWithProviders(
-                <Fieldset aria-label="Test Fieldset">Test Content</Fieldset>,
+                <Fieldset aria-label="Test Fieldset" legend={{ text: 'Accessible Legend' }}>
+                    Test Content
+                </Fieldset>,
             );
 
             const fieldset = tree.find('fieldset');
@@ -139,24 +105,14 @@ describe('Fieldset Component', () => {
 
         it('applies aria-disabled when provided', () => {
             const tree = mountWithProviders(
-                <Fieldset disabled>Test Content</Fieldset>,
-            );
-
-            const fieldset = tree.find('fieldset');
-
-            expect(fieldset.props()).toHaveProperty('aria-disabled', true);
-        });
-
-        it('applies role to specified group role', () => {
-            const tree = mountWithProviders(
-                <Fieldset role='group'>
+                <Fieldset disabled legend={{ text: 'Disabled Legend' }}>
                     Test Content
                 </Fieldset>,
             );
 
             const fieldset = tree.find('fieldset');
 
-            expect(fieldset.props()).toHaveProperty('role', 'group');
+            expect(fieldset.props()).toHaveProperty('aria-disabled', true);
         });
     });
 });
diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx.snap b/packages/react/src/components/fieldset/fieldset.test.tsx.snap
index 8884241a8f..d4440d1718 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx.snap
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx.snap
@@ -1,92 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Fieldset Component Styling matches default 1`] = `
-.c0 {
-  border: 0;
-  border: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: var(--spacing-1x);
-  margin: 0;
-  min-inline-size: 0;
-  min-width: 0;
-  padding: 0;
-}
-
-.c0:disabled legend,
-.c0[aria-disabled='true'] legend {
-  color: #B7BBC2;
-}
-
-<ForwardRef>
-  <styled.fieldset
-    $orientation="vertical"
-    data-orientation="vertical"
-    data-testid="fieldset"
-    id="uuid1"
-  >
-    <fieldset
-      className="c0"
-      data-orientation="vertical"
-      data-testid="fieldset"
-      id="uuid1"
-    >
-      Test Content
-    </fieldset>
-  </styled.fieldset>
-</ForwardRef>
-`;
-
-exports[`Fieldset Component Styling matches horizontal orientation 1`] = `
-.c0 {
-  border: 0;
-  border: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: var(--spacing-1x);
-  margin: 0;
-  min-inline-size: 0;
-  min-width: 0;
-  padding: 0;
-}
-
-.c0:disabled legend,
-.c0[aria-disabled='true'] legend {
-  color: #B7BBC2;
+.c1 {
+  color: #1B1C1E;
+  font-size: 1.25rem;
+  font-weight: var(--font-normal);
+  margin: 0 0 var(--spacing-1x);
 }
 
-<ForwardRef
-  orientation="horizontal"
->
-  <styled.fieldset
-    $orientation="horizontal"
-    data-orientation="horizontal"
-    data-testid="fieldset"
-    id="uuid1"
-  >
-    <fieldset
-      className="c0"
-      data-orientation="horizontal"
-      data-testid="fieldset"
-      id="uuid1"
-    >
-      Test Content
-    </fieldset>
-  </styled.fieldset>
-</ForwardRef>
-`;
-
-exports[`Fieldset Component Styling matches vertical orientation 1`] = `
 .c0 {
   border: 0;
   border: none;
@@ -94,9 +15,6 @@ exports[`Fieldset Component Styling matches vertical orientation 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   gap: var(--spacing-1x);
   margin: 0;
   min-inline-size: 0;
@@ -110,20 +28,42 @@ exports[`Fieldset Component Styling matches vertical orientation 1`] = `
 }
 
 <ForwardRef
-  orientation="vertical"
+  legend={
+    {
+      "text": "Default Legend",
+    }
+  }
 >
   <styled.fieldset
-    $orientation="vertical"
-    data-orientation="vertical"
     data-testid="fieldset"
     id="uuid1"
+    legend={
+      {
+        "text": "Default Legend",
+      }
+    }
   >
     <fieldset
       className="c0"
-      data-orientation="vertical"
       data-testid="fieldset"
       id="uuid1"
     >
+      <Legend
+        id="uuid1-legend"
+      >
+        <styled.legend
+          $isMobile={false}
+          datatest-id="legend"
+          id="uuid1-legend"
+        >
+          <legend
+            className="c1"
+            id="uuid1-legend"
+          >
+            Default Legend
+          </legend>
+        </styled.legend>
+      </Legend>
       Test Content
     </fieldset>
   </styled.fieldset>
@@ -133,7 +73,7 @@ exports[`Fieldset Component Styling matches vertical orientation 1`] = `
 exports[`Fieldset Component Styling matches with bold legend 1`] = `
 .c1 {
   color: #1B1C1E;
-  font-size: 0.75rem;
+  font-size: 1.25rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -145,9 +85,6 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   gap: var(--spacing-1x);
   margin: 0;
   min-inline-size: 0;
@@ -164,19 +101,22 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
   legend={
     {
       "bold": true,
-      "text": "Text Legend",
+      "text": "Bold Legend",
     }
   }
 >
   <styled.fieldset
-    $orientation="vertical"
-    data-orientation="vertical"
     data-testid="fieldset"
     id="uuid1"
+    legend={
+      {
+        "bold": true,
+        "text": "Bold Legend",
+      }
+    }
   >
     <fieldset
       className="c0"
-      data-orientation="vertical"
       data-testid="fieldset"
       id="uuid1"
     >
@@ -194,7 +134,7 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
             className="c1"
             id="uuid1-legend"
           >
-            Text Legend
+            Bold Legend
           </legend>
         </styled.legend>
       </Legend>
@@ -207,7 +147,7 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
 exports[`Fieldset Component Styling matches with disabled legend 1`] = `
 .c1 {
   color: #1B1C1E;
-  font-size: 0.75rem;
+  font-size: 1.25rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -219,9 +159,6 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   gap: var(--spacing-1x);
   margin: 0;
   min-inline-size: 0;
@@ -238,22 +175,24 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
   disabled={true}
   legend={
     {
-      "text": "Text Legend",
+      "text": "Disabled Legend",
     }
   }
 >
   <styled.fieldset
-    $orientation="vertical"
     aria-disabled={true}
-    data-orientation="vertical"
     data-testid="fieldset"
     disabled={true}
     id="uuid1"
+    legend={
+      {
+        "text": "Disabled Legend",
+      }
+    }
   >
     <fieldset
       aria-disabled={true}
       className="c0"
-      data-orientation="vertical"
       data-testid="fieldset"
       disabled={true}
       id="uuid1"
@@ -270,7 +209,7 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
             className="c1"
             id="uuid1-legend"
           >
-            Text Legend
+            Disabled Legend
           </legend>
         </styled.legend>
       </Legend>
diff --git a/packages/react/src/components/fieldset/fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
index d8355ca62d..41282b21a6 100644
--- a/packages/react/src/components/fieldset/fieldset.tsx
+++ b/packages/react/src/components/fieldset/fieldset.tsx
@@ -7,33 +7,29 @@ import { FieldsetProps } from './types';
 export const Fieldset = forwardRef(({
     id: providedId,
     children,
-    orientation = 'vertical',
-    legend,
+    legend = { text: 'Default Legend' },
     disabled,
     ...props
 }: FieldsetProps, ref: Ref<HTMLFieldSetElement>): ReactElement => {
     const id = useId(providedId);
-    const { text, ...legendProps } = legend || {};
+    const { text, ...legendProps } = legend;
 
     return (
         <StyledFieldset
             data-testid="fieldset"
             id={id}
-            $orientation={orientation}
-            data-orientation={orientation}
             aria-disabled={disabled}
             disabled={disabled}
             ref={ref}
+            legend={legend}
             {...props /* eslint-disable-line react/jsx-props-no-spreading */}
         >
-            {legend && (
-                <Legend
-                    {...legendProps /* eslint-disable-line react/jsx-props-no-spreading */}
-                    id={`${id}-legend`}
-                >
-                    {text}
-                </Legend>
-            )}
+            <Legend
+                {...legendProps /* eslint-disable-line react/jsx-props-no-spreading */}
+                id={`${id}-legend`}
+            >
+                {text}
+            </Legend>
             {children}
         </StyledFieldset>
     );
diff --git a/packages/react/src/components/fieldset/legend.test.tsx.snap b/packages/react/src/components/fieldset/legend.test.tsx.snap
index 4d08175685..0898c5e99d 100644
--- a/packages/react/src/components/fieldset/legend.test.tsx.snap
+++ b/packages/react/src/components/fieldset/legend.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Legend Component Styling Device: desktop Size: large Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.875rem;
+  font-size: 1.5rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -30,7 +30,7 @@ exports[`Legend Component Styling Device: desktop Size: large Bold: false 1`] =
 exports[`Legend Component Styling Device: desktop Size: large Bold: true 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.875rem;
+  font-size: 1.5rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -57,7 +57,7 @@ exports[`Legend Component Styling Device: desktop Size: large Bold: true 1`] = `
 exports[`Legend Component Styling Device: desktop Size: medium Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.75rem;
+  font-size: 1.25rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -84,7 +84,7 @@ exports[`Legend Component Styling Device: desktop Size: medium Bold: false 1`] =
 exports[`Legend Component Styling Device: desktop Size: medium Bold: true 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.75rem;
+  font-size: 1.25rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -111,7 +111,7 @@ exports[`Legend Component Styling Device: desktop Size: medium Bold: true 1`] =
 exports[`Legend Component Styling Device: desktop Size: small Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.625rem;
+  font-size: 1rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -138,7 +138,7 @@ exports[`Legend Component Styling Device: desktop Size: small Bold: false 1`] =
 exports[`Legend Component Styling Device: desktop Size: small Bold: true 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.625rem;
+  font-size: 1rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -165,7 +165,7 @@ exports[`Legend Component Styling Device: desktop Size: small Bold: true 1`] = `
 exports[`Legend Component Styling Device: mobile Size: large Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 1rem;
+  font-size: 1.5rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -192,7 +192,7 @@ exports[`Legend Component Styling Device: mobile Size: large Bold: false 1`] = `
 exports[`Legend Component Styling Device: mobile Size: large Bold: true 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 1rem;
+  font-size: 1.5rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -219,7 +219,7 @@ exports[`Legend Component Styling Device: mobile Size: large Bold: true 1`] = `
 exports[`Legend Component Styling Device: mobile Size: medium Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.875rem;
+  font-size: 1.25rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -246,7 +246,7 @@ exports[`Legend Component Styling Device: mobile Size: medium Bold: false 1`] =
 exports[`Legend Component Styling Device: mobile Size: medium Bold: true 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.875rem;
+  font-size: 1.25rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -273,7 +273,7 @@ exports[`Legend Component Styling Device: mobile Size: medium Bold: true 1`] = `
 exports[`Legend Component Styling Device: mobile Size: small Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.75rem;
+  font-size: 1rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -300,7 +300,7 @@ exports[`Legend Component Styling Device: mobile Size: small Bold: false 1`] = `
 exports[`Legend Component Styling Device: mobile Size: small Bold: true 1`] = `
 .c0 {
   color: #1B1C1E;
-  font-size: 0.75rem;
+  font-size: 1rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
diff --git a/packages/react/src/components/fieldset/styled.ts b/packages/react/src/components/fieldset/styled.ts
index 8cedcf7b28..310401822c 100644
--- a/packages/react/src/components/fieldset/styled.ts
+++ b/packages/react/src/components/fieldset/styled.ts
@@ -2,8 +2,8 @@ import styled from 'styled-components';
 import { FieldsetProps, LegendProps } from './types';
 
 function getFontSize({ $isMobile, $size = 'medium' }: { $isMobile: boolean, $size?: LegendProps['size'] }): string {
-    const mobileSizes = { small: '0.75rem', medium: '0.875rem', large: '1rem' };
-    const desktopSizes = { small: '0.625rem', medium: '0.75rem', large: '0.875rem' };
+    const mobileSizes = { xxsmall: '0.75rem', xsmall: '0.875rem', small: '1rem', medium: '1.25rem', large: '1.5rem' };
+    const desktopSizes = { xxsmall: '0.75rem', xsmall: '0.875rem', small: '1rem', medium: '1.25rem', large: '1.5rem' };
     const sizes = $isMobile ? mobileSizes : desktopSizes;
     return sizes[$size] || sizes.medium;
 }
@@ -19,13 +19,10 @@ export const StyledLegend = styled.legend<{
     margin: 0 0 var(--spacing-1x);
 `;
 
-export const StyledFieldset = styled.fieldset<{
-    $orientation: FieldsetProps['orientation'],
-}>`
+export const StyledFieldset = styled.fieldset<FieldsetProps>`
     border: 0;
     border: none;
     display: flex;
-    flex-direction: ${({ $orientation }) => ($orientation === 'horizontal' ? 'row' : 'column')};
     gap: var(--spacing-1x);
     margin: 0;
     min-inline-size: 0;
diff --git a/packages/react/src/components/fieldset/types.ts b/packages/react/src/components/fieldset/types.ts
index 983d1a1620..4bf1156511 100644
--- a/packages/react/src/components/fieldset/types.ts
+++ b/packages/react/src/components/fieldset/types.ts
@@ -1,6 +1,6 @@
 import { FieldsetHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 
-export type LegendSize = 'small' | 'medium' | 'large';
+export type LegendSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
     className?: string;
@@ -8,14 +8,11 @@ export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
     bold?: boolean;
 }
 
-export type FieldsetOrientation = 'horizontal' | 'vertical';
-
 type BaseFieldsetProps = Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>,
-    'disabled' | 'id' | 'aria-disabled' | 'aria-label' | 'role'
+    'disabled' | 'id' | 'aria-disabled' | 'aria-label'
 >;
 
 export interface FieldsetProps extends BaseFieldsetProps {
-    legend?: Omit<LegendProps, 'children'> & { text: string };
-    orientation?: FieldsetOrientation;
+    legend: Omit<LegendProps, 'children'> & { text: string };
     children: ReactNode;
 }
diff --git a/packages/storybook/stories/fieldset.stories.tsx b/packages/storybook/stories/fieldset.stories.tsx
index 32ed8f4b69..d901a47e75 100644
--- a/packages/storybook/stories/fieldset.stories.tsx
+++ b/packages/storybook/stories/fieldset.stories.tsx
@@ -13,11 +13,11 @@ export default fieldsetMeta;
 type Story = StoryObj<typeof Fieldset>;
 
 const withCheckboxes = (
-    <>
+    <div style={{ display: 'flex', flexDirection: 'column' }}> {/*  replace with grid */}
         <Checkbox label='Checkbox 1!' />
         <Checkbox label='Checkbox 2!' />
         <Checkbox label='Checkbox 3!' />
-    </>
+    </div>
 );
 
 const withRadioButtons = (
@@ -46,43 +46,29 @@ const withRadioCards = (
 
 export const Default: Story = {
     args: {
-        children: withCheckboxes,
-    },
-};
-
-export const Legend: Story = {
-    args: {
-        legend: { text: 'This is a legend!', bold: true, size: 'large' },
-        children: withCheckboxes,
+        legend: { text: 'This is a legend!', size: 'xxsmall', },
+        children: withTextInputs,
     },
 };
 
 export const Disabled: Story = {
     args: {
         disabled: true,
-        legend: { text: 'This is disabled!', size: 'large' },
+        legend: { text: 'This is disabled!', size: 'xxsmall' },
         children: withCheckboxes,
     },
 };
 
-export const Horizontal: Story = {
-    args: {
-        orientation: 'horizontal',
-        legend: { text: 'This is horizontal with text inputs!', size: 'large' },
-        children: withTextInputs,
-    },
-};
-
 export const WithRadioButtons: Story = {
     args: {
-        legend: { text: 'With Radio Buttons!', size: 'large' },
+        legend: { text: 'With Radio Buttons!', size: 'xxsmall' },
         children: withRadioButtons,
     },
 };
 
 export const WithRadioCards: Story = {
     args: {
-        legend: { text: 'With Radio Buttons!', size: 'large' },
+        legend: { text: 'With Radio Buttons!', size: 'xxsmall' },
         children: withRadioCards,
     },
 };

From 702c8baf3b6386f1afaaab2f79c65a6a81c546c1 Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 3 Feb 2025 11:10:11 -0500
Subject: [PATCH 02/10] fix(Fieldset): fix lint

---
 packages/react/src/components/fieldset/styled.ts | 16 ++++++++++++++--
 packages/storybook/stories/fieldset.stories.tsx  |  5 +++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/fieldset/styled.ts b/packages/react/src/components/fieldset/styled.ts
index 310401822c..3820b5f337 100644
--- a/packages/react/src/components/fieldset/styled.ts
+++ b/packages/react/src/components/fieldset/styled.ts
@@ -2,8 +2,20 @@ import styled from 'styled-components';
 import { FieldsetProps, LegendProps } from './types';
 
 function getFontSize({ $isMobile, $size = 'medium' }: { $isMobile: boolean, $size?: LegendProps['size'] }): string {
-    const mobileSizes = { xxsmall: '0.75rem', xsmall: '0.875rem', small: '1rem', medium: '1.25rem', large: '1.5rem' };
-    const desktopSizes = { xxsmall: '0.75rem', xsmall: '0.875rem', small: '1rem', medium: '1.25rem', large: '1.5rem' };
+    const mobileSizes = { 
+        xxsmall: '0.75rem',
+        xsmall: '0.875rem',
+        small: '1rem',
+        medium: '1.25rem',
+        large: '1.5rem'
+    };
+    const desktopSizes = { 
+        xxsmall: '0.75rem',
+        xsmall: '0.875rem',
+        small: '1rem',
+        medium: '1.25rem',
+        large: '1.5rem'
+    };
     const sizes = $isMobile ? mobileSizes : desktopSizes;
     return sizes[$size] || sizes.medium;
 }
diff --git a/packages/storybook/stories/fieldset.stories.tsx b/packages/storybook/stories/fieldset.stories.tsx
index d901a47e75..cc7d3313ef 100644
--- a/packages/storybook/stories/fieldset.stories.tsx
+++ b/packages/storybook/stories/fieldset.stories.tsx
@@ -13,7 +13,8 @@ export default fieldsetMeta;
 type Story = StoryObj<typeof Fieldset>;
 
 const withCheckboxes = (
-    <div style={{ display: 'flex', flexDirection: 'column' }}> {/*  replace with grid */}
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {/*  replace inline style with grid */}
         <Checkbox label='Checkbox 1!' />
         <Checkbox label='Checkbox 2!' />
         <Checkbox label='Checkbox 3!' />
@@ -46,7 +47,7 @@ const withRadioCards = (
 
 export const Default: Story = {
     args: {
-        legend: { text: 'This is a legend!', size: 'xxsmall', },
+        legend: { text: 'This is a legend!', size: 'xxsmall' },
         children: withTextInputs,
     },
 };

From 3c5cfabc62959e74d5d511e11ba49e2ef939cb11 Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 3 Feb 2025 11:18:49 -0500
Subject: [PATCH 03/10] fix(Fieldset): fix lint

---
 packages/react/src/components/fieldset/styled.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/fieldset/styled.ts b/packages/react/src/components/fieldset/styled.ts
index 3820b5f337..cb0cf338a3 100644
--- a/packages/react/src/components/fieldset/styled.ts
+++ b/packages/react/src/components/fieldset/styled.ts
@@ -2,19 +2,19 @@ import styled from 'styled-components';
 import { FieldsetProps, LegendProps } from './types';
 
 function getFontSize({ $isMobile, $size = 'medium' }: { $isMobile: boolean, $size?: LegendProps['size'] }): string {
-    const mobileSizes = { 
+    const mobileSizes = {
         xxsmall: '0.75rem',
         xsmall: '0.875rem',
         small: '1rem',
         medium: '1.25rem',
-        large: '1.5rem'
+        large: '1.5rem',
     };
-    const desktopSizes = { 
+    const desktopSizes = {
         xxsmall: '0.75rem',
         xsmall: '0.875rem',
         small: '1rem',
         medium: '1.25rem',
-        large: '1.5rem'
+        large: '1.5rem',
     };
     const sizes = $isMobile ? mobileSizes : desktopSizes;
     return sizes[$size] || sizes.medium;

From dbb1c5e3185ba612214313bfdd961f0c7bea6158 Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Fri, 7 Feb 2025 13:29:52 -0500
Subject: [PATCH 04/10] fix(Fieldset): rmv default value legend and text tokens

---
 packages/react/src/components/fieldset/fieldset.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/fieldset/fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
index 41282b21a6..f5ec027751 100644
--- a/packages/react/src/components/fieldset/fieldset.tsx
+++ b/packages/react/src/components/fieldset/fieldset.tsx
@@ -7,7 +7,7 @@ import { FieldsetProps } from './types';
 export const Fieldset = forwardRef(({
     id: providedId,
     children,
-    legend = { text: 'Default Legend' },
+    legend,
     disabled,
     ...props
 }: FieldsetProps, ref: Ref<HTMLFieldSetElement>): ReactElement => {

From 45dfb429c4719be7e92641f8632b98dd02f95c7e Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 3 Feb 2025 10:49:46 -0500
Subject: [PATCH 05/10] fix(Fieldset): rmv orientation and role

---
 .../react/src/themes/build-theme.test.ts.snap |  30 ++++-
 .../src/themes/tokens/alias/text-tokens.ts    | 122 ++++++++++++------
 2 files changed, 104 insertions(+), 48 deletions(-)

diff --git a/packages/react/src/themes/build-theme.test.ts.snap b/packages/react/src/themes/build-theme.test.ts.snap
index 4750fbf87f..90bb9a4704 100644
--- a/packages/react/src/themes/build-theme.test.ts.snap
+++ b/packages/react/src/themes/build-theme.test.ts.snap
@@ -178,20 +178,36 @@ exports[`buildTheme should build the defaultAliasTokens theme with the customiza
   "text-label-medium-line-height": "1.5rem",
   "text-label-small-font-size": "0.75rem",
   "text-label-small-line-height": "1.25rem",
-  "text-label-transform": "none",
-  "text-legend-font-family": ""Open Sans", sans-serif",
-  "text-legend-font-weight": "600",
+  "text-label-small-transform": "none",
+  "text-legend-large-font-family": ""Open Sans", sans-serif",
   "text-legend-large-font-size": "1.5rem",
+  "text-legend-large-font-weight": "600",
+  "text-legend-large-letter-spacing": "0.2px",
   "text-legend-large-line-height": "2rem",
-  "text-legend-letter-spacing": "0.2px",
+  "text-legend-large-transform": "none",
+  "text-legend-medium-font-family": ""Open Sans", sans-serif",
   "text-legend-medium-font-size": "1.25rem",
+  "text-legend-medium-font-weight": "400",
+  "text-legend-medium-letter-spacing": "0.2px",
   "text-legend-medium-line-height": "1.75rem",
+  "text-legend-medium-transform": "none",
+  "text-legend-small-font-family": ""Open Sans", sans-serif",
   "text-legend-small-font-size": "1rem",
+  "text-legend-small-font-weight": "600",
+  "text-legend-small-letter-spacing": "0.2px",
   "text-legend-small-line-height": "1.5rem",
-  "text-legend-transform": "none",
+  "text-legend-small-transform": "none",
+  "text-legend-xsmall-font-family": ""Open Sans", sans-serif",
   "text-legend-xsmall-font-size": "0.875rem",
-  "text-legend-xsmall-line-height": "1.5rem",
+  "text-legend-xsmall-font-weight": "600",
+  "text-legend-xsmall-letter-spacing": "0.2px",
+  "text-legend-xsmall-line-height": "1.25rem",
+  "text-legend-xsmall-transform": "none",
+  "text-legend-xxsmall-font-family": ""Open Sans", sans-serif",
   "text-legend-xxsmall-font-size": "0.75rem",
-  "text-legend-xxsmall-line-height": "1.25rem",
+  "text-legend-xxsmall-font-weight": "400",
+  "text-legend-xxsmall-letter-spacing": "0.2px",
+  "text-legend-xxsmall-line-height": "1rem",
+  "text-legend-xxsmall-transform": "none",
 }
 `;
diff --git a/packages/react/src/themes/tokens/alias/text-tokens.ts b/packages/react/src/themes/tokens/alias/text-tokens.ts
index f7983e5192..21b86e76a1 100644
--- a/packages/react/src/themes/tokens/alias/text-tokens.ts
+++ b/packages/react/src/themes/tokens/alias/text-tokens.ts
@@ -52,26 +52,46 @@ export type TextAliasToken =
     | 'text-label-small-line-height'
     | 'text-label-medium-font-size'
     | 'text-label-medium-line-height'
-    | 'text-legend-font-family'
-    | 'text-legend-font-weight'
-    | 'text-legend-letter-spacing'
-    | 'text-legend-transform'
-    | 'text-legend-xxsmall-font-size'
-    | 'text-legend-xxsmall-line-height'
-    | 'text-legend-xsmall-font-size'
-    | 'text-legend-xsmall-line-height'
-    | 'text-legend-small-font-size'
-    | 'text-legend-small-line-height'
-    | 'text-legend-medium-font-size'
-    | 'text-legend-medium-line-height'
+    | 'text-label-medium-letter-spacing'
+    | 'text-label-medium-transform'
+    | 'text-label-small-font-family'
+    | 'text-label-small-font-weight'
+    | 'text-label-small-font-size'
+    | 'text-label-small-line-height'
+    | 'text-label-small-letter-spacing'
+    | 'text-label-small-transform'
+    | 'text-legend-large-font-family'
+    | 'text-legend-large-font-weight'
     | 'text-legend-large-font-size'
     | 'text-legend-large-line-height'
-    | 'text-caption-font-family'
-    | 'text-caption-font-weight'
-    | 'text-caption-letter-spacing'
-    | 'text-caption-transform'
-    | 'text-caption-small-font-size'
-    | 'text-caption-small-line-height'
+    | 'text-legend-large-letter-spacing'
+    | 'text-legend-large-transform'
+    | 'text-legend-medium-font-family'
+    | 'text-legend-medium-font-weight'
+    | 'text-legend-medium-font-size'
+    | 'text-legend-medium-line-height'
+    | 'text-legend-medium-letter-spacing'
+    | 'text-legend-medium-transform'
+    | 'text-legend-small-font-family'
+    | 'text-legend-small-font-weight'
+    | 'text-legend-small-font-size'
+    | 'text-legend-small-line-height'
+    | 'text-legend-small-letter-spacing'
+    | 'text-legend-small-transform'
+    | 'text-legend-xsmall-font-family'
+    | 'text-legend-xsmall-font-weight'
+    | 'text-legend-xsmall-font-size'
+    | 'text-legend-xsmall-line-height'
+    | 'text-legend-xsmall-letter-spacing'
+    | 'text-legend-xsmall-transform'
+    | 'text-legend-xxsmall-font-family'
+    | 'text-legend-xxsmall-font-weight'
+    | 'text-legend-xxsmall-font-size'
+    | 'text-legend-xxsmall-line-height'
+    | 'text-legend-xxsmall-letter-spacing'
+    | 'text-legend-xxsmall-transform'
+    | 'text-caption-medium-font-family'
+    | 'text-caption-medium-font-weight'
     | 'text-caption-medium-font-size'
     | 'text-caption-medium-line-height'
     | 'text-caption-large-font-size'
@@ -128,29 +148,49 @@ export const defaultTextAliasTokens: AliasTokenMap<TextAliasToken> = {
     'text-label-small-font-size': 'text-body-small-font-size',
     'text-label-small-line-height': 'line-height-500',
     'text-label-medium-font-size': 'text-body-medium-font-size',
-    'text-label-medium-line-height': 'line-height-600',
-    'text-legend-font-family': 'text-heading-font-family',
-    'text-legend-font-weight': 'text-heading-font-weight',
-    'text-legend-letter-spacing': 'text-heading-letter-spacing',
-    'text-legend-transform': 'text-heading-transform',
-    'text-legend-xxsmall-font-size': 'text-body-small-font-size',
-    'text-legend-xxsmall-line-height': 'line-height-500',
-    'text-legend-xsmall-font-size': 'text-body-medium-font-size',
-    'text-legend-xsmall-line-height': 'line-height-600',
-    'text-legend-small-font-size': 'text-heading-small-font-size',
-    'text-legend-small-line-height': 'text-heading-small-line-height',
-    'text-legend-medium-font-size': 'text-heading-medium-font-size',
-    'text-legend-medium-line-height': 'text-heading-medium-line-height',
+    'text-label-medium-line-height': 'text-body-medium-line-height',
+    'text-label-medium-letter-spacing': 'text-body-medium-letter-spacing',
+    'text-label-medium-transform': 'text-body-medium-transform',
+    'text-label-small-font-family': 'text-body-small-font-family',
+    'text-label-small-font-weight': 'text-body-small-font-weight',
+    'text-label-small-font-size': 'text-body-small-font-size',
+    'text-label-small-line-height': 'text-body-small-line-height',
+    'text-label-small-letter-spacing': 'text-body-small-letter-spacing',
+    'text-label-small-transform': 'text-body-small-transform',
+    'text-legend-large-font-family': 'text-heading-large-font-family',
+    'text-legend-large-font-weight': 'text-heading-large-font-weight',
     'text-legend-large-font-size': 'text-heading-large-font-size',
     'text-legend-large-line-height': 'text-heading-large-line-height',
-    'text-caption-font-family': 'text-heading-font-family',
-    'text-caption-font-weight': 'text-heading-font-weight',
-    'text-caption-letter-spacing': 'text-heading-letter-spacing',
-    'text-caption-transform': 'text-heading-transform',
-    'text-caption-small-font-size': 'text-heading-small-font-size',
-    'text-caption-small-line-height': 'text-heading-small-line-height',
-    'text-caption-medium-font-size': 'text-heading-medium-font-size',
-    'text-caption-medium-line-height': 'text-heading-medium-line-height',
-    'text-caption-large-font-size': 'text-heading-large-font-size',
-    'text-caption-large-line-height': 'text-heading-large-line-height',
+    'text-legend-large-letter-spacing': 'text-heading-large-letter-spacing',
+    'text-legend-large-transform': 'text-heading-large-transform',
+    'text-legend-medium-font-family': 'text-body-small-font-family',
+    'text-legend-medium-font-weight': 'text-body-small-font-weight',
+    'text-legend-medium-font-size': 'text-heading-medium-font-size',
+    'text-legend-medium-line-height': 'text-heading-medium-line-height',
+    'text-legend-medium-letter-spacing': 'text-heading-medium-letter-spacing',
+    'text-legend-medium-transform': 'text-heading-medium-transform',
+    'text-legend-small-font-family': 'text-heading-small-font-family',
+    'text-legend-small-font-weight': 'text-heading-small-font-weight',
+    'text-legend-small-font-size': 'text-heading-small-font-size',
+    'text-legend-small-line-height': 'text-heading-small-line-height',
+    'text-legend-small-letter-spacing': 'text-heading-small-letter-spacing',
+    'text-legend-small-transform': 'text-heading-small-transform',
+    'text-legend-xsmall-font-family': 'text-heading-xsmall-font-family',
+    'text-legend-xsmall-font-weight': 'text-heading-xsmall-font-weight',
+    'text-legend-xsmall-font-size': 'text-heading-xsmall-font-size',
+    'text-legend-xsmall-line-height': 'text-heading-xsmall-line-height',
+    'text-legend-xsmall-letter-spacing': 'text-heading-xsmall-letter-spacing',
+    'text-legend-xsmall-transform': 'text-heading-xsmall-transform',
+    'text-legend-xxsmall-font-family': 'text-body-small-font-family',
+    'text-legend-xxsmall-font-weight': 'text-body-small-font-weight',
+    'text-legend-xxsmall-font-size': 'font-size-300',
+    'text-legend-xxsmall-line-height': 'line-height-400',
+    'text-legend-xxsmall-letter-spacing': 'letter-spacing-normal',
+    'text-legend-xxsmall-transform': 'font-transform-none',
+    'text-caption-medium-font-family': 'text-body-medium-font-family',
+    'text-caption-medium-font-weight': 'text-body-medium-font-weight',
+    'text-caption-medium-font-size': 'text-body-medium-font-size',
+    'text-caption-medium-line-height': 'text-body-medium-line-height',
+    'text-caption-medium-letter-spacing': 'text-body-medium-letter-spacing',
+    'text-caption-medium-transform': 'text-body-medium-transform',
 };

From 8fd6e8a2d1928695f6f499e58e2a5a806841399a Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Fri, 7 Feb 2025 13:29:52 -0500
Subject: [PATCH 06/10] fix(SectionalBanner): fix conflict

---
 .../react/src/themes/build-theme.test.ts.snap | 24 ----------
 .../src/themes/tokens/alias/text-tokens.ts    | 48 -------------------
 2 files changed, 72 deletions(-)

diff --git a/packages/react/src/themes/build-theme.test.ts.snap b/packages/react/src/themes/build-theme.test.ts.snap
index 90bb9a4704..51fcee150c 100644
--- a/packages/react/src/themes/build-theme.test.ts.snap
+++ b/packages/react/src/themes/build-theme.test.ts.snap
@@ -179,35 +179,11 @@ exports[`buildTheme should build the defaultAliasTokens theme with the customiza
   "text-label-small-font-size": "0.75rem",
   "text-label-small-line-height": "1.25rem",
   "text-label-small-transform": "none",
-  "text-legend-large-font-family": ""Open Sans", sans-serif",
-  "text-legend-large-font-size": "1.5rem",
-  "text-legend-large-font-weight": "600",
-  "text-legend-large-letter-spacing": "0.2px",
-  "text-legend-large-line-height": "2rem",
-  "text-legend-large-transform": "none",
-  "text-legend-medium-font-family": ""Open Sans", sans-serif",
-  "text-legend-medium-font-size": "1.25rem",
-  "text-legend-medium-font-weight": "400",
-  "text-legend-medium-letter-spacing": "0.2px",
-  "text-legend-medium-line-height": "1.75rem",
-  "text-legend-medium-transform": "none",
   "text-legend-small-font-family": ""Open Sans", sans-serif",
   "text-legend-small-font-size": "1rem",
   "text-legend-small-font-weight": "600",
   "text-legend-small-letter-spacing": "0.2px",
   "text-legend-small-line-height": "1.5rem",
   "text-legend-small-transform": "none",
-  "text-legend-xsmall-font-family": ""Open Sans", sans-serif",
-  "text-legend-xsmall-font-size": "0.875rem",
-  "text-legend-xsmall-font-weight": "600",
-  "text-legend-xsmall-letter-spacing": "0.2px",
-  "text-legend-xsmall-line-height": "1.25rem",
-  "text-legend-xsmall-transform": "none",
-  "text-legend-xxsmall-font-family": ""Open Sans", sans-serif",
-  "text-legend-xxsmall-font-size": "0.75rem",
-  "text-legend-xxsmall-font-weight": "400",
-  "text-legend-xxsmall-letter-spacing": "0.2px",
-  "text-legend-xxsmall-line-height": "1rem",
-  "text-legend-xxsmall-transform": "none",
 }
 `;
diff --git a/packages/react/src/themes/tokens/alias/text-tokens.ts b/packages/react/src/themes/tokens/alias/text-tokens.ts
index 21b86e76a1..046b1e66ee 100644
--- a/packages/react/src/themes/tokens/alias/text-tokens.ts
+++ b/packages/react/src/themes/tokens/alias/text-tokens.ts
@@ -60,36 +60,12 @@ export type TextAliasToken =
     | 'text-label-small-line-height'
     | 'text-label-small-letter-spacing'
     | 'text-label-small-transform'
-    | 'text-legend-large-font-family'
-    | 'text-legend-large-font-weight'
-    | 'text-legend-large-font-size'
-    | 'text-legend-large-line-height'
-    | 'text-legend-large-letter-spacing'
-    | 'text-legend-large-transform'
-    | 'text-legend-medium-font-family'
-    | 'text-legend-medium-font-weight'
-    | 'text-legend-medium-font-size'
-    | 'text-legend-medium-line-height'
-    | 'text-legend-medium-letter-spacing'
-    | 'text-legend-medium-transform'
     | 'text-legend-small-font-family'
     | 'text-legend-small-font-weight'
     | 'text-legend-small-font-size'
     | 'text-legend-small-line-height'
     | 'text-legend-small-letter-spacing'
     | 'text-legend-small-transform'
-    | 'text-legend-xsmall-font-family'
-    | 'text-legend-xsmall-font-weight'
-    | 'text-legend-xsmall-font-size'
-    | 'text-legend-xsmall-line-height'
-    | 'text-legend-xsmall-letter-spacing'
-    | 'text-legend-xsmall-transform'
-    | 'text-legend-xxsmall-font-family'
-    | 'text-legend-xxsmall-font-weight'
-    | 'text-legend-xxsmall-font-size'
-    | 'text-legend-xxsmall-line-height'
-    | 'text-legend-xxsmall-letter-spacing'
-    | 'text-legend-xxsmall-transform'
     | 'text-caption-medium-font-family'
     | 'text-caption-medium-font-weight'
     | 'text-caption-medium-font-size'
@@ -157,36 +133,12 @@ export const defaultTextAliasTokens: AliasTokenMap<TextAliasToken> = {
     'text-label-small-line-height': 'text-body-small-line-height',
     'text-label-small-letter-spacing': 'text-body-small-letter-spacing',
     'text-label-small-transform': 'text-body-small-transform',
-    'text-legend-large-font-family': 'text-heading-large-font-family',
-    'text-legend-large-font-weight': 'text-heading-large-font-weight',
-    'text-legend-large-font-size': 'text-heading-large-font-size',
-    'text-legend-large-line-height': 'text-heading-large-line-height',
-    'text-legend-large-letter-spacing': 'text-heading-large-letter-spacing',
-    'text-legend-large-transform': 'text-heading-large-transform',
-    'text-legend-medium-font-family': 'text-body-small-font-family',
-    'text-legend-medium-font-weight': 'text-body-small-font-weight',
-    'text-legend-medium-font-size': 'text-heading-medium-font-size',
-    'text-legend-medium-line-height': 'text-heading-medium-line-height',
-    'text-legend-medium-letter-spacing': 'text-heading-medium-letter-spacing',
-    'text-legend-medium-transform': 'text-heading-medium-transform',
     'text-legend-small-font-family': 'text-heading-small-font-family',
     'text-legend-small-font-weight': 'text-heading-small-font-weight',
     'text-legend-small-font-size': 'text-heading-small-font-size',
     'text-legend-small-line-height': 'text-heading-small-line-height',
     'text-legend-small-letter-spacing': 'text-heading-small-letter-spacing',
     'text-legend-small-transform': 'text-heading-small-transform',
-    'text-legend-xsmall-font-family': 'text-heading-xsmall-font-family',
-    'text-legend-xsmall-font-weight': 'text-heading-xsmall-font-weight',
-    'text-legend-xsmall-font-size': 'text-heading-xsmall-font-size',
-    'text-legend-xsmall-line-height': 'text-heading-xsmall-line-height',
-    'text-legend-xsmall-letter-spacing': 'text-heading-xsmall-letter-spacing',
-    'text-legend-xsmall-transform': 'text-heading-xsmall-transform',
-    'text-legend-xxsmall-font-family': 'text-body-small-font-family',
-    'text-legend-xxsmall-font-weight': 'text-body-small-font-weight',
-    'text-legend-xxsmall-font-size': 'font-size-300',
-    'text-legend-xxsmall-line-height': 'line-height-400',
-    'text-legend-xxsmall-letter-spacing': 'letter-spacing-normal',
-    'text-legend-xxsmall-transform': 'font-transform-none',
     'text-caption-medium-font-family': 'text-body-medium-font-family',
     'text-caption-medium-font-weight': 'text-body-medium-font-weight',
     'text-caption-medium-font-size': 'text-body-medium-font-size',

From f8466a95b6859b1a0e0422250bdb25b8667ca3ac Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Fri, 14 Feb 2025 09:41:55 -0500
Subject: [PATCH 07/10] fix(Fieldset): fix conflict

---
 .../react/src/themes/build-theme.test.ts.snap | 18 +++--
 .../src/themes/tokens/alias/text-tokens.ts    | 74 ++++++++++---------
 2 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/packages/react/src/themes/build-theme.test.ts.snap b/packages/react/src/themes/build-theme.test.ts.snap
index 51fcee150c..4750fbf87f 100644
--- a/packages/react/src/themes/build-theme.test.ts.snap
+++ b/packages/react/src/themes/build-theme.test.ts.snap
@@ -178,12 +178,20 @@ exports[`buildTheme should build the defaultAliasTokens theme with the customiza
   "text-label-medium-line-height": "1.5rem",
   "text-label-small-font-size": "0.75rem",
   "text-label-small-line-height": "1.25rem",
-  "text-label-small-transform": "none",
-  "text-legend-small-font-family": ""Open Sans", sans-serif",
+  "text-label-transform": "none",
+  "text-legend-font-family": ""Open Sans", sans-serif",
+  "text-legend-font-weight": "600",
+  "text-legend-large-font-size": "1.5rem",
+  "text-legend-large-line-height": "2rem",
+  "text-legend-letter-spacing": "0.2px",
+  "text-legend-medium-font-size": "1.25rem",
+  "text-legend-medium-line-height": "1.75rem",
   "text-legend-small-font-size": "1rem",
-  "text-legend-small-font-weight": "600",
-  "text-legend-small-letter-spacing": "0.2px",
   "text-legend-small-line-height": "1.5rem",
-  "text-legend-small-transform": "none",
+  "text-legend-transform": "none",
+  "text-legend-xsmall-font-size": "0.875rem",
+  "text-legend-xsmall-line-height": "1.5rem",
+  "text-legend-xxsmall-font-size": "0.75rem",
+  "text-legend-xxsmall-line-height": "1.25rem",
 }
 `;
diff --git a/packages/react/src/themes/tokens/alias/text-tokens.ts b/packages/react/src/themes/tokens/alias/text-tokens.ts
index 046b1e66ee..f7983e5192 100644
--- a/packages/react/src/themes/tokens/alias/text-tokens.ts
+++ b/packages/react/src/themes/tokens/alias/text-tokens.ts
@@ -52,22 +52,26 @@ export type TextAliasToken =
     | 'text-label-small-line-height'
     | 'text-label-medium-font-size'
     | 'text-label-medium-line-height'
-    | 'text-label-medium-letter-spacing'
-    | 'text-label-medium-transform'
-    | 'text-label-small-font-family'
-    | 'text-label-small-font-weight'
-    | 'text-label-small-font-size'
-    | 'text-label-small-line-height'
-    | 'text-label-small-letter-spacing'
-    | 'text-label-small-transform'
-    | 'text-legend-small-font-family'
-    | 'text-legend-small-font-weight'
+    | 'text-legend-font-family'
+    | 'text-legend-font-weight'
+    | 'text-legend-letter-spacing'
+    | 'text-legend-transform'
+    | 'text-legend-xxsmall-font-size'
+    | 'text-legend-xxsmall-line-height'
+    | 'text-legend-xsmall-font-size'
+    | 'text-legend-xsmall-line-height'
     | 'text-legend-small-font-size'
     | 'text-legend-small-line-height'
-    | 'text-legend-small-letter-spacing'
-    | 'text-legend-small-transform'
-    | 'text-caption-medium-font-family'
-    | 'text-caption-medium-font-weight'
+    | 'text-legend-medium-font-size'
+    | 'text-legend-medium-line-height'
+    | 'text-legend-large-font-size'
+    | 'text-legend-large-line-height'
+    | 'text-caption-font-family'
+    | 'text-caption-font-weight'
+    | 'text-caption-letter-spacing'
+    | 'text-caption-transform'
+    | 'text-caption-small-font-size'
+    | 'text-caption-small-line-height'
     | 'text-caption-medium-font-size'
     | 'text-caption-medium-line-height'
     | 'text-caption-large-font-size'
@@ -124,25 +128,29 @@ export const defaultTextAliasTokens: AliasTokenMap<TextAliasToken> = {
     'text-label-small-font-size': 'text-body-small-font-size',
     'text-label-small-line-height': 'line-height-500',
     'text-label-medium-font-size': 'text-body-medium-font-size',
-    'text-label-medium-line-height': 'text-body-medium-line-height',
-    'text-label-medium-letter-spacing': 'text-body-medium-letter-spacing',
-    'text-label-medium-transform': 'text-body-medium-transform',
-    'text-label-small-font-family': 'text-body-small-font-family',
-    'text-label-small-font-weight': 'text-body-small-font-weight',
-    'text-label-small-font-size': 'text-body-small-font-size',
-    'text-label-small-line-height': 'text-body-small-line-height',
-    'text-label-small-letter-spacing': 'text-body-small-letter-spacing',
-    'text-label-small-transform': 'text-body-small-transform',
-    'text-legend-small-font-family': 'text-heading-small-font-family',
-    'text-legend-small-font-weight': 'text-heading-small-font-weight',
+    'text-label-medium-line-height': 'line-height-600',
+    'text-legend-font-family': 'text-heading-font-family',
+    'text-legend-font-weight': 'text-heading-font-weight',
+    'text-legend-letter-spacing': 'text-heading-letter-spacing',
+    'text-legend-transform': 'text-heading-transform',
+    'text-legend-xxsmall-font-size': 'text-body-small-font-size',
+    'text-legend-xxsmall-line-height': 'line-height-500',
+    'text-legend-xsmall-font-size': 'text-body-medium-font-size',
+    'text-legend-xsmall-line-height': 'line-height-600',
     'text-legend-small-font-size': 'text-heading-small-font-size',
     'text-legend-small-line-height': 'text-heading-small-line-height',
-    'text-legend-small-letter-spacing': 'text-heading-small-letter-spacing',
-    'text-legend-small-transform': 'text-heading-small-transform',
-    'text-caption-medium-font-family': 'text-body-medium-font-family',
-    'text-caption-medium-font-weight': 'text-body-medium-font-weight',
-    'text-caption-medium-font-size': 'text-body-medium-font-size',
-    'text-caption-medium-line-height': 'text-body-medium-line-height',
-    'text-caption-medium-letter-spacing': 'text-body-medium-letter-spacing',
-    'text-caption-medium-transform': 'text-body-medium-transform',
+    'text-legend-medium-font-size': 'text-heading-medium-font-size',
+    'text-legend-medium-line-height': 'text-heading-medium-line-height',
+    'text-legend-large-font-size': 'text-heading-large-font-size',
+    'text-legend-large-line-height': 'text-heading-large-line-height',
+    'text-caption-font-family': 'text-heading-font-family',
+    'text-caption-font-weight': 'text-heading-font-weight',
+    'text-caption-letter-spacing': 'text-heading-letter-spacing',
+    'text-caption-transform': 'text-heading-transform',
+    'text-caption-small-font-size': 'text-heading-small-font-size',
+    'text-caption-small-line-height': 'text-heading-small-line-height',
+    'text-caption-medium-font-size': 'text-heading-medium-font-size',
+    'text-caption-medium-line-height': 'text-heading-medium-line-height',
+    'text-caption-large-font-size': 'text-heading-large-font-size',
+    'text-caption-large-line-height': 'text-heading-large-line-height',
 };

From 0a8642b376cad37f85bb9cf9e654432ff1273990 Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 17 Feb 2025 09:51:19 -0500
Subject: [PATCH 08/10] fix(Fieldset): simplify legend to support string value

---
 .../src/components/fieldset/fieldset.test.tsx |  74 ++++++
 .../fieldset/fieldset.test.tsx.snap           |  87 +++++--
 .../src/components/fieldset/fieldset.tsx      |   9 +-
 .../src/components/fieldset/legend.test.tsx   |   2 +-
 .../components/fieldset/legend.test.tsx.snap  | 220 +++++++++++++++++-
 .../react/src/components/fieldset/legend.tsx  |   3 -
 .../react/src/components/fieldset/styled.ts   |  15 +-
 .../react/src/components/fieldset/types.ts    |   2 +-
 .../storybook/stories/fieldset.stories.tsx    |   2 +-
 9 files changed, 361 insertions(+), 53 deletions(-)

diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx b/packages/react/src/components/fieldset/fieldset.test.tsx
index a6283b07eb..c4fabaad41 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx
@@ -56,6 +56,70 @@ describe('Fieldset Component', () => {
 
             expect(tree.find(Legend).text()).toContain('Updated Legend Text');
         });
+
+        it('handles string legend prop', () => {
+            const tree = mountWithProviders(
+                <Fieldset legend="Simple Legend Text">
+                    Test Content
+                </Fieldset>,
+            );
+
+            const legend = tree.find(Legend);
+            expect(legend.prop('children')).toBe('Simple Legend Text');
+        });
+
+        it('handles object legend prop with additional properties', () => {
+            const tree = mountWithProviders(
+                <Fieldset legend={{ 
+                    text: 'Complex Legend Text',
+                    size: 'large',
+                    bold: true 
+                }}>
+                    Test Content
+                </Fieldset>,
+            );
+
+            const legend = tree.find(Legend);
+            expect(legend.prop('children')).toBe('Complex Legend Text');
+            expect(legend.prop('size')).toBe('large');
+            expect(legend.prop('bold')).toBe(true);
+        });
+
+        it('updates legend from string to object prop', () => {
+            const tree = mountWithProviders(
+                <Fieldset legend="Simple Legend">
+                    Test Content
+                </Fieldset>,
+            );
+
+            tree.setProps({ 
+                legend: { 
+                    text: 'Complex Legend', 
+                    size: 'large' 
+                } 
+            });
+
+            const legend = tree.find(Legend);
+            expect(legend.prop('children')).toBe('Complex Legend');
+            expect(legend.prop('size')).toBe('large');
+        });
+
+        it('updates legend from object to string prop', () => {
+            const tree = mountWithProviders(
+                <Fieldset legend={{ 
+                    text: 'Complex Legend', 
+                    size: 'large' 
+                }}>
+                    Test Content
+                </Fieldset>,
+            );
+
+            tree.setProps({ legend: 'Simple Legend' });
+
+            const legend = tree.find(Legend);
+            expect(legend.prop('children')).toBe('Simple Legend');
+            expect(legend.prop('size')).toBeUndefined();
+        });
     });
 
     describe('Styling', () => {
@@ -88,6 +152,16 @@ describe('Fieldset Component', () => {
 
             expect(tree).toMatchSnapshot();
         });
+
+        it('matches with string legend', () => {
+            const tree = mountWithProviders(
+                <Fieldset legend="Simple Legend">
+                    Test Content
+                </Fieldset>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
     });
 
     describe('Accessibility', () => {
diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx.snap b/packages/react/src/components/fieldset/fieldset.test.tsx.snap
index d4440d1718..f6f5b4ea9d 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx.snap
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx.snap
@@ -37,11 +37,6 @@ exports[`Fieldset Component Styling matches default 1`] = `
   <styled.fieldset
     data-testid="fieldset"
     id="uuid1"
-    legend={
-      {
-        "text": "Default Legend",
-      }
-    }
   >
     <fieldset
       className="c0"
@@ -50,11 +45,12 @@ exports[`Fieldset Component Styling matches default 1`] = `
     >
       <Legend
         id="uuid1-legend"
+        text="Default Legend"
       >
         <styled.legend
-          $isMobile={false}
           datatest-id="legend"
           id="uuid1-legend"
+          text="Default Legend"
         >
           <legend
             className="c1"
@@ -108,12 +104,6 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
   <styled.fieldset
     data-testid="fieldset"
     id="uuid1"
-    legend={
-      {
-        "bold": true,
-        "text": "Bold Legend",
-      }
-    }
   >
     <fieldset
       className="c0"
@@ -123,12 +113,13 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
       <Legend
         bold={true}
         id="uuid1-legend"
+        text="Bold Legend"
       >
         <styled.legend
           $bold={true}
-          $isMobile={false}
           datatest-id="legend"
           id="uuid1-legend"
+          text="Bold Legend"
         >
           <legend
             className="c1"
@@ -184,11 +175,6 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
     data-testid="fieldset"
     disabled={true}
     id="uuid1"
-    legend={
-      {
-        "text": "Disabled Legend",
-      }
-    }
   >
     <fieldset
       aria-disabled={true}
@@ -199,11 +185,12 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
     >
       <Legend
         id="uuid1-legend"
+        text="Disabled Legend"
       >
         <styled.legend
-          $isMobile={false}
           datatest-id="legend"
           id="uuid1-legend"
+          text="Disabled Legend"
         >
           <legend
             className="c1"
@@ -218,3 +205,65 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
   </styled.fieldset>
 </ForwardRef>
 `;
+
+exports[`Fieldset Component Styling matches with string legend 1`] = `
+.c1 {
+  color: #1B1C1E;
+  font-size: 1.25rem;
+  font-weight: var(--font-normal);
+  margin: 0 0 var(--spacing-1x);
+}
+
+.c0 {
+  border: 0;
+  border: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: var(--spacing-1x);
+  margin: 0;
+  min-inline-size: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+.c0:disabled legend,
+.c0[aria-disabled='true'] legend {
+  color: #B7BBC2;
+}
+
+<ForwardRef
+  legend="Simple Legend"
+>
+  <styled.fieldset
+    data-testid="fieldset"
+    id="uuid1"
+  >
+    <fieldset
+      className="c0"
+      data-testid="fieldset"
+      id="uuid1"
+    >
+      <Legend
+        id="uuid1-legend"
+        text="Simple Legend"
+      >
+        <styled.legend
+          datatest-id="legend"
+          id="uuid1-legend"
+          text="Simple Legend"
+        >
+          <legend
+            className="c1"
+            id="uuid1-legend"
+          >
+            Simple Legend
+          </legend>
+        </styled.legend>
+      </Legend>
+      Test Content
+    </fieldset>
+  </styled.fieldset>
+</ForwardRef>
+`;
diff --git a/packages/react/src/components/fieldset/fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
index f5ec027751..c8defc3d72 100644
--- a/packages/react/src/components/fieldset/fieldset.tsx
+++ b/packages/react/src/components/fieldset/fieldset.tsx
@@ -12,7 +12,9 @@ export const Fieldset = forwardRef(({
     ...props
 }: FieldsetProps, ref: Ref<HTMLFieldSetElement>): ReactElement => {
     const id = useId(providedId);
-    const { text, ...legendProps } = legend;
+    const legendProps = typeof legend === 'string' 
+      ? { text: legend }
+      : legend;
 
     return (
         <StyledFieldset
@@ -21,14 +23,13 @@ export const Fieldset = forwardRef(({
             aria-disabled={disabled}
             disabled={disabled}
             ref={ref}
-            legend={legend}
             {...props /* eslint-disable-line react/jsx-props-no-spreading */}
         >
             <Legend
-                {...legendProps /* eslint-disable-line react/jsx-props-no-spreading */}
                 id={`${id}-legend`}
+                {...legendProps}
             >
-                {text}
+                {legendProps.text}
             </Legend>
             {children}
         </StyledFieldset>
diff --git a/packages/react/src/components/fieldset/legend.test.tsx b/packages/react/src/components/fieldset/legend.test.tsx
index 010264dff0..f088463193 100644
--- a/packages/react/src/components/fieldset/legend.test.tsx
+++ b/packages/react/src/components/fieldset/legend.test.tsx
@@ -4,7 +4,7 @@ import { Legend } from './legend';
 import { LegendSize } from './types';
 
 describe('Legend Component', () => {
-    const sizes: LegendSize[] = ['small', 'medium', 'large'];
+    const sizes: LegendSize[] = ['xxsmall', 'xsmall', 'small', 'medium', 'large'];
     const boldStates = [true, false];
     const devices: DeviceContextProviderProps['staticDevice'][] = ['mobile', 'desktop'];
 
diff --git a/packages/react/src/components/fieldset/legend.test.tsx.snap b/packages/react/src/components/fieldset/legend.test.tsx.snap
index 0898c5e99d..ab7fcfb28c 100644
--- a/packages/react/src/components/fieldset/legend.test.tsx.snap
+++ b/packages/react/src/components/fieldset/legend.test.tsx.snap
@@ -14,7 +14,6 @@ exports[`Legend Component Styling Device: desktop Size: large Bold: false 1`] =
 >
   <styled.legend
     $bold={false}
-    $isMobile={false}
     $size="large"
     datatest-id="legend"
   >
@@ -41,7 +40,6 @@ exports[`Legend Component Styling Device: desktop Size: large Bold: true 1`] = `
 >
   <styled.legend
     $bold={true}
-    $isMobile={false}
     $size="large"
     datatest-id="legend"
   >
@@ -68,7 +66,6 @@ exports[`Legend Component Styling Device: desktop Size: medium Bold: false 1`] =
 >
   <styled.legend
     $bold={false}
-    $isMobile={false}
     $size="medium"
     datatest-id="legend"
   >
@@ -95,7 +92,6 @@ exports[`Legend Component Styling Device: desktop Size: medium Bold: true 1`] =
 >
   <styled.legend
     $bold={true}
-    $isMobile={false}
     $size="medium"
     datatest-id="legend"
   >
@@ -122,7 +118,6 @@ exports[`Legend Component Styling Device: desktop Size: small Bold: false 1`] =
 >
   <styled.legend
     $bold={false}
-    $isMobile={false}
     $size="small"
     datatest-id="legend"
   >
@@ -149,7 +144,6 @@ exports[`Legend Component Styling Device: desktop Size: small Bold: true 1`] = `
 >
   <styled.legend
     $bold={true}
-    $isMobile={false}
     $size="small"
     datatest-id="legend"
   >
@@ -162,6 +156,110 @@ exports[`Legend Component Styling Device: desktop Size: small Bold: true 1`] = `
 </Legend>
 `;
 
+exports[`Legend Component Styling Device: desktop Size: xsmall Bold: false 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={false}
+  size="xsmall"
+>
+  <styled.legend
+    $bold={false}
+    $size="xsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
+exports[`Legend Component Styling Device: desktop Size: xsmall Bold: true 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={true}
+  size="xsmall"
+>
+  <styled.legend
+    $bold={true}
+    $size="xsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
+exports[`Legend Component Styling Device: desktop Size: xxsmall Bold: false 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={false}
+  size="xxsmall"
+>
+  <styled.legend
+    $bold={false}
+    $size="xxsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
+exports[`Legend Component Styling Device: desktop Size: xxsmall Bold: true 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={true}
+  size="xxsmall"
+>
+  <styled.legend
+    $bold={true}
+    $size="xxsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
 exports[`Legend Component Styling Device: mobile Size: large Bold: false 1`] = `
 .c0 {
   color: #1B1C1E;
@@ -176,7 +274,6 @@ exports[`Legend Component Styling Device: mobile Size: large Bold: false 1`] = `
 >
   <styled.legend
     $bold={false}
-    $isMobile={true}
     $size="large"
     datatest-id="legend"
   >
@@ -203,7 +300,6 @@ exports[`Legend Component Styling Device: mobile Size: large Bold: true 1`] = `
 >
   <styled.legend
     $bold={true}
-    $isMobile={true}
     $size="large"
     datatest-id="legend"
   >
@@ -230,7 +326,6 @@ exports[`Legend Component Styling Device: mobile Size: medium Bold: false 1`] =
 >
   <styled.legend
     $bold={false}
-    $isMobile={true}
     $size="medium"
     datatest-id="legend"
   >
@@ -257,7 +352,6 @@ exports[`Legend Component Styling Device: mobile Size: medium Bold: true 1`] = `
 >
   <styled.legend
     $bold={true}
-    $isMobile={true}
     $size="medium"
     datatest-id="legend"
   >
@@ -284,7 +378,6 @@ exports[`Legend Component Styling Device: mobile Size: small Bold: false 1`] = `
 >
   <styled.legend
     $bold={false}
-    $isMobile={true}
     $size="small"
     datatest-id="legend"
   >
@@ -311,7 +404,6 @@ exports[`Legend Component Styling Device: mobile Size: small Bold: true 1`] = `
 >
   <styled.legend
     $bold={true}
-    $isMobile={true}
     $size="small"
     datatest-id="legend"
   >
@@ -323,3 +415,107 @@ exports[`Legend Component Styling Device: mobile Size: small Bold: true 1`] = `
   </styled.legend>
 </Legend>
 `;
+
+exports[`Legend Component Styling Device: mobile Size: xsmall Bold: false 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={false}
+  size="xsmall"
+>
+  <styled.legend
+    $bold={false}
+    $size="xsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
+exports[`Legend Component Styling Device: mobile Size: xsmall Bold: true 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={true}
+  size="xsmall"
+>
+  <styled.legend
+    $bold={true}
+    $size="xsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
+exports[`Legend Component Styling Device: mobile Size: xxsmall Bold: false 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={false}
+  size="xxsmall"
+>
+  <styled.legend
+    $bold={false}
+    $size="xxsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
+
+exports[`Legend Component Styling Device: mobile Size: xxsmall Bold: true 1`] = `
+.c0 {
+  color: #1B1C1E;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  margin: 0 0 var(--spacing-1x);
+}
+
+<Legend
+  bold={true}
+  size="xxsmall"
+>
+  <styled.legend
+    $bold={true}
+    $size="xxsmall"
+    datatest-id="legend"
+  >
+    <legend
+      className="c0"
+    >
+      Sample Legend
+    </legend>
+  </styled.legend>
+</Legend>
+`;
diff --git a/packages/react/src/components/fieldset/legend.tsx b/packages/react/src/components/fieldset/legend.tsx
index 033ddbaf06..b1a53d6126 100644
--- a/packages/react/src/components/fieldset/legend.tsx
+++ b/packages/react/src/components/fieldset/legend.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { StyledLegend } from './styled';
 import { LegendProps } from './types';
 
@@ -9,14 +8,12 @@ export const Legend: FC<LegendProps> = ({
     bold,
     ...props
 }) => {
-    const { isMobile } = useDeviceContext();
 
     return (
         <StyledLegend
             datatest-id='legend'
             $size={size}
             $bold={bold}
-            $isMobile={isMobile}
             {...props /* eslint-disable-line react/jsx-props-no-spreading */}
         >
             {children}
diff --git a/packages/react/src/components/fieldset/styled.ts b/packages/react/src/components/fieldset/styled.ts
index cb0cf338a3..a496666e3b 100644
--- a/packages/react/src/components/fieldset/styled.ts
+++ b/packages/react/src/components/fieldset/styled.ts
@@ -1,29 +1,20 @@
 import styled from 'styled-components';
 import { FieldsetProps, LegendProps } from './types';
 
-function getFontSize({ $isMobile, $size = 'medium' }: { $isMobile: boolean, $size?: LegendProps['size'] }): string {
-    const mobileSizes = {
+function getFontSize({ $size = 'xxsmall' }: { $size?: LegendProps['size'] }): string {
+    const sizes = {
         xxsmall: '0.75rem',
         xsmall: '0.875rem',
         small: '1rem',
         medium: '1.25rem',
         large: '1.5rem',
     };
-    const desktopSizes = {
-        xxsmall: '0.75rem',
-        xsmall: '0.875rem',
-        small: '1rem',
-        medium: '1.25rem',
-        large: '1.5rem',
-    };
-    const sizes = $isMobile ? mobileSizes : desktopSizes;
     return sizes[$size] || sizes.medium;
 }
 
 export const StyledLegend = styled.legend<{
     $size: LegendProps['size'],
     $bold: LegendProps['bold'],
-    $isMobile: boolean,
 }>`
     color: ${({ theme }) => theme.component['legend-text-color']};
     font-size: ${getFontSize};
@@ -31,7 +22,7 @@ export const StyledLegend = styled.legend<{
     margin: 0 0 var(--spacing-1x);
 `;
 
-export const StyledFieldset = styled.fieldset<FieldsetProps>`
+export const StyledFieldset = styled.fieldset<Omit<FieldsetProps, 'legend' | 'children'>>`
     border: 0;
     border: none;
     display: flex;
diff --git a/packages/react/src/components/fieldset/types.ts b/packages/react/src/components/fieldset/types.ts
index 4bf1156511..af0d798391 100644
--- a/packages/react/src/components/fieldset/types.ts
+++ b/packages/react/src/components/fieldset/types.ts
@@ -13,6 +13,6 @@ type BaseFieldsetProps = Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>,
 >;
 
 export interface FieldsetProps extends BaseFieldsetProps {
-    legend: Omit<LegendProps, 'children'> & { text: string };
+    legend: string | (Omit<LegendProps, 'children'> & { text: string });
     children: ReactNode;
 }
diff --git a/packages/storybook/stories/fieldset.stories.tsx b/packages/storybook/stories/fieldset.stories.tsx
index cc7d3313ef..b8561dad3c 100644
--- a/packages/storybook/stories/fieldset.stories.tsx
+++ b/packages/storybook/stories/fieldset.stories.tsx
@@ -47,7 +47,7 @@ const withRadioCards = (
 
 export const Default: Story = {
     args: {
-        legend: { text: 'This is a legend!', size: 'xxsmall' },
+        legend: 'This is a legend!',
         children: withTextInputs,
     },
 };

From 783f4129a4ba4dd88b7a95bf30a6ccd0a638235e Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 17 Feb 2025 10:07:25 -0500
Subject: [PATCH 09/10] fix(Fieldset): fix lint

---
 .../src/components/fieldset/fieldset.test.tsx | 30 +++++++++++--------
 .../fieldset/fieldset.test.tsx.snap           |  8 ++---
 .../src/components/fieldset/fieldset.tsx      |  4 +--
 .../react/src/components/fieldset/legend.tsx  |  1 -
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx b/packages/react/src/components/fieldset/fieldset.test.tsx
index c4fabaad41..3bd3b676b1 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx
@@ -70,11 +70,13 @@ describe('Fieldset Component', () => {
 
         it('handles object legend prop with additional properties', () => {
             const tree = mountWithProviders(
-                <Fieldset legend={{ 
-                    text: 'Complex Legend Text',
-                    size: 'large',
-                    bold: true 
-                }}>
+                <Fieldset
+                    legend={{
+                        text: 'Complex Legend Text',
+                        size: 'large',
+                        bold: true,
+                    }}
+                >
                     Test Content
                 </Fieldset>,
             );
@@ -92,10 +94,10 @@ describe('Fieldset Component', () => {
                 </Fieldset>,
             );
 
-            tree.setProps({ 
-                legend: { 
-                    text: 'Complex Legend', 
-                    size: 'large' 
+            tree.setProps({
+                legend: {
+                    text: 'Complex Legend',
+                    size: 'large',
                 } 
             });
 
@@ -106,10 +108,12 @@ describe('Fieldset Component', () => {
 
         it('updates legend from object to string prop', () => {
             const tree = mountWithProviders(
-                <Fieldset legend={{ 
-                    text: 'Complex Legend', 
-                    size: 'large' 
-                }}>
+                <Fieldset
+                    legend={{
+                        text: 'Complex Legend',
+                        size: 'large',
+                    }}
+                >
                     Test Content
                 </Fieldset>,
             );
diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx.snap b/packages/react/src/components/fieldset/fieldset.test.tsx.snap
index f6f5b4ea9d..acdfd5cd64 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx.snap
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Fieldset Component Styling matches default 1`] = `
 .c1 {
   color: #1B1C1E;
-  font-size: 1.25rem;
+  font-size: 0.75rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -69,7 +69,7 @@ exports[`Fieldset Component Styling matches default 1`] = `
 exports[`Fieldset Component Styling matches with bold legend 1`] = `
 .c1 {
   color: #1B1C1E;
-  font-size: 1.25rem;
+  font-size: 0.75rem;
   font-weight: var(--font-bold);
   margin: 0 0 var(--spacing-1x);
 }
@@ -138,7 +138,7 @@ exports[`Fieldset Component Styling matches with bold legend 1`] = `
 exports[`Fieldset Component Styling matches with disabled legend 1`] = `
 .c1 {
   color: #1B1C1E;
-  font-size: 1.25rem;
+  font-size: 0.75rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
@@ -209,7 +209,7 @@ exports[`Fieldset Component Styling matches with disabled legend 1`] = `
 exports[`Fieldset Component Styling matches with string legend 1`] = `
 .c1 {
   color: #1B1C1E;
-  font-size: 1.25rem;
+  font-size: 0.75rem;
   font-weight: var(--font-normal);
   margin: 0 0 var(--spacing-1x);
 }
diff --git a/packages/react/src/components/fieldset/fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
index c8defc3d72..473eddf08e 100644
--- a/packages/react/src/components/fieldset/fieldset.tsx
+++ b/packages/react/src/components/fieldset/fieldset.tsx
@@ -12,7 +12,7 @@ export const Fieldset = forwardRef(({
     ...props
 }: FieldsetProps, ref: Ref<HTMLFieldSetElement>): ReactElement => {
     const id = useId(providedId);
-    const legendProps = typeof legend === 'string' 
+    const legendProps = typeof legend === 'string'
       ? { text: legend }
       : legend;
 
@@ -27,7 +27,7 @@ export const Fieldset = forwardRef(({
         >
             <Legend
                 id={`${id}-legend`}
-                {...legendProps}
+                {...legendProps  /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 {legendProps.text}
             </Legend>
diff --git a/packages/react/src/components/fieldset/legend.tsx b/packages/react/src/components/fieldset/legend.tsx
index b1a53d6126..51e180405f 100644
--- a/packages/react/src/components/fieldset/legend.tsx
+++ b/packages/react/src/components/fieldset/legend.tsx
@@ -8,7 +8,6 @@ export const Legend: FC<LegendProps> = ({
     bold,
     ...props
 }) => {
-
     return (
         <StyledLegend
             datatest-id='legend'

From d67c0486df5f0c8f2b50a5c86c4f2d1e7c37c14d Mon Sep 17 00:00:00 2001
From: LarryMatte <matte.larry@gmail.com>
Date: Mon, 17 Feb 2025 10:35:40 -0500
Subject: [PATCH 10/10] fix(Fieldset): fix lint

---
 .../src/components/fieldset/fieldset.test.tsx |  2 +-
 .../src/components/fieldset/fieldset.tsx      |  2 +-
 .../react/src/components/fieldset/legend.tsx  | 22 +++++++++----------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx b/packages/react/src/components/fieldset/fieldset.test.tsx
index 3bd3b676b1..f7d4cc3616 100644
--- a/packages/react/src/components/fieldset/fieldset.test.tsx
+++ b/packages/react/src/components/fieldset/fieldset.test.tsx
@@ -98,7 +98,7 @@ describe('Fieldset Component', () => {
                 legend: {
                     text: 'Complex Legend',
                     size: 'large',
-                } 
+                },
             });
 
             const legend = tree.find(Legend);
diff --git a/packages/react/src/components/fieldset/fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
index 473eddf08e..06ce7faf21 100644
--- a/packages/react/src/components/fieldset/fieldset.tsx
+++ b/packages/react/src/components/fieldset/fieldset.tsx
@@ -27,7 +27,7 @@ export const Fieldset = forwardRef(({
         >
             <Legend
                 id={`${id}-legend`}
-                {...legendProps  /* eslint-disable-line react/jsx-props-no-spreading */}
+                {...legendProps /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 {legendProps.text}
             </Legend>
diff --git a/packages/react/src/components/fieldset/legend.tsx b/packages/react/src/components/fieldset/legend.tsx
index 51e180405f..96a893d17f 100644
--- a/packages/react/src/components/fieldset/legend.tsx
+++ b/packages/react/src/components/fieldset/legend.tsx
@@ -7,15 +7,13 @@ export const Legend: FC<LegendProps> = ({
     size,
     bold,
     ...props
-}) => {
-    return (
-        <StyledLegend
-            datatest-id='legend'
-            $size={size}
-            $bold={bold}
-            {...props /* eslint-disable-line react/jsx-props-no-spreading */}
-        >
-            {children}
-        </StyledLegend>
-    );
-};
+}) => (
+    <StyledLegend
+        datatest-id='legend'
+        $size={size}
+        $bold={bold}
+        {...props /* eslint-disable-line react/jsx-props-no-spreading */}
+    >
+        {children}
+    </StyledLegend>
+);