react-cosmos-ui 6.0.0-alpha.0

package/dist/components/illustrations/Astronaut.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { screenGrey4, screenGrey5, screenPrimary3, } from '../../style/colors.js';
+import { Illustration } from '../Illustration.js';
+export const AstronautIllustration = ({ title }) => (React.createElement(Illustration, { viewBox: "0 0 995.79 756.3" },
+    React.createElement("defs", null,
+        React.createElement("linearGradient", { id: "afc558c8-c8c4-43a0-9ff8-36c738bcadf8", x1: "263.72", y1: "238.68", x2: "263.72", y2: "208.45", gradientUnits: "userSpaceOnUse" },
+            React.createElement("stop", { offset: "0", stopColor: screenGrey4, stopOpacity: "0.25" }),
+            React.createElement("stop", { offset: "0.54", stopColor: screenGrey4, stopOpacity: "0.12" }),
+            React.createElement("stop", { offset: "1", stopColor: screenGrey4, stopOpacity: "0.1" })),
+        React.createElement("linearGradient", { id: "be82fdd5-66ab-49fc-8aef-9500b2c1a08e", x1: "537.72", y1: "134.68", x2: "537.72", y2: "104.45", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "b48d588d-308d-4a6b-9b06-bb920dd362b3", x1: "814.72", y1: "181.68", x2: "814.72", y2: "151.45", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "fc40df44-a3eb-403a-93a3-c2e14ff8183d", x1: "358.87", y1: "217.6", x2: "358.87", y2: "193.82", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "b9a74a8c-4f86-4b12-a01e-b38b12640f79", x1: "708.87", y1: "160.6", x2: "708.87", y2: "136.82", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "e1cc7b1e-4a38-4d88-bc31-d957dc0e789b", x1: "909.87", y1: "160.6", x2: "909.87", y2: "136.82", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "a786e464-0004-4162-bf9c-1c77ea556f3f", x1: "343.18", y1: "57.12", x2: "343.18", y2: "44.98", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "ed7113af-a3f6-4b83-ad2a-4145c0897ac0", x1: "344.18", y1: "133.12", x2: "344.18", y2: "120.98", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "bcce56f4-6100-452c-94c0-0e4dd07d63d7", x1: "663.18", y1: "41.12", x2: "663.18", y2: "28.98", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "f80e6619-6a6a-4d27-b58b-13c487a3d966", x1: "802.18", y1: "149.12", x2: "802.18", y2: "136.98", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "f9495c88-7725-4ca5-9368-72e54c981d92", x1: "490.73", y1: "580.9", x2: "490.73", y2: "313.1", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "b82d2768-795c-4dc2-9de8-934b40644624", x1: "592.83", y1: "800.34", x2: "592.83", y2: "416.27", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "e991d392-04f4-4018-b9d8-24ee41179e03", x1: "593.61", y1: "431.93", x2: "593.61", y2: "298.81", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "f4033a33-768d-491b-9f07-cdde246aef8f", x1: "551.03", y1: "816.05", x2: "551.03", y2: "767.07", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "bd26dae2-ae14-4e05-844d-7f17be67c7f9", x1: "635.59", y1: "816.05", x2: "635.59", y2: "767.07", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "a2f70ec8-8dd0-4c65-80e1-e3da54a3f4f7", x1: "745.34", y1: "828.15", x2: "745.34", y2: "252.93", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "e5b0ae8b-f5f0-41eb-bef6-53438e13ac16", x1: "924.91", y1: "439.7", x2: "924.91", y2: "234.67", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "f0273ade-576a-4ad8-9a6f-7fc7971c2987", x1: "436.34", y1: "828.15", x2: "436.34", y2: "252.93", gradientTransform: "matrix(-1, 0, 0, 1, 891, 0)", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "e88a7565-ba81-4ab7-95f1-6629f0af5c08", x1: "615.91", y1: "439.7", x2: "615.91", y2: "234.67", gradientTransform: "matrix(-1, 0, 0, 1, 891, 0)", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "bf514d7a-d100-48d8-89e1-e526b58397db", x1: "492.29", y1: "513.56", x2: "492.29", y2: "403.93", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "a76115cf-cd8c-4176-9a3c-9a73b10c4903", x1: "798.43", y1: "18.6", x2: "798.43", y2: "0", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "a32a47df-12b4-443d-9765-8cd8524a5228", x1: "765.43", y1: "143.6", x2: "765.43", y2: "125", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "be475b5a-0363-4725-9e86-39c6835f7bb0", x1: "630.43", y1: "160.6", x2: "630.43", y2: "142", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "ba4f5741-eaf0-4ada-8124-dbf7ca11ac85", x1: "545.43", y1: "61.6", x2: "545.43", y2: "43", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "ed21139e-2a95-41cd-b755-047a620bfa49", x1: "436.43", y1: "115.6", x2: "436.43", y2: "97", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "e90eae1c-1fda-4179-aacd-c7bc40fa73b9", x1: "247.43", y1: "75.6", x2: "247.43", y2: "57", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "abb092bc-1b17-4de6-b635-8e2be4eed0bd", x1: "214.43", y1: "234.6", x2: "214.43", y2: "216", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "e8540004-522d-4b52-801f-b41ff9acf3f2", x1: "736.95", y1: "40.66", x2: "736.95", y2: "30.61", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "a5f9757d-6ad9-4e45-a734-ac7d7f2fecf7", x1: "185.95", y1: "97.66", x2: "185.95", y2: "87.61", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "a1b47319-948d-4901-bb26-91f5cee31525", x1: "250.95", y1: "224.66", x2: "250.95", y2: "214.61", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "b1659724-cb8a-4fa8-b312-9f444de5ed18", x1: "364.95", y1: "207.66", x2: "364.95", y2: "197.61", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" }),
+        React.createElement("linearGradient", { id: "ec4cfa8f-50ab-441a-b17a-cb383eba365e", x1: "529.95", y1: "128.66", x2: "529.95", y2: "118.61", xlinkHref: "#afc558c8-c8c4-43a0-9ff8-36c738bcadf8" })),
+    React.createElement("title", null, title),
+    React.createElement("rect", { x: "411.64", y: "313.1", width: "158.17", height: "267.8", rx: "13", fill: "url(#f9495c88-7725-4ca5-9368-72e54c981d92)" }),
+    React.createElement("rect", { x: "416.17", y: "318.74", width: "150.17", height: "255.21", rx: "13", fill: screenPrimary3 }),
+    React.createElement("polyline", { points: "416.17 664.36 482.49 664.36 466.18 730.97", fill: "none" }),
+    React.createElement("polygon", { points: "536.72 380.06 450.94 381.83 427.19 354.54 555.07 352.24 536.72 380.06", fill: screenGrey5 }),
+    React.createElement("polygon", { points: "555.07 354.37 427.19 354.37 452.71 340.72 527.86 338.24 555.07 354.37", fill: screenGrey5 }),
+    React.createElement("path", { d: "M751.58,462.48c-12.09-5.36-28.3,2-31.74,14.37-9.09-25.88-31.1-47-57.54-56.54-4.37-1.58-16.5-6.39-19.86-2.64-1.56,1.74-4.57,8.61-4.38,14.34H548.13c0-1.12,0-2.24,0-3.36,0-13.07-10.51-13.52-23.21-10.47a70.4,70.4,0,0,0-29.63,15.92c-13.51,11.91-22.9,27.45-32.08,42.72l-16-15.89c-1.76-1.75-3.86-3.63-6.39-3.51-2.68.13-4.62,2.44-6.18,4.54-7.06,9.52-14.34,19.53-16,31.12-1.66,11.41,2.31,22.81,6.23,33.69,3.82,10.64,8.9,25.68,19.89,29.47,11.83,4.09,24.31,4.57,34.55-2.44,16-11,32.49-22.37,44.17-37.42V630.64h1.35l-11,169.7,73.54-.38,5.25-169.32h2.16L598.31,800l74.82.38-11.21-169.7h2.32V515.24l2,1.66,36.29,30.35c7.55,6.32,16.19,13,26.17,12.51,7.17-.36,13.67-12.38,18.25-17.71s7.55-11.75,10.46-18.09c4.82-10.49,9.73-21.33,10.06-32.8S762.4,467.27,751.58,462.48Z", transform: "translate(-102.11 -71.85)", fill: "url(#b82d2768-795c-4dc2-9de8-934b40644624)" }),
+    React.createElement("path", { d: "M744.7,465.12c-11.57-5.31-27.07,2-30.36,14.27-8.7-25.69-29.75-46.61-55-56.1-4.19-1.57-14.29-6.34-17.5-2.63-1.5,1.73-1.38,8.55-1.2,14.24h-95c0-1.12,0-2.23,0-3.34-.05-13-5.57-13.41-17.72-10.38-10.59,2.64-20.33,8.46-28.34,15.79-12.93,11.82-21.91,27.23-30.68,42.39l-15.32-15.77c-1.69-1.73-3.7-3.61-6.12-3.49s-4.41,2.42-5.91,4.51c-6.75,9.45-13.71,19.38-15.33,30.88-1.59,11.32,2.21,22.63,5.95,33.43,3.66,10.55,8.52,22.36,19,26.13,11.31,4.05,23.25-3.24,33-10.19,15.34-10.88,31.07-22.2,42.25-37.13V632h1.29l-10.5,168.37h67.34l8-168.37h2.06l6.22,168.37h68.76L658.94,632h2.21V509.71l1.89,1.64,34.71,30.11c7.22,6.27,15.49,12.92,25,12.42,6.87-.36,13.08-4.52,17.47-9.81s7.22-11.66,10-17.94c4.61-10.41,9.31-21.16,9.62-32.55S755.05,469.88,744.7,465.12Z", transform: "translate(-102.11 -71.85)", fill: "#fff" }),
+    React.createElement("path", { d: "M668.79,348.62H655.31c-7.93-29.27-32.62-49.81-61.87-49.81s-53.93,20.54-61.86,49.81H518.44V379h11.24c4.84,31.84,31.54,52.94,63.76,52.94s58.93-21.1,63.77-52.94h11.58Z", transform: "translate(-102.11 -71.85)", fill: "url(#e991d392-04f4-4018-b9d8-24ee41179e03)" }),
+    React.createElement("path", { d: "M665,350.54h-12.8c-7.53-26.66-31-48.21-58.77-48.21s-51.23,21.55-58.77,48.21H522.21v27.64h10.67c4.6,29,30,48.21,60.57,48.21s56-19.22,60.58-48.21h11Z", transform: "translate(-102.11 -71.85)", fill: "#fff" }),
+    React.createElement("circle", { cx: "490.99", cy: "297.12", r: "49.62", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M588.92,802.13c0,16.57-17,13.73-37.89,13.73s-37.89,2.84-37.89-13.73,17-35.06,37.89-35.06S588.92,785.56,588.92,802.13Z", transform: "translate(-102.11 -71.85)", fill: "url(#f4033a33-768d-491b-9f07-cdde246aef8f)" }),
+    React.createElement("path", { d: "M673.48,802.13c0,16.57-17,13.73-37.89,13.73s-37.89,2.84-37.89-13.73,17-35.06,37.89-35.06S673.48,785.56,673.48,802.13Z", transform: "translate(-102.11 -71.85)", fill: "url(#bd26dae2-ae14-4e05-844d-7f17be67c7f9)" }),
+    React.createElement("path", { d: "M586.11,801.23c0,15.17-15.71,12.58-35.08,12.58s-35.09,2.59-35.09-12.58,15.71-32.08,35.09-32.08S586.11,786.06,586.11,801.23Z", transform: "translate(-102.11 -71.85)", fill: screenGrey4 }),
+    React.createElement("path", { d: "M671.18,801.23c0,15.17-15.71,12.57-35.08,12.57S601,816.53,601,801.36s15.71-32.09,35.09-32.08S671.18,786.06,671.18,801.23Z", transform: "translate(-102.11 -71.85)", fill: screenGrey4 }),
+    React.createElement("path", { d: "M758.05,265.64a12.72,12.72,0,1,0-21.92,8.76V823.6a4.56,4.56,0,0,0,4.55,4.55h8.13a4.57,4.57,0,0,0,4.55-4.55V275.51A12.69,12.69,0,0,0,758.05,265.64Z", transform: "translate(-102.11 -71.85)", fill: "url(#a2f70ec8-8dd0-4c65-80e1-e3da54a3f4f7)" }),
+    React.createElement("path", { d: "M756.5,265.64a11.17,11.17,0,1,0-17,9.5V821A4.55,4.55,0,0,0,744,825.5h3.25a4.56,4.56,0,0,0,4.55-4.54V274.71A11.15,11.15,0,0,0,756.5,265.64Z", transform: "translate(-102.11 -71.85)", fill: screenGrey5 }),
+    React.createElement("path", { d: "M738.29,472.72c-2,3.09-6,5.66-9.33,4-2.68-1.33-3.54-4.69-3.88-7.66a61.27,61.27,0,0,1,.95-19.94c.86-4,2.69-8.47,6.62-9.52,2.46-.65,5.07.28,7.23,1.63s4,3.1,6.23,4.37c4.24,2.44,9.4,2.88,14.24,2.17,2.4-.35,4.76-1,7.17-1.17a11.94,11.94,0,0,1,7.05,1.23,6.37,6.37,0,0,1,3.32,6c-.3,2.41-2.84,4.45-5.17,3.77a14.85,14.85,0,0,1,5.18,4.71,6.73,6.73,0,0,1,.38,6.71c-1.2,2-4.16,3-6.07,1.61,1.95,1.6,4,3.3,4.88,5.65s.17,5.53-2.18,6.45a20.37,20.37,0,0,1-3,.56c-1,.24-2,.92-2.13,1.95-.09,1.19,1.1,2,1.8,3,1.57,2.12.7,5.31-1.19,7.14s-4.52,2.65-7,3.41c-3.76,1.13-7.52,2.26-11.3,3.32-4.14,1.16-8.48,2.24-12.68,1.34a13.86,13.86,0,0,1-5.16-24.83c2.07-1.48,2.45-4,4.12-5.89a12.78,12.78,0,0,0,3.05-8.77c0-4.72,1.8-9.28.7-13.87-.26,0-.45.05-.71.1C741.14,458.07,743,465.57,738.29,472.72Z", transform: "translate(-102.11 -71.85)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M1097.89,402.18c-115.32-130-230.64,130-346,0v-130c115.32,130,230.64-130,346,0Z", transform: "translate(-102.11 -71.85)", fill: "url(#e5b0ae8b-f5f0-41eb-bef6-53438e13ac16)" }),
+    React.createElement("path", { d: "M1094.18,397.32C980.1,278.94,866,515.71,751.93,397.32V278.94c114.08,118.38,228.17-118.39,342.25,0Z", transform: "translate(-102.11 -71.85)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M442,265.64a12.72,12.72,0,1,1,21.92,8.76V823.6a4.56,4.56,0,0,1-4.55,4.55h-8.13a4.57,4.57,0,0,1-4.55-4.55V275.51A12.69,12.69,0,0,1,442,265.64Z", transform: "translate(-102.11 -71.85)", fill: "url(#f0273ade-576a-4ad8-9a6f-7fc7971c2987)" }),
+    React.createElement("path", { d: "M443.5,265.64a11.17,11.17,0,1,1,17,9.5V821A4.55,4.55,0,0,1,456,825.5h-3.25a4.56,4.56,0,0,1-4.55-4.54V274.71A11.15,11.15,0,0,1,443.5,265.64Z", transform: "translate(-102.11 -71.85)", fill: screenGrey5 }),
+    React.createElement("path", { d: "M102.11,402.18c115.32,130,230.64-130,346,0v-130c-115.32-130-230.64,130-346,0Z", transform: "translate(-102.11 -71.85)", fill: "url(#e88a7565-ba81-4ab7-95f1-6629f0af5c08)" }),
+    React.createElement("path", { d: "M105.82,397.32c114.08,118.39,228.17-118.38,342.25,0V278.94C334,160.55,219.9,397.32,105.82,278.94Z", transform: "translate(-102.11 -71.85)", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "441.39", y: "403.93", width: "101.8", height: "109.63", rx: "6.38", fill: "url(#bf514d7a-d100-48d8-89e1-e526b58397db)" }),
+    React.createElement("rect", { x: "443.48", y: "407.32", width: "97.13", height: "102.82", rx: "6.38", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "456.08", y: "426.88", width: "17.8", height: "47.46", opacity: "0.2" }),
+    React.createElement("rect", { x: "494.72", y: "444.2", width: "23.41", height: "16.02", opacity: "0.2" }),
+    React.createElement("rect", { x: "511.73", y: "418.88", width: "12.94", height: "11.51", opacity: "0.2" }),
+    React.createElement("circle", { cx: "519.08", cy: "482.23", r: "14.09", opacity: "0.2" }),
+    React.createElement("path", { d: "M599.36,330.31A49.55,49.55,0,0,1,639,350.05a49.63,49.63,0,1,0-85.5,48.8,49.64,49.64,0,0,1,45.88-68.54Z", transform: "translate(-102.11 -71.85)", opacity: "0.2" }),
+    React.createElement("path", { d: "M467.71,472.72c2.05,3.09,6,5.66,9.33,4,2.68-1.33,3.54-4.69,3.88-7.66a61.27,61.27,0,0,0-.95-19.94c-.86-4-2.69-8.47-6.62-9.52-2.46-.65-5.07.28-7.23,1.63s-4,3.1-6.23,4.37c-4.24,2.44-9.4,2.88-14.24,2.17-2.4-.35-4.76-1-7.17-1.17a11.94,11.94,0,0,0-7.05,1.23,6.37,6.37,0,0,0-3.32,6c.3,2.41,2.84,4.45,5.17,3.77a14.85,14.85,0,0,0-5.18,4.71,6.73,6.73,0,0,0-.38,6.71c1.2,2,4.16,3,6.07,1.61-2,1.6-4,3.3-4.88,5.65s-.17,5.53,2.18,6.45a20.37,20.37,0,0,0,3,.56c1,.24,2.05.92,2.13,1.95.09,1.19-1.1,2-1.8,3-1.57,2.12-.7,5.31,1.19,7.14s4.52,2.65,7,3.41c3.76,1.13,7.52,2.26,11.3,3.32,4.14,1.16,8.48,2.24,12.68,1.34a13.86,13.86,0,0,0,5.16-24.83c-2.07-1.48-2.45-4-4.12-5.89a12.78,12.78,0,0,1-3-8.77c0-4.72-1.8-9.28-.7-13.87.26,0,.45.05.71.1C464.86,458.07,463,465.57,467.71,472.72Z", transform: "translate(-102.11 -71.85)", fill: screenPrimary3 })));

package/dist/components/illustrations/BlankCanvas.d.ts

@@ -0,0 +1,3 @@
+export declare const BlankCanvasIllustration: ({ title }: {
+    title: string;
+}) => JSX.Element;

package/dist/components/illustrations/BlankCanvas.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { screenPrimary3 } from '../../style/colors.js';
+import { Illustration } from '../Illustration.js';
+export const BlankCanvasIllustration = ({ title }) => (React.createElement(Illustration, { viewBox: "0 0 998.95 833.99" },
+    React.createElement("defs", null,
+        React.createElement("linearGradient", { id: "8849c9b4-5ff8-40d0-8d32-f1e3227b06d9", x1: "499.14", y1: "857.42", x2: "499.14", y2: "171.42", gradientUnits: "userSpaceOnUse" },
+            React.createElement("stop", { offset: "0", stopColor: "gray", stopOpacity: "0.25" }),
+            React.createElement("stop", { offset: "0.54", stopColor: "gray", stopOpacity: "0.12" }),
+            React.createElement("stop", { offset: "1", stopColor: "gray", stopOpacity: "0.1" }))),
+    React.createElement("title", null, title),
+    React.createElement("path", { d: "M424.35,62.67c29.21-26,75.06-31.33,116.8-29.26,131.09,6.52,249.42,69.8,351.78,141.39,37.06,25.91,73.54,53.84,97.59,89.53,49,72.65,34.44,173.29-33.64,233.14-23.17,20.36-51.25,36-80.08,49.81-51.26,24.6-106.57,44.35-164.75,50-41.48,4-83.48.75-124.73-4.84C472.09,576.78,359,542.22,264.17,483.1,222.59,457.17,183.4,424.93,166.26,383S160.09,287.87,202.55,263c17.56-10.27,38.56-14.91,59.11-19.27,30.26-6.41,61-12.73,88.3-25.76,28.21-13.46,61.6-39.49,56-69.29C400,116.75,395.18,88.67,424.35,62.67Z", transform: "translate(-100.52 -33.01)", fill: screenPrimary3, opacity: "0.1" }),
+    React.createElement("ellipse", { cx: "374.17", cy: "814.05", rx: "118.88", ry: "19.93", fill: screenPrimary3, opacity: "0.1" }),
+    React.createElement("ellipse", { cx: "608.16", cy: "661.06", rx: "118.88", ry: "19.93", fill: screenPrimary3, opacity: "0.1" }),
+    React.createElement("polygon", { points: "616.05 398.03 615.94 401.92 609.18 640.44 597.82 640.44 603.39 401.92 603.5 397.43 616.05 398.03", fill: "#b77b7f" }),
+    React.createElement("polygon", { points: "681.82 600.09 673.31 600.07 546.87 599.8 540.13 599.79 543.72 588.73 680.92 588.73 681.82 600.09", fill: "#dda2a6" }),
+    React.createElement("polygon", { points: "616.05 398.03 615.94 401.92 603.39 401.92 603.5 397.43 616.05 398.03", opacity: "0.1" }),
+    React.createElement("rect", { x: "599.77", y: "392.2", width: "21.07", height: "7.93", fill: "#b77b7f" }),
+    React.createElement("polygon", { points: "547.99 588.73 546.87 599.8 540.13 599.79 543.72 588.73 547.99 588.73", opacity: "0.1" }),
+    React.createElement("polygon", { points: "566.14 392.05 565.79 395.49 537.74 672.13 524.89 671.52 554.45 395.49 554.78 392.35 566.14 392.05", fill: "#dda2a6" }),
+    React.createElement("polygon", { points: "681.82 600.09 673.31 600.07 672.16 588.73 680.92 588.73 681.82 600.09", opacity: "0.1" }),
+    React.createElement("polygon", { points: "695.27 671.52 682.41 672.13 654.37 395.49 654.02 392.05 665.37 392.35 665.7 395.49 695.27 671.52", fill: "#dda2a6" }),
+    React.createElement("rect", { x: "466.6", y: "119.3", width: "283.36", height: "271.7", fill: "#fff" }),
+    React.createElement("path", { d: "M714.33,61.44v65.61H703.28V61.44a5.53,5.53,0,1,1,11.05,0Z", transform: "translate(-100.52 -33.01)", fill: "#dda2a6" }),
+    React.createElement("rect", { x: "602.75", y: "88.07", width: "11.06", height: "5.97", opacity: "0.1" }),
+    React.createElement("path", { d: "M718.67,125.56v21.66H699V125.56a2.68,2.68,0,0,1,2.69-2.69H716A2.69,2.69,0,0,1,718.67,125.56Z", transform: "translate(-100.52 -33.01)", fill: "#dda2a6" }),
+    React.createElement("circle", { cx: "608.28", cy: "103.61", r: "4.18", opacity: "0.1" }),
+    React.createElement("circle", { cx: "608.28", cy: "102.71", r: "4.18", fill: "#b77b7f" }),
+    React.createElement("rect", { x: "598.42", y: "111.53", width: "19.73", height: "2.69", opacity: "0.1" }),
+    React.createElement("rect", { x: "590.35", y: "115.12", width: "35.87", height: "5.98", opacity: "0.1" }),
+    React.createElement("rect", { x: "590.35", y: "113.32", width: "35.87", height: "5.98", fill: "#dda2a6" }),
+    React.createElement("path", { d: "M535.72,384H686.37a6.5,6.5,0,0,1,6.5,6.5v1.42a0,0,0,0,1,0,0H529.22a0,0,0,0,1,0,0v-1.42A6.5,6.5,0,0,1,535.72,384Z", opacity: "0.1" }),
+    React.createElement("polygon", { points: "554.78 392.35 566.14 392.05 565.79 395.49 554.45 395.49 554.78 392.35", opacity: "0.1" }),
+    React.createElement("rect", { x: "599.77", y: "392.2", width: "21.07", height: "3.29", opacity: "0.1" }),
+    React.createElement("polygon", { points: "665.7 395.49 654.37 395.49 654.02 392.05 665.37 392.35 665.7 395.49", opacity: "0.1" }),
+    React.createElement("path", { d: "M535.72,385.77H686.37a6.5,6.5,0,0,1,6.5,6.5v1.42a0,0,0,0,1,0,0H529.22a0,0,0,0,1,0,0v-1.42A6.5,6.5,0,0,1,535.72,385.77Z", fill: "#dda2a6" }),
+    React.createElement("path", { d: "M603.21,292.64c-2.27-1.2-27-19.88-27-19.88l-39.91-25.31s-.21-.6-.59-1.63c10.95-12.43,8.56-30.47-2.58-43.15-13.5-15.38-74.5-48.49-92.88-20.17-2.57,4-2.66,8.54-3.33,12.94-1.57,10.27-6.63,20.22-14.57,28.6-6.12,6.47-14.15,12.43-17.67,19.75,0-.09-.07-.18-.1-.28a18.36,18.36,0,0,0-1.83,5C401,257.44,407,266,410.19,274.69a47.5,47.5,0,0,1,2.32,9.08c.08-.62.15-1.23.22-1.85a58.06,58.06,0,0,1,.79,13.36c-22.15,4.51-22.16,42.4-22.16,42.4s-2.73,15.06-2.27,20.49.45,17.17.45,20-2.73,20.48-3,22.6a.51.51,0,0,1,0,.09c-.4,2.32-4.55,13.5,5.48,16,.7.18,1.44.33,2.21.47.43,9.05,1.21,28,.52,32.22,0,0,3.65,25.46,6.68,31.93a73.44,73.44,0,0,0,6.7,10.82,11.92,11.92,0,0,1-1.54,4.39c-1.55,2.23-.75,4.06,1.84,4.85-.09.77-.19,1.64-.3,2.62-1.11,9.82-2.77,29.34.05,39.23,3.87,13.56,4.1,18.08,4.1,18.08s0,4.06,1.6,6.32,4.55,23.28,4.55,26.67,7.74,33.89,5.46,41.12-.45,17.4-.45,17.4-1.37,17.85-3,21.69-2.28,65.75.22,81.79,4.1,29.37,4.1,29.37-1.59,14.69-.23,16.72,3.87,14.24,2.05,14.91-2.73,5.65-2.73,5.65a50.39,50.39,0,0,0,3.11,4.23,17,17,0,0,1-2.05-.87c.72,1,1.8,2.42,3.13,4l-1.25,16.25a2.72,2.72,0,0,0,2,2.85,22.87,22.87,0,0,0,22.62-6.36c11.38-11.52,15.25-9.94,17.3-16.94.22-.75.41-1.49.57-2.19,1.47-6.24-5.18-10.88-10.47-8.22.73-4.94,1.3-10.55.75-13.72-1.14-6.55-.91-23.72-.91-23.72l-1.59-82.25s2.95-16.27,6.37-22.59,3-28.47,3-28.47l3.87-72.76,3.64-35.47s3.64-12.2,8.19,1.36c0,0-2.5,27.33-1.36,33.89s2.73,38.41,1.59,45.41-6.14,45.42-3,55.13S486,694.15,485.3,698s-3,87.21-3,87.21,6.15,16,1.6,21.24-.23,26-.23,26,.55.39,1.49.93l-.13,1.73-1.43,18.69a2.74,2.74,0,0,0,2,2.86,22.86,22.86,0,0,0,22.62-6.36c11.38-11.53,15.25-9.94,17.3-16.95.22-.75.41-1.48.58-2.19,1.6-6.81-6.5-11.75-11.92-7.3l-.27.23a9.41,9.41,0,0,1-.89.67,4.3,4.3,0,0,1-.45.29c1.14-5.16,2.8-14,2-18.14-1.14-6.1,1.13-24.62,1.13-24.62s6.6-22.15,6.83-31l1.82-70.49s-.22-28.7.69-35.7,8.19-67.56,15.47-85.64c5.59-13.84,8.09-49.16,6.61-67.07-.08-.88-.16-1.73-.26-2.52,8.93-6.59,9.82-17.55,9.82-17.55s-8.2-15.66-16.09-22.29S531,432,531.28,427.15a11.88,11.88,0,0,0-2.73-8.13s-3.64-11.75-6.07-12.95a1.9,1.9,0,0,1-.53-.4c-1.65-1.77-.38-6.83-.38-6.83l0-.16c.29-1.17,2-8.75,1.49-10.69-.61-2.1.3-12.05.3-12.05s5.77-17.17,4.86-30.73,11.84-12.35,11.84-12.35l39.37-.41,4.48,0a31.53,31.53,0,0,0,4.31-4.46c7.5-.89,22.67-3.72,24.37-12C614.9,305,605.49,293.85,603.21,292.64ZM420.81,418l.27-6.89c.93.8,1.55,1.31,1.55,1.31a10.78,10.78,0,0,1,.07,5.52,5.89,5.89,0,0,1-3.41,3.82,4.14,4.14,0,0,0-.55.29l-.38-3.89Zm142.8-121c-1.67-.75-7.29-.6-10.18-.6s-7.58-2.41-7.58-2.41c-1-1.95-6.53-3.11-11.45-3.77-3.74-9.22-9-18.21-9.71-27.82,0-.35,0-.7-.05-1.05l.57,1s22.92,14.62,25.5,19c2,3.34,11.63,10.8,16.09,14.14a4.59,4.59,0,0,1-2.45,1.64A1.35,1.35,0,0,1,563.61,297Z", transform: "translate(-100.52 -33.01)", fill: "url(#8849c9b4-5ff8-40d0-8d32-f1e3227b06d9)" }),
+    React.createElement("path", { d: "M525.76,831.22c-.17.7-.35,1.43-.57,2.17-2,7-5.83,5.38-17,16.81a22.38,22.38,0,0,1-22.27,6.32,2.7,2.7,0,0,1-2-2.84l1.41-18.54.67-8.92s17.84,5,26.92-1.35a10.77,10.77,0,0,0,.88-.67A2.75,2.75,0,0,0,514,824,7.29,7.29,0,0,1,525.76,831.22Z", transform: "translate(-100.52 -33.01)", fill: "#67647e" }),
+    React.createElement("path", { d: "M469.76,824.22c-.17.7-.35,1.43-.57,2.17-2,7-5.83,5.38-17,16.81a22.38,22.38,0,0,1-22.27,6.32,2.7,2.7,0,0,1-2-2.84l1.41-18.54.67-8.92s17.84,5,26.92-1.35a10.77,10.77,0,0,0,.88-.67A2.75,2.75,0,0,0,458,817,7.29,7.29,0,0,1,469.76,824.22Z", transform: "translate(-100.52 -33.01)", fill: "#67647e" }),
+    React.createElement("path", { d: "M451.33,827l.72,9.64c-10.24,10.23-22.43-5-26-10C435.44,831.48,451.33,827,451.33,827Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M511.52,830.92l1.34-.89c-9.35,14.22-23.24,7.66-27.57,5.11l.67-8.92s17.84,5,26.92-1.35C512.17,828.35,511.52,830.92,511.52,830.92Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M540,561.69c-7.18,17.93-14.35,78-15.25,85s-.67,35.42-.67,35.42L522.28,752c-.23,8.75-6.73,30.72-6.73,30.72s-2.24,18.38-1.12,24.43-2.91,22-2.91,22l1.34-.9c-11.21,17-28.92,4.26-28.92,4.26s-4.26-20.62.23-25.78-1.57-21.07-1.57-21.07,2.24-82.72,2.91-86.53-2.69-15.47-5.83-25.11,1.8-47.75,2.92-54.7-.45-38.56-1.57-45.06,1.34-33.63,1.34-33.63c-4.48-13.45-8.07-1.34-8.07-1.34l-3.59,35.19-3.81,72.19s.45,22-2.91,28.25-6.28,22.41-6.28,22.41l1.57,81.61s-.22,17,.9,23.53-2.47,23.32-2.47,23.32C445.16,855.36,425,823.3,425,823.3s.9-4.93,2.69-5.6-.67-12.78-2-14.8.22-16.59.22-16.59-1.57-13.22-4-29.14-1.79-77.34-.22-81.15,2.91-21.52,2.91-21.52-1.79-10.09.45-17.27-5.38-37.43-5.38-40.8-2.91-24.21-4.48-26.45-1.57-6.28-1.57-6.28-.22-4.48-4-17.93c-2.78-9.82-1.14-29.18-.05-38.93.39-3.61.73-5.91.73-5.91S538.87,480.08,544,484.79c1.2,1.11,2,4.92,2.47,10.35C548,512.9,545.48,548,540,561.69Z", transform: "translate(-100.52 -33.01)", fill: "#444053" }),
+    React.createElement("path", { d: "M491.34,662.49c.6,0,14.8,1.2,20,.15S491.34,662.49,491.34,662.49Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M492.39,670.86S512,674.3,513,672.51,492.39,670.86,492.39,670.86Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M432.46,667.27s10.16.45,15.69,3S432.46,667.27,432.46,667.27Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M395.54,415.9s1.64,31.23.75,36.76c0,0,3.58,25.26,6.57,31.68s9.42,14.5,9.42,14.5l8.82-62L419,415.6Z", transform: "translate(-100.52 -33.01)", fill: "#efb7b9" }),
+    React.createElement("circle", { cx: "387.68", cy: "206.09", r: "34.52", fill: "#efb7b9" }),
+    React.createElement("path", { d: "M470.27,255.23s-10.76,21.08-21.52,30.94,64.56,21.07,66.35,21.07S501.65,262.41,504.34,257,470.27,255.23,470.27,255.23Z", transform: "translate(-100.52 -33.01)", fill: "#efb7b9" }),
+    React.createElement("path", { d: "M546.49,495.14a22.43,22.43,0,0,1-5.54,3.1c-13.74,5.38-28.69,12.85-38.85,9.87s-31.68,0-31.68,0-43.35-3.59-52-1.5c-3.94.95-7,.91-9,.23.39-3.61.73-5.91.73-5.91S538.87,480.08,544,484.79C545.22,485.9,546,489.71,546.49,495.14Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M555.9,475.22s-1.19,14.95-14.95,20.33-28.69,12.85-38.85,9.87-31.68,0-31.68,0-43.35-3.59-52-1.5-13.16-.59-10.47-4.48,2.4-16.74,2.4-22.12-3-27.2-.31-31.09S415.12,427.4,420.5,425a5.86,5.86,0,0,0,3.36-3.79,10.84,10.84,0,0,0-.07-5.47s-.91-.75-2.16-1.86c-3.17-2.83-8.53-8.08-6.81-9.8,2.39-2.4,0-17.94,0-17.94s-5.68-11.95-3.58-16.43S393,341.61,393,341.61s0-40.64,24.51-42.44c0,0,17.34.6,19.43-7.17s15.84-12.26,15.84-12.26l31.39,6.88s27.79,6,32.88,2.39,9,4.78,9,4.78,17.33.9,19.12,4.49-5.67,38.55-5.67,38.55-12.56-1.19-11.66,12.26S523,379.58,523,379.58s-.9,9.86-.3,11.95c.56,1.93-1.18,9.45-1.46,10.61l0,.15s-1.25,5,.37,6.78a2,2,0,0,0,.52.4c2.4,1.19,6,12.85,6,12.85a11.83,11.83,0,0,1,2.69,8.07c-.29,4.79,1.5,16.14,9.27,22.72S555.9,475.22,555.9,475.22Z", transform: "translate(-100.52 -33.01)", fill: "#a36468" }),
+    React.createElement("path", { d: "M422.59,406l0,1.27-.54,14s-18.39,1.49-28.4-1-5.8-13.6-5.4-15.9a.37.37,0,0,0,0-.09c.29-2.1,3-19.58,3-22.42s0-14.5-.45-19.88S393,341.61,393,341.61l1.94-2.38L416,347.3Z", transform: "translate(-100.52 -33.01)", fill: "#a36468" }),
+    React.createElement("path", { d: "M422.54,407.3l-.54,14s-18.39,1.49-28.4-1-5.8-13.6-5.4-15.9Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M423.86,421.22a10.84,10.84,0,0,0-.07-5.47s-.91-.75-2.16-1.86c15.83-2.21,78.52-10.81,99.63-11.75l0,.15s-1.25,5,.37,6.78Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M523.62,432s3.89,22-10.61,29.74C513,461.78,521.23,450.87,523.62,432Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M428.72,462.37s35-6,41.85-1.34S428.72,462.37,428.72,462.37Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M511.52,326.22s-5.38,22.12-1.35,27.2S511.52,326.22,511.52,326.22Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M410.19,308.14s4.93,8.22,1.94,16.74S410.19,308.14,410.19,308.14Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M400,380.18s6.28,3.73,4.19,9.56S400,380.18,400,380.18Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M399.43,363.14s5.82,3.14,6.57,7.77S399.43,363.14,399.43,363.14Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M485.81,541.88s36.62,3.74,43.94-4.93C529.75,537,496.72,543.53,485.81,541.88Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M422.59,539.79s39.31,9.27,47.08,1.94C469.67,541.73,435.89,544.27,422.59,539.79Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M488.65,554s16.44,0,24.06.45S488.65,554,488.65,554Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M425.28,561s8.07,9.12,17.19,7.48S425.28,561,425.28,561Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("path", { d: "M441.13,187.65c-2.53,3.93-2.62,8.48-3.28,12.84-1.54,10.19-6.53,20.06-14.34,28.38-7.17,7.62-17,14.53-18.86,23.84-1.76,8.84,4.21,17.35,7.34,26,8.25,22.69-3.27,46.49-6.63,69.91-.93,6.47.19,14.74,8.16,16.89,2.49.68,5.34.59,7.58,1.67,3,1.44,3.92,4.43,4.47,7.12a108.82,108.82,0,0,1,2.06,29.28c-.36,5.5-.76,11.83,4.44,15.61,2.36,1.73,5.54,2.61,8.61,3.44,8.19,2.21,18.78,4,24.3-1.19,2.32-2.17,3.19-5.23,6.08-6.95,4.33-2.57,10.47-.83,15.92-.56,11.19.56,21.47-6,25.88-13.91s4-17,2.4-25.53-4.46-17-4.66-25.66c-.07-3,.2-6.05,1.92-8.71,3.33-5.15,11.08-7.49,16.38-11.54,9.93-7.6,9.9-20.05,6.29-30.47S525.1,277.7,524.3,266.93a11.87,11.87,0,0,1,1.47-7.53c1.42-2.19,3.9-3.83,6-5.64,14.49-12.24,12.78-32.34.8-46.1C519.31,192.41,459.23,159.56,441.13,187.65Z", transform: "translate(-100.52 -33.01)", fill: "#e3787d" }),
+    React.createElement("g", { opacity: "0.1" },
+        React.createElement("path", { d: "M413.83,288.13c1.13-9.09.92-18.1-2.29-26.95-1.58-4.34-3.87-8.65-5.54-13a18.76,18.76,0,0,0-1.8,5c-1.76,8.84,4.21,17.35,7.34,26A47.28,47.28,0,0,1,413.83,288.13Z", transform: "translate(-100.52 -33.01)" }),
+        React.createElement("path", { d: "M427.18,386.05a109.22,109.22,0,0,0-2.05-29.28c-.56-2.69-1.48-5.67-4.48-7.11-2.24-1.08-5.09-1-7.58-1.67a10.33,10.33,0,0,1-7-5.78c-.46,2.28-.86,4.55-1.19,6.83-.93,6.47.19,14.74,8.16,16.89,2.49.67,5.34.58,7.58,1.66,3,1.44,3.92,4.43,4.48,7.12a110.81,110.81,0,0,1,1.92,13.52C427.09,387.49,427.13,386.77,427.18,386.05Z", transform: "translate(-100.52 -33.01)" }),
+        React.createElement("path", { d: "M512.42,382.5c-4.42,7.94-14.7,14.47-25.89,13.91-5.45-.28-11.59-2-15.91.56-2.89,1.71-3.77,4.78-6.09,6.95-5.52,5.15-16.11,3.4-24.3,1.19-3.07-.84-6.24-1.71-8.61-3.44a10.8,10.8,0,0,1-4.25-6.9c.06,3.07,0,6.15-.19,9.22-.36,5.5-.76,11.83,4.44,15.62,2.37,1.72,5.54,2.6,8.61,3.43,8.19,2.21,18.78,4,24.3-1.19,2.32-2.17,3.2-5.23,6.09-7,4.32-2.57,10.46-.83,15.91-.56,11.19.56,21.47-6,25.89-13.91,4.24-7.64,4.05-16.28,2.57-24.53A26.87,26.87,0,0,1,512.42,382.5Z", transform: "translate(-100.52 -33.01)" }),
+        React.createElement("path", { d: "M531.36,236.28c-2.14,1.8-4.62,3.45-6,5.64a11.87,11.87,0,0,0-1.47,7.53,40.06,40.06,0,0,0,2.06,9.6,39.94,39.94,0,0,1,5.45-4.84c9.8-8.27,12.18-20.14,9-31.22A28.54,28.54,0,0,1,531.36,236.28Z", transform: "translate(-100.52 -33.01)" }),
+        React.createElement("path", { d: "M528.45,311.05c-5.29,4.05-13.05,6.4-16.37,11.55-1.73,2.66-2,5.73-1.93,8.7a60.08,60.08,0,0,0,1.28,10.4,9.62,9.62,0,0,1,.65-1.17c3.32-5.15,11.08-7.49,16.37-11.54,9.07-6.94,9.83-17.92,7.15-27.71A20.76,20.76,0,0,1,528.45,311.05Z", transform: "translate(-100.52 -33.01)" })),
+    React.createElement("path", { d: "M582.8,332.35s25.86-1.34,28.1-12.25-7-22-9.26-23.17S575,277.2,575,277.2l-39.3-25.1s-18.83-54-23-33.33,12.11,48.12,12.11,48.12,22.56,14.5,25.1,18.83S568,301.41,568,301.41Z", transform: "translate(-100.52 -33.01)", fill: "#efb7b9" }),
+    React.createElement("path", { d: "M596.7,314.71c-6.12,15.55-14.05,21.68-14.05,21.68l-4.41,0-38.77.4L535,324.58l6.28-26.46,3.88.16s4.64,2.39,7.47,2.39,8.38-.15,10,.59a1.23,1.23,0,0,0,.73.11c1.47-.15,3-2.35,3-2.35S602.83,299.17,596.7,314.71Z", transform: "translate(-100.52 -33.01)", fill: "#a36468" }),
+    React.createElement("path", { d: "M596.7,314.71c-6.12,15.55-14.05,21.68-14.05,21.68l-4.41,0c2.3-6.16,7.15-18.8,9-21.72,1.81-2.76-14.43-9.63-23.93-13.34,1.47-.15,3-2.35,3-2.35S602.83,299.17,596.7,314.71Z", transform: "translate(-100.52 -33.01)", opacity: "0.1" }),
+    React.createElement("circle", { cx: "179.99", cy: "124.52", r: "31.5", fill: screenPrimary3, opacity: "0.1" }),
+    React.createElement("circle", { cx: "113.99", cy: "49.52", r: "19.5", fill: screenPrimary3, opacity: "0.1" }),
+    React.createElement("circle", { cx: "12", cy: "93.02", r: "12", fill: screenPrimary3, opacity: "0.1" })));

package/dist/components/inputs/NumberInput.d.ts

@@ -0,0 +1,15 @@
+export type NumberInputStyles = {
+    focusedColor: string;
+    focusedBg: string;
+    focusedBoxShadow: string;
+};
+type Props = {
+    id?: string;
+    value: number;
+    minValue?: number;
+    maxValue?: number;
+    styles: NumberInputStyles;
+    onChange: (newValue: number) => unknown;
+};
+export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): JSX.Element;
+export {};

package/dist/components/inputs/NumberInput.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { KEY_DOWN, KEY_UP } from 'react-cosmos-core';
+import { useFocus } from '../../hooks/useFocus.js';
+import { TextContainer, TextField, TextInputContainer, TextMirror, } from './shared.js';
+const maxNumber = Number.MAX_SAFE_INTEGER || 9007199254740991;
+export function NumberInput({ id, value, minValue = -maxNumber, maxValue = maxNumber, styles, onChange, }) {
+    const [rawValue, setRawValue] = useState(String(value));
+    const { focused, onFocus, onBlur } = useFocus();
+    // Reset raw value when value prop changes
+    useEffect(() => {
+        setRawValue(String(value));
+    }, [value]);
+    function trimMinMax(input) {
+        return Math.max(minValue, Math.min(maxValue, input));
+    }
+    function trimDecimals(input) {
+        // Don't allow floating point to exceed 6 decimal points.
+        // This prevents values like 1463.1000000000001
+        return input % 1 === 0 ? input : Number(input.toFixed(6));
+    }
+    function trim(input) {
+        return trimDecimals(trimMinMax(input));
+    }
+    function handleChange(e) {
+        const input = e.currentTarget.value;
+        // Allowed inputs: "", "123", "-123", "-", "123.456", ".456", "."
+        if (!input.match(/^(-?[0-9]*|(-?[0-9]+)?\.[0-9]*)$/))
+            return;
+        // Valid numbers are propagated to the parent component immediately, while
+        // invalid ones are discarded on blur
+        const parsed = parseFloat(input);
+        if (isNaN(parsed))
+            // Typing an invalid number is temporarily allowed, as it might be part of
+            // a valid number that the user is in the process of typing. Eg. A minus
+            // sign or a dot.
+            return setRawValue(input);
+        const trimmed = trim(parsed);
+        // Unless the value exceeds the [min,max] bounds and needs to be trimmed,
+        // preserve the raw value as is. This allows transitioning from integers to
+        // floats. Eg. A "1." raw value is just "1" when parsed, but the dot has
+        // to be preserved to be able to input the decimals.
+        setRawValue(trimmed === parsed ? input : String(trimmed));
+        if (trimmed !== value)
+            onChange(trimmed);
+    }
+    function handleBlur() {
+        onBlur();
+        // Reset the raw value. Eg. "1." becomes "1", or an empty raw value is
+        // replaced with the current value prop.
+        setRawValue(String(value));
+    }
+    function increment(step, direction) {
+        let parsed = parseFloat(rawValue);
+        if (isNaN(parsed))
+            parsed = value;
+        onChange(trim(parsed + step * direction));
+    }
+    function handleKeyDown(e) {
+        function getStep() {
+            // Jump value by 100 when CMD is pressed
+            // Jump value by 10 when SHIFT is pressed
+            // Jump value by 0.1 when ALT is pressed
+            // Jump value by 1 by default
+            return e.metaKey ? 100 : e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
+        }
+        switch (e.keyCode) {
+            case KEY_UP:
+                e.preventDefault();
+                return increment(getStep(), 1);
+            case KEY_DOWN:
+                e.preventDefault();
+                return increment(getStep(), -1);
+        }
+    }
+    return (React.createElement(TextInputContainer, { focused: focused, focusedBg: styles.focusedBg, focusedBoxShadow: styles.focusedBoxShadow },
+        React.createElement(TextContainer, null,
+            React.createElement(TextMirror, { minWidth: 8, focused: focused }, rawValue),
+            React.createElement(TextField, { rows: 1, id: id, value: rawValue, focused: focused, color: styles.focusedColor, onChange: handleChange, onFocus: onFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }))));
+}

package/dist/components/inputs/Select.d.ts

@@ -0,0 +1,16 @@
+type BaseOption = {
+    value: string;
+    label: string;
+};
+type Props<Option extends BaseOption> = {
+    id?: string;
+    testId?: string;
+    options: Option[];
+    value: string;
+    color: string;
+    height: number;
+    padding: number;
+    onChange: (newValue: Option) => unknown;
+};
+export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): JSX.Element;
+export {};

package/dist/components/inputs/Select.js

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { useFocus } from '../../hooks/useFocus.js';
+import { blue, grey32 } from '../../style/colors.js';
+import { ChevronDownIcon } from '../icons/index.js';
+const CUSTOM_LABEL = 'Custom';
+export function Select({ id, testId, options, value, color, height, padding, onChange, }) {
+    const { focused, onFocus, onBlur } = useFocus();
+    const onInputChange = useCallback((e) => {
+        const option = options.find(o => o.value === e.target.value);
+        if (!option) {
+            throw new Error(`Select value doesn't match any option`);
+        }
+        onChange(option);
+    }, [onChange, options]);
+    const selectedOption = options.find(o => o.value === value);
+    const selectedLabel = selectedOption ? selectedOption.label : CUSTOM_LABEL;
+    return (React.createElement(Container, { focused: focused, bg: grey32 },
+        React.createElement(VisibleButton, { height: height, padding: padding },
+            React.createElement(Label, { height: height, color: color }, selectedLabel),
+            React.createElement(IconContainer, { color: color },
+                React.createElement(ChevronDownIcon, null))),
+        React.createElement(SelectInput, { id: id, "data-testid": testId, value: value, onFocus: onFocus, onBlur: onBlur, onChange: onInputChange },
+            !selectedOption && (React.createElement("option", { key: "custom-option", value: value }, CUSTOM_LABEL)),
+            options.map((option, idx) => {
+                return (React.createElement("option", { key: idx, value: option.value }, option.label));
+            }))));
+}
+const Container = styled.div `
+  position: relative;
+  border-radius: 3px;
+  background: ${props => props.bg};
+  box-shadow: ${props => (props.focused ? `0 0 0.5px 1px ${blue}` : 'none')};
+  overflow: hidden;
+`;
+const VisibleButton = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 ${props => props.padding - 2}px 0 ${props => props.padding}px;
+  height: ${props => props.height}px;
+`;
+const Label = styled.span `
+  color: ${props => props.color};
+  line-height: ${props => props.height}px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const iconSize = 16;
+const IconContainer = styled.span `
+  flex-shrink: 0;
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  padding: 2px 0 0 2px;
+  color: ${props => props.color};
+  opacity: 0.7;
+`;
+const SelectInput = styled.select `
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  outline: none;
+  opacity: 0;
+`;

package/dist/components/inputs/shared.d.ts

@@ -0,0 +1,14 @@
+export declare const TextInputContainer: import("styled-components").StyledComponent<"div", any, {
+    focused: boolean;
+    focusedBg: string;
+    focusedBoxShadow: string;
+}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextField: import("styled-components").StyledComponent<"textarea", any, {
+    focused: boolean;
+    color: string;
+}, never>;
+export declare const TextMirror: import("styled-components").StyledComponent<"div", any, {
+    focused: boolean;
+    minWidth: number;
+}, never>;

package/dist/components/inputs/shared.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { lightBlue } from '../../style/colors.js';
+export const TextInputContainer = styled.div `
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 2px 5px;
+  border-radius: 3px;
+  background: ${props => (props.focused ? props.focusedBg : 'transparent')};
+  box-shadow: ${props => (props.focused ? props.focusedBoxShadow : 'none')};
+`;
+export const TextContainer = styled.div `
+  position: relative;
+`;
+export const TextField = styled.textarea `
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: ${props => props.color};
+  font-size: 14px;
+  line-height: 20px;
+  white-space: pre;
+  overflow: hidden;
+  outline: none;
+  resize: none;
+  opacity: ${props => (props.focused ? 1 : 0)};
+`;
+export const TextMirror = styled.div `
+  color: ${lightBlue};
+  opacity: ${props => (props.focused ? 0 : 1)};
+  min-width: ${props => props.minWidth}px;
+  min-height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/dist/cosmos.decorator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default _default;

package/dist/cosmos.decorator.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CosmosGlobalStyle, GlobalStyle } from './style/globalStyle.js';
+export default ({ children }) => (React.createElement(React.Fragment, null,
+    React.createElement(GlobalStyle, null),
+    React.createElement(CosmosGlobalStyle, null),
+    children));

package/dist/cosmos.loadPlugins.d.ts

@@ -0,0 +1 @@
+import './plugins/pluginEntry.js';

package/dist/cosmos.loadPlugins.js

@@ -0,0 +1,17 @@
+import { loadPlugins } from 'react-plugin';
+import './plugins/pluginEntry.js';
+import { DEFAULT_PLUGIN_CONFIG } from './shared/defaultPluginConfig.js';
+// This file is required to run globally with side effects for the "inception"
+// fixture to work.
+loadPlugins({
+    config: {
+        ...DEFAULT_PLUGIN_CONFIG,
+        core: {
+            projectId: 'testProjectId',
+            fixturesDir: '__fixtures__',
+            fixtureFileSuffix: 'fixture',
+            devServerOn: true,
+            webRendererUrl: '/_renderer.html',
+        },
+    },
+});

package/dist/hooks/useDrag.d.ts

@@ -0,0 +1,14 @@
+type UseDragArgs = {
+    value: number;
+    direction?: 'horizontal' | 'vertical';
+    reverse?: boolean;
+    double?: boolean;
+    min?: number;
+    max?: number;
+    onChange: (value: number) => unknown;
+};
+export declare function useDrag({ value, direction, reverse, double, min, max, onChange, }: UseDragArgs): {
+    dragElRef: (elRef: HTMLElement | null) => void;
+    dragging: boolean;
+};
+export {};

package/dist/hooks/useDrag.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function useDrag({ value, direction = 'horizontal', reverse = false, double = false, min = 0, max = 99999, onChange, }) {
+    const [dragState, setDragState] = useState(null);
+    const handleDrag = useCallback((e) => {
+        if (dragState) {
+            const { startValue, startOffset } = dragState;
+            let diff = direction === 'horizontal'
+                ? e.clientX - startOffset
+                : e.clientY - startOffset;
+            if (reverse)
+                diff *= -1;
+            if (double)
+                diff *= 2;
+            const curValue = Math.min(max, Math.max(min, startValue + diff));
+            onChange(curValue);
+        }
+    }, [direction, double, dragState, max, min, onChange, reverse]);
+    const handleDragEnd = useCallback(() => {
+        setDragState(null);
+    }, []);
+    const handleDragStart = useCallback((e) => {
+        setDragState({
+            startValue: value,
+            startOffset: direction === 'horizontal' ? e.clientX : e.clientY,
+        });
+    }, [direction, value]);
+    useEffect(() => {
+        if (dragState) {
+            document.addEventListener('mousemove', handleDrag);
+            document.addEventListener('mouseup', handleDragEnd);
+            return () => {
+                document.removeEventListener('mousemove', handleDrag);
+                document.removeEventListener('mouseup', handleDragEnd);
+            };
+        }
+    }, [dragState, handleDrag, handleDragEnd]);
+    // The returned ref callback will be re-created whenever the "value" arg
+    // changes (because handleDragStart depends on it). Even if a DOM node stays
+    // constant, whenever we pass a new ref callback to its element React will
+    // call it again. The following code ensures:
+    //   1. Proper cleanup on unmount
+    //   2. The 'mousedown' events is never attached more than once
+    // Safety aside, if re-creating the ref callback so often proves to be a perf
+    // concern, we can make handleDragStart depend on a constant ref that stays
+    // in sync with "value".
+    const onUnmount = useRef(null);
+    const dragElRef = useCallback((elRef) => {
+        if (elRef) {
+            elRef.addEventListener('mousedown', handleDragStart);
+            onUnmount.current = () => elRef.removeEventListener('mousedown', handleDragStart);
+        }
+        else if (onUnmount.current) {
+            onUnmount.current();
+            onUnmount.current = null;
+        }
+    }, [handleDragStart]);
+    return { dragElRef, dragging: dragState !== null };
+}

package/dist/hooks/useFocus.d.ts

@@ -0,0 +1,5 @@
+export declare function useFocus(): {
+    focused: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+};

package/dist/hooks/useFocus.js

@@ -0,0 +1,7 @@
+import { useCallback, useState } from 'react';
+export function useFocus() {
+    const [focused, setFocused] = useState(false);
+    const onFocus = useCallback(() => setFocused(true), []);
+    const onBlur = useCallback(() => setFocused(false), []);
+    return { focused, onFocus, onBlur };
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+export * from './components/buttons/index.js';
+export * from './components/icons/index.js';
+export * from './playgroundConfig.js';
+export * from './plugins/BuildNotifications/spec.js';
+export * from './plugins/ClassStatePanel/spec.js';
+export * from './plugins/ContentOverlay/spec.js';
+export * from './plugins/ControlPanel/spec.js';
+export * from './plugins/ControlSelect/spec.js';
+export * from './plugins/Core/spec.js';
+export * from './plugins/FixtureBookmark/spec.js';
+export * from './plugins/FixtureSearch/spec.js';
+export * from './plugins/FixtureTree/spec.js';
+export * from './plugins/FullScreenButton/spec.js';
+export * from './plugins/MessageHandler/spec.js';
+export * from './plugins/Notifications/spec.js';
+export * from './plugins/PluginList/spec.js';
+export * from './plugins/PropsPanel/spec.js';
+export * from './plugins/RemoteRenderer/spec.js';
+export * from './plugins/RendererCore/spec.js';
+export * from './plugins/RendererPreview/spec.js';
+export * from './plugins/RendererSelect/spec.js';
+export * from './plugins/ResponsivePreview/spec.js';
+export * from './plugins/Root/spec.js';
+export * from './plugins/Router/spec.js';
+export * from './plugins/StandardControl/spec.js';
+export * from './plugins/Storage/spec.js';
+export * from './slots/ControlActionSlot.js';
+export * from './slots/ControlSlot.js';
+export * from './slots/FixtureActionSlot.js';
+export * from './slots/NavRowSlot.js';
+export * from './slots/RendererActionSlot.js';
+export * from './slots/SidePanelRowSlot.js';
+export * from './slots/ValueInputSlot.js';
+export * from './style/colors.js';
+export * from './style/vars.js';
+export * from './testHelpers/pluginMocks.js';