@payfit/unity-illustrations 2.46.16 → 2.46.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-illustrations",
-  "version": "2.46.16",
+  "version": "2.46.17",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -66,13 +66,13 @@
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-themes": "2.46.16",
+    "@payfit/unity-themes": "2.46.17",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@payfit/unity-themes": "2.46.16"
+    "@payfit/unity-themes": "2.46.17"
   },
   "keywords": [
     "tanstack-intent"

package/dist/esm/components/illustration/Illustration.d.ts

@@ -1,90 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ImgHTMLAttributes } from 'react';
-import { UnityIllustrationAsset } from '../../generated/illustrationAssets.js';
-export declare const illustratedPicture: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:object-contain uy:aspect-auto", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:object-contain uy:aspect-auto", unknown, unknown, undefined>>;
-export declare const illustratedIcon: import('tailwind-variants').TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "uy:object-contain uy:aspect-square", {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "uy:object-contain uy:aspect-square", unknown, unknown, undefined>>;
-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 declare const Illustration: import('react').ForwardRefExoticComponent<IllustrationProps & import('react').RefAttributes<HTMLImageElement>>;
-export {};

package/dist/esm/components/illustration/Illustration.js

@@ -1,62 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as h, useMemo as x } from "react";
-import { uyTv as u } from "@payfit/unity-themes";
-const p = u({
-  base: "uy:object-contain uy:aspect-auto"
-}), f = u({
-  base: "uy:object-contain uy:aspect-square",
-  variants: {
-    size: {
-      sm: "uy:size-7",
-      md: "uy:size-9",
-      lg: "uy:size-12"
-    }
-  }
-}), g = h(
-  ({
-    src: i,
-    alt: s,
-    isDecorative: t = !1,
-    variant: l,
-    className: o,
-    style: a,
-    ...e
-  }, r) => {
-    const n = l === "picture" ? p({ className: o }) : f({
-      className: o,
-      size: e.size
-    }), m = t ? e.description : void 0, { enhancedStyle: d, enhancedClassName: y } = x(() => "category" in i && "dimensions" in i ? {
-      enhancedStyle: {
-        "--uy-illustration-max-width": `${i.dimensions.width}px`,
-        "--uy-illustration-max-height": `${i.dimensions.height}px`,
-        ...a
-      },
-      enhancedClassName: `${n} uy:max-w-[var(--uy-illustration-max-width)] uy:max-h-[var(--uy-illustration-max-height)] uy:w-full uy:h-auto`.trim()
-    } : {
-      enhancedStyle: a,
-      enhancedClassName: n
-    }, [i, a, n]);
-    return /* @__PURE__ */ c(
-      "img",
-      {
-        ref: r,
-        src: i.url,
-        alt: t ? "" : s,
-        title: t ? void 0 : s,
-        className: y,
-        style: d,
-        role: t ? "presentation" : "img",
-        "aria-hidden": t,
-        "aria-description": m,
-        loading: "lazy",
-        ...e
-      }
-    );
-  }
-);
-g.displayName = "Illustration";
-export {
-  g as Illustration,
-  f as illustratedIcon,
-  p as illustratedPicture
-};

package/dist/esm/components/illustration/figma/IllustratedIcon.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/illustration/figma/IllustratedPictureLarge.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/illustration/figma/IllustratedPictureMedium.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/illustration/figma/IllustratedPictureSmall.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/lazy-illustration/LazyIllustration.d.ts

