feat: integrate Universal Design System with Web, Print, and Presentation examples

apps/example-print/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "example-print",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "build:pdf": "ts-node src/generator.tsx"
+  },
+  "dependencies": {
+    "@mintel/ui": "workspace:*",
+    "@react-pdf/renderer": "^3.4.0",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "ts-node": "^10.9.2",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0"
+  }
+}

apps/example-print/src/generator.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactPDF, { Document, Page } from '@react-pdf/renderer';
+import { Box, Text, EnvironmentProvider } from '@mintel/ui';
+
+const InvoiceDocument = () => (
+  <EnvironmentProvider env="print">
+    <Document>
+      <Page size="A4" style={{ padding: 40, backgroundColor: '#ffffff' }}>
+        <Box pdfStyle={{ marginBottom: 20, borderBottom: '2px solid #1E40AF', paddingBottom: 10 }}>
+          <Text pdfStyle={{ fontSize: 28, color: '#1E40AF', fontWeight: 'bold' }}>
+            Mintel Universal Design
+          </Text>
+        </Box>
+        <Box pdfStyle={{ padding: 20, backgroundColor: '#f3f4f6', borderRadius: 8 }}>
+          <Text pdfStyle={{ fontSize: 14, color: '#374151' }}>
+            This PDF is generated using the exact same React components as the Web application.
+          </Text>
+        </Box>
+      </Page>
+    </Document>
+  </EnvironmentProvider>
+);
+
+const generatePDF = async () => {
+  console.log('Generating Universal PDF...');
+  await ReactPDF.render(<InvoiceDocument />, `${__dirname}/output.pdf`);
+  console.log('Successfully saved to output.pdf');
+};
+
+generatePDF();