@payfit/unity-illustrations 0.0.0-alpha.9 → 1.1.0

package/dist/esm/generated/illustrationAssets.js

@@ -0,0 +1,241 @@
+const t = {
+  JEC: () => import("./JEC.js"),
+  SetUpTask: () => import("./SetUpTask.js"),
+  AnnualTaxes: () => import("./AnnualTaxes.js"),
+  Contact: () => import("./Contact.js"),
+  DocumentFiling: () => import("./DocumentFiling.js"),
+  ExceedingThreshold: () => import("./ExceedingThreshold.js"),
+  Health: () => import("./Health.js"),
+  HealthInsurance: () => import("./HealthInsurance.js"),
+  LunchVoucher: () => import("./LunchVoucher.js"),
+  Mobility: () => import("./Mobility.js"),
+  OrganismesPayment: () => import("./OrganismesPayment.js"),
+  PaidLeave: () => import("./PaidLeave.js"),
+  ProvidentScheme: () => import("./ProvidentScheme.js"),
+  RemoteWork: () => import("./RemoteWork.js"),
+  Salary: () => import("./Salary.js"),
+  SalaryPayment: () => import("./SalaryPayment.js"),
+  SickLeave: () => import("./SickLeave.js"),
+  WorkingTime: () => import("./WorkingTime.js"),
+  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 = ["JEC", "SetUpTask", "AnnualTaxes", "Contact", "DocumentFiling", "ExceedingThreshold", "Health", "HealthInsurance", "LunchVoucher", "Mobility", "OrganismesPayment", "PaidLeave", "ProvidentScheme", "RemoteWork", "Salary", "SalaryPayment", "SickLeave", "WorkingTime", "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

@@ -0,0 +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,24 +1,57 @@
 {
   "name": "@payfit/unity-illustrations",
-  "version": "0.0.0-alpha.9",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.mjs",
-  "types": "./dist/cjs/index.d.ts",
-  "type": "commonjs",
+  "version": "1.1.0",
+  "module": "./dist/esm/index.js",
+  "type": "module",
   "sideEffects": false,
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/esm/index.d.mts",
-        "default": "./dist/esm/index.mjs"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.js"
+        "hrAppsLocalDev": "./src/index.ts",
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
       }
-    }
+    },
+    "./assets/*": {
+      "import": {
+        "hrAppsLocalDev": "./src/generated/*.ts",
+        "types": "./dist/esm/generated/*.d.ts",
+        "default": "./dist/esm/generated/*.js"
+      }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
-  ]
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "svgo": "3.3.2"
+  },
+  "devDependencies": {
+    "@payfit/code-pushup-tools": "0.0.0-use.local",
+    "@payfit/hr-app-eslint": "0.0.0-use.local",
+    "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
+    "@payfit/unity-themes": "1.1.0",
+    "@payfit/vite-configs": "0.0.0-use.local",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/addon-docs": "9.1.5",
+    "@storybook/addon-links": "9.1.5",
+    "@storybook/react-vite": "9.1.5",
+    "@storybook/test-runner": "0.23.0",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "storybook": "9.1.5",
+    "svgo": "3.3.2",
+    "tailwindcss": "4.1.11",
+    "tsx": "4.17.0",
+    "vite": "6.3.5"
+  },
+  "peerDependencies": {
+    "@payfit/unity-themes": "1.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  }
 }

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

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+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',
+      description:
+        'The illustration asset to render. Must be imported from @payfit/unity-illustrations',
+      table: {
+        type: { summary: 'UnityIllustrationAsset' },
+        category: 'Required',
+      },
+      type: { name: 'other', required: true, value: 'UnityIllustrationAsset' },
+    },
+    variant: {
+      control: 'select',
+      options: ['picture', 'icon'],
+      description:
+        'The illustration variant. It can be a regular picture or an illustrated icon',
+      table: {
+        type: { summary: "'picture' | 'icon'" },
+        category: 'Required',
+      },
+      type: { name: 'enum', required: true, value: ['picture', 'icon'] },
+    },
+    alt: {
+      control: 'text',
+      description:
+        'Accessible name for the illustration. Required when isDecorative is `true`',
+      table: {
+        type: { summary: 'string' },
+        category: 'Accessibility',
+      },
+    },
+    description: {
+      control: 'text',
+      description:
+        'Optional description for complex illustrations. Active only when isDecorative is `true`',
+      table: {
+        type: { summary: 'string' },
+        category: 'Accessibility',
+      },
+    },
+    isDecorative: {
+      control: 'boolean',
+      description:
+        'Whether the illustration is decorative (hidden from screen readers). When `true`, `alt` becomes optional',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Accessibility',
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the illustration. Only applies to icon variant',
+      if: { arg: 'variant', eq: 'icon' },
+      table: {
+        type: { summary: "'sm' | 'md' | 'lg'" },
+        category: 'Icon Variant',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for styling',
+      table: {
+        type: { summary: 'string' },
+        category: 'Styling',
+      },
+    },
+  },
+} 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]',
+    alt: 'Binoculars illustration',
+  },
+}
+
+/**
+ * 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}
+          alt="FAQ icon small"
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="md"
+          src={FAQ}
+          alt="FAQ icon medium"
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="lg"
+          src={FAQ}
+          alt="FAQ icon large"
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="sm"
+          src={FAQWithBackground}
+          alt="FAQ with background icon small"
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="md"
+          src={FAQWithBackground}
+          alt="FAQ with background icon medium"
+        />
+        <Illustration
+          {...args}
+          variant="icon"
+          size="lg"
+          src={FAQWithBackground}
+          alt="FAQ with background icon large"
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * You can make the illustration decorative by setting the `isDecorative` prop to `true`.
+ * When `isDecorative` is `true`, `alt` becomes optional. Screen readers will ignore the illustration and not read the `alt` or the `description` attributes. Use this when the illustration is purely decorative or visual appeal, and does not provide any information.
+ */
+export const IsDecorative: Story = {
+  args: {
+    variant: 'picture',
+    src: VisuallyImpaired,
+    className: 'uy:size-[50vmin]',
+    isDecorative: true,
+  },
+}
+
+/**
+ * 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 uy:sm:flex-row uy:max-w-[50vmax]">
+        <Illustration
+          src={WriteBook}
+          variant="picture"
+          className="uy:size-full uy:sm:max-w-1/2 uy:md: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>
+    )
+  },
+}