@semcore/illustration 2.29.0 → 2.30.0-prerelease.0

package/ScatterPlotChart/index.mjs

@@ -1,77 +1,83 @@
 import React from "react";
 import { createBaseComponent } from "@semcore/core";
 import { Box } from "@semcore/flex-box";
-const ScatterPlotChart = ({ 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: "M5.233 57.654V67.2c0 .45.18.9.54 1.17l5.855 5.855c.36.36.72.54 1.171.54h9.547A38.959 38.959 0 0 0 40 79c6.395 0 12.34-1.531 17.654-4.233H67.2c.45 0 .9-.18 1.17-.54l5.855-5.855c.36-.36.54-.72.54-1.171v-9.547A38.96 38.96 0 0 0 79 40a38.68 38.68 0 0 0-4.233-17.654V12.8c0-.45-.18-.9-.54-1.17l-5.855-5.855c-.36-.36-.72-.54-1.171-.54h-9.547A38.959 38.959 0 0 0 40 1a38.678 38.678 0 0 0-17.654 4.233H12.8c-.45 0-.9.18-1.17.54l-5.855 5.855c-.36.36-.54.72-.54 1.171v9.547A38.959 38.959 0 0 0 1 40c0 6.395 1.531 12.34 4.233 17.654Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M65.925 57.617s.086-.054.119-.086l6.495-4.324-3.134-1.696-3.134.756-8.3-31.677a5.705 5.705 0 0 0-6.68-4.15l-39.588 8.073-1.394-3.123-3.415 5.88a6.504 6.504 0 0 0-.216.367v.021a5.637 5.637 0 0 0-.454 4.248l10.44 36.648a2.587 2.587 0 0 0 3.177 1.794l45.273-12.342a2.94 2.94 0 0 0 .746-.346l.054-.032.01-.011Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M71.76 53.553 24.086 66.555a2.734 2.734 0 0 1-3.35-1.892L9.745 26.07c-.961-3.372 1.157-6.852 4.594-7.555l42.873-8.743c3.134-.638 6.225 1.286 7.025 4.377l9.446 36.075a2.73 2.73 0 0 1-1.924 3.33Z",
-  fill: "#fff"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M65.449 18.818 11.065 30.76l-1.34-4.69c-.962-3.372 1.156-6.852 4.593-7.555l42.885-8.743c3.134-.638 6.225 1.286 7.024 4.377l1.222 4.669Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M18.394 23.427a1.873 1.873 0 0 1-1.416 2.367c-1.08.238-2.226-.454-2.529-1.524a1.868 1.868 0 0 1 1.427-2.366c1.092-.227 2.216.464 2.518 1.534v-.01Z",
-  fill: "#fff"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M25.372 21.958c.291 1.059-.325 2.107-1.395 2.334-1.07.227-2.183-.454-2.474-1.524-.292-1.07.324-2.118 1.404-2.345 1.081-.227 2.173.465 2.465 1.524v.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M11.087 30.862s.324-3.156.605-6.387l-1.373-3.08-3.415 5.879a6.509 6.509 0 0 0-.216.367v.022a5.638 5.638 0 0 0-.454 4.247l1.394 4.907 3.459-5.966v.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M71.76 53.553 24.086 66.555a2.734 2.734 0 0 1-3.35-1.892L9.745 26.07c-.961-3.372 1.157-6.852 4.594-7.555l42.873-8.743c3.134-.638 6.225 1.286 7.025 4.377l9.446 36.075a2.73 2.73 0 0 1-1.924 3.33Z",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M66.66 50.627 27.87 61.013l-7.792-27.7",
-  stroke: "#6C6E79",
-  strokeMiterlimit: "10",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M31.57 38.904c.389 1.415-.627 2.896-2.291 3.307-1.665.41-3.35-.411-3.75-1.849-.4-1.437.637-2.918 2.312-3.317 1.665-.4 3.329.432 3.718 1.858h.01ZM61.48 35.131c.65-1.405.844-2.993.422-4.55-1.037-3.912-5.436-6.268-9.867-5.252a8.82 8.82 0 0 0-1.88.67l-.4-.303-2.14 2.162c-1.665 1.783-2.41 4.204-1.762 6.592 1.08 3.978 5.588 6.29 10.019 5.177a8.746 8.746 0 0 0 3.772-2l2.215-2.182-.367-.303-.011-.01ZM49.262 49.959l-.52-.367a4.875 4.875 0 0 0 .077-2.756c-.79-2.886-4.107-4.561-7.436-3.729a6.89 6.89 0 0 0-1.178.41l-.357-.248-1.707 1.697c-1.297 1.35-1.892 3.188-1.405 4.982.81 2.918 4.182 4.572 7.522 3.696a6.737 6.737 0 0 0 2.929-1.61l2.075-2.064v-.011Z",
-  fill: "#6C6E79",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M63.785 28.697c1.038 3.902-1.653 7.944-6.041 9.035-4.442 1.114-8.949-1.2-10.019-5.176-1.07-3.977 1.708-8.074 6.193-9.111 4.431-1.027 8.83 1.34 9.867 5.252Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M50.716 44.93c.79 2.886-1.243 5.923-4.56 6.788-3.34.875-6.723-.767-7.523-3.696-.8-2.929 1.286-5.987 4.648-6.83 3.34-.833 6.657.843 7.435 3.728v.01Z",
-  fill: "#fff",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "m43.006 41.254-4.35 6.309M47.986 41.73l-6.474 9.446M50.768 45.41l-4.181 6.095",
-  stroke: "#6C6E79",
-  strokeMiterlimit: "10",
-  strokeWidth: ".7"
-}));
+import { useColorResolver } from "@semcore/utils/lib/use/useColorResolver";
+const ScatterPlotChart = ({ 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: "M5.233 57.654V67.2c0 .45.18.9.54 1.17l5.855 5.855c.36.36.72.54 1.171.54h9.547A38.959 38.959 0 0 0 40 79c6.395 0 12.34-1.531 17.654-4.233H67.2c.45 0 .9-.18 1.17-.54l5.855-5.855c.36-.36.54-.72.54-1.171v-9.547A38.96 38.96 0 0 0 79 40a38.68 38.68 0 0 0-4.233-17.654V12.8c0-.45-.18-.9-.54-1.17l-5.855-5.855c-.36-.36-.72-.54-1.171-.54h-9.547A38.959 38.959 0 0 0 40 1a38.678 38.678 0 0 0-17.654 4.233H12.8c-.45 0-.9.18-1.17.54l-5.855 5.855c-.36.36-.54.72-.54 1.171v9.547A38.959 38.959 0 0 0 1 40c0 6.395 1.531 12.34 4.233 17.654Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M65.925 57.617s.086-.054.119-.086l6.495-4.324-3.134-1.696-3.134.756-8.3-31.677a5.705 5.705 0 0 0-6.68-4.15l-39.588 8.073-1.394-3.123-3.415 5.88a6.504 6.504 0 0 0-.216.367v.021a5.637 5.637 0 0 0-.454 4.248l10.44 36.648a2.587 2.587 0 0 0 3.177 1.794l45.273-12.342a2.94 2.94 0 0 0 .746-.346l.054-.032.01-.011Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M71.76 53.553 24.086 66.555a2.734 2.734 0 0 1-3.35-1.892L9.745 26.07c-.961-3.372 1.157-6.852 4.594-7.555l42.873-8.743c3.134-.638 6.225 1.286 7.025 4.377l9.446 36.075a2.73 2.73 0 0 1-1.924 3.33Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M65.449 18.818 11.065 30.76l-1.34-4.69c-.962-3.372 1.156-6.852 4.593-7.555l42.885-8.743c3.134-.638 6.225 1.286 7.024 4.377l1.222 4.669Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M18.394 23.427a1.873 1.873 0 0 1-1.416 2.367c-1.08.238-2.226-.454-2.529-1.524a1.868 1.868 0 0 1 1.427-2.366c1.092-.227 2.216.464 2.518 1.534v-.01Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M25.372 21.958c.291 1.059-.325 2.107-1.395 2.334-1.07.227-2.183-.454-2.474-1.524-.292-1.07.324-2.118 1.404-2.345 1.081-.227 2.173.465 2.465 1.524v.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M11.087 30.862s.324-3.156.605-6.387l-1.373-3.08-3.415 5.879a6.509 6.509 0 0 0-.216.367v.022a5.638 5.638 0 0 0-.454 4.247l1.394 4.907 3.459-5.966v.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M71.76 53.553 24.086 66.555a2.734 2.734 0 0 1-3.35-1.892L9.745 26.07c-.961-3.372 1.157-6.852 4.594-7.555l42.873-8.743c3.134-.638 6.225 1.286 7.025 4.377l9.446 36.075a2.73 2.73 0 0 1-1.924 3.33Z",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M66.66 50.627 27.87 61.013l-7.792-27.7",
+    stroke: resolvedSecondaryColor,
+    strokeMiterlimit: "10",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M31.57 38.904c.389 1.415-.627 2.896-2.291 3.307-1.665.41-3.35-.411-3.75-1.849-.4-1.437.637-2.918 2.312-3.317 1.665-.4 3.329.432 3.718 1.858h.01ZM61.48 35.131c.65-1.405.844-2.993.422-4.55-1.037-3.912-5.436-6.268-9.867-5.252a8.82 8.82 0 0 0-1.88.67l-.4-.303-2.14 2.162c-1.665 1.783-2.41 4.204-1.762 6.592 1.08 3.978 5.588 6.29 10.019 5.177a8.746 8.746 0 0 0 3.772-2l2.215-2.182-.367-.303-.011-.01ZM49.262 49.959l-.52-.367a4.875 4.875 0 0 0 .077-2.756c-.79-2.886-4.107-4.561-7.436-3.729a6.89 6.89 0 0 0-1.178.41l-.357-.248-1.707 1.697c-1.297 1.35-1.892 3.188-1.405 4.982.81 2.918 4.182 4.572 7.522 3.696a6.737 6.737 0 0 0 2.929-1.61l2.075-2.064v-.011Z",
+    fill: resolvedSecondaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M63.785 28.697c1.038 3.902-1.653 7.944-6.041 9.035-4.442 1.114-8.949-1.2-10.019-5.176-1.07-3.977 1.708-8.074 6.193-9.111 4.431-1.027 8.83 1.34 9.867 5.252Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M50.716 44.93c.79 2.886-1.243 5.923-4.56 6.788-3.34.875-6.723-.767-7.523-3.696-.8-2.929 1.286-5.987 4.648-6.83 3.34-.833 6.657.843 7.435 3.728v.01Z",
+    fill: "#fff",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "m43.006 41.254-4.35 6.309M47.986 41.73l-6.474 9.446M50.768 45.41l-4.181 6.095",
+    stroke: resolvedSecondaryColor,
+    strokeMiterlimit: "10",
+    strokeWidth: ".7"
+  }));
+};
 ScatterPlotChart.displayName = "ScatterPlotChart";
 var stdin_default = createBaseComponent(ScatterPlotChart);
 export {

package/StackedAreaChart/index.d.ts

@@ -1,4 +1,28 @@
 
-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;    

package/StackedAreaChart/index.js

@@ -26,78 +26,84 @@ 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 StackedAreaChart = ({ 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.585 74.872C61.996 74.603 79 56.867 79 35.547v-15.05a.996.996 0 0 0-.99-.985H53V5.985A.996.996 0 0 0 52.01 5H27.99c-.54 0-.99.448-.99.985v6.27H1.99c-.54 0-.99.449-.99.986v22.843c.18 21.589 17.903 39.057 39.585 38.788Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M62.925 57.607s.086-.054.119-.087l6.495-4.323-3.134-1.696-3.134.756-8.3-31.677a5.705 5.705 0 0 0-6.68-4.15L8.703 24.503 7.31 21.38l-3.415 5.88a6.51 6.51 0 0 0-.216.367v.021a5.637 5.637 0 0 0-.454 4.248l10.44 36.648a2.587 2.587 0 0 0 3.178 1.794l45.272-12.342a2.94 2.94 0 0 0 .746-.346l.054-.032.01-.011Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329Z",
-  fill: "#fff"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M62.452 18.818 8.07 30.761l-1.34-4.69c-.962-3.373 1.156-6.853 4.593-7.555l42.884-8.744c3.134-.637 6.225 1.286 7.025 4.377l1.221 4.67Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M15.394 23.419a1.873 1.873 0 0 1-1.416 2.366c-1.091.238-2.226-.454-2.529-1.523a1.868 1.868 0 0 1 1.427-2.367c1.091-.227 2.215.464 2.518 1.534v-.01Z",
-  fill: "#fff"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M22.375 21.938c.292 1.06-.324 2.108-1.394 2.335-1.07.227-2.183-.454-2.475-1.524-.292-1.07.324-2.118 1.405-2.345 1.08-.227 2.172.464 2.464 1.523v.011Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M8.087 30.842s.324-3.155.605-6.387l-1.372-3.08-3.415 5.88a6.51 6.51 0 0 0-.217.367v.021a5.637 5.637 0 0 0-.453 4.248l1.394 4.906 3.458-5.965v.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "m70.684 50.223-4.982-19.021c-3.75.583-6.7 1.523-8.505 2.875-8.463 6.279-7.22 18.264-11.65 21.042-5.286 3.307-11.705-6.312-18.914-4.302-4.604 1.286-6.474 7.533-7.922 15.25.66.508 1.524.713 2.388.475l47.672-13.001a2.73 2.73 0 0 0 1.924-3.329l-.01.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M18.69 66.108c1.502-8.376 3.047-13.931 7.932-15.293 7.209-2.01 13.629 7.608 18.913 4.301 4.442-2.777 3.2-14.763 11.651-21.042 3.415-2.529 10.808-3.664 20.145-3.556",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M59.837 33.563c.443 1.675-.368 3.296-1.816 3.642-1.448.346-3.005-.746-3.458-2.421-.454-1.675.367-3.329 1.837-3.653 1.459-.324 2.994.767 3.447 2.443l-.01-.011ZM29.27 50.213c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.653 1.459-.325 2.993.767 3.447 2.442l-.01-.01ZM48.183 54.51c.444 1.676-.367 3.297-1.815 3.643-1.449.345-3.005-.746-3.459-2.421-.454-1.675.368-3.329 1.837-3.653 1.47-.325 2.994.767 3.448 2.442l-.01-.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M56.343 24.233c.443 1.675-.367 3.296-1.816 3.642-1.448.346-3.004-.745-3.458-2.42-.454-1.676.367-3.33 1.837-3.654 1.46-.324 2.994.768 3.448 2.443l-.011-.01ZM25.77 40.894c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.47-.324 2.993.768 3.447 2.443l-.01-.01ZM44.693 45.191c.444 1.675-.367 3.296-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.459-.324 2.993.768 3.447 2.443l-.01-.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329v0Z",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M63.23 21.728c3.09-.41 6.679-.583 10.613-.53",
-  stroke: "#fff",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "M15.469 56.7c1.502-8.376 2.767-13.834 7.662-15.196 7.21-2.01 13.629 7.609 18.914 4.302 4.442-2.778 3.199-14.764 11.65-21.043 1.978-1.47 5.285-2.464 9.522-3.026",
-  stroke: "#E0E1E9",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ import_react.default.createElement("path", {
-  d: "m14.14 52.014 2.14 7.5",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}));
+var import_useColorResolver = require("@semcore/utils/lib/use/useColorResolver");
+const StackedAreaChart = ({ 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.585 74.872C61.996 74.603 79 56.867 79 35.547v-15.05a.996.996 0 0 0-.99-.985H53V5.985A.996.996 0 0 0 52.01 5H27.99c-.54 0-.99.448-.99.985v6.27H1.99c-.54 0-.99.449-.99.986v22.843c.18 21.589 17.903 39.057 39.585 38.788Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M62.925 57.607s.086-.054.119-.087l6.495-4.323-3.134-1.696-3.134.756-8.3-31.677a5.705 5.705 0 0 0-6.68-4.15L8.703 24.503 7.31 21.38l-3.415 5.88a6.51 6.51 0 0 0-.216.367v.021a5.637 5.637 0 0 0-.454 4.248l10.44 36.648a2.587 2.587 0 0 0 3.178 1.794l45.272-12.342a2.94 2.94 0 0 0 .746-.346l.054-.032.01-.011Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M62.452 18.818 8.07 30.761l-1.34-4.69c-.962-3.373 1.156-6.853 4.593-7.555l42.884-8.744c3.134-.637 6.225 1.286 7.025 4.377l1.221 4.67Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M15.394 23.419a1.873 1.873 0 0 1-1.416 2.366c-1.091.238-2.226-.454-2.529-1.523a1.868 1.868 0 0 1 1.427-2.367c1.091-.227 2.215.464 2.518 1.534v-.01Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M22.375 21.938c.292 1.06-.324 2.108-1.394 2.335-1.07.227-2.183-.454-2.475-1.524-.292-1.07.324-2.118 1.405-2.345 1.08-.227 2.172.464 2.464 1.523v.011Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M8.087 30.842s.324-3.155.605-6.387l-1.372-3.08-3.415 5.88a6.51 6.51 0 0 0-.217.367v.021a5.637 5.637 0 0 0-.453 4.248l1.394 4.906 3.458-5.965v.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "m70.684 50.223-4.982-19.021c-3.75.583-6.7 1.523-8.505 2.875-8.463 6.279-7.22 18.264-11.65 21.042-5.286 3.307-11.705-6.312-18.914-4.302-4.604 1.286-6.474 7.533-7.922 15.25.66.508 1.524.713 2.388.475l47.672-13.001a2.73 2.73 0 0 0 1.924-3.329l-.01.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M18.69 66.108c1.502-8.376 3.047-13.931 7.932-15.293 7.209-2.01 13.629 7.608 18.913 4.301 4.442-2.777 3.2-14.763 11.651-21.042 3.415-2.529 10.808-3.664 20.145-3.556",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M59.837 33.563c.443 1.675-.368 3.296-1.816 3.642-1.448.346-3.005-.746-3.458-2.421-.454-1.675.367-3.329 1.837-3.653 1.459-.324 2.994.767 3.447 2.443l-.01-.011ZM29.27 50.213c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.653 1.459-.325 2.993.767 3.447 2.442l-.01-.01ZM48.183 54.51c.444 1.676-.367 3.297-1.815 3.643-1.449.345-3.005-.746-3.459-2.421-.454-1.675.368-3.329 1.837-3.653 1.47-.325 2.994.767 3.448 2.442l-.01-.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M56.343 24.233c.443 1.675-.367 3.296-1.816 3.642-1.448.346-3.004-.745-3.458-2.42-.454-1.676.367-3.33 1.837-3.654 1.46-.324 2.994.768 3.448 2.443l-.011-.01ZM25.77 40.894c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.47-.324 2.993.768 3.447 2.443l-.01-.01ZM44.693 45.191c.444 1.675-.367 3.296-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.459-.324 2.993.768 3.447 2.443l-.01-.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329v0Z",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M63.23 21.728c3.09-.41 6.679-.583 10.613-.53",
+    stroke: "#fff",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M15.469 56.7c1.502-8.376 2.767-13.834 7.662-15.196 7.21-2.01 13.629 7.609 18.914 4.302 4.442-2.778 3.199-14.764 11.65-21.043 1.978-1.47 5.285-2.464 9.522-3.026",
+    stroke: resolvedPrimaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "m14.14 52.014 2.14 7.5",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }));
+};
 StackedAreaChart.displayName = "StackedAreaChart";
 var stdin_default = (0, import_core.createBaseComponent)(StackedAreaChart);

