@payfit/unity-illustrations 1.1.0 → 1.2.0

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

@@ -1,9 +1,9 @@
 import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { uyTv as o } from "@payfit/unity-themes";
-const y = o({
+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"
-}), d = o({
+}), f = u({
   base: "uy:object-contain uy:aspect-square",
   variants: {
     size: {
@@ -12,39 +12,51 @@ const y = o({
       lg: "uy:size-12"
     }
   }
-}), p = m(
+}), g = h(
   ({
-    src: r,
+    src: i,
     alt: s,
-    isDecorative: i = !1,
-    variant: a,
-    className: e,
-    ...t
-  }, n) => {
-    const u = a === "picture" ? y({ className: e }) : d({
-      className: e,
-      size: t.size
-    }), l = i ? t.description : void 0;
+    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: n,
-        src: r.url,
-        alt: i ? "" : s,
-        title: i ? void 0 : s,
-        className: u,
-        role: i ? "presentation" : "img",
-        "aria-hidden": i,
-        "aria-description": l,
+        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",
-        ...t
+        ...e
       }
     );
   }
 );
-p.displayName = "Illustration";
+g.displayName = "Illustration";
 export {
-  p as Illustration,
-  d as illustratedIcon,
-  y as illustratedPicture
+  g as Illustration,
+  f as illustratedIcon,
+  p as illustratedPicture
 };

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

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

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

@@ -0,0 +1,20 @@
+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/AccountingAnimation'
+ *
+ * <Illustration
+ *   variant="picture"
+ *   src={AccountingAnimation}
+ *   alt="Accounting animation"
+ * />
+ * ```
+ */
+declare const AccountingAnimation: AccountingAnimationAsset;
+export default AccountingAnimation;

package/dist/esm/generated/AccountingAnimation.js

@@ -0,0 +1,12 @@
+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/BinocularsAnimation.d.ts

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

package/dist/esm/generated/BinocularsAnimation.js

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

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

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

package/dist/esm/generated/BlankPayslip.js

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

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

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

package/dist/esm/generated/CardAnimation.js

@@ -0,0 +1,12 @@
+import a from "./assets/CardAnimation.webp.js";
+const i = {
+  type: "image",
+  url: a,
+  animated: !0,
+  dimensions: { width: 224, height: 224 },
+  category: "animation",
+  name: "CardAnimation"
+};
+export {
+  i as default
+};

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

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

package/dist/esm/generated/ClockAnimation.js

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

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

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

package/dist/esm/generated/ConfettisAnimation.js

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

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

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

package/dist/esm/generated/DocumentAnimation.js

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

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

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

package/dist/esm/generated/EmptyState.js

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

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

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

package/dist/esm/generated/ExceptionalCompensation.js

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

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

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

package/dist/esm/generated/FreeShare.js

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

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

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

package/dist/esm/generated/FullCalendar.js

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

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

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

package/dist/esm/generated/Gift.js

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

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

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

package/dist/esm/generated/HalfCalendar.js

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

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

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

package/dist/esm/generated/HandsAnimation.js

@@ -0,0 +1,12 @@
+import a from "./assets/HandsAnimation.webp.js";
+const i = {
+  type: "image",
+  url: a,
+  animated: !0,
+  dimensions: { width: 750, height: 750 },
+  category: "animation",
+  name: "HandsAnimation"
+};
+export {
+  i as default
+};

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

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

package/dist/esm/generated/HolidayVoucher.js

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

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

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

package/dist/esm/generated/KpmgAnimation.js

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

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

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