@payfit/unity-illustrations 0.0.0-alpha.11 → 0.0.0-alpha.12

package/dist/esm/generated/illustrationAssets.js

@@ -0,0 +1,223 @@
+const t = {
+  FAQ: () => import("./FAQ.js"),
+  FAQWithBackground: () => import("./FAQWithBackground.js"),
+  AdministrativeDocument: () => import("./AdministrativeDocument.js"),
+  AdministrativeDocumentWithBackground: () => import("./AdministrativeDocumentWithBackground.js"),
+  BabyBottle: () => import("./BabyBottle.js"),
+  BabyBottleWithBackground: () => import("./BabyBottleWithBackground.js"),
+  Bell: () => import("./Bell.js"),
+  BellWithBackground: () => import("./BellWithBackground.js"),
+  Bicycle: () => import("./Bicycle.js"),
+  BicycleWithBackground: () => import("./BicycleWithBackground.js"),
+  Box: () => import("./Box.js"),
+  BoxWithBackground: () => import("./BoxWithBackground.js"),
+  Buoy: () => import("./Buoy.js"),
+  BuoyWithBackground: () => import("./BuoyWithBackground.js"),
+  Calculator: () => import("./Calculator.js"),
+  CalculatorWithBackground: () => import("./CalculatorWithBackground.js"),
+  Card: () => import("./Card.js"),
+  CardWithBackground: () => import("./CardWithBackground.js"),
+  CharacterHeadphone: () => import("./CharacterHeadphone.js"),
+  CharacterHeadphoneWithBackground: () => import("./CharacterHeadphoneWithBackground.js"),
+  Checkbox: () => import("./Checkbox.js"),
+  CheckboxWithBackground: () => import("./CheckboxWithBackground.js"),
+  Clock: () => import("./Clock.js"),
+  ClockWithBackground: () => import("./ClockWithBackground.js"),
+  ClosedLock: () => import("./ClosedLock.js"),
+  ClosedLockWithBackground: () => import("./ClosedLockWithBackground.js"),
+  ComputerDocumentation: () => import("./ComputerDocumentation.js"),
+  ComputerDocumentationWithBackground: () => import("./ComputerDocumentationWithBackground.js"),
+  Confettis: () => import("./Confettis.js"),
+  ConfettisWithBackground: () => import("./ConfettisWithBackground.js"),
+  Conversation: () => import("./Conversation.js"),
+  ConversationWithBackground: () => import("./ConversationWithBackground.js"),
+  Data: () => import("./Data.js"),
+  DataWithBackground: () => import("./DataWithBackground.js"),
+  Discount: () => import("./Discount.js"),
+  DiscountWithBackground: () => import("./DiscountWithBackground.js"),
+  Document: () => import("./Document.js"),
+  DocumentWithBackground: () => import("./DocumentWithBackground.js"),
+  EmailNotification: () => import("./EmailNotification.js"),
+  EmailNotificationWithBackground: () => import("./EmailNotificationWithBackground.js"),
+  EmploymentContract: () => import("./EmploymentContract.js"),
+  EmploymentContractWithBackground: () => import("./EmploymentContractWithBackground.js"),
+  EmptyDocument: () => import("./EmptyDocument.js"),
+  EmptyDocumentWithBackground: () => import("./EmptyDocumentWithBackground.js"),
+  FieldGlasses: () => import("./FieldGlasses.js"),
+  FieldGlassesWithBackground: () => import("./FieldGlassesWithBackground.js"),
+  Gear: () => import("./Gear.js"),
+  GearWithBackground: () => import("./GearWithBackground.js"),
+  GoldenRibbon: () => import("./GoldenRibbon.js"),
+  GoldenRibbonWithBackground: () => import("./GoldenRibbonWithBackground.js"),
+  Graph: () => import("./Graph.js"),
+  GraphWithBackground: () => import("./GraphWithBackground.js"),
+  Hammer: () => import("./Hammer.js"),
+  HammerWithBackground: () => import("./HammerWithBackground.js"),
+  HandHello: () => import("./HandHello.js"),
+  HandHelloWithBackground: () => import("./HandHelloWithBackground.js"),
+  HappyCharacter: () => import("./HappyCharacter.js"),
+  HappyCharacterWithBackground: () => import("./HappyCharacterWithBackground.js"),
+  InformationUpdate: () => import("./InformationUpdate.js"),
+  InformationUpdateWithBackground: () => import("./InformationUpdateWithBackground.js"),
+  LetterBox: () => import("./LetterBox.js"),
+  LetterBoxWithBackground: () => import("./LetterBoxWithBackground.js"),
+  LightBulb: () => import("./LightBulb.js"),
+  LightBulbWithBackground: () => import("./LightBulbWithBackground.js"),
+  LittleRocket: () => import("./LittleRocket.js"),
+  LittleRocketWithBackground: () => import("./LittleRocketWithBackground.js"),
+  MagnifyingGlass: () => import("./MagnifyingGlass.js"),
+  MagnifyingGlassWithBackground: () => import("./MagnifyingGlassWithBackground.js"),
+  MealVoucher: () => import("./MealVoucher.js"),
+  MealVoucherWithBackground: () => import("./MealVoucherWithBackground.js"),
+  MealVoucherCard: () => import("./MealVoucherCard.js"),
+  MealVoucherCardWithBackground: () => import("./MealVoucherCardWithBackground.js"),
+  OpenLock: () => import("./OpenLock.js"),
+  OpenLockWithBackground: () => import("./OpenLockWithBackground.js"),
+  Payslip: () => import("./Payslip.js"),
+  PayslipWithBackground: () => import("./PayslipWithBackground.js"),
+  Pen: () => import("./Pen.js"),
+  PenWithBackground: () => import("./PenWithBackground.js"),
+  People: () => import("./People.js"),
+  PeopleWithBackground: () => import("./PeopleWithBackground.js"),
+  PersonHeadphone: () => import("./PersonHeadphone.js"),
+  PersonHeadphoneWithBackground: () => import("./PersonHeadphoneWithBackground.js"),
+  PiggyBank: () => import("./PiggyBank.js"),
+  PiggyBankWithBackground: () => import("./PiggyBankWithBackground.js"),
+  Plant: () => import("./Plant.js"),
+  PlantWithBackground: () => import("./PlantWithBackground.js"),
+  Report: () => import("./Report.js"),
+  ReportWithBackground: () => import("./ReportWithBackground.js"),
+  SandCastle: () => import("./SandCastle.js"),
+  SandCastleWithBackground: () => import("./SandCastleWithBackground.js"),
+  Schedule: () => import("./Schedule.js"),
+  ScheduleWithBackground: () => import("./ScheduleWithBackground.js"),
+  SettingSlider: () => import("./SettingSlider.js"),
+  SettingSliderWithBackground: () => import("./SettingSliderWithBackground.js"),
+  SmallPuzzle: () => import("./SmallPuzzle.js"),
+  SmallPuzzleWithBackground: () => import("./SmallPuzzleWithBackground.js"),
+  SmilingCharacter: () => import("./SmilingCharacter.js"),
+  SmilingCharacterWithBackground: () => import("./SmilingCharacterWithBackground.js"),
+  Spreadsheet: () => import("./Spreadsheet.js"),
+  SpreadsheetWithBackground: () => import("./SpreadsheetWithBackground.js"),
+  Stethoscope: () => import("./Stethoscope.js"),
+  StethoscopeWithBackground: () => import("./StethoscopeWithBackground.js"),
+  Stopwatch: () => import("./Stopwatch.js"),
+  StopwatchWithBackground: () => import("./StopwatchWithBackground.js"),
+  Sunshade: () => import("./Sunshade.js"),
+  SunshadeWithBackground: () => import("./SunshadeWithBackground.js"),
+  TaskToDo: () => import("./TaskToDo.js"),
+  TaskToDoWithBackground: () => import("./TaskToDoWithBackground.js"),
+  Template: () => import("./Template.js"),
+  TemplateWithBackground: () => import("./TemplateWithBackground.js"),
+  Thumbtack: () => import("./Thumbtack.js"),
+  ThumbtackWithBackground: () => import("./ThumbtackWithBackground.js"),
+  ValidationWindow: () => import("./ValidationWindow.js"),
+  ValidationWindowWithBackground: () => import("./ValidationWindowWithBackground.js"),
+  ESignature: () => import("./ESignature.js"),
+  Expenses: () => import("./Expenses.js"),
+  Kanoon: () => import("./Kanoon.js"),
+  Kpmg: () => import("./Kpmg.js"),
+  LegalHelp: () => import("./LegalHelp.js"),
+  Performance: () => import("./Performance.js"),
+  SalaryAdvance: () => import("./SalaryAdvance.js"),
+  TimeTracking: () => import("./TimeTracking.js"),
+  EmptyStateActivationButton: () => import("./EmptyStateActivationButton.js"),
+  EmptyStateActivationToggle: () => import("./EmptyStateActivationToggle.js"),
+  EmptyStateDesert: () => import("./EmptyStateDesert.js"),
+  EmptyStateEmptyFolder: () => import("./EmptyStateEmptyFolder.js"),
+  EmptyStateIncidentPanel: () => import("./EmptyStateIncidentPanel.js"),
+  EmptyStateMaintenance: () => import("./EmptyStateMaintenance.js"),
+  EmptyStateMoon: () => import("./EmptyStateMoon.js"),
+  EmptyStateResearch: () => import("./EmptyStateResearch.js"),
+  EmptyStateToDo: () => import("./EmptyStateToDo.js"),
+  AlphabetCube: () => import("./AlphabetCube.js"),
+  Analysis: () => import("./Analysis.js"),
+  AutomationInProgress: () => import("./AutomationInProgress.js"),
+  BigIdea: () => import("./BigIdea.js"),
+  Binoculars: () => import("./Binoculars.js"),
+  Biscuit: () => import("./Biscuit.js"),
+  BiscuitCrumbs: () => import("./BiscuitCrumbs.js"),
+  Book: () => import("./Book.js"),
+  Brainstorming: () => import("./Brainstorming.js"),
+  Calendar: () => import("./Calendar.js"),
+  Chat: () => import("./Chat.js"),
+  ChristmasSock: () => import("./ChristmasSock.js"),
+  ChristmasSockAndConfettis: () => import("./ChristmasSockAndConfettis.js"),
+  Collaboration: () => import("./Collaboration.js"),
+  CollectiveResearch: () => import("./CollectiveResearch.js"),
+  ComputerMail: () => import("./ComputerMail.js"),
+  ConfettiCannon: () => import("./ConfettiCannon.js"),
+  CrossLegged: () => import("./CrossLegged.js"),
+  CupOfCoffee: () => import("./CupOfCoffee.js"),
+  Dancing: () => import("./Dancing.js"),
+  DancingPeople: () => import("./DancingPeople.js"),
+  DancingSkier: () => import("./DancingSkier.js"),
+  Dialogue: () => import("./Dialogue.js"),
+  Discussion: () => import("./Discussion.js"),
+  Doctor: () => import("./Doctor.js"),
+  DocumentScanning: () => import("./DocumentScanning.js"),
+  EmailLogin: () => import("./EmailLogin.js"),
+  Evaluation: () => import("./Evaluation.js"),
+  FilingDocuments: () => import("./FilingDocuments.js"),
+  Flowchart: () => import("./Flowchart.js"),
+  Graphic: () => import("./Graphic.js"),
+  Hands: () => import("./Hands.js"),
+  HighFive: () => import("./HighFive.js"),
+  HighlightBooks: () => import("./HighlightBooks.js"),
+  Idea: () => import("./Idea.js"),
+  IndicateSomething: () => import("./IndicateSomething.js"),
+  JetlangCalculator: () => import("./JetlangCalculator.js"),
+  Library: () => import("./Library.js"),
+  Marteler: () => import("./Marteler.js"),
+  Mug: () => import("./Mug.js"),
+  Panel: () => import("./Panel.js"),
+  PaperPlane: () => import("./PaperPlane.js"),
+  Party: () => import("./Party.js"),
+  PayfittersWithBadge: () => import("./PayfittersWithBadge.js"),
+  PayrollError: () => import("./PayrollError.js"),
+  Person: () => import("./Person.js"),
+  PhoneMessage: () => import("./PhoneMessage.js"),
+  Planet: () => import("./Planet.js"),
+  PostIt: () => import("./PostIt.js"),
+  Progression: () => import("./Progression.js"),
+  Puzzle: () => import("./Puzzle.js"),
+  PuzzlePiece: () => import("./PuzzlePiece.js"),
+  ReadingABook: () => import("./ReadingABook.js"),
+  ReceivingPay: () => import("./ReceivingPay.js"),
+  Remote: () => import("./Remote.js"),
+  Rocket: () => import("./Rocket.js"),
+  SafeDepositBox: () => import("./SafeDepositBox.js"),
+  Sale: () => import("./Sale.js"),
+  SecurityFields: () => import("./SecurityFields.js"),
+  Signature: () => import("./Signature.js"),
+  SittingOnTheSofa: () => import("./SittingOnTheSofa.js"),
+  SolveProblem: () => import("./SolveProblem.js"),
+  SpeakerFingertips: () => import("./SpeakerFingertips.js"),
+  SpeakerWelcome: () => import("./SpeakerWelcome.js"),
+  SpeakerWithMicrophone: () => import("./SpeakerWithMicrophone.js"),
+  StackOfBook2: () => import("./StackOfBook2.js"),
+  StairTreads: () => import("./StairTreads.js"),
+  TakingNote: () => import("./TakingNote.js"),
+  Target: () => import("./Target.js"),
+  TeamBuilding: () => import("./TeamBuilding.js"),
+  Telescope: () => import("./Telescope.js"),
+  Thumbsup: () => import("./Thumbsup.js"),
+  Timer: () => import("./Timer.js"),
+  ToggleOff: () => import("./ToggleOff.js"),
+  ToggleOn: () => import("./ToggleOn.js"),
+  Trophy: () => import("./Trophy.js"),
+  TrophyWon: () => import("./TrophyWon.js"),
+  VisuallyImpaired: () => import("./VisuallyImpaired.js"),
+  VisuallyImpairedWinter: () => import("./VisuallyImpairedWinter.js"),
+  WalkingPeople: () => import("./WalkingPeople.js"),
+  WinterParty: () => import("./WinterParty.js"),
+  WorkAtOffice: () => import("./WorkAtOffice.js"),
+  WorkFromAnywhere: () => import("./WorkFromAnywhere.js"),
+  Wrench: () => import("./Wrench.js"),
+  WriteBook: () => import("./WriteBook.js"),
+  ContractSignature: () => import("./ContractSignature.js")
+}, o = ["FAQ", "FAQWithBackground", "AdministrativeDocument", "AdministrativeDocumentWithBackground", "BabyBottle", "BabyBottleWithBackground", "Bell", "BellWithBackground", "Bicycle", "BicycleWithBackground", "Box", "BoxWithBackground", "Buoy", "BuoyWithBackground", "Calculator", "CalculatorWithBackground", "Card", "CardWithBackground", "CharacterHeadphone", "CharacterHeadphoneWithBackground", "Checkbox", "CheckboxWithBackground", "Clock", "ClockWithBackground", "ClosedLock", "ClosedLockWithBackground", "ComputerDocumentation", "ComputerDocumentationWithBackground", "Confettis", "ConfettisWithBackground", "Conversation", "ConversationWithBackground", "Data", "DataWithBackground", "Discount", "DiscountWithBackground", "Document", "DocumentWithBackground", "EmailNotification", "EmailNotificationWithBackground", "EmploymentContract", "EmploymentContractWithBackground", "EmptyDocument", "EmptyDocumentWithBackground", "FieldGlasses", "FieldGlassesWithBackground", "Gear", "GearWithBackground", "GoldenRibbon", "GoldenRibbonWithBackground", "Graph", "GraphWithBackground", "Hammer", "HammerWithBackground", "HandHello", "HandHelloWithBackground", "HappyCharacter", "HappyCharacterWithBackground", "InformationUpdate", "InformationUpdateWithBackground", "LetterBox", "LetterBoxWithBackground", "LightBulb", "LightBulbWithBackground", "LittleRocket", "LittleRocketWithBackground", "MagnifyingGlass", "MagnifyingGlassWithBackground", "MealVoucher", "MealVoucherWithBackground", "MealVoucherCard", "MealVoucherCardWithBackground", "OpenLock", "OpenLockWithBackground", "Payslip", "PayslipWithBackground", "Pen", "PenWithBackground", "People", "PeopleWithBackground", "PersonHeadphone", "PersonHeadphoneWithBackground", "PiggyBank", "PiggyBankWithBackground", "Plant", "PlantWithBackground", "Report", "ReportWithBackground", "SandCastle", "SandCastleWithBackground", "Schedule", "ScheduleWithBackground", "SettingSlider", "SettingSliderWithBackground", "SmallPuzzle", "SmallPuzzleWithBackground", "SmilingCharacter", "SmilingCharacterWithBackground", "Spreadsheet", "SpreadsheetWithBackground", "Stethoscope", "StethoscopeWithBackground", "Stopwatch", "StopwatchWithBackground", "Sunshade", "SunshadeWithBackground", "TaskToDo", "TaskToDoWithBackground", "Template", "TemplateWithBackground", "Thumbtack", "ThumbtackWithBackground", "ValidationWindow", "ValidationWindowWithBackground", "ESignature", "Expenses", "Kanoon", "Kpmg", "LegalHelp", "Performance", "SalaryAdvance", "TimeTracking", "EmptyStateActivationButton", "EmptyStateActivationToggle", "EmptyStateDesert", "EmptyStateEmptyFolder", "EmptyStateIncidentPanel", "EmptyStateMaintenance", "EmptyStateMoon", "EmptyStateResearch", "EmptyStateToDo", "AlphabetCube", "Analysis", "AutomationInProgress", "BigIdea", "Binoculars", "Biscuit", "BiscuitCrumbs", "Book", "Brainstorming", "Calendar", "Chat", "ChristmasSock", "ChristmasSockAndConfettis", "Collaboration", "CollectiveResearch", "ComputerMail", "ConfettiCannon", "CrossLegged", "CupOfCoffee", "Dancing", "DancingPeople", "DancingSkier", "Dialogue", "Discussion", "Doctor", "DocumentScanning", "EmailLogin", "Evaluation", "FilingDocuments", "Flowchart", "Graphic", "Hands", "HighFive", "HighlightBooks", "Idea", "IndicateSomething", "JetlangCalculator", "Library", "Marteler", "Mug", "Panel", "PaperPlane", "Party", "PayfittersWithBadge", "PayrollError", "Person", "PhoneMessage", "Planet", "PostIt", "Progression", "Puzzle", "PuzzlePiece", "ReadingABook", "ReceivingPay", "Remote", "Rocket", "SafeDepositBox", "Sale", "SecurityFields", "Signature", "SittingOnTheSofa", "SolveProblem", "SpeakerFingertips", "SpeakerWelcome", "SpeakerWithMicrophone", "StackOfBook2", "StairTreads", "TakingNote", "Target", "TeamBuilding", "Telescope", "Thumbsup", "Timer", "ToggleOff", "ToggleOn", "Trophy", "TrophyWon", "VisuallyImpaired", "VisuallyImpairedWinter", "WalkingPeople", "WinterParty", "WorkAtOffice", "WorkFromAnywhere", "Wrench", "WriteBook", "ContractSignature"];
+export {
+  o as illustrationNames,
+  t as lazyIllustrationsMap
+};

