@useloops/design-system 1.4.677 → 1.4.679

package/dist/esm/systems/Platform/OnboardingCard/Timeline.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{timelineItemClasses as t,TimelineItem as n,TimelineSeparator as o,TimelineConnector as r,TimelineContent as l}from"@mui/lab";import c from"@mui/lab/Timeline";import{Box as m}from"@mui/material";import{motion as a}from"motion/react";import{useMemo as d,useRef as s,useState as p,useCallback as h,useEffect as u}from"react";import g from"../../BrandCore/Icon/Icon.js";import f from"../../WebCore/Button/Button.js";import{StyledDot as C,ItemContainer as x,TitleText as b,DescriptionText as k,StyledBoxWrapper as v,StyledLinkWrapper as w}from"./StyledTimeline.js";const z=({children:i,complete:t,onClick:n})=>t?e(v,{children:i}):e(w,{underline:"none",component:"button",onClick:n,target:"_self",children:i}),j=({complete:t,title:n,description:o,onClick:r})=>e(x,{children:i(z,{complete:t,onClick:r,children:[e(b,{children:n}),!t&&e(g,{name:"arrow-right",size:16}),!t&&o&&e(k,{children:o})]})}),y=({item:t,showConnector:c})=>{const{complete:m,title:a,description:d,onClick:s}=t;return i(n,{children:[i(o,{children:[e(C,{completed:m,children:m?e(g,{name:"badge-tick-in-circle",size:24}):void 0}),c&&e(r,{sx:{backgroundColor:e=>e.custom.palette.icon.disabled}})]}),t&&e(l,{sx:{pt:0},children:e(j,{complete:m,title:a,description:d,onClick:s})})]})},B={initial:{height:"auto",transition:{duration:0}},animate:e=>({height:e,transition:{duration:.4,ease:[.645,.045,.355,1]}})},T=({expanded:n,onToggleExpanded:o,items:r})=>{const l=r.find(e=>!e.complete),C=d(()=>n?r:[l],[n,r,l]),x=s(null),[b,k]=p(),v=h(()=>{if(!x.current)return;const e=x.current.scrollHeight;k(e)},[r]);return u(()=>{v()},[n,v]),u(()=>{const e=new ResizeObserver(v);return x.current&&e.observe(x.current),()=>e.disconnect()},[v]),e(a.div,{variants:B,initial:"initial",animate:"auto"===b?"initial":["initial","animate"],custom:b,style:{overflow:"hidden"},children:e("div",{ref:x,style:{display:"flex"},children:i(c,{sx:{paddingLeft:e=>e.spacing(e.custom.padding.xs),marginBottom:0,[`& .${t.root}`]:{minHeight:0,":before":{flex:0,padding:0}}},children:[C.map((i,t)=>{const n=t<C.length-1;return i&&i?.title===l?.title?e(y,{item:i,showConnector:C.length>1?n:!!l?.description},`${i.title}-${i.complete}`):i&&e(y,{item:i,showConnector:n},i.title)}),!n&&e(m,{sx:{marginTop:e=>e.spacing(e.custom.margin.md),alignSelf:"center"},children:e(f,{endIcon:e(g,{name:"chevron-down",size:16}),sizing:"xs",variation:"outlined",onClick:o,children:"Show more"})})]})})})};export{T as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{timelineItemClasses as t,TimelineItem as n,TimelineSeparator as o,TimelineConnector as r,TimelineContent as l}from"@mui/lab";import c from"@mui/lab/Timeline";import{Box as m}from"@mui/material";import{motion as a}from"motion/react";import{useMemo as d,useRef as s,useState as p,useCallback as h,useEffect as u}from"react";import g from"../../BrandCore/Icon/Icon.js";import f from"../../WebCore/Button/Button.js";import{StyledDot as C,ItemContainer as x,TitleText as b,DescriptionText as k,StyledBoxWrapper as v,StyledLinkWrapper as w}from"./StyledTimeline.js";const z=({children:i,complete:t,onClick:n})=>t?e(v,{children:i}):e(w,{underline:"none",component:"button",onClick:n,target:"_self",children:i}),j=({complete:t,title:n,description:o,onClick:r})=>e(x,{children:i(z,{complete:t,onClick:r,children:[e(b,{children:n}),!t&&e(g,{name:"arrow-right",size:16}),!t&&o&&e(k,{children:o})]})}),y=({item:t,showConnector:c})=>{const{complete:m,title:a,description:d,onClick:s}=t;return i(n,{children:[i(o,{children:[e(C,{completed:m,children:m?e(g,{name:"badge-tick-in-circle",size:24}):void 0}),c&&e(r,{sx:{backgroundColor:e=>e.custom.palette.icon.disabled}})]}),t&&e(l,{sx:{pt:0},children:e(j,{complete:m,title:a,description:d,onClick:s})})]})},B={initial:{height:"auto",transition:{duration:0}},animate:e=>({height:e,transition:{duration:.4,ease:[.645,.045,.355,1]}})},T=({expanded:n,onToggleExpanded:o,items:r})=>{const l=r.find(e=>!e.complete),C=d(()=>n?r:[l],[n,r,l]),x=s(null),[b,k]=p(),v=h(()=>{if(!x.current)return;const e=x.current.scrollHeight;k(e)},[r]);return u(()=>{v()},[n,v]),u(()=>{const e=new ResizeObserver(v);return x.current&&e.observe(x.current),()=>e.disconnect()},[v]),e(a.div,{variants:B,initial:"initial",animate:"auto"===b?"initial":["initial","animate"],custom:b,style:{overflow:"hidden"},children:e("div",{ref:x,style:{display:"flex"},children:i(c,{sx:{paddingLeft:e=>e.spacing(e.custom.padding.xs),marginBottom:0,[`& .${t.root}`]:{minHeight:0},[`&& .${t.root}::before`]:{flex:0,padding:0}},children:[C.map((i,t)=>{const n=t<C.length-1;return i&&i?.title===l?.title?e(y,{item:i,showConnector:C.length>1?n:!!l?.description},`${i.title}-${i.complete}`):i&&e(y,{item:i,showConnector:n},i.title)}),!n&&e(m,{sx:{marginTop:e=>e.spacing(e.custom.margin.md),alignSelf:"center"},children:e(f,{endIcon:e(g,{name:"chevron-down",size:16}),sizing:"xs",variation:"outlined",onClick:o,children:"Show more"})})]})})})};export{T as default};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import{styled as r,Box as t,useTheme as s}from"@mui/material";import{useRef as i,useState as n,useEffect as a}from"react";import{usePrevious as l}from"../../../utils/usePrevious.js";import{Text as d}from"../Text/Text.js";import c from"./components/ExpandCollapseButton/ExpandCollapseButton.js";import m from"./components/GradientShim/GradientShim.js";import{createShimGradient as u}from"./helpers/shimUtils.js";const p=r(t)(()=>({position:"absolute",bottom:0,right:0,display:"flex",alignItems:"center",overflow:"hidden"})),h=({onShowMoreClick:r,onShowLessClick:h,disabled:x,backgroundColorOverride:f,dimmed:g,sizing:b="sm",slotProps:w,...v})=>{const B=s(),y=i(null),[C,k]=n(!1),T=l(C),j=()=>{if(!y.current)return;const{scrollHeight:e,clientHeight:o}=y.current;k(e>o)};return a(()=>{if(y.current){j();new ResizeObserver(j).observe(y.current)}return()=>{}},[v.children]),e(t,{sx:{position:"relative"},id:"ExpandableTypography",children:[o(d,{ref:y,clamp:2,disabled:x||g,...v}),void 0!==r&&C&&e(p,{className:"ExpandableTypography__show-more-container",children:[o(m,{...w?.gradientBox,sizing:b}),o(t,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:f??B.custom.palette.surface.default,boxShadow:u(f??B.custom.palette.surface.default),...w?.showMoreButton?.sx},children:o(c,{sizing:b,disabled:x,onClick:x?void 0:r,...w?.showMoreButton,children:"More"})})]}),void 0!==h&&T&&!C&&e(p,{children:[o(m,{...w?.gradientBox,sx:w?.gradientBox?.sx,sizing:b}),o(t,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:f??B.custom.palette.surface.default,boxShadow:u(f??B.custom.palette.surface.default),...w?.showLessButton?.sx},children:o(c,{sizing:b,onClick:x?void 0:h,...w?.showLessButton,sx:w?.showLessButton?.sx,children:"Less"})})]})]})};export{h as default};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{styled as s,Box as r,useTheme as t}from"@mui/material";import{useRef as i,useState as n,useEffect as a}from"react";import{usePrevious as l}from"../../../utils/usePrevious.js";import{Text as d}from"../Text/Text.js";import c from"./components/ExpandCollapseButton/ExpandCollapseButton.js";import p from"./components/GradientShim/GradientShim.js";import{createShimGradient as m}from"./helpers/shimUtils.js";const h=s(r)(()=>({position:"absolute",bottom:0,right:0,display:"flex",alignItems:"center",overflow:"hidden"})),u=({onShowMoreClick:s,onShowLessClick:u,disabled:x,backgroundColorOverride:f,dimmed:b,sizing:g="sm",slotProps:w,...y})=>{const v=t(),C=i(null),[B,T]=n(!1),_=l(B),j=()=>{if(!C.current)return;const{scrollHeight:e,clientHeight:o}=C.current;T(e>o)};return a(()=>{if(C.current){j();new ResizeObserver(j).observe(C.current)}return()=>{}},[y.children]),e(r,{sx:{position:"relative"},id:"ExpandableTypography",children:[o(d,{ref:C,clamp:2,disabled:x||b,...y,size:g}),void 0!==s&&B&&e(h,{className:"ExpandableTypography__show-more-container",children:[o(p,{...w?.gradientBox,sizing:g}),o(r,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:f??v.custom.palette.surface.default,boxShadow:m(f??v.custom.palette.surface.default),...w?.showMoreButton?.sx},children:o(c,{sizing:g,disabled:x,onClick:x?void 0:s,...w?.showMoreButton,children:"More"})})]}),void 0!==u&&_&&!B&&o(r,{className:"ExpandableTypography__show-less-container",sx:{display:"flex",justifyContent:"flex-end"},children:o(r,{className:"ExpandableTypography__show-less-button",sx:{...w?.showLessButton?.sx},children:o(c,{sizing:g,onClick:x?void 0:u,...w?.showLessButton,sx:w?.showLessButton?.sx,children:"Less"})})})]})};export{u as default};

