@useloops/design-system 1.4.688 → 1.4.689

package/dist/esm/systems/Platform/VideoControls2/components/Timeline/components/Markers/Markers.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as r}from"@mui/material";import{mergeSx as a}from"merge-sx";import{memo as o,useMemo as s}from"react";import{valueToPercentage as m}from"../../../../../../../utils/valueToPercentage.js";const n=i(r)(({theme:t})=>({position:"absolute",top:"100%",marginTop:t.spacing((t.breakpoints.down("lg"),t.custom.margin.xs)),left:0,display:"flex",alignItems:"center",width:"100%",height:18})),d=i(r)(({theme:t,width:e,left:i})=>({position:"absolute",background:t.custom.palette.neutralAlpha[2],opacity:1,borderRadius:18,height:18,pointerEvents:"none",top:0,left:`${i}%`,width:`${e}%`,zIndex:0,"&:after":{content:'" "',position:"absolute",width:"100%",height:78,top:38,borderRadius:t.spacing(t.custom.radius.md),background:t.custom.palette.neutralAlpha[1]}})),l=i(r,{shouldForwardProp:t=>"isActive"!==t})(({theme:t,isActive:e})=>({position:"absolute",background:t.custom.palette.purple[500],height:8,width:8,borderRadius:8,...e?{transform:"translateX(-50%) scale(1)"}:{transform:"translateX(-50%) scale(0.5)"},transition:"all 0.2s, background 0.2s"})),c=o(({startTime:i,endTime:r,currentTime:o,markers:c=[],markerIndicator:p=!0,markerIndicatorSize:u=3,markerIndicatorMode:h,marker:f,containerProps:g})=>{const b=s(()=>m(r-i,o-i),[o,i,r]),k=s(()=>"time"===h?u:(r-i)*u,[r,i,h,u]),{width:w,left:x}=s(()=>{const t=r-i,e=(o-i)/t;let a;a="time"===h?u/t*100:100*u;const s=a/2,m=100*e,n=100-100*e,d=Math.min(s,m);return{width:d+Math.min(s,n),left:b-d}},[o,i,r,b,h,u]),v=s(()=>c.map(({timeStamp:t,id:e,meta:a})=>({id:e,timeStamp:t,markerPosition:m(r-i,t),isActive:Math.abs(t-o+i)<=k/2+1e-10,meta:a})),[c,r,i,o,k]),A=f||l;return t(n,{...g,sx:a(g?.sx),children:[p&&e(d,{width:w,left:x}),v.map(({id:t,markerPosition:i,isActive:r,meta:a})=>e(A,{isActive:r,sx:{zIndex:2,left:`${i}%`},...a&&{meta:a}},t))]})});export{c as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as r}from"@mui/material";import{mergeSx as a}from"merge-sx";import{memo as o,useMemo as s}from"react";import{valueToPercentage as m}from"../../../../../../../utils/valueToPercentage.js";const n=i(r)(({theme:t})=>({position:"absolute",top:"100%",marginTop:t.spacing((t.breakpoints.down("lg"),t.custom.margin.xs)),left:0,display:"flex",alignItems:"center",width:"100%",height:18})),d=i(r)(({theme:t,width:e,left:i})=>({position:"absolute",background:t.custom.palette.neutralAlpha[2],opacity:1,borderRadius:18,height:18,pointerEvents:"none",top:0,left:`${i}%`,width:`${e}%`,zIndex:0,"&:after":{content:'" "',position:"absolute",width:"100%",height:78,top:38,borderRadius:t.spacing(t.custom.radius.md),background:t.custom.palette.neutralAlpha[1]}})),c=i(r,{shouldForwardProp:t=>"isActive"!==t})(({theme:t,isActive:e})=>({position:"absolute",background:t.custom.palette.purple[500],height:8,width:8,borderRadius:8,...e?{transform:"translateX(-50%) scale(1)"}:{transform:"translateX(-50%) scale(0.5)"},transition:"all 0.2s, background 0.2s"})),l=o(({startTime:i,endTime:r,currentTime:o,markers:l=[],markerIndicator:p=!0,markerIndicatorSize:u=3,markerIndicatorMode:h,marker:f,containerProps:g})=>{const k=s(()=>m(r-i,o-i),[o,i,r]),b=s(()=>"time"===h?u:(r-i)*u,[r,i,h,u]),{width:w,left:x}=s(()=>{const t=r-i,e=(o-i)/t;let a;a="time"===h?u/t*100:100*u;const s=a/2,m=100*e,n=100-100*e,d=Math.min(s,m);return{width:d+Math.min(s,n),left:k-d}},[o,i,r,k,h,u]),v=s(()=>l.map(({timeStamp:t,id:e,meta:a})=>({id:e,timeStamp:t,markerPosition:m(r-i,t),isActive:Math.abs(t-o+i)<=b/2+1e-10,meta:a})),[l,r,i,o,b]),A=f||c;return t(n,{id:"markers-container",...g,sx:a(g?.sx),children:[p&&e(d,{id:"marker-indicator",width:w,left:x}),v.map(({id:t,markerPosition:i,isActive:r,meta:a})=>e(A,{id:`marker-${t}`,isActive:r,sx:{zIndex:2,left:`${i}%`},...a&&{meta:a}},t))]})});export{l as default};

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts

