@payfit/unity-illustrations 2.55.21 → 2.55.23

package/src/agent-references/manifest.json

@@ -0,0 +1,16 @@
+{
+  "package": "@payfit/unity-illustrations",
+  "generatedBy": "@payfit/nx-tools:sync-unity-agent-references",
+  "references": [
+    {
+      "id": "illustrations",
+      "title": "Unity illustration catalog",
+      "description": "Exact Unity illustration names grouped by usage category.",
+      "format": "json",
+      "path": "./illustrations-catalog.json",
+      "contentType": "application/json",
+      "useFor": ["illustration lookup", "illustration usage"],
+      "sources": ["assets/**/*"]
+    }
+  ]
+}

package/dist/esm/scripts/agent-references/illustration-reference.d.ts

@@ -1,17 +0,0 @@
-export type IllustrationReferenceComponent = {
-    name: string;
-    type: string;
-    animated: boolean;
-    category?: string;
-};
-export declare const getIllustrationReferenceGroups: (components: IllustrationReferenceComponent[]) => {
-    category: string;
-    title: string;
-    components: IllustrationReferenceComponent[];
-}[];
-export declare const generateIllustrationsReference: (components: IllustrationReferenceComponent[]) => string;
-export declare const generateIllustrationsAgentReferencesReadme: () => string;
-export declare const writeIllustrationAgentReferences: ({ components, outputDir, }: {
-    components: IllustrationReferenceComponent[];
-    outputDir: string;
-}) => void;

package/src/agent-references/README.mdx

@@ -1,17 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Agent References/Illustrations Overview" />
-
-# Unity Illustrations Agent References
-
-{/* AUTO-GENERATED FILE. DO NOT EDIT.
-Generated by unity-illustrations:pre-build.
-Source: Unity illustration asset metadata.
-*/}
-
-
-This directory contains generated Storybook docs references for Unity illustrations. These files are intended for Storybook MCP, MCP indexers, and AI agents.
-
-Storybook includes these MDX files through the shared `../src/**/*.mdx` stories glob, and `@storybook/addon-mcp` exposes docs content to MCP clients.
-
-- [Illustrations](./illustrations.mdx)

package/src/agent-references/illustrations.mdx