package/StackedAreaChart/index.mjs

@@ -1,79 +1,85 @@
 import React from "react";
 import { createBaseComponent } from "@semcore/core";
 import { Box } from "@semcore/flex-box";
-const StackedAreaChart = ({ 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.585 74.872C61.996 74.603 79 56.867 79 35.547v-15.05a.996.996 0 0 0-.99-.985H53V5.985A.996.996 0 0 0 52.01 5H27.99c-.54 0-.99.448-.99.985v6.27H1.99c-.54 0-.99.449-.99.986v22.843c.18 21.589 17.903 39.057 39.585 38.788Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M62.925 57.607s.086-.054.119-.087l6.495-4.323-3.134-1.696-3.134.756-8.3-31.677a5.705 5.705 0 0 0-6.68-4.15L8.703 24.503 7.31 21.38l-3.415 5.88a6.51 6.51 0 0 0-.216.367v.021a5.637 5.637 0 0 0-.454 4.248l10.44 36.648a2.587 2.587 0 0 0 3.178 1.794l45.272-12.342a2.94 2.94 0 0 0 .746-.346l.054-.032.01-.011Z",
-  fill: "#E0E1E9",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329Z",
-  fill: "#fff"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M62.452 18.818 8.07 30.761l-1.34-4.69c-.962-3.373 1.156-6.853 4.593-7.555l42.884-8.744c3.134-.637 6.225 1.286 7.025 4.377l1.221 4.67Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M15.394 23.419a1.873 1.873 0 0 1-1.416 2.366c-1.091.238-2.226-.454-2.529-1.523a1.868 1.868 0 0 1 1.427-2.367c1.091-.227 2.215.464 2.518 1.534v-.01Z",
-  fill: "#fff"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M22.375 21.938c.292 1.06-.324 2.108-1.394 2.335-1.07.227-2.183-.454-2.475-1.524-.292-1.07.324-2.118 1.405-2.345 1.08-.227 2.172.464 2.464 1.523v.011Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M8.087 30.842s.324-3.155.605-6.387l-1.372-3.08-3.415 5.88a6.51 6.51 0 0 0-.217.367v.021a5.637 5.637 0 0 0-.453 4.248l1.394 4.906 3.458-5.965v.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "m70.684 50.223-4.982-19.021c-3.75.583-6.7 1.523-8.505 2.875-8.463 6.279-7.22 18.264-11.65 21.042-5.286 3.307-11.705-6.312-18.914-4.302-4.604 1.286-6.474 7.533-7.922 15.25.66.508 1.524.713 2.388.475l47.672-13.001a2.73 2.73 0 0 0 1.924-3.329l-.01.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M18.69 66.108c1.502-8.376 3.047-13.931 7.932-15.293 7.209-2.01 13.629 7.608 18.913 4.301 4.442-2.777 3.2-14.763 11.651-21.042 3.415-2.529 10.808-3.664 20.145-3.556",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M59.837 33.563c.443 1.675-.368 3.296-1.816 3.642-1.448.346-3.005-.746-3.458-2.421-.454-1.675.367-3.329 1.837-3.653 1.459-.324 2.994.767 3.447 2.443l-.01-.011ZM29.27 50.213c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.653 1.459-.325 2.993.767 3.447 2.442l-.01-.01ZM48.183 54.51c.444 1.676-.367 3.297-1.815 3.643-1.449.345-3.005-.746-3.459-2.421-.454-1.675.368-3.329 1.837-3.653 1.47-.325 2.994.767 3.448 2.442l-.01-.01Z",
-  fill: "#6C6E79"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M56.343 24.233c.443 1.675-.367 3.296-1.816 3.642-1.448.346-3.004-.745-3.458-2.42-.454-1.676.367-3.33 1.837-3.654 1.46-.324 2.994.768 3.448 2.443l-.011-.01ZM25.77 40.894c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.47-.324 2.993.768 3.447 2.443l-.01-.01ZM44.693 45.191c.444 1.675-.367 3.296-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.459-.324 2.993.768 3.447 2.443l-.01-.01Z",
-  fill: "#E0E1E9"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329v0Z",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M63.23 21.728c3.09-.41 6.679-.583 10.613-.53",
-  stroke: "#fff",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "M15.469 56.7c1.502-8.376 2.767-13.834 7.662-15.196 7.21-2.01 13.629 7.609 18.914 4.302 4.442-2.778 3.199-14.764 11.65-21.043 1.978-1.47 5.285-2.464 9.522-3.026",
-  stroke: "#E0E1E9",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}), /* @__PURE__ */ React.createElement("path", {
-  d: "m14.14 52.014 2.14 7.5",
-  stroke: "#6C6E79",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: ".7"
-}));
+import { useColorResolver } from "@semcore/utils/lib/use/useColorResolver";
+const StackedAreaChart = ({ 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.585 74.872C61.996 74.603 79 56.867 79 35.547v-15.05a.996.996 0 0 0-.99-.985H53V5.985A.996.996 0 0 0 52.01 5H27.99c-.54 0-.99.448-.99.985v6.27H1.99c-.54 0-.99.449-.99.986v22.843c.18 21.589 17.903 39.057 39.585 38.788Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M62.925 57.607s.086-.054.119-.087l6.495-4.323-3.134-1.696-3.134.756-8.3-31.677a5.705 5.705 0 0 0-6.68-4.15L8.703 24.503 7.31 21.38l-3.415 5.88a6.51 6.51 0 0 0-.216.367v.021a5.637 5.637 0 0 0-.454 4.248l10.44 36.648a2.587 2.587 0 0 0 3.178 1.794l45.272-12.342a2.94 2.94 0 0 0 .746-.346l.054-.032.01-.011Z",
+    fill: resolvedPrimaryColor,
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M62.452 18.818 8.07 30.761l-1.34-4.69c-.962-3.373 1.156-6.853 4.593-7.555l42.884-8.744c3.134-.637 6.225 1.286 7.025 4.377l1.221 4.67Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M15.394 23.419a1.873 1.873 0 0 1-1.416 2.366c-1.091.238-2.226-.454-2.529-1.523a1.868 1.868 0 0 1 1.427-2.367c1.091-.227 2.215.464 2.518 1.534v-.01Z",
+    fill: "#fff"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M22.375 21.938c.292 1.06-.324 2.108-1.394 2.335-1.07.227-2.183-.454-2.475-1.524-.292-1.07.324-2.118 1.405-2.345 1.08-.227 2.172.464 2.464 1.523v.011Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M8.087 30.842s.324-3.155.605-6.387l-1.372-3.08-3.415 5.88a6.51 6.51 0 0 0-.217.367v.021a5.637 5.637 0 0 0-.453 4.248l1.394 4.906 3.458-5.965v.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "m70.684 50.223-4.982-19.021c-3.75.583-6.7 1.523-8.505 2.875-8.463 6.279-7.22 18.264-11.65 21.042-5.286 3.307-11.705-6.312-18.914-4.302-4.604 1.286-6.474 7.533-7.922 15.25.66.508 1.524.713 2.388.475l47.672-13.001a2.73 2.73 0 0 0 1.924-3.329l-.01.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M18.69 66.108c1.502-8.376 3.047-13.931 7.932-15.293 7.209-2.01 13.629 7.608 18.913 4.301 4.442-2.777 3.2-14.763 11.651-21.042 3.415-2.529 10.808-3.664 20.145-3.556",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M59.837 33.563c.443 1.675-.368 3.296-1.816 3.642-1.448.346-3.005-.746-3.458-2.421-.454-1.675.367-3.329 1.837-3.653 1.459-.324 2.994.767 3.447 2.443l-.01-.011ZM29.27 50.213c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.653 1.459-.325 2.993.767 3.447 2.442l-.01-.01ZM48.183 54.51c.444 1.676-.367 3.297-1.815 3.643-1.449.345-3.005-.746-3.459-2.421-.454-1.675.368-3.329 1.837-3.653 1.47-.325 2.994.767 3.448 2.442l-.01-.01Z",
+    fill: resolvedSecondaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M56.343 24.233c.443 1.675-.367 3.296-1.816 3.642-1.448.346-3.004-.745-3.458-2.42-.454-1.676.367-3.33 1.837-3.654 1.46-.324 2.994.768 3.448 2.443l-.011-.01ZM25.77 40.894c.443 1.675-.367 3.297-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.47-.324 2.993.768 3.447 2.443l-.01-.01ZM44.693 45.191c.444 1.675-.367 3.296-1.815 3.642-1.449.346-3.005-.745-3.459-2.42-.454-1.676.368-3.33 1.838-3.654 1.459-.324 2.993.768 3.447 2.443l-.01-.01Z",
+    fill: resolvedPrimaryColor
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M68.763 53.554 21.091 66.555a2.734 2.734 0 0 1-3.35-1.891L6.749 26.07c-.961-3.372 1.157-6.852 4.594-7.554l42.873-8.744c3.134-.637 6.225 1.286 7.025 4.377l9.446 36.076a2.73 2.73 0 0 1-1.924 3.329v0Z",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M63.23 21.728c3.09-.41 6.679-.583 10.613-.53",
+    stroke: "#fff",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M15.469 56.7c1.502-8.376 2.767-13.834 7.662-15.196 7.21-2.01 13.629 7.609 18.914 4.302 4.442-2.778 3.199-14.764 11.65-21.043 1.978-1.47 5.285-2.464 9.522-3.026",
+    stroke: resolvedPrimaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "m14.14 52.014 2.14 7.5",
+    stroke: resolvedSecondaryColor,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: ".7"
+  }));
+};
 StackedAreaChart.displayName = "StackedAreaChart";
 var stdin_default = createBaseComponent(StackedAreaChart);
 export {

package/Suggestion/index.d.ts

@@ -1,4 +1,28 @@
 
-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;