@m4l/components 0.0.58 → 0.0.59

package/dist/components/DynamicFilter/index.js

@@ -33,7 +33,9 @@ const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
   width: "100%",
-  marginLeft: theme.spacing(1.5)
+  margin: theme.spacing(0, 1.5),
+  paddingLeft: theme.spacing(1.5),
+  borderLeft: `1px solid ${theme.palette.divider}`
 }));
 const ContainerApplyedFilters = styled("div")(({
   theme
@@ -42,7 +44,7 @@ const ContainerApplyedFilters = styled("div")(({
   display: "flex",
   justifyContent: "flex-start",
   alignItems: "center",
-  height: theme.spacing(3.75),
+  height: "auto",
   gap: theme.spacing(1.5)
 }));
 const STRING_OPERATORS = ["c", "nc"];
@@ -1043,8 +1045,9 @@ const WrapperApplyedFilter = styled("div")(({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  height: theme.spacing(3.75),
-  padding: theme.spacing(1),
+  height: "100%",
+  minHeight: theme.spacing(3),
+  padding: theme.spacing(0, 1),
   backgroundColor: theme.palette.action.disabledBackground,
   borderRadius: theme.spacing(1),
   "&.waf_no_setted": {
@@ -1059,7 +1062,7 @@ const AplyedFilterStyled = styled("div")(({
   justifyContent: "center",
   alignItems: "center",
   width: "auto",
-  height: theme.spacing(3.75),
+  height: "100%",
   marginRight: theme.spacing(1),
   marginLeft: theme.spacing(1),
   whiteSpace: "nowrap"
@@ -1156,6 +1159,7 @@ function ApplyedFilters() {
     });
   }
   return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+    className: "WrapperApplyedFilters",
     children: /* @__PURE__ */ jsx(ScrollBar, {
       children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         id: "WrapperApplyedFilters",
@@ -1178,11 +1182,8 @@ const SKTClearFilters = styled$1("div")(({
 const WrapperClearFilters = styled$1("div")(({
   theme
 }) => ({
-  [theme.breakpoints.up("sm")]: {
-    paddingLeft: theme.spacing(1.5),
-    marginLeft: theme.spacing(1.5),
-    borderLeft: `1px solid ${theme.palette.divider}`
-  }
+  paddingLeft: theme.spacing(0.5),
+  borderLeft: `1px solid ${theme.palette.divider}`
 }));
 const ClearFilters = () => {
   const {
@@ -1223,7 +1224,12 @@ const SKTWrapperFilterButton = styled("div")(({
   height: theme.spacing(3.75),
   background: alpha(theme.palette.primary.main, 0.3)
 }));
-const WrapperFilterButton = styled("div")(() => ({
+const WrapperFilterButton = styled("div")(({
+  theme
+}) => ({
+  paddingRight: theme.spacing(0.75),
+  marginRight: theme.spacing(0.75),
+  borderRight: `1px solid ${theme.palette.divider}`,
   "&.isDirty": {
     animationName: "dirtyEffect",
     animationDuration: "1s",
@@ -1293,11 +1299,7 @@ const WrapperInputFilter = styled("div")(({
   justifyContent: "center",
   alignItems: "center",
   width: "100%",
-  height: theme.spacing(3.75),
-  marginLeft: theme.spacing(1.5),
-  padding: theme.spacing(0, 1.5),
-  borderRight: `1px solid ${theme.palette.divider}`,
-  borderLeft: `1px solid ${theme.palette.divider}`,
+  height: theme.spacing(3),
   [theme.breakpoints.up("sm")]: {
     width: theme.spacing(25)
   }
@@ -1309,7 +1311,6 @@ const StyledInputFilter = styled("input")(({
   justifyContent: "center",
   alignItems: "center",
   minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75),
   width: "100%",
   "&": {
     outline: "none",
@@ -1552,7 +1553,7 @@ const WrapperFilter = styled("div", {
   justifyContent: "flex-start",
   height: "auto",
   width: "100%",
-  padding: theme.spacing(1.5),
+  padding: theme.spacing(0.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
 }));
@@ -1569,10 +1570,15 @@ const WrapperFilterMobile = styled("div", {
   minWidth: theme.spacing(25),
   height: "auto",
   width: "100%",
-  padding: theme.spacing(1.5),
+  padding: theme.spacing(0.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
-  gap: theme.spacing(1.5)
+  gap: theme.spacing(0.75),
+  "& .WrapperApplyedFilters": {
+    margin: "0px",
+    padding: "0px",
+    border: "0px"
+  }
 }));
 const ContainerFistRow = styled("div")(() => ({
   width: "100%",
@@ -1591,7 +1597,7 @@ const DynamicFilter = (props) => {
       children: ({
         inEdition
       }) => isDesktop ? /* @__PURE__ */ jsxs(WrapperFilter, {
-        id: "WrapperDynamicFilter",
+        id: "WrapperFilter",
         inEdition,
         children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
       }) : /* @__PURE__ */ jsxs(WrapperFilterMobile, {

package/dist/components/Icon/index.js

@@ -9,7 +9,8 @@ const MaskIcon = styled("div", {
   width: props.width === void 0 ? "20px" : props.width,
   height: props.height === void 0 ? "20px" : props.height,
   backgroundColor: props.bgColor,
-  mask: `url('data:image/svg+xml;base64,${props.src}')`
+  mask: `url('data:image/svg+xml;base64,${props.src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${props.src}')`
 }));
 const WrapperPlaceHolder = styled("div", {
   shouldForwardProp: (props) => props !== "widht" && props !== "height"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.58",
+  "version": "0.0.59",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
-    "@m4l/graphics": "^0.0.37",
+    "@m4l/graphics": "^0.0.38",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",