@@ -1,74 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Agent References/Illustrations" />
-
-# Illustrations
-
-{/* AUTO-GENERATED FILE. DO NOT EDIT.
-Generated by unity-illustrations:pre-build.
-Source: Unity illustration asset metadata.
-*/}
-
-
-Agent reference. Exact illustration names are grouped by variant to reduce context.
-
-Lazy: `<LazyIllustration name="ExactName" variant="icon|picture" alt="..." />`.
-
-Eager: `import Asset from "@payfit/unity-illustrations/ExactName"`, then `<Illustration src={Asset} variant="icon|picture" alt="..." />`.
-
-Animations use `variant="picture"`.
-
-## Illustrated icons (icon)
-
-- AdministrativeDocument, AdministrativeDocumentWithBackground, AnnualTaxes, BabyBottle, BabyBottleWithBackground, Bell, BellWithBackground, Bicycle
-- BicycleWithBackground, BlankPayslip, BlankPayslipWithBackground, Box, BoxWithBackground, Buoy, BuoyWithBackground, Calculator
-- CalculatorWithBackground, Card, CardWithBackground, CharacterHeadphone, CharacterHeadphoneWithBackground, Checkbox, CheckboxWithBackground, Clock
-- ClockWithBackground, ClosedLock, ClosedLockWithBackground, ComputerDocumentation, ComputerDocumentationWithBackground, Confettis, ConfettisWithBackground, Contact
-- Conversation, ConversationWithBackground, Data, DataWithBackground, Discount, DiscountWithBackground, Document, DocumentError
-- DocumentFiling, DocumentWithBackground, EmailNotification, EmailNotificationWithBackground, EmergencyContact, EmploymentContract, EmploymentContractWithBackground, EmptyDocument
-- EmptyDocumentWithBackground, EmptyState, EmptyStateWithBackground, ESignature, ExceedingThreshold, ExceptionalCompensation, ExceptionalCompensationWithBackground, Expenses
-- FAQ, FAQWithBackground, FieldGlasses, FieldGlassesWithBackground, FreeShare, FreeShareWithBackground, FullCalendar, FullCalendarWithBackground
-- Gear, GearWithBackground, Gift, GiftWithBackground, GoldenRibbon, GoldenRibbonWithBackground, Graph, GraphWithBackground
-- HalfCalendar, HalfCalendarWithBackground, Hammer, HammerWithBackground, HandHello, HandHelloWithBackground, HappyCharacter, HappyCharacterWithBackground
-- Health, HealthInsurance, HolidayVoucher, HolidayVoucherWithBackground, IdentityCard, InformationUpdate, InformationUpdateWithBackground, JEIJEUJEC
-- Kanoon, Kpmg, LegalHelp, LetterBox, LetterBoxWithBackground, LightBulb, LightBulbWithBackground, LittleRocket
-- LittleRocketWithBackground, LunchVoucher, MagnifyingGlass, MagnifyingGlassWithBackground, MealPlate, MealPlateWithBackground, MealVoucher, MealVoucherCard
-- MealVoucherCardWithBackground, MealVoucherWithBackground, Mobility, MoneyLending, MoneyLendingWithBackground, Notes, OfficialLetter, OfficialLetterWithBackground
-- OpenLock, OpenLockWithBackground, OrganismesPayment, PaidLeave, PaymentInformation, Payslip, PayslipCoins, PayslipCoinsWithBackground
-- PayslipWithBackground, Pen, PenWithBackground, People, PeopleWithBackground, Performance, PersonalDetails, PersonHeadphone
-- PersonHeadphoneWithBackground, PiggyBank, PiggyBankCoins, PiggyBankCoinsWithBackground, PiggyBankWithBackground, Plant, PlantWithBackground, ProvidentScheme
-- RemoteWork, Report, ReportWithBackground, Salary, SalaryAdvance, SalaryPayment, SalarySeizure, SalarySeizureWithBackground
-- SandCastle, SandCastleWithBackground, Schedule, ScheduleWithBackground, SettingSlider, SettingSliderWithBackground, SetUpTask, SickLeave
-- SmallPuzzle, SmallPuzzleWithBackground, SmilingCharacter, SmilingCharacterWithBackground, Spreadsheet, SpreadsheetWithBackground, Stethoscope, StethoscopeWithBackground
-- StockOptions, StockOptionsWithBackground, Stopwatch, StopwatchWithBackground, Sunshade, SunshadeWithBackground, TaskToDo, TaskToDoWithBackground
-- Template, TemplateWithBackground, Thumbtack, ThumbtackWithBackground, TimeTracking, TipsJar, TipsJarWithBackground, TokenCoin
-- TokenCoinWithBackground, ValidationWindow, ValidationWindowWithBackground, WorkExpense, WorkExpenseWithBackground, WorkingTime
-
-## Illustrated pictures (picture)
-
-- Accounting, AddEmployee, AlphabetCube, Analysis, AutomationInProgress, BigIdea, Binoculars, Biscuit
-- BiscuitCrumbs, Book, Brainstorming, Calendar, Chat, ChristmasSock, ChristmasSockAndConfettis, Collaboration
-- CollectiveResearch, ComputerMail, ConfettiCannon, ContractSignature, CrossLegged, CupOfCoffee, Dancing, DancingPeople
-- DancingSkier, Dialogue, Discussion, Doctor, DocumentCreation, DocumentScan, DocumentScanning, EmailLogin
-- EmptyStateActivationButton, EmptyStateActivationToggle, EmptyStateDesert, EmptyStateEmptyFolder, EmptyStateIncidentPanel, EmptyStateMaintenance, EmptyStateMoon, EmptyStateResearch
-- EmptyStateToDo, Evaluation, FilingDocuments, Flowchart, Graphic, Hands, HighFive, HighlightBooks
-- Idea, IndicateSomething, JetlangCalculator, Library, Marteler, Mug, Panel, PaperPlane
-- Party, PayfittersWithBadge, PayrollError, Person, PhoneMessage, Planet, PostIt, Progression
-- Promotion, Puzzle, PuzzlePiece, ReadingABook, ReceivingPay, RehireEmployee, Remote, Rocket
-- SafeDepositBox, Sale, SecurityFields, Signature, SittingOnTheSofa, SolveProblem, SpeakerFingertips, SpeakerWelcome
-- SpeakerWithMicrophone, StackOfBook2, StairTreads, TakingNote, Target, TeamBuilding, Telescope, TemplateForm
-- Thumbsup, Timer, ToggleOff, ToggleOn, Trophy, TrophyWon, VisuallyImpaired, VisuallyImpairedWinter
-- WalkingPeople, WinterParty, WorkAtOffice, WorkFromAnywhere, Wrench, WriteBook
-
-## Animations (picture; animated)
-
-- AccountingAnimation, BinocularsAnimation, CardAnimation, ClockAnimation, ConfettisAnimation, DocumentAnimation, HandsAnimation, KpmgAnimation
-- PanelAnimation, PaperPlaneAnimation, PartyAnimation, PayslipFlipAnimation, PeopleAnimation, PiggyBankAnimation, PlantAnimation, ScheduleAnimation
-- ThumbsupAnimation, WinterPartyAnimation
-
-## Other illustrations (picture)
-
-- AccountingWithBackground, AlphabetCubeWithBackground, BinocularsWithBackground, BookWithBackground, CalendarWithBackground, ComputerMailWithBackground, ConfettiCannonWithBackground, DialogueWithBackground
-- DocumentCreationWithBackground, DocumentScanWithBackground, ExpensesWithBackground, FlowchartWithBackground, HighFiveWithBackground, HighlightBooksWithBackground, IncidentPanel, MartelerWithBackground
-- PanelWithBackground, PaperPlaneWithBackground, PayrollErrorWithBackground, PerformanceDiscussion, PerformanceWithBackground, PostItWithBackground, SecurityFieldsWithBackground, SignatureWithBackground
-- StackOfBook2WithBackground, TemplateFormWithBackground, ToggleOffWithBackground, ToggleOnWithBackground, TrophyWithBackground, WriteBookWithBackground

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

