@useloops/design-system 1.4.675 → 1.4.676

package/dist/esm/systems/WebCore/Image/Image.js

@@ -1 +1 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import{styled as e,Box as r,Fade as o,Skeleton as n}from"@mui/material";import{useState as a}from"react";import{useInView as s}from"react-intersection-observer";const h=e("img")(({isLoaded:t})=>({display:"block",width:"100%",objectFit:"cover",height:"100%",opacity:t?1:0,filter:t?"blur(0px)":"blur(15px)",transform:t?"scale(1)":"scale(1.05)",transition:"opacity 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s ease-in-out",transitionDelay:"0.2s"})),l=({children:e,src:l,alt:c,width:d,height:m,containerSx:g,threshold:p=.1,rootMargin:u="500px",...f})=>{const[x,w]=a(!1),{ref:b,inView:v}=s({threshold:p,rootMargin:u,triggerOnce:!0});return t(r,{ref:b,sx:{position:"relative",width:d,height:m,overflow:"hidden",...g},children:[i(o,{in:!x,unmountOnExit:!0,children:i(r,{sx:{width:d,height:m,position:"absolute",inset:0},children:i(n,{variant:"rectangular",width:"100%",height:"100%"})})}),v&&i(h,{onLoad:()=>w(!0),alt:c,src:l,width:d,height:m,isLoaded:x,loading:"lazy",...f})]})};export{l as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as r,Fade as o,Skeleton as n}from"@mui/material";import{useState as s,useRef as a,useEffect as c}from"react";const l=i("img")({display:"block",width:"100%",objectFit:"cover",height:"100%",transition:"opacity 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s ease-in-out",transitionDelay:"0.2s","&.loaded":{opacity:1,filter:"blur(0px)",transform:"scale(1)"},"&:not(.loaded)":{opacity:0,filter:"blur(15px)",transform:"scale(1.05)"}}),h=({src:i,alt:h,width:d,height:u,containerSx:m,threshold:f=.1,rootMargin:p="500px",...g})=>{const[x,w]=s(!1),[b,v]=s(!1),y=a(null);return c(()=>{const t=y.current;if(!t)return;const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(v(!0),e.disconnect())},{threshold:f,rootMargin:p});return e.observe(t),()=>e.disconnect()},[f,p]),t(r,{ref:y,sx:{position:"relative",width:d,height:u,overflow:"hidden",...m},children:[e(o,{in:!x,unmountOnExit:!0,children:e(r,{sx:{width:d,height:u,position:"absolute",inset:0},children:e(n,{variant:"rectangular",width:"100%",height:"100%"})})}),b&&e(l,{onLoad:()=>w(!0),className:x?"loaded":void 0,alt:h,src:i,width:d,height:u,...g})]})};export{h as default};

package/dist/systems/WebCore/Image/Image.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("react"),r=require("react-intersection-observer");const s=t.styled("img")(({isLoaded:e})=>({display:"block",width:"100%",objectFit:"cover",height:"100%",opacity:e?1:0,filter:e?"blur(0px)":"blur(15px)",transform:e?"scale(1)":"scale(1.05)",transition:"opacity 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s ease-in-out",transitionDelay:"0.2s"}));module.exports=({children:o,src:n,alt:a,width:h,height:l,containerSx:d,threshold:c=.1,rootMargin:u="500px",...x})=>{const[g,p]=i.useState(!1),{ref:w,inView:m}=r.useInView({threshold:c,rootMargin:u,triggerOnce:!0});return e.jsxs(t.Box,{ref:w,sx:{position:"relative",width:h,height:l,overflow:"hidden",...d},children:[e.jsx(t.Fade,{in:!g,unmountOnExit:!0,children:e.jsx(t.Box,{sx:{width:h,height:l,position:"absolute",inset:0},children:e.jsx(t.Skeleton,{variant:"rectangular",width:"100%",height:"100%"})})}),m&&e.jsx(s,{onLoad:()=>p(!0),alt:a,src:n,width:h,height:l,isLoaded:g,loading:"lazy",...x})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("react");const r=t.styled("img")({display:"block",width:"100%",objectFit:"cover",height:"100%",transition:"opacity 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s ease-in-out",transitionDelay:"0.2s","&.loaded":{opacity:1,filter:"blur(0px)",transform:"scale(1)"},"&:not(.loaded)":{opacity:0,filter:"blur(15px)",transform:"scale(1.05)"}});module.exports=({src:s,alt:n,width:o,height:a,containerSx:c,threshold:l=.1,rootMargin:d="500px",...h})=>{const[u,x]=i.useState(!1),[f,g]=i.useState(!1),m=i.useRef(null);return i.useEffect(()=>{const e=m.current;if(!e)return;const t=new IntersectionObserver(([e])=>{e.isIntersecting&&(g(!0),t.disconnect())},{threshold:l,rootMargin:d});return t.observe(e),()=>t.disconnect()},[l,d]),e.jsxs(t.Box,{ref:m,sx:{position:"relative",width:o,height:a,overflow:"hidden",...c},children:[e.jsx(t.Fade,{in:!u,unmountOnExit:!0,children:e.jsx(t.Box,{sx:{width:o,height:a,position:"absolute",inset:0},children:e.jsx(t.Skeleton,{variant:"rectangular",width:"100%",height:"100%"})})}),f&&e.jsx(r,{onLoad:()=>x(!0),className:u?"loaded":void 0,alt:n,src:s,width:o,height:a,...h})]})};

package/dist/theme/theme.hooks.d.ts

@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
 import { ScreenSize, CustomTheme } from './types.js';
 
 declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
-    breakpoint: "" | "sm" | "lg" | "md" | "xl";
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.675",
+    "version": "1.4.676",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",