package/dist/esm/generated/types.d.ts

@@ -0,0 +1,18 @@
+declare const __UNITY_ILLUSTRATION: unique symbol;
+export interface IllustrationAssetBrand {
+    readonly [__UNITY_ILLUSTRATION]: true;
+}
+export interface BaseSvgAsset {
+    readonly type: 'svg';
+    readonly url: string;
+    readonly animated: false;
+}
+export interface BaseImageAsset {
+    readonly type: 'image';
+    readonly url: string;
+    readonly animated: boolean;
+}
+export type IllustrationAsset<T extends (BaseSvgAsset | BaseImageAsset) & {
+    readonly name: string;
+}> = T & IllustrationAssetBrand;
+export {};

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/illustration/Illustration.js';
+export * from './components/lazy-illustration/LazyIllustration.js';
+export * from './generated/illustrationAssets.js';

package/dist/esm/index.js

@@ -1 +1,11 @@
-
+import { Illustration as r, illustratedIcon as o, illustratedPicture as a } from "./components/illustration/Illustration.js";
+import { LazyIllustration as s } from "./components/lazy-illustration/LazyIllustration.js";
+import { illustrationNames as u, lazyIllustrationsMap as n } from "./generated/illustrationAssets.js";
+export {
+  r as Illustration,
+  s as LazyIllustration,
+  o as illustratedIcon,
+  a as illustratedPicture,
+  u as illustrationNames,
+  n as lazyIllustrationsMap
+};