@@ -1,362 +0,0 @@
-import { UnityThemeProvider } from '@payfit/unity-themes'
-
-// Animated illustrations - import directly from individual files
-import AccountingAnimation from '../../generated/AccountingAnimation'
-import Binoculars from '../../generated/Binoculars'
-import BinocularsAnimation from '../../generated/BinocularsAnimation'
-import CardAnimation from '../../generated/CardAnimation'
-import FAQ from '../../generated/FAQ'
-import FAQWithBackground from '../../generated/FAQWithBackground'
-import VisuallyImpaired from '../../generated/VisuallyImpaired'
-import WriteBook from '../../generated/WriteBook'
-import { Illustration } from './Illustration'
-import preview from '../../../.storybook/preview'
-
-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 = preview.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',
-      },
-    },
-  },
-})
-
-export const Primary = meta.story({
-  render: () => (
-    <Illustration
-      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 = meta.story({
-  render: () => (
-    <Illustration
-      variant="picture"
-      src={VisuallyImpaired}
-      className="uy:size-[50vmin]"
-      alt="Visually impaired illustration"
-    />
-  ),
-})
-
-/**
- * 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 = meta.story({
-  render: function Render() {
-    return (
-      <div className="uy:grid uy:grid-cols-3 uy:items-center uy:gap-200">
-        <Illustration variant="icon" size="sm" src={FAQ} alt="FAQ icon small" />
-        <Illustration
-          variant="icon"
-          size="md"
-          src={FAQ}
-          alt="FAQ icon medium"
-        />
-        <Illustration variant="icon" size="lg" src={FAQ} alt="FAQ icon large" />
-        <Illustration
-          variant="icon"
-          size="sm"
-          src={FAQWithBackground}
-          alt="FAQ with background icon small"
-        />
-        <Illustration
-          variant="icon"
-          size="md"
-          src={FAQWithBackground}
-          alt="FAQ with background icon medium"
-        />
-        <Illustration
-          variant="icon"
-          size="lg"
-          src={FAQWithBackground}
-          alt="FAQ with background icon large"
-        />
-      </div>
-    )
-  },
-})
-
-/**
- * You can render one logical illustration asset under different Unity themes.
- * The Illustration component reads the active Unity theme and resolves the matching asset URL when a legacy or rebrand variant exists.
- */
-export const ThemeVariants = meta.story({
-  render: () => {
-    return (
-      <div className="uy:flex uy:flex-wrap uy:items-start uy:gap-400">
-        <UnityThemeProvider theme="legacy">
-          <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
-            <Illustration
-              src={FAQ}
-              variant="icon"
-              size="lg"
-              alt="FAQ legacy icon"
-            />
-            <span className="uy:typography-caption uy:text-content-neutral">
-              legacy
-            </span>
-          </div>
-        </UnityThemeProvider>
-        <UnityThemeProvider theme="rebrand">
-          <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
-            <Illustration
-              src={FAQ}
-              variant="icon"
-              size="lg"
-              alt="FAQ rebrand icon"
-            />
-            <span className="uy:typography-caption uy:text-content-neutral">
-              rebrand
-            </span>
-          </div>
-        </UnityThemeProvider>
-        <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
-          <Illustration
-            src={FAQ}
-            variant="icon"
-            size="lg"
-            alt="FAQ brand-aware icon"
-          />
-          <span className="uy:typography-caption uy:text-content-neutral">
-            Brand-aware
-          </span>
-        </div>
-      </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 = meta.story({
-  render: () => (
-    <Illustration
-      src={VisuallyImpaired}
-      variant="picture"
-      isDecorative
-      className="uy:size-[50vmin]"
-    />
-  ),
-})
-
-/**
- * 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 = meta.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>
-    )
-  },
-})
-
-/**
- * Unity illustrations supports animated illustrations in WEBP format. All the animated illustrations have the `Animation` suffix on their name
- * Animated illustrations will grow fluidly depending on its container size but are capped at their original dimensions to prevent oversizing.
- */
-export const AnimatedIllustrations = meta.story({
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  render: () => {
-    return (
-      <div className="uy:space-y-300">
-        <div>
-          <h3 className="uy:typography-h3 uy:mb-200">
-            Large Animation (Fluid)
-          </h3>
-          <div className="uy:border uy:border-dashed uy:border-border-neutral uy:p-200 uy:rounded-100 uy:w-[50dvw]">
-            <Illustration
-              src={AccountingAnimation}
-              variant="picture"
-              alt="Accounting animation showing financial calculations"
-            />
-          </div>
-          <p className="uy:typography-caption uy:text-content-tertiary uy:mt-100">
-            Max dimensions: 969×852px • Scales down responsively
-          </p>
-        </div>
-
-        <div>
-          <h3 className="uy:typography-h3 uy:mb-200">
-            Medium Animation (Fluid)
-          </h3>
-          <div className="uy:border uy:border-dashed uy:border-border-neutral uy:p-200 uy:rounded-100 uy:w-[25dvw]">
-            <Illustration
-              src={BinocularsAnimation}
-              variant="picture"
-              alt="Binoculars animation for search or discovery"
-            />
-          </div>
-          <p className="uy:typography-caption uy:text-content-tertiary uy:mt-100">
-            Max dimensions: 750×750px • Scales down responsively
-          </p>
-        </div>
-        <div>
-          <h3 className="uy:typography-h3 uy:mb-200">
-            Small Animation (Fluid)
-          </h3>
-          <div className="uy:border uy:border-dashed uy:border-border-neutral uy:p-200 uy:rounded-100">
-            <Illustration
-              src={CardAnimation}
-              variant="picture"
-              alt="Card animation for payment or identification"
-            />
-          </div>
-          <p className="uy:typography-caption uy:text-content-tertiary uy:mt-100">
-            Max dimensions: 224×224px • Scales down responsively
-          </p>
-        </div>
-      </div>
-    )
-  },
-})

package/src/components/illustration/Illustration.tsx

@@ -1,169 +0,0 @@
-import { forwardRef, useMemo } from 'react'
-
-import type { VariantProps } from '@payfit/unity-themes'
-import type { ImgHTMLAttributes } from 'react'
-
-import type { UnityIllustrationAsset } from '../../generated/illustrationAssets'
-
-import { useUnityTheme, uyTv } from '@payfit/unity-themes'
-
-export const illustratedPicture = uyTv({
-  base: 'uy:object-contain uy:aspect-auto',
-})
-
-export const illustratedIcon = uyTv({
-  base: 'uy:object-contain uy:aspect-square',
-  variants: {
-    size: {
-      sm: 'uy:size-7',
-      md: 'uy:size-9',
-      lg: 'uy:size-12',
-    },
-  },
-})
-
-interface IllustrationPropsCore extends Omit<
-  ImgHTMLAttributes<HTMLImageElement>,
-  'src' | 'children' | 'alt'
-> {
-  /**
-   * The illustration asset to render. Must be imported from @payfit/unity-illustrations
-   */
-  src: UnityIllustrationAsset
-}
-
-interface NonDecorativeIllustrationProps extends IllustrationPropsCore {
-  /** Whether this is decorative (hidden from screen readers) */
-  isDecorative?: false | undefined
-  /** Accessible name for the illustration - required when not decorative */
-  alt: string
-  /** Optional description for complex illustrations */
-  description?: string
-}
-
-interface DecorativeIllustrationProps extends IllustrationPropsCore {
-  /** Whether this is decorative (hidden from screen readers) */
-  isDecorative: true
-  /** Accessible name for the illustration - optional when decorative */
-  alt?: string
-}
-
-export type IllustrationPropsBase =
-  | NonDecorativeIllustrationProps
-  | DecorativeIllustrationProps
-
-export type IllustratedPictureProps = IllustrationPropsBase &
-  VariantProps<typeof illustratedPicture> & {
-    /**
-     * The illustration variant. It can be a regular picture or an illustrated icon
-     */
-    variant: 'picture'
-  }
-
-export type IllustratedIconProps = 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,
-      isDecorative: decorative = false,
-      variant,
-      className,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const { theme } = useUnityTheme()
-    const resolvedUrl = src.urls?.[theme] ?? src.url
-    const clsx =
-      variant === 'picture'
-        ? illustratedPicture({ className })
-        : illustratedIcon({
-            className,
-            size: (props as IllustratedIconProps).size,
-          })
-
-    const description = decorative
-      ? (props as NonDecorativeIllustrationProps).description
-      : undefined
-
-    // Apply max dimensions for animated assets and generate CSS custom properties
-    const { enhancedStyle, enhancedClassName } = useMemo(() => {
-      if ('category' in src && 'dimensions' in src) {
-        const animationClasses =
-          'uy:max-w-[var(--uy-illustration-max-width)] uy:max-h-[var(--uy-illustration-max-height)] uy:w-full uy:h-auto'
-        return {
-          enhancedStyle: {
-            '--uy-illustration-max-width': `${src.dimensions.width}px`,
-            '--uy-illustration-max-height': `${src.dimensions.height}px`,
-            ...style,
-          },
-          enhancedClassName: `${clsx} ${animationClasses}`.trim(),
-        }
-      }
-      return {
-        enhancedStyle: style,
-        enhancedClassName: clsx,
-      }
-    }, [src, style, clsx])
-
-    return (
-      <img
-        ref={ref}
-        src={resolvedUrl}
-        alt={decorative ? '' : alt}
-        title={decorative ? undefined : alt}
-        className={enhancedClassName}
-        style={enhancedStyle}
-        role={decorative ? 'presentation' : 'img'}
-        aria-hidden={decorative}
-        aria-description={description}
-        loading="lazy"
-        {...props}
-      />
-    )
-  },
-)
-
-Illustration.displayName = 'Illustration'