kamotive_ui 1.2.29 → 2.3.26

package/dist/Icons/IconAttach/IconAttach.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const IconAttach = ({ color = 'inherit', htmlColor, strokeWidth, onClick, style }) => {
     return (React.createElement("svg", { width: "11", height: "13", viewBox: "0 0 11 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
-        React.createElement("path", { d: "M6.37877 4.15256L2.88551 7.64632C2.63416 7.9059 2.49642 8.25544 2.50202 8.61952C2.50761 8.9836 2.65609 9.33302 2.91541 9.59238C3.17473 9.85173 3.5241 10.0002 3.88813 10.0058C4.25215 10.0114 4.60165 9.87367 4.86118 9.62229L9.44315 5.04607C9.66417 4.83039 9.83953 4.57234 9.95906 4.28687C10.0786 4.0014 10.1399 3.6942 10.1395 3.38306C10.139 3.07192 10.0768 2.76304 9.95651 2.47432C9.83618 2.1856 9.66009 1.92279 9.43845 1.70113C9.21682 1.47946 8.95405 1.30335 8.66537 1.18299C8.3767 1.06264 8.06786 1.00044 7.75676 1C7.44567 0.999565 7.13851 1.0609 6.85308 1.18044C6.56765 1.29999 6.30964 1.47537 6.094 1.69642L1.48439 6.30669C1.1725 6.6096 0.924855 6.9724 0.755862 7.374C0.58687 7.7756 0.499896 8.208 0.5 8.64604C0.500104 9.08408 0.587283 9.51903 0.756467 9.92561C0.925651 10.3322 1.17347 10.7023 1.4855 11.0144C1.79754 11.3264 2.16757 11.5743 2.57409 11.7435C2.98061 11.9127 3.4155 11.9999 3.85348 12C4.29146 12.0001 4.72379 11.9131 5.12533 11.7441C5.52688 11.5751 5.88963 11.3274 6.19249 11.0155L10.5 6.70734", stroke: htmlColor || "#55534E", strokeMiterlimit: "10", strokeLinecap: "round", strokeWidth: strokeWidth || '1' })));
+        React.createElement("path", { d: "M6.37877 4.15256L2.88551 7.64632C2.63416 7.9059 2.49642 8.25544 2.50202 8.61952C2.50761 8.9836 2.65609 9.33302 2.91541 9.59238C3.17473 9.85173 3.5241 10.0002 3.88813 10.0058C4.25215 10.0114 4.60165 9.87367 4.86118 9.62229L9.44315 5.04607C9.66417 4.83039 9.83953 4.57234 9.95906 4.28687C10.0786 4.0014 10.1399 3.6942 10.1395 3.38306C10.139 3.07192 10.0768 2.76304 9.95651 2.47432C9.83618 2.1856 9.66009 1.92279 9.43845 1.70113C9.21682 1.47946 8.95405 1.30335 8.66537 1.18299C8.3767 1.06264 8.06786 1.00044 7.75676 1C7.44567 0.999565 7.13851 1.0609 6.85308 1.18044C6.56765 1.29999 6.30964 1.47537 6.094 1.69642L1.48439 6.30669C1.1725 6.6096 0.924855 6.9724 0.755862 7.374C0.58687 7.7756 0.499896 8.208 0.5 8.64604C0.500104 9.08408 0.587283 9.51903 0.756467 9.92561C0.925651 10.3322 1.17347 10.7023 1.4855 11.0144C1.79754 11.3264 2.16757 11.5743 2.57409 11.7435C2.98061 11.9127 3.4155 11.9999 3.85348 12C4.29146 12.0001 4.72379 11.9131 5.12533 11.7441C5.52688 11.5751 5.88963 11.3274 6.19249 11.0155L10.5 6.70734", stroke: htmlColor || "#828286", strokeMiterlimit: "10", strokeLinecap: "round", strokeWidth: strokeWidth || '2' })));
 };
 export const IconAttachToString = (color = 'inherit', htmlColor, strokeWidth, onClick, style) => {
     return `<svg

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/IconExpand/IconExpand.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC } from 'react';
+export declare const IconExpand: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconExpand/IconExpand.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconExpand = ({ color = 'inherit', htmlColor, strokeWidth = '0.4', 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 },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, d: "M1.88575 15.6C2.20403 15.6 2.50925 15.7263 2.73429 15.9514C2.95932 16.1764 3.08575 16.4816 3.08575 16.8V20.4H6.68575C7.00403 20.4 7.30925 20.5263 7.53429 20.7514C7.75932 20.9764 7.88575 21.2816 7.88575 21.6C7.88575 21.9183 7.75932 22.2236 7.53429 22.4486C7.30925 22.6736 7.00403 22.8 6.68575 22.8H3.08575C2.44489 22.8 1.83025 22.5471 1.37015 22.0969C0.91004 21.6468 0.65718 21.0322 0.65718 20.4V16.8C0.65718 16.4816 0.78361 16.1764 1.00865 15.9514C1.23368 15.7263 1.5389 15.6 1.88575 15.6ZM21.0858 15.6C21.3797 15.6001 21.6634 15.7079 21.883 15.9032C22.1026 16.0984 22.2431 16.3677 22.2773 16.6596L22.2858 16.8V20.4C22.2859 21.0053 22.0572 21.5885 21.6456 22.0325C21.2339 22.4765 20.6695 22.7486 20.0658 22.7939L19.8858 22.8H16.2858C15.9799 22.7997 15.6857 22.681 15.4633 22.4726C15.2408 22.2641 15.1071 21.9756 15.0886 21.6702C15.0701 21.3649 15.1677 21.0643 15.3669 20.8298C15.566 20.5953 15.8416 20.4444 16.1453 20.4084L16.2858 20.4H19.8858V16.8C19.8858 16.4816 20.0122 16.1764 20.2373 15.9514C20.4623 15.7263 20.7675 15.6 21.0858 15.6ZM19.8858 1.2C20.4911 1.19972 21.0743 1.42841 21.5183 1.84011C21.9623 2.25181 22.2344 2.81613 22.2797 3.41991L22.2858 3.6V7.2C22.2854 7.50591 22.1667 7.80008 21.9583 8.02253C21.7498 8.24498 21.4613 8.37861 21.156 8.39708C20.8506 8.41555 20.55 8.31795 20.3155 8.11881C20.081 7.91966 19.9301 7.64404 19.8941 7.34031L19.8858 7.2V3.6H16.2858C15.9799 3.59957 15.6857 3.48084 15.4633 3.27241C15.2408 3.06397 15.1071 2.77542 15.0886 2.47006C15.0701 2.16471 15.1677 1.86409 15.3669 1.62959C15.566 1.39509 15.8416 1.24421 16.1453 1.20831L16.2858 1.2H19.8858ZM6.68575 1.2C6.98166 1.20043 7.27583 1.31916 7.49828 1.52759C7.72073 1.73603 7.85436 2.02458 7.87283 2.32994C7.89129 2.63529 7.7937 2.93591 7.59455 3.17041C7.39541 3.40491 7.11979 3.55579 6.81606 3.59169L6.68575 3.6H3.08575V7.2C3.08532 7.50591 2.96659 7.80008 2.75816 8.02253C2.54972 8.24498 2.26117 8.37861 1.95581 8.39708C1.65046 8.41555 1.34984 8.31795 1.11534 8.11881C0.880839 7.91966 0.729957 7.64404 0.694057 7.34031L0.68575 7.2V3.6C0.685473 2.99468 0.914162 2.41152 1.32586 1.96753C1.73756 1.52354 2.30188 1.25147 2.90566 1.20617L3.08575 1.2H6.68575Z" })));
+};

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/IconFilter/IconFilter.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC } from 'react';
+export declare const IconFilter: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: number;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconFilter/IconFilter.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconFilter = ({ color = 'inherit', htmlColor, strokeWidth = 0.75, 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 },
+        React.createElement("path", { fill: htmlColor || '#828286', stroke: htmlColor || '#828286', strokeWidth: strokeWidth, d: "M14.2759 22C14.0461 21.9998 13.8208 21.9326 13.6244 21.8054L9.43096 19.2462C8.95914 18.9574 8.5686 18.5617 8.29696 18.0946C8.02532 17.6275 7.88178 17.0896 7.88014 16.5425V12.1076C7.88094 11.7401 7.75604 11.3816 7.52292 11.0824L1.66799 3.55524C1.53128 3.37006 1.4497 3.14797 1.43225 2.91732C1.4148 2.68668 1.46216 2.45583 1.56911 2.2538C1.67606 2.05178 1.83843 1.88663 2.03832 1.77527C2.23822 1.66393 2.46784 1.61387 2.70188 1.61429H20.7258C20.96 1.61326 21.19 1.66297 21.39 1.77423C21.5902 1.88549 21.7528 2.05084 21.8598 2.25321C21.967 2.45558 22.0142 2.68671 21.9966 2.91745C21.9788 3.14819 21.8968 3.37015 21.7596 3.55524L15.9047 11.0824C15.6712 11.3815 15.5458 11.7401 15.5463 12.1076V21.1214C15.5459 21.4439 15.4121 21.7534 15.174 21.9865C14.9359 22.2196 14.613 22.3419 14.2759 22ZM2.70188 2.87051L8.54676 10.4076C8.93412 10.9079 9.14104 11.5005 9.1379 12.1076V16.5414C9.13836 16.8611 9.22512 17.1761 9.38974 17.4555C9.55436 17.7349 9.79126 17.9694 10.0775 18.1292L14.2709 20.6879L14.2885 12.1064C14.2857 11.4992 14.4931 10.9066 14.8809 10.4067L20.7346 2.89818L2.70188 2.87051Z" })));
+};

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/IconSearch/IconSearch.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC } from 'react';
+export declare const IconSearch: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: number;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconSearch/IconSearch.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const IconSearch = ({ color = 'inherit', htmlColor, strokeWidth = 0.5, 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 },
+        React.createElement("g", { fill: "none", fillRule: "evenodd" },
+            React.createElement("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+            React.createElement("path", { fill: htmlColor || '#828286', strokeWidth: strokeWidth, stroke: htmlColor || '#828286', d: "M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" }))));
+};

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';
@@ -47,3 +48,6 @@ export { IconPencilFilled } from './IconPencilFilled/IconPencilFilled';
 export { IconDeleteFilled } from './IconDeleteFilled/IconDeleteFilled';
 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';
@@ -47,3 +48,6 @@ export { IconPencilFilled } from './IconPencilFilled/IconPencilFilled';
 export { IconDeleteFilled } from './IconDeleteFilled/IconDeleteFilled';
 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,19 +1,22 @@
 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 formatFileSize: (bytes?: number) => string;
+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>;
 export {};

package/dist/components/AttachedFilesPreview/AttachedFilesPreview.js

@@ -1,69 +1,30 @@
 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) => {
-    if (!bytes || bytes === 0)
-        return '0 Bytes';
+export const formatFileSize = (bytes, lng) => {
+    if (!bytes || bytes === 0) {
+        return lng === 'ru' || (lng === null || lng === void 0 ? void 0 : lng.includes('ru')) ? '0 Байт' : '0 Bytes';
+    }
     const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const sizesEn = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const sizesRu = ['Байт', 'КБ', 'МБ', 'ГБ', 'ТБ'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
+    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, }) => {
-    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))))))));
+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;