kamotive_ui 23.12.25 → 30.3.26

package/dist/Icons/IconBulletlist/IconBulletlist.js

@@ -1,56 +1,45 @@
 import React from 'react';
 export const IconBulletlist = ({ color = 'inherit', htmlColor, strokeWidth, onClick, style }) => {
-    return (React.createElement("svg", { width: "14", height: "11", viewBox: "0 0 14 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
-        React.createElement("path", { d: "M1.38735 1.77467C1.87741 1.77467 2.27469 1.37739 2.27469 0.887333C2.27469 0.397273 1.87741 0 1.38735 0C0.897278 0 0.5 0.397273 0.5 0.887333C0.5 1.37739 0.897278 1.77467 1.38735 1.77467Z", fill: htmlColor || "#55534E" }),
-        React.createElement("path", { d: "M4.50732 0.886665H12.3508", stroke: htmlColor || "#55534E", strokeWidth: strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { d: "M1.38735 6.38733C1.87741 6.38733 2.27469 5.99006 2.27469 5.5C2.27469 5.00994 1.87741 4.61267 1.38735 4.61267C0.897278 4.61267 0.5 5.00994 0.5 5.5C0.5 5.99006 0.897278 6.38733 1.38735 6.38733Z", fill: htmlColor || "#55534E" }),
-        React.createElement("path", { d: "M4.50732 5.5H12.3508", stroke: htmlColor || "#55534E", strokeWidth: strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { d: "M1.38735 11C1.87741 11 2.27469 10.6027 2.27469 10.1127C2.27469 9.62261 1.87741 9.22533 1.38735 9.22533C0.897278 9.22533 0.5 9.62261 0.5 10.1127C0.5 10.6027 0.897278 11 1.38735 11Z", fill: htmlColor || "#55534E" }),
-        React.createElement("path", { d: "M4.50732 10.1133H12.3508", stroke: htmlColor || "#55534E", strokeWidth: strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+    return (React.createElement("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
+        React.createElement("path", { d: "M1 3L2.5 1.5V5", fill: htmlColor || "#55534E" }),
+        React.createElement("path", { d: "M6 3H15", stroke: htmlColor || "#55534E", strokeWidth: strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M1 9.5C1 8.5 1.5 8 2.5 8C3.5 8 4 8.5 4 9.5C4 11 1 12 1 12H4", fill: htmlColor || "#55534E" }),
+        React.createElement("path", { d: "M6 10H15", stroke: htmlColor || "#55534E", strokeWidth: strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M1 15.5C1 15.5 1.5 14.5 2.5 14.5C3.5 14.5 4 15 4 15.5C4 16 3.5 16.5 2.5 16.5H1.5M1.5 16.5C2.5 16.5 4 16.5 4 18C4 19.5 3.5 19.5 2.5 19.5C1.5 19.5 1 19 1 19", fill: htmlColor || "#55534E" }),
+        React.createElement("path", { d: "M6 17H15", stroke: htmlColor || "#55534E", strokeWidth: strokeWidth || "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
 };
 export const IconBulletlistToString = (color = 'inherit', htmlColor, strokeWidth, onClick, style) => {
     return `<svg
-    width="14"
-    height="11"
-    viewBox="0 0 14 11"
+    width="16"
+    height="14" 
+    viewBox="0 0 16 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     class="${color}"
+    style="${style}"
     onclick="${onClick}"
     style="${style}"
   >
-    <path
-      d="M1.38735 1.77467C1.87741 1.77467 2.27469 1.37739 2.27469 0.887333C2.27469 0.397273 1.87741 0 1.38735 0C0.897278 0 0.5 0.397273 0.5 0.887333C0.5 1.37739 0.897278 1.77467 1.38735 1.77467Z"
-      fill="${htmlColor || "#55534E"}"
-    />
-    <path
-      d="M4.50732 0.886665H12.3508"
-      stroke="${htmlColor || "#55534E"}"
-      strokeWidth="${strokeWidth || "1.5"}"
-      strokeLinecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M1.38735 6.38733C1.87741 6.38733 2.27469 5.99006 2.27469 5.5C2.27469 5.00994 1.87741 4.61267 1.38735 4.61267C0.897278 4.61267 0.5 5.00994 0.5 5.5C0.5 5.99006 0.897278 6.38733 1.38735 6.38733Z"
-      fill="${htmlColor || "#55534E"}"
-    />
-    <path
-      d="M4.50732 5.5H12.3508"
-      stroke="${htmlColor || "#55534E"}"
-      strokeWidth="${strokeWidth || "1.5"}"
-      strokeLinecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M1.38735 11C1.87741 11 2.27469 10.6027 2.27469 10.1127C2.27469 9.62261 1.87741 9.22533 1.38735 9.22533C0.897278 9.22533 0.5 9.62261 0.5 10.1127C0.5 10.6027 0.897278 11 1.38735 11Z"
-      fill="${htmlColor || "#55534E"}"
-    />
-    <path
-      d="M4.50732 10.1133H12.3508"
-      stroke="${htmlColor || "#55534E"}"
-      strokeWidth="${strokeWidth || "1.5"}"
-      strokeLinecap="round"
-      stroke-linejoin="round"
-    />
+
+    <path 
+      d="M1 3L2.5 1.5V5" 
+      stroke="${htmlColor || "#55534E"}" stroke-width="${strokeWidth || "1.25"}" stroke-linecap="round" stroke-linejoin="round"/>
+    <path 
+      d="M6 3H15" 
+      stroke="${htmlColor || "#55534E"}" stroke-width="${strokeWidth || "1.25"}" stroke-linecap="round"/>
+    
+    <path 
+      d="M1 9.5C1 8.5 1.5 8 2.5 8C3.5 8 4 8.5 4 9.5C4 11 1 12 1 12H4" 
+      stroke="${htmlColor || "#55534E"}" strokeWidth="${strokeWidth || "1.25"}" stroke-linecap="round" stroke-linejoin="round"/>
+    <path 
+      d="M6 10H15" 
+      stroke="${htmlColor || "#55534E"}" stroke-width="${strokeWidth || "1.25"}" stroke-linecap="round"/>
+    
+    <path 
+      d="M1 15.5C1 15.5 1.5 14.5 2.5 14.5C3.5 14.5 4 15 4 15.5C4 16 3.5 16.5 2.5 16.5H1.5M1.5 16.5C2.5 16.5 4 16.5 4 18C4 19.5 3.5 19.5 2.5 19.5C1.5 19.5 1 19 1 19" 
+      stroke="${htmlColor || "#55534E"}" stroke-width="${strokeWidth || "1.25"}" stroke-linecap="round" stroke-linejoin="round"/>
+    <path 
+      d="M6 17H15" 
+      stroke="${htmlColor || "#55534E"}" stroke-width="${strokeWidth || "1.25"}" stroke-linecap="round"/>
   </svg>`;
 };

package/dist/Icons/IconCancel/IconCancel.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties, FC } from 'react';
+export declare const IconCancel: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+    style?: CSSProperties;
+}>;
+export declare const IconCancelToString: (color?: string, htmlColor?: string, strokeWidth?: string, onClick?: (event: React.MouseEvent<SVGSVGElement>) => void, style?: CSSProperties) => string;

package/dist/Icons/IconCancel/IconCancel.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export const IconCancel = ({ color = 'inherit', htmlColor, strokeWidth, onClick, style }) => {
+    return (React.createElement("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, d: "M12,3C16.75,3 21,7.25 21,12C21,16.75 16.75,21 12,21C7.25,21 3,16.75 3,12C3,7.25 7.25,3 12,3M12,4C7.81,4 4,7.81 4,12C4,16.19 7.81,20 12,20C16.19,20 20,16.19 20,12C20,7.81 16.19,4 12,4Z" }),
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, d: "M15.5,8L12,11.5L8.5,8L7.8,8.7L11.3,12.2L7.8,15.7L8.5,16.4L12,12.9L15.5,16.4L16.2,15.7L12.7,12.2L16.2,8.7L15.5,8Z" })));
+};
+export const IconCancelToString = (color = 'inherit', htmlColor, strokeWidth, onClick, style) => {
+    return `<svg
+    width="11"
+    height="8"
+    viewBox="0 0 11 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="${color}"
+    onclick="${onClick}"
+    style="${style}"
+  > 
+
+      <path
+      d="M2.5 1.5L8.5 6.5M8.5 1.5L2.5 6.5"
+      stroke="${htmlColor || "#0d99ff"}"
+      stroke-width="${strokeWidth || '1'}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+};

package/dist/Icons/IconClose/IconClose.js

@@ -1,7 +1,5 @@
 import React from 'react';
 export const IconClose = ({ color = 'inherit', htmlColor, strokeWidth = '0.3', onClick, style }) => {
-    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick },
-        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, 
-            // d="M16.24,7.76L12,12L7.76,7.76L7.05,8.47L11.29,12.71L7.05,16.95L7.76,17.66L12,13.42L16.24,17.66L16.95,16.95L12.71,12.71L16.95,8.47L16.24,7.76Z"
-            d: "M17,7L12,12L7,7L6.3,7.7L11.3,12.7L6.3,17.7L7,18.4L12,13.4L17,18.4L17.7,17.7L12.7,12.7L17.7,7.7L17,7Z" })));
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '0.3 !important' }, d: "M17,7L12,12L7,7L6.3,7.7L11.3,12.7L6.3,17.7L7,18.4L12,13.4L17,18.4L17.7,17.7L12.7,12.7L17.7,7.7L17,7Z" })));
 };

package/dist/Icons/IconDelete/IconDelete.d.ts

@@ -1,5 +1,7 @@
 import React, { CSSProperties, FC } from 'react';
 export declare const IconDelete: FC<{
+    width?: string | number;
+    height?: string | number;
     color?: string;
     htmlColor?: string;
     strokeWidth?: string;

package/dist/Icons/IconDelete/IconDelete.js

@@ -1,5 +1,5 @@
 import React from 'react';
-export const IconDelete = ({ color = 'inherit', htmlColor, strokeWidth = '0.3', onClick, style }) => {
-    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
-        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, d: "M18,19C18,20.66 16.66,22 15,22H8C6.34,22 5,20.66 5,19V7H4V4H8.5L9.5,3H13.5L14.5,4H19V7H18V19M6,7V19C6,20.1 6.9,21 8,21H15C16.1,21 17,20.1 17,19V7H6M18,6V5H14L13,4H10L9,5H5V6H18M8,9H9V19H8V9M14,9H15V19H14V9Z" })));
+export const IconDelete = ({ width = '100%', height = '100%', color = 'inherit', htmlColor, strokeWidth = '0.3', onClick, style }) => {
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "none", xmlns: "www.w3.org", className: color, onClick: onClick, style: style },
+        React.createElement("path", { d: "M18,19C18,20.66 16.66,22 15,22H8C6.34,22 5,20.66 5,19V7H4V4H8.5L9.5,3H13.5L14.5,4H19V7H18V19M6,7V19C6,20.1 6.9,21 8,21H15C16.1,21 17,20.1 17,19V7H6M18,6V5H14L13,4H10L9,5H5V6H18M8,9H9V19H8V9M14,9H15V19H14V9Z", fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth } })));
 };

package/dist/Icons/IconFile/IconFile.d.ts

@@ -4,4 +4,5 @@ export declare const IconFile: FC<{
     htmlColor?: string;
     strokeWidth?: string;
     style?: CSSProperties;
+    text?: string;
 }>;

package/dist/Icons/IconFile/IconFile.js

@@ -1,5 +1,6 @@
 import React from 'react';
-export const IconFile = ({ color = 'inherit', htmlColor, strokeWidth = '0.3', style }) => {
+export const IconFile = ({ color = 'inherit', htmlColor, strokeWidth = '0.3', style, text }) => {
     return (React.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: color, style: style },
-        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, strokeLinejoin: "round", d: "M14,11C12.34,11 11,9.66 11,8V4H7C5.9,4 5,4.9 5,6V19C5,20.1 5.9,21 7,21H16C17.1,21 18,20.1 18,19V11H14M12,8C12,9.1 12.9,10 14,10H17.59L12,4.41V8M7,3H12L19,10V19C19,20.66 17.66,22 16,22H7C5.34,22 4,20.66 4,19V6C4,4.34 5.34,3 7,3Z" })));
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, strokeLinejoin: "round", d: "M14,11C12.34,11 11,9.66 11,8V4H7C5.9,4 5,4.9 5,6V19C5,20.1 5.9,21 7,21H16C17.1,21 18,20.1 18,19V11H14M12,8C12,9.1 12.9,10 14,10H17.59L12,4.41V8M7,3H12L19,10V19C19,20.66 17.66,22 16,22H7C5.34,22 4,20.66 4,19V6C4,4.34 5.34,3 7,3Z" }),
+        text ? (React.createElement("text", { x: "12", y: "16", textAnchor: "middle", fill: "white", fontSize: "5", fontWeight: "bold" }, "ZIP")) : (React.createElement("path", { d: "M16 13H8M16 17H8M10 9H8", stroke: "white", strokeWidth: "1" }))));
 };

package/dist/Icons/IconFileDefault/IconFileDefault.js

@@ -1,6 +1,6 @@
 import React from 'react';
 export const IconFileDefault = ({ color = 'inherit', htmlColor, strokeWidth = '0.3', style, text }) => {
-    return (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+    return (React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none" },
         React.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z", fill: htmlColor || "#6b7280" }),
         React.createElement("polyline", { points: "14,2 14,8 20,8", fill: htmlColor || "#6b7280" }),
         text ? (React.createElement("text", { x: "12", y: "16", textAnchor: "middle", fill: "white", fontSize: "5", fontWeight: "bold" }, "ZIP")) : (React.createElement("path", { d: "M16 13H8M16 17H8M10 9H8", stroke: "white", strokeWidth: "1" }))));

package/dist/Icons/IconPencil/IconPencil.d.ts

@@ -1,7 +1,10 @@
-import { CSSProperties, FC } from 'react';
+import React, { CSSProperties, FC } from 'react';
 export declare const IconPencil: FC<{
+    width?: string | number;
+    height?: string | number;
     color?: string;
     htmlColor?: string;
     strokeWidth?: string;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
     style?: CSSProperties;
 }>;

package/dist/Icons/IconPencil/IconPencil.js

@@ -1,5 +1,5 @@
 import React from 'react';
-export const IconPencil = ({ color = 'inherit', htmlColor, strokeWidth, style }) => {
-    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, style: style },
+export const IconPencil = ({ width = '100%', height = '100%', color = 'inherit', htmlColor, strokeWidth, onClick, style }) => {
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
         React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, d: "M19.71,8.04L17.37,10.37L13.62,6.62L15.96,4.29C16.35,3.9 17,3.9 17.37,4.29L19.71,6.63C20.1,7 20.1,7.65 19.71,8.04M3,17.25L13.06,7.18L16.81,10.93L6.75,21H3V17.25M16.62,5.04L15.08,6.58L17.42,8.92L18.96,7.38L16.62,5.04M15.36,11L13,8.64L4,17.66V20H6.34L15.36,11Z" })));
 };

package/dist/Icons/IconPencilCancel/IconPencilCancel.d.ts

@@ -0,0 +1,10 @@
+import React, { FC, CSSProperties } from 'react';
+export declare const IconPencilCancel: FC<{
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconPencilCancel/IconPencilCancel.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const IconPencilCancel = ({ width = '100%', height = '100%', color = 'inherit', htmlColor, strokeWidth = '0.1', onClick, style }) => {
+    const finalColor = htmlColor || 'currentColor';
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "none", xmlns: "www.w3.org", className: color, onClick: onClick, style: style },
+        React.createElement("path", { fill: finalColor, stroke: finalColor, style: { strokeWidth: strokeWidth }, d: "M19.71,8.04L17.37,10.37L13.62,6.62L15.96,4.29C16.35,3.9 17,3.9 17.37,4.29L19.71,6.63C20.1,7 20.1,7.65 19.71,8.04M3,17.25L13.06,7.18L16.81,10.93L6.75,21H3V17.25M16.62,5.04L15.08,6.58L17.42,8.92L18.96,7.38L16.62,5.04M15.36,11L13,8.64L4,17.66V20H6.34L15.36,11Z" }),
+        React.createElement("circle", { cx: "16.5", cy: "16.5", r: "5.5", fill: "white" }),
+        React.createElement("path", { d: "M19.5 13.5L13.5 19.5M13.5 13.5L19.5 19.5", stroke: finalColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+};

package/dist/Icons/IconSubmit/IconSubmit.d.ts

@@ -1,5 +1,7 @@
 import React, { CSSProperties, FC } from 'react';
 export declare const IconSubmit: FC<{
+    width?: string | number;
+    height?: string | number;
     color?: string;
     htmlColor?: string;
     strokeWidth?: string;

package/dist/Icons/IconSubmit/IconSubmit.js

@@ -1,6 +1,6 @@
 import React from 'react';
 export const IconSubmit = ({ color = 'inherit', htmlColor, strokeWidth, onClick, style }) => {
-    return (React.createElement("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
+    return (React.createElement("svg", { width: '100%', height: '100%', viewBox: "0 0 11 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
         React.createElement("path", { d: "M9.5957 0.9C9.60588 0.9 9.61862 0.904148 9.62988 0.915625C9.64163 0.92768 9.65039 0.946815 9.65039 0.969336C9.65038 0.989162 9.64247 1.00515 9.63281 1.01719L9.62891 1.02207L3.72363 7.08359L3.72266 7.08457C3.71706 7.09032 3.71067 7.09391 3.70508 7.09629C3.69967 7.09855 3.69452 7.10017 3.68945 7.10019C3.68423 7.10019 3.67843 7.09866 3.67285 7.09629C3.66738 7.09393 3.66172 7.09015 3.65625 7.08457L3.65527 7.08359L1.07129 4.43223C1.06557 4.42636 1.06042 4.41815 1.05664 4.40879C1.05293 4.39954 1.05082 4.38923 1.05078 4.37852C1.05078 4.36763 1.05286 4.35664 1.05664 4.34727C1.06038 4.33806 1.06567 4.33062 1.07129 4.3248C1.07698 4.31896 1.08316 4.31453 1.08887 4.31211C1.09449 4.30974 1.10018 4.30918 1.10547 4.30918C1.11077 4.30919 1.11644 4.30972 1.12207 4.31211C1.12777 4.31453 1.13396 4.31896 1.13965 4.3248L3.33203 6.5748L3.68945 6.94199L4.04785 6.5748L9.5625 0.915625C9.57359 0.904352 9.58563 0.900112 9.5957 0.9Z", stroke: htmlColor || "white", strokeWidth: strokeWidth || '1' })));
 };
 export const IconSubmitToString = (color = 'inherit', htmlColor, strokeWidth, onClick, style) => {

package/dist/Icons/index.d.ts

@@ -39,6 +39,7 @@ export { IconStrikethrough, IconStrikethroughToString } from './IconStrikethroug
 export { IconRedo, IconRedoToString } from './IconRedo/IconRedo';
 export { IconUndo, IconUndoToString } from './IconUndo/IconUndo';
 export { IconSubmit, IconSubmitToString } from './IconSubmit/IconSubmit';
+export { IconCancel, IconCancelToString } from './IconCancel/IconCancel';
 export { IconBulletlist, IconBulletlistToString } from './IconBulletlist/IconBulletlist';
 export { IconFileAudio } from './IconFileAudio/IconFileAudio';
 export { IconFileVideo } from './IconFileVideo/IconFileVideo';
@@ -49,3 +50,4 @@ export { IconShare } from './IconShare/IconShare';
 export { IconMultiselect } from './IconMultiselect/IconMultiselect';
 export { IconSearch } from './IconSearch/IconSearch';
 export { IconFilter } from './IconFilter/IconFilter';
+export { IconPencilCancel } from './IconPencilCancel/IconPencilCancel';

package/dist/Icons/index.js

@@ -39,6 +39,7 @@ export { IconStrikethrough, IconStrikethroughToString } from './IconStrikethroug
 export { IconRedo, IconRedoToString } from './IconRedo/IconRedo';
 export { IconUndo, IconUndoToString } from './IconUndo/IconUndo';
 export { IconSubmit, IconSubmitToString } from './IconSubmit/IconSubmit';
+export { IconCancel, IconCancelToString } from './IconCancel/IconCancel';
 export { IconBulletlist, IconBulletlistToString } from './IconBulletlist/IconBulletlist';
 export { IconFileAudio } from './IconFileAudio/IconFileAudio';
 export { IconFileVideo } from './IconFileVideo/IconFileVideo';
@@ -49,3 +50,4 @@ export { IconShare } from './IconShare/IconShare';
 export { IconMultiselect } from './IconMultiselect/IconMultiselect';
 export { IconSearch } from './IconSearch/IconSearch';
 export { IconFilter } from './IconFilter/IconFilter';
+export { IconPencilCancel } from './IconPencilCancel/IconPencilCancel';

package/dist/components/AttachedFilesPreview/AttachedFilesPreview.d.ts

@@ -1,20 +1,21 @@
 import React, { CSSProperties } from 'react';
+import { TAttachments } from '../../types';
 export interface FilePreview {
     file: File;
     id: string;
     preview?: string;
     lng: string;
 }
-export declare const getFileIcon: (file: File) => React.JSX.Element;
+export declare const getFileIcon: (file: TAttachments) => React.JSX.Element;
 export declare const formatFileSize: (bytes?: number, lng?: string) => string;
 interface AttachedFilesProps {
-    files: FilePreview[];
+    files: TAttachments[];
+    onDownload?: (file: TAttachments) => void;
+    allowDelete?: boolean;
     onDelete?: (id: string) => void;
-    onDownload?: (file: File) => void;
     style?: CSSProperties;
     className?: string;
-    isEdit?: boolean;
-    allowDownload?: boolean;
+    maxFileCount?: number;
     lng: string;
 }
 export declare const AttachedFilesPreview: React.FC<AttachedFilesProps>;

package/dist/components/AttachedFilesPreview/AttachedFilesPreview.js

@@ -1,34 +1,8 @@
 import React from 'react';
-import { IconFileDefault, IconFileVideo, IconFileAudio } from '../../Icons';
-import styles from './AttachedFilesPreview.module.css';
+import { IconFile } from '../../Icons';
+import { FileItem, Typography } from '../..';
 export const getFileIcon = (file) => {
-    const fileType = file.type.toLowerCase();
-    const fileName = file.name.toLowerCase();
-    if (fileType === 'application/pdf' || fileName.endsWith('.pdf')) {
-        return React.createElement(IconFileDefault, { htmlColor: "#dc2626", text: "PDF" });
-    }
-    if (fileType.includes('word') || fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
-        return React.createElement(IconFileDefault, { htmlColor: "#2563eb", text: "DOC" });
-    }
-    if (fileType.includes('sheet') || fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {
-        return React.createElement(IconFileDefault, { htmlColor: "#16a34a", text: "XLS" });
-    }
-    if (fileType.includes('presentation') || fileName.endsWith('.ppt') || fileName.endsWith('.pptx')) {
-        return React.createElement(IconFileDefault, { htmlColor: "#ea580c", text: "PPT" });
-    }
-    if (fileType.includes('text') || fileName.endsWith('.txt')) {
-        return React.createElement(IconFileDefault, { htmlColor: "#6b7280", text: "TXT" });
-    }
-    if (fileType.includes('zip') || fileType.includes('rar') || fileName.endsWith('.zip') || fileName.endsWith('.rar')) {
-        return React.createElement(IconFileDefault, { htmlColor: "#7c3aed", text: "ZIP" });
-    }
-    if (fileType.includes('video')) {
-        return React.createElement(IconFileVideo, null);
-    }
-    if (fileType.includes('audio')) {
-        return React.createElement(IconFileAudio, null);
-    }
-    return React.createElement(IconFileDefault, null);
+    return React.createElement(IconFile, { htmlColor: 'var(--text-btn-light)', color: 'var(--text-btn-light)' });
 };
 // Функция для форматирования размера файла
 export const formatFileSize = (bytes, lng) => {
@@ -42,31 +16,15 @@ export const formatFileSize = (bytes, lng) => {
     const sizes = lng === 'ru' || (lng === null || lng === void 0 ? void 0 : lng.includes('ru')) ? sizesRu : sizesEn;
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
-export const AttachedFilesPreview = ({ files, onDelete, onDownload, style, className, isEdit, allowDownload = true, lng, }) => {
-    const handleDelete = (event, id) => {
-        event.stopPropagation();
-        if (onDelete) {
-            onDelete(id);
-        }
-    };
-    const handleDownload = (file) => {
-        if (onDownload) {
-            onDownload(file);
-        }
-        else {
-            const url = URL.createObjectURL(file);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = file.name;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-        }
-    };
-    return (React.createElement("div", { className: className, style: style }, files.map((file) => (React.createElement("div", { key: file.id, className: styles.attachedFileItem },
-        React.createElement("div", { onClick: allowDownload ? () => handleDownload(file.file) : undefined, className: styles.filePreview },
-            file.preview ? (React.createElement("img", { src: file.preview, alt: file.file.name, className: styles.previewImage })) : (React.createElement("div", { className: styles.previewImage }, getFileIcon(file.file))),
-            isEdit && (React.createElement("button", { className: styles.removeFileButton, onClick: (event) => handleDelete(event, file.id) }, "\u2715")),
-            React.createElement("div", { className: styles.fileSize }, formatFileSize(file.file.size, lng))))))));
+export const AttachedFilesPreview = ({ files, onDownload, allowDelete = false, onDelete, style, className, maxFileCount = 5, lng, }) => {
+    return (React.createElement("div", { className: className, style: style, title: "" },
+        files.map((file, index) => {
+            var _a;
+            return (React.createElement(FileItem, { key: `${index + ((_a = file.filename) !== null && _a !== void 0 ? _a : '')}`, file: file, error: file.error, canDelete: allowDelete, canDownload: Boolean(onDownload), onDelete: (id) => allowDelete && (onDelete === null || onDelete === void 0 ? void 0 : onDelete(id)), onDownload: (file) => onDownload === null || onDownload === void 0 ? void 0 : onDownload(file), style: {
+                    border: !file.error ? 'none' : undefined,
+                    padding: !file.error ? '5px 5px' : '5px 5px',
+                    borderRadius: '5px'
+                }, isRejectedFile: file.error, isComment: true, lng: lng }));
+        }),
+        files.length > maxFileCount && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, (lng === 'ru' || lng.includes('ru')) ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`))));
 };

package/dist/components/AttachedFilesPreview/AttachedFilesPreview.module.css

@@ -1,42 +1,54 @@
+
 .attachedFileItem {
+	/* flex-shrink: 0;
+	position: relative;
+	cursor: pointer; */
 	display: flex;
+	gap: 10px;
 	align-items: center;
-	width: fit-content;
-	border: none;
+	justify-content: space-between;
+}
+.icon{
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
 }
-
 .fileSize {
-	position: absolute;
+	/* position: absolute; */
 	font-family: var(--font-family-content);
 	bottom: 0;
-	margin: 5px;
 	font-size: 10px;
 	color: var(--text-dark);
 }
-
-.filePreview {
-	flex-shrink: 0;
-	position: relative;
-	cursor: pointer;
+.nameContainer {
+	display: flex;
+	gap: 6px;
+	align-items: center
+}
+.name {
+	display: flex;
+	gap: 12px;
+	align-items: flex-end;
 }
 
 .previewImage {
-	width: 50px;
-	height: 50px;
+	/* width: 50px;
+	height: 50px; */
 	object-fit: cover;
-	border-radius: 4px;
-	border: 1px solid #e0e0e0;
+	/* border-radius: 4px; */
+	/* border: 1px solid #e0e0e0; */
 }
 
 .removeFileButton {
-	position: absolute;
+	/* position: absolute;
 	right: 0;
-	top: 0;
+	top: 0;  */
 	background: none;
 	border: none;
 	color: var(--text-btn-light);
 	cursor: pointer;
-	font-size: 16px;
+	font-size: 12px;
 	padding: 2px 4px;
 	margin-left: 8px;
 	border-radius: 4px;

package/dist/components/Button/Button.js

@@ -1,14 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styles from './Button.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export const Button = ({ label, variant = 'fill', size = 'md', style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
-    const [buttonStyle, setButtonStyle] = useState('');
-    const [buttonCondition, setButtonCondition] = useState(condition);
-    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${buttonStyle}`], {
+export const Button = ({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
+    const btnIcon = icon || typeof children === 'object' && children;
+    let modeStyle = 'text';
+    if (mode) {
+        modeStyle = mode;
+    }
+    else if (btnIcon && variant !== 'link') {
+        modeStyle = (!label && !children) ? 'icon' : 'default';
+    }
+    const buttonCondition = error ? 'error' : (condition || 'default');
+    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${modeStyle}`], {
         [styles[`button--${variant}-${buttonCondition}`]]: buttonCondition && !color,
         [styles[`button--${variant}-custom`]]: color && !error
     });
@@ -48,51 +55,19 @@ export const Button = ({ label, variant = 'fill', size = 'md', style, condition,
             return '#FFFFFF';
         }
     };
-    const btnIcon = icon || typeof children === 'object' && children;
-    useEffect(() => {
-        if (!buttonStyle && style) {
-            setButtonStyle(style);
-        }
-        else {
-            if (btnIcon && variant !== 'link') {
-                if (!label && !(typeof children === 'string' && children)) {
-                    setButtonStyle('icon');
-                }
-                else {
-                    setButtonStyle('default');
-                }
-            }
-            else {
-                setButtonStyle('text');
-            }
-        }
-    }, [style, btnIcon, label, children]);
-    useEffect(() => {
-        if (!condition) {
-            if (error) {
-                setButtonCondition('error');
-            }
-            else {
-                setButtonCondition('default');
-            }
-        }
-        else {
-            error ? setButtonCondition('error') : setButtonCondition(condition);
-        }
-    }, [condition, error]);
     const iconColorStyle = iconColorFn();
-    if (!buttonStyle) {
+    if (!modeStyle) {
         return (React.createElement("button", { className: buttonClasses },
             React.createElement(Typography, { variant: "Body1" }, "\u041A\u043D\u043E\u043F\u043A\u0430")));
     }
-    return (React.createElement("button", { className: buttonClasses, style: color && !error ? {
+    return (React.createElement("button", { className: buttonClasses, style: Object.assign(Object.assign({}, style), (color && !error ? {
             '--button-color': color,
             '--button-hover-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 90%, black)` : `color-mix(in srgb, ${color} 10%, transparent)`,
             '--button-active-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 20%, transparent)`,
             '--button-disabled-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 10%, transparent)`,
             '--button-disabled-textColor': variant === 'fill' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 50%, transparent)`,
-        } : {}, onClick: onClick, disabled: disabled, "aria-disabled": disabled, type: type, name: name ? name : label ? `button-${label}` : 'button', form: form },
-        btnIcon && (buttonStyle === 'icon' || buttonStyle === 'default') && (() => {
+        } : {})), onClick: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e), disabled: disabled, "aria-disabled": disabled, type: type, name: name ? name : label ? `button-${label}` : 'button', form: form },
+        btnIcon && (modeStyle === 'icon' || modeStyle === 'default') && (() => {
             var _a;
             const iconElement = btnIcon;
             const defaultStrokeWidth = size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0';
@@ -101,5 +76,5 @@ export const Button = ({ label, variant = 'fill', size = 'md', style, condition,
                 strokeWidth: (_a = iconElement.props.strokeWidth) !== null && _a !== void 0 ? _a : defaultStrokeWidth,
             });
         })(),
-        (buttonStyle === 'text' || buttonStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
+        (modeStyle === 'text' || modeStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
 };

package/dist/components/ColorPicker/ColorPicker.js

@@ -129,7 +129,7 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
         setIsColorChanged(true);
         setColorValue(newColor);
         setSelectedColor(newColor);
-        onColorChange(newColor);
+        onColorChange === null || onColorChange === void 0 ? void 0 : onColorChange(newColor);
     };
     return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, ref: divRef },
         mainColor && (React.createElement("div", { className: mainColorClasses, style: {