package/dist/systems/Platform/OnboardingCard/Timeline.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/lab"),t=require("@mui/lab/Timeline"),n=require("@mui/material"),r=require("motion/react"),o=require("react"),l=require("../../BrandCore/Icon/Icon.js"),s=require("../../WebCore/Button/Button.js"),c=require("./StyledTimeline.js");function a(e){return e&&e.__esModule?e:{default:e}}var d=a(t);const u=({children:i,complete:t,onClick:n})=>t?e.jsx(c.StyledBoxWrapper,{children:i}):e.jsx(c.StyledLinkWrapper,{underline:"none",component:"button",onClick:n,target:"_self",children:i}),m=({complete:i,title:t,description:n,onClick:r})=>e.jsx(c.ItemContainer,{children:e.jsxs(u,{complete:i,onClick:r,children:[e.jsx(c.TitleText,{children:t}),!i&&e.jsx(l.default,{name:"arrow-right",size:16}),!i&&n&&e.jsx(c.DescriptionText,{children:n})]})}),x=({item:t,showConnector:n})=>{const{complete:r,title:o,description:s,onClick:a}=t;return e.jsxs(i.TimelineItem,{children:[e.jsxs(i.TimelineSeparator,{children:[e.jsx(c.StyledDot,{completed:r,children:r?e.jsx(l.default,{name:"badge-tick-in-circle",size:24}):void 0}),n&&e.jsx(i.TimelineConnector,{sx:{backgroundColor:e=>e.custom.palette.icon.disabled}})]}),t&&e.jsx(i.TimelineContent,{sx:{pt:0},children:e.jsx(m,{complete:r,title:o,description:s,onClick:a})})]})},p={initial:{height:"auto",transition:{duration:0}},animate:e=>({height:e,transition:{duration:.4,ease:[.645,.045,.355,1]}})};module.exports=({expanded:t,onToggleExpanded:c,items:a})=>{const u=a.find(e=>!e.complete),m=o.useMemo(()=>t?a:[u],[t,a,u]),h=o.useRef(null),[j,g]=o.useState(),f=o.useCallback(()=>{if(!h.current)return;const e=h.current.scrollHeight;g(e)},[a]);return o.useEffect(()=>{f()},[t,f]),o.useEffect(()=>{const e=new ResizeObserver(f);return h.current&&e.observe(h.current),()=>e.disconnect()},[f]),e.jsx(r.motion.div,{variants:p,initial:"initial",animate:"auto"===j?"initial":["initial","animate"],custom:j,style:{overflow:"hidden"},children:e.jsx("div",{ref:h,style:{display:"flex"},children:e.jsxs(d.default,{sx:{paddingLeft:e=>e.spacing(e.custom.padding.xs),marginBottom:0,[`& .${i.timelineItemClasses.root}`]:{minHeight:0,":before":{flex:0,padding:0}}},children:[m.map((i,t)=>{const n=t<m.length-1;return i&&i?.title===u?.title?e.jsx(x,{item:i,showConnector:m.length>1?n:!!u?.description},`${i.title}-${i.complete}`):i&&e.jsx(x,{item:i,showConnector:n},i.title)}),!t&&e.jsx(n.Box,{sx:{marginTop:e=>e.spacing(e.custom.margin.md),alignSelf:"center"},children:e.jsx(s,{endIcon:e.jsx(l.default,{name:"chevron-down",size:16}),sizing:"xs",variation:"outlined",onClick:c,children:"Show more"})})]})})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/lab"),t=require("@mui/lab/Timeline"),n=require("@mui/material"),r=require("motion/react"),o=require("react"),l=require("../../BrandCore/Icon/Icon.js"),s=require("../../WebCore/Button/Button.js"),c=require("./StyledTimeline.js");function a(e){return e&&e.__esModule?e:{default:e}}var d=a(t);const u=({children:i,complete:t,onClick:n})=>t?e.jsx(c.StyledBoxWrapper,{children:i}):e.jsx(c.StyledLinkWrapper,{underline:"none",component:"button",onClick:n,target:"_self",children:i}),m=({complete:i,title:t,description:n,onClick:r})=>e.jsx(c.ItemContainer,{children:e.jsxs(u,{complete:i,onClick:r,children:[e.jsx(c.TitleText,{children:t}),!i&&e.jsx(l.default,{name:"arrow-right",size:16}),!i&&n&&e.jsx(c.DescriptionText,{children:n})]})}),x=({item:t,showConnector:n})=>{const{complete:r,title:o,description:s,onClick:a}=t;return e.jsxs(i.TimelineItem,{children:[e.jsxs(i.TimelineSeparator,{children:[e.jsx(c.StyledDot,{completed:r,children:r?e.jsx(l.default,{name:"badge-tick-in-circle",size:24}):void 0}),n&&e.jsx(i.TimelineConnector,{sx:{backgroundColor:e=>e.custom.palette.icon.disabled}})]}),t&&e.jsx(i.TimelineContent,{sx:{pt:0},children:e.jsx(m,{complete:r,title:o,description:s,onClick:a})})]})},p={initial:{height:"auto",transition:{duration:0}},animate:e=>({height:e,transition:{duration:.4,ease:[.645,.045,.355,1]}})};module.exports=({expanded:t,onToggleExpanded:c,items:a})=>{const u=a.find(e=>!e.complete),m=o.useMemo(()=>t?a:[u],[t,a,u]),h=o.useRef(null),[j,g]=o.useState(),f=o.useCallback(()=>{if(!h.current)return;const e=h.current.scrollHeight;g(e)},[a]);return o.useEffect(()=>{f()},[t,f]),o.useEffect(()=>{const e=new ResizeObserver(f);return h.current&&e.observe(h.current),()=>e.disconnect()},[f]),e.jsx(r.motion.div,{variants:p,initial:"initial",animate:"auto"===j?"initial":["initial","animate"],custom:j,style:{overflow:"hidden"},children:e.jsx("div",{ref:h,style:{display:"flex"},children:e.jsxs(d.default,{sx:{paddingLeft:e=>e.spacing(e.custom.padding.xs),marginBottom:0,[`& .${i.timelineItemClasses.root}`]:{minHeight:0},[`&& .${i.timelineItemClasses.root}::before`]:{flex:0,padding:0}},children:[m.map((i,t)=>{const n=t<m.length-1;return i&&i?.title===u?.title?e.jsx(x,{item:i,showConnector:m.length>1?n:!!u?.description},`${i.title}-${i.complete}`):i&&e.jsx(x,{item:i,showConnector:n},i.title)}),!t&&e.jsx(n.Box,{sx:{marginTop:e=>e.spacing(e.custom.margin.md),alignSelf:"center"},children:e.jsx(s,{endIcon:e.jsx(l.default,{name:"chevron-down",size:16}),sizing:"xs",variation:"outlined",onClick:c,children:"Show more"})})]})})})};