package/dist/esm/scripts/generate-assets.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/scripts/templates/assetTemplate.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates a single asset module
+ */
+export declare function generateAssetModule(componentName: string, optimizedAssetPath: string, assetType: {
+    type: 'svg' | 'image';
+    animated: boolean;
+}, originalFileName: string): string;

package/dist/esm/scripts/templates/baseTypes.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generates the base types file content
+ */
+export declare function generateBaseTypes(): string;

package/dist/esm/scripts/templates/indexTemplate.d.ts

@@ -0,0 +1,12 @@
+type Component = {
+    name: string;
+    type: string;
+    animated: boolean;
+    sizeBefore: number;
+    sizeAfter: number;
+};
+/**
+ * Generates the main index file
+ */
+export declare function generateIndexFile(components: Component[]): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-illustrations",
-  "version": "0.0.0-alpha.11",
+  "version": "0.0.0-alpha.12",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.cts",
@@ -10,15 +10,65 @@
     ".": {
       "import": {
         "types": "./dist/esm/index.d.ts",
+        "hrAppsLocalDev": "./src/index.ts",
         "default": "./dist/esm/index.js"
       },
       "require": {
         "types": "./dist/cjs/index.d.cts",
+        "hrAppsLocalDev": "./src/index.ts",
         "default": "./dist/cjs/index.cjs"
       }
-    }
+    },
+    "./assets/*": {
+      "import": {
+        "types": "./dist/esm/generated/*.d.ts",
+        "hrAppsLocalDev": "./src/generated/*.ts",
+        "default": "./dist/esm/generated/*.js"
+      },
+      "require": {
+        "types": "./dist/cjs/generated/*.d.cts",
+        "hrAppsLocalDev": "./src/generated/*.ts",
+        "default": "./dist/cjs/generated/*.cjs"
+      }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
-  ]
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@payfit/unity-themes": "0.0.0-alpha.12",
+    "@storybook/addon-a11y": "9.0.11",
+    "@storybook/addon-docs": "9.0.11",
+    "@storybook/addon-links": "9.0.11",
+    "@storybook/react-vite": "9.0.11",
+    "@storybook/test-runner": "0.23.0",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.45",
+    "postcss-import": "16.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "storybook": "9.0.11",
+    "svgo": "3.3.2",
+    "tailwindcss": "3.4.10",
+    "tsx": "4.17.0",
+    "vite": "6.3.5"
+  },
+  "dependencies": {
+    "tailwind-variants": "0.2.1"
+  },
+  "peerDependencies": {
+    "@payfit/unity-themes": "0.0.0-alpha.12",
+    "react": "^18",
+    "react-dom": "^18",
+    "svgo": "3.3.2"
+  },
+  "peerDependenciesMeta": {
+    "svgo": {
+      "optional": true
+    }
+  }
 }

