Refine LineItem + PackageDetail from review feedback

LineItem:
- Bump font weight 400 → 500 (D019: Montserrat Regular too light)
- Price text now text.secondary for readability hierarchy (name primary, price quieter)
- Total row stays fully prominent (primary colour)
- Item gap increased 12px → 16px in stories

PackageDetail:
- Restructure: sections (before total) + extras (after total)
  Essentials + Complimentary → Total → Extras (additional cost)
- Add compareLoading prop — loading spinner on Compare button
- Add CompareLoading story with simulated 1.5s load
- T&C line height reduced 1.5 → 1.3
- Section gap increased for breathing room
- Complimentary items now correctly shown before total
- Default story includes onArrange + onCompare handlers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/molecules/LineItem/LineItem.stories.tsx

@@ -80,14 +80,14 @@ export const Total: Story = {
 
 // --- Package Contents --------------------------------------------------------
 
-/** Realistic package breakdown as seen on the Package Select page */
+/** Realistic package breakdown — Essentials, Complimentary, Total, then Extras */
 export const PackageContents: Story = {
   render: () => (
     <Box>
-      <Typography variant="label" sx={{ mb: 1.5, display: 'block' }}>
+      <Typography variant="label" sx={{ mb: 2, display: 'block' }}>
         Essentials
       </Typography>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <LineItem name="Accommodation" price={1500} info="Refrigerated holding of the deceased prior to the funeral service." />
         <LineItem name="Death Registration Certificate" price={1500} info="Lodgement of death registration with NSW Registry of Births, Deaths & Marriages." />
         <LineItem name="Doctor Fee for Cremation" price={1500} info="Statutory medical referee fee required for all cremations in NSW." />
@@ -99,24 +99,24 @@ export const PackageContents: Story = {
         <LineItem name="Allowance for Hearse" price={1500} isAllowance info="Allowance for hearse transfer — distance surcharges may apply." />
       </Box>
 
-      <Divider sx={{ my: 2 }} />
+      <Divider sx={{ my: 3 }} />
 
-      <Typography variant="label" sx={{ mb: 1.5, display: 'block' }}>
+      <Typography variant="label" sx={{ mb: 2, display: 'block' }}>
         Complimentary Items
       </Typography>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <LineItem name="Dressing Fee" info="Dressing and preparation of the deceased — included at no charge." />
         <LineItem name="Viewing Fee" info="One private family viewing — included at no charge." />
       </Box>
 
       <LineItem name="Total" price={13500} variant="total" />
 
-      <Divider sx={{ my: 2 }} />
+      <Divider sx={{ my: 3 }} />
 
-      <Typography variant="label" sx={{ mb: 1.5, display: 'block' }}>
+      <Typography variant="label" sx={{ mb: 2, display: 'block' }}>
         Extras
       </Typography>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <LineItem name="Allowance for Flowers" price={1500} isAllowance info="Seasonal floral arrangements for the service." />
         <LineItem name="Allowance for Master of Ceremonies" price={1500} isAllowance info="Professional celebrant or MC for the funeral service." />
         <LineItem name="After Business Hours Service Surcharge" price={1500} info="Additional fee for services held outside standard business hours." />

src/components/molecules/LineItem/LineItem.tsx

@@ -75,7 +75,7 @@ export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
           <Typography
             variant={isTotal ? 'h6' : 'body2'}
             sx={{
-              fontWeight: isTotal ? 600 : 400,
+              fontWeight: isTotal ? 600 : 500,
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
@@ -103,11 +103,11 @@ export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
         {formattedPrice && (
           <Typography
             variant={isTotal ? 'h6' : 'body2'}
+            color={isTotal ? 'primary' : 'text.secondary'}
             sx={{
-              fontWeight: isTotal ? 600 : 400,
+              fontWeight: isTotal ? 600 : 500,
               whiteSpace: 'nowrap',
               flexShrink: 0,
-              ...(isTotal && { color: 'primary.main' }),
             }}
           >
             {formattedPrice}

src/components/organisms/PackageDetail/PackageDetail.stories.tsx

@@ -29,14 +29,17 @@ const complimentary = [
   { name: 'Viewing Fee', info: 'One private family viewing — included at no charge.' },
 ];
 
-const extras = [
+const extras = {
+  heading: 'Extras',
+  items: [
     { name: 'Allowance for Flowers', price: 1500, isAllowance: true, info: 'Seasonal floral arrangements for the service.' },
     { name: 'Allowance for Master of Ceremonies', price: 1500, isAllowance: true, info: 'Professional celebrant or MC for the funeral service.' },
     { name: 'After Business Hours Service Surcharge', price: 1500, info: 'Additional fee for services held outside standard business hours.' },
     { name: 'After Hours Prayers', price: 1500, info: 'Evening prayer service at the funeral home.' },
     { name: 'Coffin Bearing by Funeral Directors', price: 1500, info: 'Professional pallbearing by funeral directors.' },
     { name: 'Digital Recording', price: 1500, info: 'Professional video recording of the funeral service.' },
-];
+  ],
+};
 
 const termsText = '* This package includes a funeral service at a chapel or a church with a funeral procession following to the crematorium. It includes many of the most commonly selected funeral options preselected for you. Many people choose this package for the extended funeral rituals — of course, you can tailor the funeral service to meet your needs and budget as you go through the selections.';
 
@@ -74,7 +77,7 @@ type Story = StoryObj<typeof PackageDetail>;
 
 // --- Default -----------------------------------------------------------------
 
-/** Full package detail panel with all sections */
+/** Full package detail panel — Essentials, Complimentary, Total, then Extras */
 export const Default: Story = {
   args: {
     name: 'Everyday Funeral Package',
@@ -82,16 +85,35 @@ export const Default: Story = {
     sections: [
       { heading: 'Essentials', items: essentials },
       { heading: 'Complimentary Items', items: complimentary },
-      { heading: 'Extras', items: extras },
     ],
     total: 2700,
+    extras,
     terms: termsText,
+    onArrange: () => alert('Make Arrangement clicked'),
+    onCompare: () => alert('Compare clicked'),
+  },
+};
+
+// --- Compare Loading ---------------------------------------------------------
+
+/** Compare button in loading state — adding to comparison cart */
+export const CompareLoading: Story = {
+  args: {
+    name: 'Everyday Funeral Package',
+    price: 900,
+    sections: [
+      { heading: 'Essentials', items: essentials.slice(0, 4) },
+    ],
+    total: 6000,
+    onArrange: () => alert('Make Arrangement'),
+    onCompare: () => {},
+    compareLoading: true,
   },
 };
 
 // --- Without Extras ----------------------------------------------------------
 
-/** Simpler package with essentials only */
+/** Simpler package with essentials and complimentary only */
 export const WithoutExtras: Story = {
   args: {
     name: 'Essential Funeral Package',
@@ -102,6 +124,8 @@ export const WithoutExtras: Story = {
     ],
     total: 9000,
     terms: termsText,
+    onArrange: () => alert('Make Arrangement'),
+    onCompare: () => alert('Compare'),
   },
 };
 
@@ -119,6 +143,12 @@ export const PackageSelectPage: Story = {
   render: () => {
     const [selectedPkg, setSelectedPkg] = useState('everyday');
     const [activeFilter, setActiveFilter] = useState('Cremation');
+    const [comparing, setComparing] = useState(false);
+
+    const handleCompare = () => {
+      setComparing(true);
+      setTimeout(() => setComparing(false), 1500);
+    };
 
     return (
       <Box>
@@ -144,7 +174,7 @@ export const PackageSelectPage: Story = {
             alignItems: 'start',
           }}
         >
-          {/* Left column: back, heading, provider, filter, packages */}
+          {/* Left column */}
           <Box>
             <Button
               variant="text"
@@ -213,12 +243,13 @@ export const PackageSelectPage: Story = {
               sections={[
                 { heading: 'Essentials', items: essentials },
                 { heading: 'Complimentary Items', items: complimentary },
-                { heading: 'Extras', items: extras },
               ]}
               total={2700}
+              extras={extras}
               terms={termsText}
               onArrange={() => alert(`Making arrangement for: ${selectedPkg}`)}
-              onCompare={() => alert(`Added ${selectedPkg} to compare`)}
+              onCompare={handleCompare}
+              compareLoading={comparing}
             />
           </Box>
         </Box>

src/components/organisms/PackageDetail/PackageDetail.tsx

@@ -20,7 +20,7 @@ export interface PackageLineItem {
   isAllowance?: boolean;
 }
 
-/** A section of items within a package (e.g. "Essentials", "Extras") */
+/** A section of items within a package (e.g. "Essentials", "Complimentary Items") */
 export interface PackageSection {
   /** Section heading */
   heading: string;
@@ -34,10 +34,12 @@ export interface PackageDetailProps {
   name: string;
   /** Package price in dollars */
   price: number;
-  /** Grouped sections of package contents */
+  /** Main package sections shown BEFORE the total (Essentials, Complimentary Items) */
   sections: PackageSection[];
-  /** Package total — usually the sum of priced essentials */
+  /** Package total — shown between main sections and extras */
   total?: number;
+  /** Additional-cost extras shown AFTER the total — these can be added at extra cost */
+  extras?: PackageSection;
   /** Terms and conditions text — required by providers */
   terms?: string;
   /** Called when user clicks "Make Arrangement" */
@@ -46,17 +48,49 @@ export interface PackageDetailProps {
   onCompare?: () => void;
   /** Whether the arrange button is disabled */
   arrangeDisabled?: boolean;
+  /** Whether the compare button is in loading state */
+  compareLoading?: boolean;
   /** MUI sx prop for the root element */
   sx?: SxProps<Theme>;
 }
 
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/** Renders a section heading + list of LineItems */
+function SectionBlock({ section }: { section: PackageSection }) {
+  return (
+    <Box>
+      <Typography variant="label" component="h3" sx={{ display: 'block', mb: 2 }}>
+        {section.heading}
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {section.items.map((item) => (
+          <LineItem
+            key={item.name}
+            name={item.name}
+            info={item.info}
+            price={item.price}
+            isAllowance={item.isAllowance}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 /**
  * Package detail panel for the FA design system.
  *
  * Displays the full contents of a funeral package — name, price, CTA buttons,
- * grouped line items (Essentials, Complimentary, Extras), total, and T&Cs.
+ * grouped line items, total, optional extras, and T&Cs.
+ *
+ * Structure:
+ * - **sections** (before total): What's included in the package price
+ *   (Essentials, Complimentary Items)
+ * - **total**: The package price
+ * - **extras** (after total): Additional items that can be added at extra cost
  *
  * Used as the right-side panel on the Package Select page. The contents and
  * T&Cs are provider-authored and must be displayed in full.
@@ -64,22 +98,6 @@ export interface PackageDetailProps {
  * "Make Arrangement" is the FA term for selecting/committing to a package.
  *
  * Composes Typography + Button + Divider + LineItem.
- *
- * Usage:
- * ```tsx
- * <PackageDetail
- *   name="Everyday Funeral Package"
- *   price={2700}
- *   sections={[
- *     { heading: 'Essentials', items: [...] },
- *     { heading: 'Complimentary Items', items: [...] },
- *   ]}
- *   total={2700}
- *   terms="* This package includes a funeral service at a chapel..."
- *   onArrange={() => startArrangement(pkg.id)}
- *   onCompare={() => addToCompare(pkg.id)}
- * />
- * ```
  */
 export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps>(
   (
@@ -88,10 +106,12 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
       price,
       sections,
       total,
+      extras,
       terms,
       onArrange,
       onCompare,
       arrangeDisabled = false,
+      compareLoading = false,
       sx,
     },
     ref,
@@ -137,6 +157,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
                 variant="soft"
                 color="secondary"
                 size="large"
+                loading={compareLoading}
                 onClick={onCompare}
                 sx={{ flexShrink: 0 }}
               >
@@ -145,32 +166,26 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
             )}
           </Box>
 
-          <Divider sx={{ mb: 2 }} />
+          <Divider sx={{ mb: 3 }} />
 
-          {/* Sections */}
+          {/* Main sections — included in the package price */}
-          {sections.map((section, sectionIdx) => (
+          {sections.map((section, idx) => (
-            <Box key={section.heading} sx={{ mb: sectionIdx < sections.length - 1 ? 2 : 0 }}>
+            <Box key={section.heading} sx={{ mb: idx < sections.length - 1 ? 3 : 0 }}>
-              <Typography variant="label" component="h3" sx={{ display: 'block', mb: 1.5 }}>
+              <SectionBlock section={section} />
-                {section.heading}
-              </Typography>
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-                {section.items.map((item) => (
-                  <LineItem
-                    key={item.name}
-                    name={item.name}
-                    info={item.info}
-                    price={item.price}
-                    isAllowance={item.isAllowance}
-                  />
-                ))}
-              </Box>
             </Box>
           ))}
 
-          {/* Total */}
+          {/* Total — separates included content from extras */}
           {total != null && (
             <LineItem name="Total" price={total} variant="total" />
           )}
+
+          {/* Extras — additional cost items after the total */}
+          {extras && extras.items.length > 0 && (
+            <Box sx={{ mt: 3 }}>
+              <SectionBlock section={extras} />
+            </Box>
+          )}
         </Box>
 
         {/* Terms & Conditions footer */}
@@ -182,7 +197,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
               py: 2,
             }}
           >
-            <Typography variant="captionSm" color="text.secondary" sx={{ lineHeight: 1.5 }}>
+            <Typography variant="captionSm" color="text.secondary" sx={{ lineHeight: 1.3 }}>
               {terms}
             </Typography>
           </Box>