chore: Input morphing (#35845)

/ok-to-test tags="@tag.Widget"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
	- Added new input widgets: Email, Password, Number, and Multiline.
	- Enhanced configuration options for phone and currency inputs.

- **Bug Fixes**
- Improved type handling for input properties, ensuring better
validation and reliability.

- **Documentation**
- Updated widget exports for better modularity and usage across the
application.

- **Chores**
- Introduced new constants to support the latest input widget types in
the application.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10572140876>
> Commit: a5c4b41
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10572140876&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget`
> Spec:
> <hr>Tue, 27 Aug 2024 06:28:05 UTC
<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <[email protected]>

app/client/packages/icons/package.json

@@ -6,11 +6,11 @@
   "main": "src/index.ts",
   "scripts": {
     "build": "yarn cleanup && figmagic && yarn optimize-icons && yarn generate-components && yarn generate-index && yarn generate-stories  && yarn prettier . --write --log-level=silent",
-    "cleanup": "ts-node ./src/utils/cleanup.ts",
-    "optimize-icons": "ts-node ./src/utils/optimizeIcons.ts",
-    "generate-components": "ts-node ./src/utils/generateComponents.ts",
-    "generate-index": "ts-node ./src/utils/generateIndex.ts",
-    "generate-stories": "ts-node ./src/utils/generateStories.ts",
+    "cleanup": "npx ts-node ./src/utils/cleanup.ts",
+    "optimize-icons": "npx ts-node ./src/utils/optimizeIcons.ts",
+    "generate-components": "npx ts-node ./src/utils/generateComponents.ts",
+    "generate-index": "npx ts-node ./src/utils/generateIndex.ts",
+    "generate-stories": "npx ts-node ./src/utils/generateStories.ts",
     "lint": "yarn g:lint",
     "prettier": "yarn g:prettier"
   },

app/client/packages/icons/src/components/Icons/EmailInputIcon.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const EmailInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2"/></svg>;

app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="square" stroke-opacity=".25" d="M8.5 8.5v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-1M7.5 8.5v1a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-1"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 3.5h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2M2.5 3.5h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2"/></svg>;
+export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m11.5 7.5 1 1 1-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="m3.5 8.5 2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/></svg>;

app/client/packages/icons/src/components/Icons/InputIcon.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
+export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1"/></svg>;

app/client/packages/icons/src/components/Icons/MultilineInputIcon.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const MultilineInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 7.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 1.5h-12a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M3.5 12v-2a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 1 0 3H4a.5.5 0 0 1-.5-.5Z"/></svg>;

app/client/packages/icons/src/components/Icons/NumberInputIcon.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const NumberInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 9.5h1m1 0h-1m-1-3 1-1v4M9.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M7.5 9.5v.01"/></svg>;

app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const ParagraphIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>;
+export const ParagraphIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>;

app/client/packages/icons/src/components/Icons/PasswordInputIcon.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const PasswordInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" stroke-width="2.1" d="M4 7h.01M7 7h.01M10 7h.01"/></svg>;

app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const ToolbarButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m3.5 7.5 1 1 1-2M9.5 8.5l2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3.5h-10a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>;
+export const ToolbarButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" fill-rule="evenodd" d="M5 5.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H4v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H5zM13.854 5.854a.5.5 0 0 0-.708-.708l-3 3a.5.5 0 0 0 .708.708zM9.775 9.765a.375.375 0 1 0-.53-.53l-.01.01a.375.375 0 0 0 .53.53z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" d="M13.5 3.5h-11a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>;

app/client/packages/icons/src/components/Thumbnails/EmailInputThumbnail.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const EmailInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M21.5 40.5H19a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5Zm0 0 1.026.342a1.5 1.5 0 0 0 1.974-1.423V36.5a4 4 0 0 0-4-4h-2a4 4 0 0 0-4 4v3a4 4 0 0 0 4 4H23"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;

app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const InlineButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 35 6 6m0-6-6 6"/></svg>;
+export const InlineButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m45.5 37.5 3 3 5-5"/><path stroke="#6A7585" stroke-linecap="round" d="m20 35 6 6m0-6-6 6"/></svg>;

app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const KeyValueThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M35 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 35 43.146V42.5a2 2 0 0 0-2-2h-3M38 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M38 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;
+export const KeyValueThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M34.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M37.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M37.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;

app/client/packages/icons/src/components/Thumbnails/MultilineInputThumbnail.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const MultilineInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="41" x="8.5" y="14.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M49.5 23.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v0M14.5 49.5h4a3 3 0 0 0 3-3v-6a3 3 0 0 0-3-3h-4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1ZM33.5 40.5v0a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v3m8 3v0a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-3m0 0h5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M28.5 20.5h5c1.657 0 3 .843 3 2.5s-1.343 2.5-3 2.5h-4M29.5 25.5h5c1.657 0 3 1.843 3 3.5s-1.343 3.5-3 3.5h-6M29.5 20.5v12M14.5 32.5l1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 49.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" d="M37.5 49.5v-6m7-6h-4a3 3 0 0 0-3 3v3m0 0h4"/></svg>;

app/client/packages/icons/src/components/Thumbnails/NumberInputThumbnail.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const NumberInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.25" d="M23.5 43.5h.01"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M26 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M33.5 33.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M33.5 43.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;

app/client/packages/icons/src/components/Thumbnails/PasswordInputThumbnail.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const PasswordInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/><path fill="#CC3D00" fill-rule="evenodd" d="M17 34.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L16 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L17.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L17 36.617zm8 0a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L24 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L25.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L25 36.617zm7.5-.5a.5.5 0 0 1 .5.5v2.117l1.743-1.046a.5.5 0 0 1 .514.858L33.472 37.5l1.785 1.071a.5.5 0 1 1-.514.858L33 38.383V40.5a.5.5 0 1 1-1 0v-2.117l-1.743 1.046a.5.5 0 1 1-.514-.858l1.785-1.071-1.785-1.071a.5.5 0 1 1 .514-.858L32 36.617V34.5a.5.5 0 0 1 .5-.5m8.5.5a.5.5 0 1 0-1 0v2.117l-1.743-1.046a.5.5 0 1 0-.514.858l1.785 1.071-1.785 1.071a.5.5 0 1 0 .514.858L40 38.383V40.5a.5.5 0 0 0 1 0v-2.117l1.743 1.046a.5.5 0 0 0 .514-.858L41.472 37.5l1.785-1.071a.5.5 0 1 0-.514-.858L41 36.617z" clip-rule="evenodd"/></svg>;

app/client/packages/icons/src/components/Thumbnails/SelectThumbnail.tsx

@@ -0,0 +1,2 @@
+import React from "react";
+export const SelectThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m56.5 36.5-3 3-3-3"/></svg>;

app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const StatsBoxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M29 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 29 43.146V42.5a2 2 0 0 0-2-2h-3M32 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M32 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>;
+export const StatsBoxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M28.5 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994a2 2 0 0 0 1.257-1.857V42.5a2 2 0 0 0-2-2h-3M31.5 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M31.5 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>;

app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx

@@ -1,2 +1,2 @@
 import React from "react";
-export const ToolbarButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5zm-9 0H10v.5h.5zm4.5-10 .332-.374a.5.5 0 0 0-.664 0zm-1.5 10v.5h.5v-.5zm0-4V39H13v.5zm3 0h.5V39h-.5zm0 4H16v.5h.5zm2.664-6.298.332-.374zm-8.328 0-.332-.374zM11 43.5v-5.551h-1v5.55zm8-5.551v5.55h1v-5.55zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702zM13.5 43h-3v1h3zm.5.5v-4h-1v4zm-.5-3.5h3v-1h-3zm6 3h-3v1h3zM16 39.5v4h1v-4zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12z"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/></svg>;
+export const ToolbarButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="18" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M10.5 38.5h8M14.5 42.5v-8"/><rect width="18" height="16" x="26.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="m38 35-5.5 5.5 1 1L39 36a.707.707 0 0 0-1-1"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/><path fill="#6A7585" stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="m32 41.5.5.5-1 .5z"/></svg>;