package/src/components/illustration/Illustration.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Binoculars from '../../generated/Binoculars'
+import FAQ from '../../generated/FAQ'
+import FAQWithBackground from '../../generated/FAQWithBackground'
+import VisuallyImpaired from '../../generated/VisuallyImpaired'
+import WriteBook from '../../generated/WriteBook'
+import { Illustration } from './Illustration'
+
+function transformIllustrationSource(code: string) {
+  // Find all src props with name values
+  const srcMatches = [
+    ...code.matchAll(/src=\{\{[^}]+name:\s*['"`]([^'"`]+)['"`][^}]+\}\}/g),
+  ]
+
+  if (srcMatches.length === 0) {
+    return code // Return original code if no illustrations found
+  }
+
+  // Extract unique illustration names
+  const illustrationNames = [...new Set(srcMatches.map(match => match[1]))]
+
+  // Create import statements for all unique illustrations
+  const importStatements = illustrationNames
+    .map(
+      name =>
+        `import ${name} from '@payfit/unity-illustrations/assets/${name}';`,
+    )
+    .join('\n')
+
+  // Replace all src prop objects with their corresponding imported variables
+  let modifiedCode = code
+  srcMatches.forEach(match => {
+    const fullMatch = match[0] // The entire src={{...}} part
+    const illustrationName = match[1] // The name value
+    modifiedCode = modifiedCode.replace(fullMatch, `src={${illustrationName}}`)
+  })
+
+  return `${importStatements}\n\n${modifiedCode}`
+}
+
+/**
+ * Displays illustrations from the Unity design system with consistent styling and accessibility.
+ *
+ * The Illustration component handles SVG illustrations and images, providing standardized sizing options,
+ * responsive behavior, and proper accessibility attributes. All illustration assets must be imported
+ * individually from the `@payfit/unity-illustrations` package before use. For example, if you want to use the FAQ illustration, you can import it like this:
+ *
+ * ```tsx
+ * import FAQ from '@payfit/unity-illustrations/assets/FAQ'
+ * ```
+ *
+ * See the [usage page](/docs/introduction-3-usage--docs) for complete examples and best practices.
+ */
+const meta = {
+  title: 'Components/Illustration',
+  component: Illustration,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      source: {
+        transform: (code: string) => transformIllustrationSource(code),
+        language: 'tsx',
+      },
+    },
+  },
+  argTypes: {
+    src: { control: 'select' },
+  },
+} satisfies Meta<typeof Illustration>
+
+export default meta
+
+type Story = StoryObj<typeof Illustration>
+
+export const Primary: Story = {
+  args: {
+    variant: 'picture',
+    src: Binoculars,
+    className: 'uy-size-[150px]',
+  },
+}
+
+/**
+ * You can create responsive illustrations that adapt to different screen sizes by using responsive
+ * Tailwind classes in the `className` prop. Set the `alt` prop to provide accessible descriptions
+ * for screen readers when using the picture variant.
+ */
+export const IllustratedPicture: Story = {
+  args: {
+    variant: 'picture',
+    src: VisuallyImpaired,
+    className: 'uy-size-[50vmin]',
+  },
+}
+
+/**
+ * You can display illustrations as smaller icons by setting the `variant` prop to `"icon"`.
+ * Use the `size` prop to choose from predefined sizes: `"sm"`, `"md"`, or `"lg"`. This is ideal for illustrations that are meant to be used as illustrated icons.
+ */
+export const IllustratedIcon: Story = {
+  args: {
+    variant: 'icon',
+  },
+  render: function Render(args) {
+    return (
+      <div className="uy-grid uy-grid-cols-3 uy-items-center uy-gap-200">
+        <Illustration {...args} variant="icon" size="sm" src={FAQ} />
+        <Illustration {...args} variant="icon" size="md" src={FAQ} />
+        <Illustration {...args} variant="icon" size="lg" src={FAQ} />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="sm"
+          src={FAQWithBackground}
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="md"
+          src={FAQWithBackground}
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="lg"
+          src={FAQWithBackground}
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * You can create responsive layouts where illustrations adapt to different viewport sizes
+ * by combining responsive Tailwind classes with the illustration component (with media and container queries). Use Unity theme
+ * classes to configure how the illustration behaves across breakpoints.
+ */
+export const Responsive: Story = {
+  render: () => {
+    return (
+      <div className="uy-rounded-150 uy-bg-surface-neutral uy-border-border-neutral uy-shadow-floating uy-p-300 uy-flex uy-flex-col uy-gap-200 sm:uy-flex-row uy-max-w-[50vmax]">
+        <Illustration
+          src={WriteBook}
+          variant="picture"
+          className="uy-size-full sm:uy-max-w-1/2 md:uy-max-w-1/4"
+          alt="Write book illustration"
+        />
+        <div className="uy-space-y-200">
+          <h2 className="uy-typography-h2">Title</h2>
+          <p className="uy-typography-body">
+            The image above has a different size depending on the viewport size.
+            Use unity-themes classes to configure how the illustration behaves
+          </p>
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/illustration/Illustration.tsx

@@ -0,0 +1,128 @@
+import { forwardRef } from 'react'
+
+import type { ImgHTMLAttributes } from 'react'
+import type { VariantProps } from 'tailwind-variants'
+
+import type { UnityIllustrationAsset } from '../../generated/illustrationAssets'
+
+import { tv } from 'tailwind-variants'
+
+export const illustratedPicture = tv({
+  base: 'uy-object-contain uy-aspect-auto',
+})
+
+export const illustratedIcon = tv({
+  base: 'uy-object-contain uy-aspect-square',
+  variants: {
+    size: {
+      sm: 'uy-size-[56px]',
+      md: 'uy-size-[72px]',
+      lg: 'uy-size-[96px]',
+    },
+  },
+})
+
+export interface IllustrationPropsBase
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'children'> {
+  /**
+   * The illustration asset to render. Must be imported from @payfit/unity-illustrations
+   */
+  src: UnityIllustrationAsset
+  /** Accessible name for the illustration */
+  alt: string
+  /** Optional description for complex illustrations */
+  description?: string
+  /** Whether this is decorative (hidden from screen readers) */
+  isDecorative?: boolean
+}
+
+export interface IllustratedPictureProps
+  extends IllustrationPropsBase,
+    VariantProps<typeof illustratedPicture> {
+  /**
+   * The illustration variant. It can be a regular picture or an illustrated icon
+   */
+  variant: 'picture'
+}
+
+export interface IllustratedIconProps
+  extends IllustrationPropsBase,
+    VariantProps<typeof illustratedIcon> {
+  /**
+   * The illustration variant. It can be a regular picture or an illustrated icon
+   */
+  variant: 'icon'
+  /**
+   * The size of the illustration. It only applies to illustrated icons
+   */
+  size: VariantProps<typeof illustratedIcon>['size']
+}
+
+export type IllustrationProps = IllustratedPictureProps | IllustratedIconProps
+
+/**
+ * Renders illustrations from the Unity design system with consistent styling and accessibility features.
+ *
+ * The Illustration component provides a standardized way to display SVG illustrations and images
+ * , ensuring consistent sizing, responsive behavior, and accessibility compliance.
+ * @param {IllustrationProps} props - Component props including variant, src, size, and standard HTML attributes
+ * @see {@link IllustrationProps} for all available props
+ * @example
+ * ```tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import FAQ from '@payfit/unity-illustrations/FAQ'
+ *
+ * function Example() {
+ *   return (
+ *     <Illustration
+ *       variant="picture"
+ *       src={FAQ}
+ *       className="uy-size-[150px]"
+ *       alt="FAQ illustration"
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * You must import illustration assets individually from `@payfit/unity-illustrations/[AssetName]` to use with this component.
+ * See the [usage documentation](https://unity-illustrations.payfit.io/?path=/docs/introduction-usage--docs) for complete examples and best practices.
+ */
+export const Illustration = forwardRef<HTMLImageElement, IllustrationProps>(
+  (
+    {
+      src,
+      alt,
+      description,
+      isDecorative: decorative = false,
+      variant,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const clsx =
+      variant === 'picture'
+        ? illustratedPicture({ className })
+        : illustratedIcon({
+            className,
+            size: (props as IllustratedIconProps).size,
+          })
+
+    return (
+      <img
+        ref={ref}
+        src={src.url}
+        alt={decorative ? '' : alt}
+        title={decorative ? undefined : alt}
+        className={clsx}
+        role={decorative ? 'presentation' : 'img'}
+        aria-hidden={decorative}
+        aria-description={description}
+        loading="lazy"
+        {...props}
+      />
+    )
+  },
+)
+
+Illustration.displayName = 'Illustration'