@true-engineering/true-react-common-ui-kit 3.58.0 → 3.60.0

package/dist/components/IconButton/IconButton.styles.d.ts

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"main" | "cancel" | "root" | "icon" | "active" | "disabled" | "custom" | "s" | "m" | "loader" | "loading" | "cancel-light", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"main" | "cancel" | "root" | "icon" | "active" | "disabled" | "custom" | "s" | "m" | "l" | "loader" | "loading" | "cancel-light", unknown>;
 export type IIconButtonStyles = ITweakStyles<typeof useStyles>;

package/dist/components/IconButton/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const ICON_BUTTON_SIZES: readonly ["s", "m"];
+export declare const ICON_BUTTON_SIZES: readonly ["s", "m", "l"];
 export declare const ICON_BUTTON_VIEWS: readonly ["cancel", "cancel-light", "main", "custom"];

package/dist/true-react-common-ui-kit.js

@@ -8208,7 +8208,7 @@ var WithPopup = function(param) {
   });
 };
 var ITEM_HORIZONTAL_PADDING = 16;
-var ICON_SIZE$1 = 20;
+var ICON_SIZE = 20;
 var ICON_GAP = 12;
 var useStyles$V = createThemedStyles("ListItem", {
   root: {
@@ -8238,11 +8238,11 @@ var useStyles$V = createThemedStyles("ListItem", {
     backgroundColor: colors.BORDER_LIGHT
   },
   withIconGap: {
-    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE$1 + ICON_GAP
+    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP
   },
   icon: {
-    width: ICON_SIZE$1,
-    height: ICON_SIZE$1,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
     flexShrink: 0
   },
   content: {
@@ -9369,6 +9369,7 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
 });
 var useStyles$N = createThemedStyles("Checkbox", {
   root: {
+    position: "relative",
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
@@ -14474,9 +14475,6 @@ var FileInput = /* @__PURE__ */ forwardRef(function(param, ref) {
   }));
 });
 FileInput.displayName = "FileInput";
-var BUTTON_SIZE_S = 24;
-var BUTTON_SIZE_M = 32;
-var ICON_SIZE = 20;
 var useStyles$A = createThemedStyles("IconButton", {
   root: {
     display: "flex",
@@ -14486,7 +14484,7 @@ var useStyles$A = createThemedStyles("IconButton", {
     outline: "none",
     boxSizing: "border-box",
     transition: animations.defaultTransition,
-    transitionProperty: "background-color, color, border-color",
+    transitionProperty: "background-color, color, border-color, opacity, visibility",
     border: "none",
     position: "relative",
     boxShadow: "none",
@@ -14499,7 +14497,10 @@ var useStyles$A = createThemedStyles("IconButton", {
     },
     "&:active": {
       extend: "active"
-    }
+    },
+    width: "var(--icon-button-size)",
+    height: "var(--icon-button-size)",
+    "--icon-button-icon-size": "20px"
   },
   "cancel-light": {},
   cancel: {},
@@ -14518,8 +14519,8 @@ var useStyles$A = createThemedStyles("IconButton", {
   icon: {
     display: "flex",
     alignItems: "center",
-    width: ICON_SIZE,
-    height: ICON_SIZE
+    width: "var(--icon-button-icon-size)",
+    height: "var(--icon-button-icon-size)"
   },
   loader: {
     display: "none",
@@ -14527,16 +14528,17 @@ var useStyles$A = createThemedStyles("IconButton", {
     left: "50%",
     top: "50%",
     transform: "translate(-50%, -50%)",
-    width: ICON_SIZE,
-    height: ICON_SIZE
+    width: "var(--icon-button-icon-size)",
+    height: "var(--icon-button-icon-size)"
   },
   s: {
-    width: BUTTON_SIZE_S,
-    height: BUTTON_SIZE_S
+    "--icon-button-size": "24px"
   },
   m: {
-    width: BUTTON_SIZE_M,
-    height: BUTTON_SIZE_M
+    "--icon-button-size": "32px"
+  },
+  l: {
+    "--icon-button-size": "40px"
   }
 });
 function _define_property$K(obj, key, value) {