@@ -1,67 +0,0 @@
-import { UnityIllustrationName } from '../../generated/illustrationAssets.js';
-import { IllustratedIconProps, IllustratedPictureProps } from '../illustration/Illustration.js';
-/**
- * Props for the LazyIllustration component.
- *
- * This type is a union of two possible prop types:
- * 1. Props for the picture variant (omitting 'src' and adding 'name')
- * 2. Props for the icon variant (omitting 'src' and adding 'name')
- * @property {UnityIllustrationName} name - The name of the illustration to load dynamically.
- *   This must be one of the valid illustration names from the Unity illustration library.
- * @property {'picture' | 'icon'} variant - The illustration variant. It can be a regular picture or an illustrated icon.
- * @property {string} alt - Accessible name for the illustration (required when isDecorative is false or undefined).
- * @property {string} [description] - Optional description for complex illustrations.
- * @property {boolean} [isDecorative] - Whether this is decorative (hidden from screen readers).
- * @property {'sm' | 'md' | 'lg'} [size] - The size of the illustration. Required when variant is 'icon'.
- */
-export type LazyIllustrationProps = (Omit<IllustratedPictureProps, 'src'> & {
-    name: UnityIllustrationName;
-}) | (Omit<IllustratedIconProps, 'src'> & {
-    name: UnityIllustrationName;
-});
-/**
- * A component that lazily loads illustrations by name and renders them using the Illustration component.
- *
- * The LazyIllustration component dynamically imports illustrations based on their name using the
- * lazyIllustrationsMap from the generated illustrationAssets file. This allows for code-splitting
- * and on-demand loading of illustrations, which can significantly improve initial load performance.
- * @param {LazyIllustrationProps} props - Component props including name, variant, and standard HTML attributes
- * @see {@link LazyIllustrationProps} for all available props
- * @example
- * ```tsx
- * import { LazyIllustration } from '@payfit/unity-illustrations'
- *
- * function Example() {
- *   return (
- *     <LazyIllustration
- *       variant="picture"
- *       name="FAQ"
- *       className="uy:size-[150px]"
- *       alt="FAQ illustration"
- *     />
- *   )
- * }
- * ```
- * @example
- * ```tsx
- * // Using with icon variant
- * import { LazyIllustration } from '@payfit/unity-illustrations'
- *
- * function IconExample() {
- *   return (
- *     <LazyIllustration
- *       variant="icon"
- *       size="md"
- *       name="Binoculars"
- *       alt="Binoculars icon"
- *     />
- *   )
- * }
- * ```
- * @remarks
- * Unlike the Illustration component, you don't need to import illustration assets individually.
- * Simply provide the name of the illustration you want to use, and LazyIllustration will handle
- * the dynamic import for you. The component returns null during loading, so you may want to
- * provide your own loading state or placeholder.
- */
-export declare const LazyIllustration: import('react').ForwardRefExoticComponent<LazyIllustrationProps & import('react').RefAttributes<HTMLImageElement>>;

package/dist/esm/components/lazy-illustration/LazyIllustration.js

@@ -1,31 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as m, useState as e, useEffect as f } from "react";
-import { lazyIllustrationsMap as I } from "../../generated/illustrationAssets.js";
-import { illustratedPicture as y, illustratedIcon as N, Illustration as z } from "../illustration/Illustration.js";
-const L = m(({ name: a, ...t }, n) => {
-  const [s, c] = e(null), [u, o] = e(!0);
-  if (f(() => {
-    (async () => {
-      try {
-        o(!0);
-        const l = I[a], d = await l();
-        c(d.default);
-      } catch (l) {
-        console.error(`Failed to load illustration "${a}":`, l);
-      } finally {
-        o(!1);
-      }
-    })();
-  }, [a]), u || !s) {
-    const r = t.variant === "picture" ? y({ className: t.className }) : N({
-      className: t.className,
-      size: t.size
-    });
-    return /* @__PURE__ */ i("div", { className: r });
-  }
-  return /* @__PURE__ */ i(z, { ref: n, src: s, ...t });
-});
-L.displayName = "LazyIllustration";
-export {
-  L as LazyIllustration
-};

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedIcon.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureLarge.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureMedium.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureSmall.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/docs/blocks/AnimationLibrary.d.ts

@@ -1,2 +0,0 @@
-declare const AnimationLibrary: () => import("react/jsx-runtime").JSX.Element;
-export default AnimationLibrary;

package/dist/esm/docs/blocks/Cards.d.ts

