@semcore/illustration 2.29.0 → 2.30.0-prerelease.0

package/Warning/index.js

@@ -26,59 +26,65 @@ module.exports = __toCommonJS(stdin_exports);
 var import_react = __toESM(require("react"));
 var import_core = require("@semcore/core");
 var import_flex_box = require("@semcore/flex-box");
-const Warning = ({ fill = "none", width = "80", height = "80", viewBox = "0 0 80 80", ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(import_flex_box.Box, {
-  ref,
-  width,
-  height,
-  viewBox,
-  fill,
-  tag: "svg",
-  ...props
-}, /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M40.51 79.997C62.49 79.714 79.977 61.39 79.977 39.4V.99a.994.994 0 0 0-.99-.99H54.306a.994.994 0 0 0-.99.99v2.753H27.638a.994.994 0 0 0-.99.99v35.265H.991A.985.985 0 0 0 0 41.01c.544 21.806 18.52 39.27 40.52 38.987",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M66.16 57.374s.087-.054.12-.087l6.521-4.323-3.147-1.697-3.147.756-8.334-31.681a5.73 5.73 0 0 0-6.707-4.15l-39.74 8.063-1.4-3.124-3.428 5.88a6.507 6.507 0 0 0-.217.368v.021a5.618 5.618 0 0 0-.456 4.248l10.472 36.654a2.599 2.599 0 0 0 3.19 1.794l45.459-12.344c.271-.076.52-.205.749-.346l.054-.032h.01Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M72.02 53.31 24.152 66.313a2.747 2.747 0 0 1-3.364-1.892L9.752 25.822c-.966-3.372 1.16-6.853 4.612-7.556l43.05-8.744c3.146-.638 6.25 1.286 7.053 4.377L73.95 49.98a2.729 2.729 0 0 1-1.931 3.33Z",
-  fill: "#fff",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M65.682 18.57 11.076 30.512l-1.346-4.69c-.966-3.373 1.161-6.854 4.612-7.556l43.05-8.734c3.146-.638 6.25 1.286 7.053 4.378l1.226 4.669.011-.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M18.433 23.174a1.873 1.873 0 0 1-1.421 2.367c-1.097.238-2.236-.454-2.54-1.524a1.868 1.868 0 0 1 1.433-2.367c1.096-.227 2.224.465 2.528 1.535v-.011Z",
-  fill: "#fff"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M25.443 21.693c.293 1.06-.325 2.108-1.4 2.335-1.074.227-2.192-.454-2.485-1.524-.293-1.07.326-2.12 1.411-2.346 1.085-.227 2.181.465 2.474 1.524v.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M11.097 30.6s.326-3.157.608-6.389l-1.378-3.08-3.43 5.88a6.507 6.507 0 0 0-.216.367v.022a5.619 5.619 0 0 0-.456 4.248l1.4 4.908 3.472-5.967v.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "m40.481 27.976-7.447 28.427a.98.98 0 0 0 1.22 1.197l27.762-7.62c.73-.197.97-1.1.447-1.645L42.147 27.53c-.533-.545-1.47-.305-1.666.435v.01Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "m43.443 35.477 2.373 8.645",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: "2"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M48.353 48.346c.185.675-.24 1.372-.947 1.557-.708.185-1.438-.196-1.623-.871-.185-.675.24-1.372.947-1.557.708-.185 1.427.207 1.612.871h.01Z",
-  fill: "#6C6E79"
-}));
+var import_useColorResolver = require("@semcore/utils/lib/use/useColorResolver");
+const Warning = ({ fill = "none", width = "80", height = "80", viewBox = "0 0 80 80", primaryColor = "#E0E1E9", secondaryColor = "#6C6E79", ...props }, ref) => {
+  const colorResolver = (0, import_useColorResolver.useColorResolver)();
+  const resolvedPrimaryColor = colorResolver(primaryColor);
+  const resolvedSecondaryColor = colorResolver(secondaryColor);
+  return /* @__PURE__ */ import_react.default.createElement(import_flex_box.Box, {
+    ref,
+    width,
+    height,
+    viewBox,
+    fill,
+    tag: "svg",
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M40.51 79.997C62.49 79.714 79.977 61.39 79.977 39.4V.99a.994.994 0 0 0-.99-.99H54.306a.994.994 0 0 0-.99.99v2.753H27.638a.994.994 0 0 0-.99.99v35.265H.991A.985.985 0 0 0 0 41.01c.544 21.806 18.52 39.27 40.52 38.987",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M66.16 57.374s.087-.054.12-.087l6.521-4.323-3.147-1.697-3.147.756-8.334-31.681a5.73 5.73 0 0 0-6.707-4.15l-39.74 8.063-1.4-3.124-3.428 5.88a6.507 6.507 0 0 0-.217.368v.021a5.618 5.618 0 0 0-.456 4.248l10.472 36.654a2.599 2.599 0 0 0 3.19 1.794l45.459-12.344c.271-.076.52-.205.749-.346l.054-.032h.01Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M72.02 53.31 24.152 66.313a2.747 2.747 0 0 1-3.364-1.892L9.752 25.822c-.966-3.372 1.16-6.853 4.612-7.556l43.05-8.744c3.146-.638 6.25 1.286 7.053 4.377L73.95 49.98a2.729 2.729 0 0 1-1.931 3.33Z",
+    fill: "#fff",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M65.682 18.57 11.076 30.512l-1.346-4.69c-.966-3.373 1.161-6.854 4.612-7.556l43.05-8.734c3.146-.638 6.25 1.286 7.053 4.378l1.226 4.669.011-.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M18.433 23.174a1.873 1.873 0 0 1-1.421 2.367c-1.097.238-2.236-.454-2.54-1.524a1.868 1.868 0 0 1 1.433-2.367c1.096-.227 2.224.465 2.528 1.535v-.011Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M25.443 21.693c.293 1.06-.325 2.108-1.4 2.335-1.074.227-2.192-.454-2.485-1.524-.293-1.07.326-2.12 1.411-2.346 1.085-.227 2.181.465 2.474 1.524v.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M11.097 30.6s.326-3.157.608-6.389l-1.378-3.08-3.43 5.88a6.507 6.507 0 0 0-.216.367v.022a5.619 5.619 0 0 0-.456 4.248l1.4 4.908 3.472-5.967v.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "m40.481 27.976-7.447 28.427a.98.98 0 0 0 1.22 1.197l27.762-7.62c.73-.197.97-1.1.447-1.645L42.147 27.53c-.533-.545-1.47-.305-1.666.435v.01Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "m43.443 35.477 2.373 8.645",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M48.353 48.346c.185.675-.24 1.372-.947 1.557-.708.185-1.438-.196-1.623-.871-.185-.675.24-1.372.947-1.557.708-.185 1.427.207 1.612.871h.01Z",
+    fill: resolvedSecondaryColor
+  }));
+};
 Warning.displayName = "Warning";
 var stdin_default = (0, import_core.createBaseComponent)(Warning);