package/dist/systems/WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("@mui/material"),r=require("react"),o=require("../../../utils/usePrevious.js"),t=require("../Text/Text.js"),i=require("./components/ExpandCollapseButton/ExpandCollapseButton.js"),n=require("./components/GradientShim/GradientShim.js"),a=require("./helpers/shimUtils.js");const l=s.styled(s.Box)(()=>({position:"absolute",bottom:0,right:0,display:"flex",alignItems:"center",overflow:"hidden"}));module.exports=({onShowMoreClick:u,onShowLessClick:d,disabled:c,backgroundColorOverride:x,dimmed:h,sizing:p="sm",slotProps:m,...g})=>{const b=s.useTheme(),f=r.useRef(null),[j,w]=r.useState(!1),B=o.usePrevious(j),v=()=>{if(!f.current)return;const{scrollHeight:e,clientHeight:s}=f.current;w(e>s)};return r.useEffect(()=>{if(f.current){v();new ResizeObserver(v).observe(f.current)}return()=>{}},[g.children]),e.jsxs(s.Box,{sx:{position:"relative"},id:"ExpandableTypography",children:[e.jsx(t.Text,{ref:f,clamp:2,disabled:c||h,...g}),void 0!==u&&j&&e.jsxs(l,{className:"ExpandableTypography__show-more-container",children:[e.jsx(n,{...m?.gradientBox,sizing:p}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:x??b.custom.palette.surface.default,boxShadow:a.createShimGradient(x??b.custom.palette.surface.default),...m?.showMoreButton?.sx},children:e.jsx(i,{sizing:p,disabled:c,onClick:c?void 0:u,...m?.showMoreButton,children:"More"})})]}),void 0!==d&&B&&!j&&e.jsxs(l,{children:[e.jsx(n,{...m?.gradientBox,sx:m?.gradientBox?.sx,sizing:p}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:x??b.custom.palette.surface.default,boxShadow:a.createShimGradient(x??b.custom.palette.surface.default),...m?.showLessButton?.sx},children:e.jsx(i,{sizing:p,onClick:c?void 0:d,...m?.showLessButton,sx:m?.showLessButton?.sx,children:"Less"})})]})]})};
+"use strict";var e=require("react/jsx-runtime"),s=require("@mui/material"),o=require("react"),r=require("../../../utils/usePrevious.js"),t=require("../Text/Text.js"),i=require("./components/ExpandCollapseButton/ExpandCollapseButton.js"),n=require("./components/GradientShim/GradientShim.js"),a=require("./helpers/shimUtils.js");const l=s.styled(s.Box)(()=>({position:"absolute",bottom:0,right:0,display:"flex",alignItems:"center",overflow:"hidden"}));module.exports=({onShowMoreClick:u,onShowLessClick:d,disabled:c,backgroundColorOverride:x,dimmed:h,sizing:p="sm",slotProps:m,...b})=>{const g=s.useTheme(),j=o.useRef(null),[f,w]=o.useState(!1),y=r.usePrevious(f),B=()=>{if(!j.current)return;const{scrollHeight:e,clientHeight:s}=j.current;w(e>s)};return o.useEffect(()=>{if(j.current){B();new ResizeObserver(B).observe(j.current)}return()=>{}},[b.children]),e.jsxs(s.Box,{sx:{position:"relative"},id:"ExpandableTypography",children:[e.jsx(t.Text,{ref:j,clamp:2,disabled:c||h,...b,size:p}),void 0!==u&&f&&e.jsxs(l,{className:"ExpandableTypography__show-more-container",children:[e.jsx(n,{...m?.gradientBox,sizing:p}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:x??g.custom.palette.surface.default,boxShadow:a.createShimGradient(x??g.custom.palette.surface.default),...m?.showMoreButton?.sx},children:e.jsx(i,{sizing:p,disabled:c,onClick:c?void 0:u,...m?.showMoreButton,children:"More"})})]}),void 0!==d&&y&&!f&&e.jsx(s.Box,{className:"ExpandableTypography__show-less-container",sx:{display:"flex",justifyContent:"flex-end"},children:e.jsx(s.Box,{className:"ExpandableTypography__show-less-button",sx:{...m?.showLessButton?.sx},children:e.jsx(i,{sizing:p,onClick:c?void 0:d,...m?.showLessButton,sx:m?.showLessButton?.sx,children:"Less"})})})]})};

package/package.json

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