@@ -1,18 +0,0 @@
-import { default as React } from 'react';
-type CardProps = React.PropsWithChildren;
-export declare const Card: React.FC<CardProps>;
-export declare const CardWithCover: React.FC<CardProps & {
-    coverSrc: string;
-    coverAlt: string;
-}>;
-export declare const CardHeader: React.FC<React.PropsWithChildren>;
-export declare const CardTitle: React.FC<React.PropsWithChildren>;
-export declare const CardContent: React.FC<React.PropsWithChildren>;
-export declare const CardActions: React.FC<React.PropsWithChildren>;
-export declare const Link: React.FC<React.ComponentProps<'a'>>;
-type CardGridProps = {
-    children: React.ReactNode;
-    cols?: number;
-};
-export declare const CardGrid: React.FC<CardGridProps>;
-export {};

package/dist/esm/docs/blocks/IllustrationLibrary.d.ts

@@ -1,4 +0,0 @@
-declare const IllustrationLibrary: ({ filter, }: {
-    filter?: "filled" | "outlined";
-}) => import("react/jsx-runtime").JSX.Element;
-export default IllustrationLibrary;

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AccountingAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'Accounting';
-}>;
-/**
- * Accounting illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import Accounting from '@payfit/unity-illustrations/assets/Accounting'
- *
- * <Illustration
- *   illustration={Accounting}
- *   alt="Accounting illustration"
- *   size="md"
- * />
- * ```
- */
-declare const Accounting: AccountingAsset;
-export default Accounting;

package/dist/esm/generated/Accounting.js

@@ -1,10 +0,0 @@
-import t from "./assets/Accounting.svg.js";
-const a = {
-  type: "svg",
-  url: t,
-  animated: !1,
-  name: "Accounting"
-};
-export {
-  a as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseAnimatedImageAsset } from './types.js';
-export type AccountingAnimationAsset = IllustrationAsset<BaseAnimatedImageAsset & {
-    readonly name: 'AccountingAnimation';
-}>;
-/**
- * AccountingAnimation animated illustration asset (969x852)
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AccountingAnimation from '@payfit/unity-illustrations/assets/AccountingAnimation'
- *
- * <Illustration
- *   variant="picture"
- *   src={AccountingAnimation}
- *   alt="Accounting animation"
- * />
- * ```
- */
-declare const AccountingAnimation: AccountingAnimationAsset;
-export default AccountingAnimation;

package/dist/esm/generated/AccountingAnimation.js

@@ -1,12 +0,0 @@
-import t from "./assets/AccountingAnimation.webp.js";
-const n = {
-  type: "image",
-  url: t,
-  animated: !0,
-  dimensions: { width: 969, height: 852 },
-  category: "animation",
-  name: "AccountingAnimation"
-};
-export {
-  n as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AddEmployeeAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'AddEmployee';
-}>;
-/**
- * AddEmployee illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AddEmployee from '@payfit/unity-illustrations/assets/AddEmployee'
- *
- * <Illustration
- *   illustration={AddEmployee}
- *   alt="AddEmployee illustration"
- *   size="md"
- * />
- * ```
- */
-declare const AddEmployee: AddEmployeeAsset;
-export default AddEmployee;

package/dist/esm/generated/AddEmployee.js

@@ -1,10 +0,0 @@
-import e from "./assets/AddEmployee.svg.js";
-const d = {
-  type: "svg",
-  url: e,
-  animated: !1,
-  name: "AddEmployee"
-};
-export {
-  d as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AdministrativeDocumentAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'AdministrativeDocument';
-}>;
-/**
- * AdministrativeDocument illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AdministrativeDocument from '@payfit/unity-illustrations/assets/AdministrativeDocument'
- *
- * <Illustration
- *   illustration={AdministrativeDocument}
- *   alt="AdministrativeDocument illustration"
- *   size="md"
- * />
- * ```
- */
-declare const AdministrativeDocument: AdministrativeDocumentAsset;
-export default AdministrativeDocument;