package/Warning/index.mjs

@@ -1,60 +1,66 @@
 import React from "react";
 import { createBaseComponent } from "@semcore/core";
 import { Box } from "@semcore/flex-box";
-const Warning = ({ fill = "none", width = "80", height = "80", viewBox = "0 0 80 80", ...props }, ref) => /* @__PURE__ */ React.createElement(Box, {
-  ref,
-  width,
-  height,
-  viewBox,
-  fill,
-  tag: "svg",
-  ...props
-}, /* @__PURE__ */ React.createElement("path", {
-  d: "M40.51 79.997C62.49 79.714 79.977 61.39 79.977 39.4V.99a.994.994 0 0 0-.99-.99H54.306a.994.994 0 0 0-.99.99v2.753H27.638a.994.994 0 0 0-.99.99v35.265H.991A.985.985 0 0 0 0 41.01c.544 21.806 18.52 39.27 40.52 38.987",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M66.16 57.374s.087-.054.12-.087l6.521-4.323-3.147-1.697-3.147.756-8.334-31.681a5.73 5.73 0 0 0-6.707-4.15l-39.74 8.063-1.4-3.124-3.428 5.88a6.507 6.507 0 0 0-.217.368v.021a5.618 5.618 0 0 0-.456 4.248l10.472 36.654a2.599 2.599 0 0 0 3.19 1.794l45.459-12.344c.271-.076.52-.205.749-.346l.054-.032h.01Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M72.02 53.31 24.152 66.313a2.747 2.747 0 0 1-3.364-1.892L9.752 25.822c-.966-3.372 1.16-6.853 4.612-7.556l43.05-8.744c3.146-.638 6.25 1.286 7.053 4.377L73.95 49.98a2.729 2.729 0 0 1-1.931 3.33Z",
-  fill: "#fff",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M65.682 18.57 11.076 30.512l-1.346-4.69c-.966-3.373 1.161-6.854 4.612-7.556l43.05-8.734c3.146-.638 6.25 1.286 7.053 4.378l1.226 4.669.011-.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M18.433 23.174a1.873 1.873 0 0 1-1.421 2.367c-1.097.238-2.236-.454-2.54-1.524a1.868 1.868 0 0 1 1.433-2.367c1.096-.227 2.224.465 2.528 1.535v-.011Z",
-  fill: "#fff"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M25.443 21.693c.293 1.06-.325 2.108-1.4 2.335-1.074.227-2.192-.454-2.485-1.524-.293-1.07.326-2.12 1.411-2.346 1.085-.227 2.181.465 2.474 1.524v.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M11.097 30.6s.326-3.157.608-6.389l-1.378-3.08-3.43 5.88a6.507 6.507 0 0 0-.216.367v.022a5.619 5.619 0 0 0-.456 4.248l1.4 4.908 3.472-5.967v.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "m40.481 27.976-7.447 28.427a.98.98 0 0 0 1.22 1.197l27.762-7.62c.73-.197.97-1.1.447-1.645L42.147 27.53c-.533-.545-1.47-.305-1.666.435v.01Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "m43.443 35.477 2.373 8.645",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: "2"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M48.353 48.346c.185.675-.24 1.372-.947 1.557-.708.185-1.438-.196-1.623-.871-.185-.675.24-1.372.947-1.557.708-.185 1.427.207 1.612.871h.01Z",
-  fill: "#6C6E79"
-}));
+import { useColorResolver } from "@semcore/utils/lib/use/useColorResolver";
+const Warning = ({ fill = "none", width = "80", height = "80", viewBox = "0 0 80 80", primaryColor = "#E0E1E9", secondaryColor = "#6C6E79", ...props }, ref) => {
+  const colorResolver = useColorResolver();
+  const resolvedPrimaryColor = colorResolver(primaryColor);
+  const resolvedSecondaryColor = colorResolver(secondaryColor);
+  return /* @__PURE__ */ React.createElement(Box, {
+    ref,
+    width,
+    height,
+    viewBox,
+    fill,
+    tag: "svg",
+    ...props
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M40.51 79.997C62.49 79.714 79.977 61.39 79.977 39.4V.99a.994.994 0 0 0-.99-.99H54.306a.994.994 0 0 0-.99.99v2.753H27.638a.994.994 0 0 0-.99.99v35.265H.991A.985.985 0 0 0 0 41.01c.544 21.806 18.52 39.27 40.52 38.987",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M66.16 57.374s.087-.054.12-.087l6.521-4.323-3.147-1.697-3.147.756-8.334-31.681a5.73 5.73 0 0 0-6.707-4.15l-39.74 8.063-1.4-3.124-3.428 5.88a6.507 6.507 0 0 0-.217.368v.021a5.618 5.618 0 0 0-.456 4.248l10.472 36.654a2.599 2.599 0 0 0 3.19 1.794l45.459-12.344c.271-.076.52-.205.749-.346l.054-.032h.01Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M72.02 53.31 24.152 66.313a2.747 2.747 0 0 1-3.364-1.892L9.752 25.822c-.966-3.372 1.16-6.853 4.612-7.556l43.05-8.744c3.146-.638 6.25 1.286 7.053 4.377L73.95 49.98a2.729 2.729 0 0 1-1.931 3.33Z",
+    fill: "#fff",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M65.682 18.57 11.076 30.512l-1.346-4.69c-.966-3.373 1.161-6.854 4.612-7.556l43.05-8.734c3.146-.638 6.25 1.286 7.053 4.378l1.226 4.669.011-.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M18.433 23.174a1.873 1.873 0 0 1-1.421 2.367c-1.097.238-2.236-.454-2.54-1.524a1.868 1.868 0 0 1 1.433-2.367c1.096-.227 2.224.465 2.528 1.535v-.011Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M25.443 21.693c.293 1.06-.325 2.108-1.4 2.335-1.074.227-2.192-.454-2.485-1.524-.293-1.07.326-2.12 1.411-2.346 1.085-.227 2.181.465 2.474 1.524v.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M11.097 30.6s.326-3.157.608-6.389l-1.378-3.08-3.43 5.88a6.507 6.507 0 0 0-.216.367v.022a5.619 5.619 0 0 0-.456 4.248l1.4 4.908 3.472-5.967v.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "m40.481 27.976-7.447 28.427a.98.98 0 0 0 1.22 1.197l27.762-7.62c.73-.197.97-1.1.447-1.645L42.147 27.53c-.533-.545-1.47-.305-1.666.435v.01Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "m43.443 35.477 2.373 8.645",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M48.353 48.346c.185.675-.24 1.372-.947 1.557-.708.185-1.438-.196-1.623-.871-.185-.675.24-1.372.947-1.557.708-.185 1.427.207 1.612.871h.01Z",
+    fill: resolvedSecondaryColor
+  }));
+};
 Warning.displayName = "Warning";
 var stdin_default = createBaseComponent(Warning);
 export {

package/lib/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getIllustrationPath = void 0;
-var version = "2.29.0";
+var version = "2.30.0";
 
 /**
  * Formats string from `access_denied` or `access-denied` to `AccessDenied`

package/lib/es6/index.js

@@ -1,4 +1,4 @@
-var version = "2.29.0";
+var version = "2.30.0";
 
 /**
  * Formats string from `access_denied` or `access-denied` to `AccessDenied`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/illustration",
   "description": "Semrush Illustration Component",
-  "version": "2.29.0",
+  "version": "2.30.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -10,10 +10,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@semcore/flex-box": "5.29.0"
+    "@semcore/flex-box": "5.30.0-prerelease.0",
+    "colorjs.io": "0.4.3"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.28.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },

package/transform.ts

@@ -3,6 +3,8 @@ import { resolve as resolvePath } from 'path';
 import svgToJsx from 'svg-to-jsx';
 import { Window } from 'happy-dom';
 import esbuild from 'esbuild';
+import ColorJSIO from 'colorjs.io';
+const Color = ColorJSIO as any;
 
 const illustrations = await fs.readdir('svg');
 
@@ -28,6 +30,37 @@ await Promise.all(
       document.getElementById(oldId).setAttribute('id', newId);
       idReplacements[oldId] = newId;
     }
+    let illustrationPrimaryColor: undefined | string;
+    let illustrationSecondaryColor: undefined | string;
+    let secondaryColorDarkness = Infinity;
+    const traverseSvgChildren = (element: Element) => {
+      if (element.tagName === 'MASK') return;
+      for (let i = 0; i < element.children.length; i++) {
+        const child = element.children[i];
+        traverseSvgChildren(child);
+      }
+      const color = element.getAttribute('fill') || element.getAttribute('stroke');
+      if (color === 'none' || !color) return;
+      if (String(color).toUpperCase() !== '#E0E1E9') {
+        const saturation = new Color(color).to('hsl').coords[1];
+        if (saturation < 20) {
+          const darkness = new Color(color).to('hsl').coords[2];
+          if (darkness < secondaryColorDarkness) {
+            illustrationSecondaryColor = color;
+            secondaryColorDarkness = darkness;
+          }
+          return;
+        }
+      }
+      if (illustrationPrimaryColor === undefined) {
+        illustrationPrimaryColor = color;
+      } else if (illustrationPrimaryColor !== color) {
+        throw new Error(
+          `Illustration ${illustration} has multiple primary colors: ${illustrationPrimaryColor} and ${color}`,
+        );
+      }
+    };
+    traverseSvgChildren(document.querySelector('svg') as any);
 
     const {
       fill = 'none',
@@ -46,22 +79,51 @@ await Promise.all(
       }
     }
 
+    const prerenderLines: string[] = [];
+    const props = [
+      `fill = '${fill}'`,
+      `width = '${width}'`,
+      `height = '${height}'`,
+      `viewBox = '${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}'`,
+    ];
+    if (illustrationPrimaryColor || illustrationSecondaryColor) {
+      prerenderLines.push('  const colorResolver = useColorResolver();');
+    }
+    if (illustrationPrimaryColor) {
+      while (jsx.includes(`"${illustrationPrimaryColor}"`)) {
+        jsx = jsx.replace(`"${illustrationPrimaryColor}"`, '{resolvedPrimaryColor}');
+      }
+      props.push(`primaryColor = '${illustrationPrimaryColor}'`);
+      prerenderLines.push('  const resolvedPrimaryColor = colorResolver(primaryColor);');
+    }
+    if (illustrationSecondaryColor) {
+      while (jsx.includes(`"${illustrationSecondaryColor}"`)) {
+        jsx = jsx.replace(`"${illustrationSecondaryColor}"`, '{resolvedSecondaryColor}');
+      }
+      props.push(`secondaryColor = '${illustrationSecondaryColor}'`);
+      prerenderLines.push('  const resolvedSecondaryColor = colorResolver(secondaryColor);');
+    }
+
     const component = `
 import React from 'react';
 import { createBaseComponent } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
+import { useColorResolver } from '@semcore/utils/lib/use/useColorResolver';
 
-const ${illustration} = ({fill = '${fill}', width = '${width}', height = '${height}', viewBox = '${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}', ...props}, ref) => (
-  <Box 
-    ref={ref}
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    fill={fill}
-    tag="svg"
-    {...props}
-  >${jsx}</Box>
-);
+const ${illustration} = ({${props.join(', ')}, ...props}, ref) => {
+${prerenderLines.join('\n')}
+  return (
+    <Box 
+      ref={ref}
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill={fill}
+      tag="svg"
+      {...props}
+    >${jsx}</Box>
+  );
+}
 
 ${illustration}.displayName = '${illustration}'
 
@@ -69,13 +131,43 @@ export default createBaseComponent(${illustration})
     `;
 
     const typesDeclaration = `
-import { Box } from '@semcore/flex-box';
-declare const _default: typeof Box;
-export default _default;    
+import { BoxProps } from '@semcore/flex-box';
+import { Intergalactic } from '@semcore/core';
+
+type IllustrationProps = BoxProps & {
+    /**
+     * Main color of the illustration
+     **/
+    primaryColor?: string;
+    /**
+     * Secondary color of the illustration
+     **/
+    secondaryColor?: string;
+    /**
+     * Changes background fill of the illustration
+     **/
+    fill?: string;
+    /**
+     * Width of the illustration
+     **/
+    width?: string | number;
+    /**
+     * Height of the illustration
+     **/
+    height?: string | number;
+}
+declare const Illustration: Intergalactic.Component<'svg', IllustrationProps>;
+export default Illustration;    
 `;
 
-    const { code: cjs } = await esbuild.transform(component, { format: 'cjs', loader: 'tsx' });
-    const { code: esm } = await esbuild.transform(component, { format: 'esm', loader: 'tsx' });
+    const { code: cjs } = await esbuild.transform(component, {
+      format: 'cjs',
+      loader: 'tsx',
+    });
+    const { code: esm } = await esbuild.transform(component, {
+      format: 'esm',
+      loader: 'tsx',
+    });
 
     try {
       await fs.access(illustration);