@@ -12,7 +12,7 @@ declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.Bo
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "sx" | "alignItems" | "className" | "style" | "classes" | "children" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;

package/dist/systems/Platform/VideoControls2/components/Timeline/components/Markers/Markers.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),i=require("react"),a=require("../../../../../../../utils/valueToPercentage.js");const s=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:"100%",marginTop:e.spacing((e.breakpoints.down("lg"),e.custom.margin.xs)),left:0,display:"flex",alignItems:"center",width:"100%",height:18})),o=t.styled(t.Box)(({theme:e,width:t,left:r})=>({position:"absolute",background:e.custom.palette.neutralAlpha[2],opacity:1,borderRadius:18,height:18,pointerEvents:"none",top:0,left:`${r}%`,width:`${t}%`,zIndex:0,"&:after":{content:'" "',position:"absolute",width:"100%",height:78,top:38,borderRadius:e.spacing(e.custom.radius.md),background:e.custom.palette.neutralAlpha[1]}})),n=t.styled(t.Box,{shouldForwardProp:e=>"isActive"!==e})(({theme:e,isActive:t})=>({position:"absolute",background:e.custom.palette.purple[500],height:8,width:8,borderRadius:8,...t?{transform:"translateX(-50%) scale(1)"}:{transform:"translateX(-50%) scale(0.5)"},transition:"all 0.2s, background 0.2s"}));var m=i.memo(({startTime:t,endTime:m,currentTime:l,markers:u=[],markerIndicator:d=!0,markerIndicatorSize:c=3,markerIndicatorMode:p,marker:h,containerProps:g})=>{const x=i.useMemo(()=>a.valueToPercentage(m-t,l-t),[l,t,m]),b=i.useMemo(()=>"time"===p?c:(m-t)*c,[m,t,p,c]),{width:k,left:f}=i.useMemo(()=>{const e=m-t,r=(l-t)/e;let i;i="time"===p?c/e*100:100*c;const a=i/2,s=100*r,o=100-100*r,n=Math.min(a,s);return{width:n+Math.min(a,o),left:x-n}},[l,t,m,x,p,c]),v=i.useMemo(()=>u.map(({timeStamp:e,id:r,meta:i})=>({id:r,timeStamp:e,markerPosition:a.valueToPercentage(m-t,e),isActive:Math.abs(e-l+t)<=b/2+1e-10,meta:i})),[u,m,t,l,b]),w=h||n;return e.jsxs(s,{...g,sx:r.mergeSx(g?.sx),children:[d&&e.jsx(o,{width:k,left:f}),v.map(({id:t,markerPosition:r,isActive:i,meta:a})=>e.jsx(w,{isActive:i,sx:{zIndex:2,left:`${r}%`},...a&&{meta:a}},t))]})});module.exports=m;
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),i=require("react"),a=require("../../../../../../../utils/valueToPercentage.js");const s=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:"100%",marginTop:e.spacing((e.breakpoints.down("lg"),e.custom.margin.xs)),left:0,display:"flex",alignItems:"center",width:"100%",height:18})),o=t.styled(t.Box)(({theme:e,width:t,left:r})=>({position:"absolute",background:e.custom.palette.neutralAlpha[2],opacity:1,borderRadius:18,height:18,pointerEvents:"none",top:0,left:`${r}%`,width:`${t}%`,zIndex:0,"&:after":{content:'" "',position:"absolute",width:"100%",height:78,top:38,borderRadius:e.spacing(e.custom.radius.md),background:e.custom.palette.neutralAlpha[1]}})),n=t.styled(t.Box,{shouldForwardProp:e=>"isActive"!==e})(({theme:e,isActive:t})=>({position:"absolute",background:e.custom.palette.purple[500],height:8,width:8,borderRadius:8,...t?{transform:"translateX(-50%) scale(1)"}:{transform:"translateX(-50%) scale(0.5)"},transition:"all 0.2s, background 0.2s"}));var m=i.memo(({startTime:t,endTime:m,currentTime:d,markers:l=[],markerIndicator:u=!0,markerIndicatorSize:c=3,markerIndicatorMode:p,marker:h,containerProps:g})=>{const x=i.useMemo(()=>a.valueToPercentage(m-t,d-t),[d,t,m]),k=i.useMemo(()=>"time"===p?c:(m-t)*c,[m,t,p,c]),{width:b,left:f}=i.useMemo(()=>{const e=m-t,r=(d-t)/e;let i;i="time"===p?c/e*100:100*c;const a=i/2,s=100*r,o=100-100*r,n=Math.min(a,s);return{width:n+Math.min(a,o),left:x-n}},[d,t,m,x,p,c]),v=i.useMemo(()=>l.map(({timeStamp:e,id:r,meta:i})=>({id:r,timeStamp:e,markerPosition:a.valueToPercentage(m-t,e),isActive:Math.abs(e-d+t)<=k/2+1e-10,meta:i})),[l,m,t,d,k]),w=h||n;return e.jsxs(s,{id:"markers-container",...g,sx:r.mergeSx(g?.sx),children:[u&&e.jsx(o,{id:"marker-indicator",width:b,left:f}),v.map(({id:t,markerPosition:r,isActive:i,meta:a})=>e.jsx(w,{id:`marker-${t}`,isActive:i,sx:{zIndex:2,left:`${r}%`},...a&&{meta:a}},t))]})});module.exports=m;

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.688",
+    "version": "1.4.689",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",