Add LineItem, ProviderCardCompact, PackageDetail for Package Select page

LineItem (molecule):
- Name + optional info tooltip + optional price
- Allowance asterisk, total variant (bold + top border)
- Reusable for package contents, order summaries, invoices

ProviderCardCompact (molecule):
- Horizontal layout: image left, name + location + rating right
- Used at top of Package Select page to show selected provider

PackageDetail (organism):
- Right-side detail panel for Package Select page
- Name/price header, Make Arrangement + Compare CTAs
- Grouped LineItem sections, total row, T&C footer
- PackageSelectPage story: full page with filter chips, package
  list (ServiceOption), sticky detail panel, and Navigation

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

src/components/molecules/LineItem/LineItem.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { Typography } from '../../atoms/Typography';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** Props for the FA LineItem molecule */
+export interface LineItemProps {
+  /** Item name/label */
+  name: string;
+  /** Optional tooltip text explaining the item (shown via info icon) */
+  info?: string;
+  /** Price in dollars — omit for complimentary/included items */
+  price?: number;
+  /** Whether the price is an allowance (shows asterisk) */
+  isAllowance?: boolean;
+  /** Custom price display — overrides `price` formatting (e.g. "Included", "TBC") */
+  priceLabel?: string;
+  /** Visual weight — "default" for regular items, "total" for summary rows */
+  variant?: 'default' | 'total';
+  /** MUI sx prop for the root element */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * A single line item showing a name, optional info tooltip, and optional price.
+ *
+ * Used in package contents, order summaries, and invoices. The `info` prop
+ * renders a small info icon with a tooltip — used by providers to explain
+ * what each inclusion covers.
+ *
+ * Composes Typography + Tooltip.
+ *
+ * Usage:
+ * ```tsx
+ * <LineItem name="Professional Service Fee" info="Covers all coordination..." price={1500} />
+ * <LineItem name="Allowance for Coffin" price={1500} isAllowance info="Can be upgraded..." />
+ * <LineItem name="Dressing Fee" info="Included in this package" />
+ * <LineItem name="Total" price={2700} variant="total" />
+ * ```
+ */
+export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
+  ({ name, info, price, isAllowance = false, priceLabel, variant = 'default', sx }, ref) => {
+    const isTotal = variant === 'total';
+
+    const formattedPrice = priceLabel
+      ?? (price != null ? `$${price.toLocaleString('en-AU')}${isAllowance ? '*' : ''}` : undefined);
+
+    return (
+      <Box
+        ref={ref}
+        sx={[
+          {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 2,
+            ...(isTotal && {
+              pt: 1.5,
+              mt: 1.5,
+              borderTop: '1px solid',
+              borderColor: 'divider',
+            }),
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        {/* Name + optional info icon */}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minWidth: 0 }}>
+          <Typography
+            variant={isTotal ? 'h6' : 'body2'}
+            sx={{
+              fontWeight: isTotal ? 600 : 400,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {name}
+          </Typography>
+
+          {info && (
+            <Tooltip title={info} arrow placement="top">
+              <InfoOutlinedIcon
+                sx={{
+                  fontSize: 16,
+                  color: 'text.secondary',
+                  cursor: 'help',
+                  flexShrink: 0,
+                }}
+              />
+            </Tooltip>
+          )}
+        </Box>
+
+        {/* Price */}
+        {formattedPrice && (
+          <Typography
+            variant={isTotal ? 'h6' : 'body2'}
+            sx={{
+              fontWeight: isTotal ? 600 : 400,
+              whiteSpace: 'nowrap',
+              flexShrink: 0,
+              ...(isTotal && { color: 'primary.main' }),
+            }}
+          >
+            {formattedPrice}
+          </Typography>
+        )}
+      </Box>
+    );
+  },
+);
+
+LineItem.displayName = 'LineItem';
+export default LineItem;