package/dist/esm/generated/AdministrativeDocument.js

@@ -1,10 +0,0 @@
-import t from "./assets/AdministrativeDocument.svg.js";
-const a = {
-  type: "svg",
-  url: t,
-  animated: !1,
-  name: "AdministrativeDocument"
-};
-export {
-  a as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AdministrativeDocumentWithBackgroundAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'AdministrativeDocumentWithBackground';
-}>;
-/**
- * AdministrativeDocumentWithBackground illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AdministrativeDocumentWithBackground from '@payfit/unity-illustrations/assets/AdministrativeDocumentWithBackground'
- *
- * <Illustration
- *   illustration={AdministrativeDocumentWithBackground}
- *   alt="AdministrativeDocumentWithBackground illustration"
- *   size="md"
- * />
- * ```
- */
-declare const AdministrativeDocumentWithBackground: AdministrativeDocumentWithBackgroundAsset;
-export default AdministrativeDocumentWithBackground;

package/dist/esm/generated/AdministrativeDocumentWithBackground.js

@@ -1,10 +0,0 @@
-import t from "./assets/AdministrativeDocumentWithBackground.svg.js";
-const e = {
-  type: "svg",
-  url: t,
-  animated: !1,
-  name: "AdministrativeDocumentWithBackground"
-};
-export {
-  e as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AlphabetCubeAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'AlphabetCube';
-}>;
-/**
- * AlphabetCube illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AlphabetCube from '@payfit/unity-illustrations/assets/AlphabetCube'
- *
- * <Illustration
- *   illustration={AlphabetCube}
- *   alt="AlphabetCube illustration"
- *   size="md"
- * />
- * ```
- */
-declare const AlphabetCube: AlphabetCubeAsset;
-export default AlphabetCube;

package/dist/esm/generated/AlphabetCube.js

@@ -1,10 +0,0 @@
-import e from "./assets/AlphabetCube.svg.js";
-const t = {
-  type: "svg",
-  url: e,
-  animated: !1,
-  name: "AlphabetCube"
-};
-export {
-  t as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AnalysisAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'Analysis';
-}>;
-/**
- * Analysis illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import Analysis from '@payfit/unity-illustrations/assets/Analysis'
- *
- * <Illustration
- *   illustration={Analysis}
- *   alt="Analysis illustration"
- *   size="md"
- * />
- * ```
- */
-declare const Analysis: AnalysisAsset;
-export default Analysis;

package/dist/esm/generated/Analysis.js

@@ -1,10 +0,0 @@
-import s from "./assets/Analysis.svg.js";
-const e = {
-  type: "svg",
-  url: s,
-  animated: !1,
-  name: "Analysis"
-};
-export {
-  e as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AnnualTaxesAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'AnnualTaxes';
-}>;
-/**
- * AnnualTaxes illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AnnualTaxes from '@payfit/unity-illustrations/assets/AnnualTaxes'
- *
- * <Illustration
- *   illustration={AnnualTaxes}
- *   alt="AnnualTaxes illustration"
- *   size="md"
- * />
- * ```
- */
-declare const AnnualTaxes: AnnualTaxesAsset;
-export default AnnualTaxes;

package/dist/esm/generated/AnnualTaxes.js

@@ -1,10 +0,0 @@
-import a from "./assets/AnnualTaxes.svg.js";
-const n = {
-  type: "svg",
-  url: a,
-  animated: !1,
-  name: "AnnualTaxes"
-};
-export {
-  n as default
-};

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

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type AutomationInProgressAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'AutomationInProgress';
-}>;
-/**
- * AutomationInProgress illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import AutomationInProgress from '@payfit/unity-illustrations/assets/AutomationInProgress'
- *
- * <Illustration
- *   illustration={AutomationInProgress}
- *   alt="AutomationInProgress illustration"
- *   size="md"
- * />
- * ```
- */
-declare const AutomationInProgress: AutomationInProgressAsset;
-export default AutomationInProgress;