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

package/dist/true-react-common-ui-kit.umd.cjs

@@ -8195,7 +8195,7 @@
     });
   };
   var ITEM_HORIZONTAL_PADDING = 16;
-  var ICON_SIZE$1 = 20;
+  var ICON_SIZE = 20;
   var ICON_GAP = 12;
   var useStyles$V = createThemedStyles("ListItem", {
     root: {
@@ -8225,11 +8225,11 @@
       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: {
@@ -9356,6 +9356,7 @@
   });
   var useStyles$N = createThemedStyles("Checkbox", {
     root: {
+      position: "relative",
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -14461,9 +14462,6 @@
     }));
   });
   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",
@@ -14473,7 +14471,7 @@
       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",
@@ -14486,7 +14484,10 @@
       },
       "&:active": {
         extend: "active"
-      }
+      },
+      width: "var(--icon-button-size)",
+      height: "var(--icon-button-size)",
+      "--icon-button-icon-size": "20px"
     },
     "cancel-light": {},
     cancel: {},
@@ -14505,8 +14506,8 @@
     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",
@@ -14514,16 +14515,17 @@
       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) {