@foodpilot/foods 2.20.2 → 2.21.0

package/dist/components/Button/TertiaryToggleButtonNodeTitle.js

@@ -1,3 +1,3 @@
-import{jsx as r}from"react/jsx-runtime";import{useState as e,createElement as o}from"react";import{styled as t,ToggleButton as i,Typography as d}from"@mui/material";import{greyTheme as l}from"../../themes/common/colors.js";const a=t(i)(r=>({textTransform:"capitalize",border:`1px solid ${l[500]}`,background:l.gradientLight,color:l[2800],borderRadius:"8px","&.Mui-selected":{border:`2px solid ${r.theme.palette.primary[600]}`,background:l.gradientLight,"&:hover":{border:`2px solid ${r.theme.palette.primary[600]}`,background:l.gradientLight}},"&:disabled":{border:`1px solid ${l[100]}`,background:l[500]},"&:hover":{border:`1px solid ${l[500]}`,background:l[400]}})),n=t=>{const{choices:i,onClick:l,currentIndexSelected:n,...c}=t,[m,p]=e(n??null);/* @__PURE__ */
-return r("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"1rem"},children:i.map((e,t)=>/* @__PURE__ */o(a,{...c,key:`${t}-button-toggle`,value:t,onClick:()=>{return r=t,l?.(r),void p(r!==m?r:null);var r},selected:t===m},
-/* @__PURE__ */r(d,{variant:"big-bold",color:"inherit",children:e})))})};export{a as CustomToggleButtonNodeTitle,n as TertiaryToggleButtonNodeTitle};
+import{jsx as r}from"react/jsx-runtime";import{useState as e,createElement as o}from"react";import{styled as t,ToggleButton as i,Typography as d}from"@mui/material";import{greyTheme as l}from"../../themes/common/colors.js";const n=t(i)(r=>({textTransform:"none",border:`1px solid ${l[500]}`,background:l.gradientLight,color:l[2800],borderRadius:"8px","&.Mui-selected":{border:`2px solid ${r.theme.palette.primary[600]}`,background:l.gradientLight,"&:hover":{border:`2px solid ${r.theme.palette.primary[600]}`,background:l.gradientLight}},"&:disabled":{border:`1px solid ${l[100]}`,background:l[500]},"&:hover":{border:`1px solid ${l[500]}`,background:l[400]}})),a=t=>{const{choices:i,onClick:l,currentIndexSelected:a,...c}=t,[m,p]=e(a??null);/* @__PURE__ */
+return r("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"1rem"},children:i.map((e,t)=>/* @__PURE__ */o(n,{...c,key:`${t}-button-toggle`,value:t,onClick:()=>{return r=t,l?.(r),void p(r!==m?r:null);var r},selected:t===m},
+/* @__PURE__ */r(d,{variant:"big-bold",color:"inherit",children:e})))})};export{n as CustomToggleButtonNodeTitle,a as TertiaryToggleButtonNodeTitle};

package/dist/components/CMS/ArticleBlock/Article.js

@@ -1,11 +1,11 @@
-import{jsxs as i,Fragment as e,jsx as o}from"react/jsx-runtime";import{styled as t}from"@mui/material/styles";import{Box as r,Typography as n,Stack as l,Link as s,Button as a}from"@mui/material";import{greyTheme as d}from"../../../themes/common/colors.js";import{FoodsIcon as m}from"../../Icons/FoodsIcon.js";import{useState as c}from"react";import{ArticleContent as p}from"./ArticleContent.js";const h=[3,5,9,3],g=t(l,{shouldForwardProp:i=>"isRightColumn"!==i})(({isRightColumn:i,theme:e})=>({border:`1px solid ${d[500]}`,borderRadius:e.spacing(1),overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",flexDirection:i?"row":"column",[e.breakpoints.down("md")]:{flexDirection:"column"},boxShadow:e.custom.shadows.grey})),b=t(r,{shouldForwardProp:i=>"isRightColumn"!==i})(({isRightColumn:i,theme:e})=>({flex:i?"0 0 35%":"1 1 auto",lineHeight:0,position:"relative",width:"100%",height:i?"100%":"380px",backgroundColor:e.palette.grey[400],overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center",display:"block",[e.breakpoints.down("md")]:{height:"200px"}},[e.breakpoints.down("md")]:{height:"140px"},[e.breakpoints.down("md")]:{flex:2}})),u=t(l)(({theme:i})=>({flex:"1 1 0",backgroundColor:i.palette.background.paper,padding:i.spacing(3,3,2,3),justifyContent:"space-between",gap:i.spacing(1),[i.breakpoints.down("md")]:{padding:i.spacing(2,2,1.5,2)},[i.breakpoints.down("md")]:{flex:"1 1 0"}})),f=t(s)({display:"block",width:"100%",height:"100%",cursor:"pointer"}),w=t(a)(({theme:i})=>({display:"inline-flex",alignSelf:"flex-start",fontWeight:700,gap:i.spacing(1)})),x=t(n,{shouldForwardProp:i=>"isFirst"!==i})(({isFirst:i,articlesNumber:e,theme:o})=>({display:"-webkit-box",WebkitLineClamp:i?5:h[e-1]||3,marginTop:o.spacing(2),WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",[o.breakpoints.down("md")]:{WebkitLineClamp:i?3:2,marginTop:o.spacing(1)}})),k=t=>{const[l,s]=c(!1),{title:a,description:d,imageSrc:h,content:k,onClick:C,isFirst:v=!1,articlesNumber:y=1,isRightColumn:F=!1,readMoreText:R="Lire l'article"}=t,j=()=>{C?C():s(!0)};/* @__PURE__ */
+import{jsxs as i,Fragment as e,jsx as t}from"react/jsx-runtime";import{styled as o}from"@mui/material/styles";import{Box as n,Typography as r,Stack as s,Link as a,Button as l}from"@mui/material";import{greyTheme as m}from"../../../themes/common/colors.js";import{FoodsIcon as c}from"../../Icons/FoodsIcon.js";import{useState as d}from"react";import{ArticleContent as h}from"./ArticleContent.js";const p=[3,5,9,3],g=i=>{const{isMain:e,isRightColumn:t}=i;return e?"0 0 50%":t?"0 0 35%":"0 0 auto"},u=(i,e)=>{const{isMain:t,isRightColumn:o}=i;return t?"auto":o?"100%":e},b=o(s,{shouldForwardProp:i=>"isRightColumn"!==i&&"isMain"!==i})(({isRightColumn:i,isMain:e,theme:t})=>({border:`1px solid ${m[500]}`,borderRadius:t.spacing(1),overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",flexDirection:e||i?"row":"column",[t.breakpoints.down("md")]:{flexDirection:"column"},boxShadow:t.custom.shadows.grey})),f=o(n,{shouldForwardProp:i=>"isRightColumn"!==i&&"isMain"!==i})(({isRightColumn:i,isMain:e,theme:t})=>({flex:g({isMain:e,isRightColumn:i}),lineHeight:0,position:"relative",width:"100%",height:u({isMain:e,isRightColumn:i},t.spacing(47.5)),...e&&{minHeight:t.spacing(47.5)},backgroundColor:t.palette.grey[400],overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center",display:"block",...e&&{position:"absolute",inset:0}},[t.breakpoints.down("md")]:{height:t.spacing(25),minHeight:0,flex:"0 0 auto"}})),w=o(s)(({theme:i})=>({minWidth:0,overflowWrap:"anywhere",flex:"1 1 0",backgroundColor:i.palette.background.paper,padding:i.spacing(3,3,2,3),justifyContent:"space-between",gap:i.spacing(1),[i.breakpoints.down("md")]:{padding:i.spacing(2,2,1.5,2)},[i.breakpoints.down("md")]:{flex:"1 1 0"}})),C=o(a)({display:"block",width:"100%",height:"100%",cursor:"pointer"}),k=o(l)(({theme:i})=>({display:"inline-flex",alignSelf:"flex-start",fontWeight:700,gap:i.spacing(1)})),x=o(r,{shouldForwardProp:i=>"isFirst"!==i})(({isFirst:i,articlesNumber:e,theme:t})=>({display:"-webkit-box",WebkitLineClamp:i?5:p[e-1]||3,marginTop:t.spacing(2),WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",[t.breakpoints.down("md")]:{WebkitLineClamp:i?3:2,marginTop:t.spacing(1)}})),M=o=>{const{title:s,description:a,imageSrc:l,content:m,onClick:p,isMain:g=!1,isFirst:u=!1,articlesNumber:M=1,isRightColumn:R=!1,readMoreText:v="Lire l'article"}=o,[y,F]=d(!1),j=()=>{p?p():F(!0)};/* @__PURE__ */
 return i(e,{children:[
-/* @__PURE__ */i(g,{isRightColumn:F,children:[
-/* @__PURE__ */o(b,{isRightColumn:F,children:/* @__PURE__ */o(f,{onClick:j,children:/* @__PURE__ */o("img",{src:h,alt:a})})}),
-/* @__PURE__ */i(u,{children:[
-/* @__PURE__ */i(r,{children:[
-/* @__PURE__ */o(n,{variant:"h3",mb:"0.2rem",children:a}),
-/* @__PURE__ */o(x,{variant:"body",mb:"1rem",isFirst:v,articlesNumber:y,dangerouslySetInnerHTML:{__html:d}})]}),
-/* @__PURE__ */i(w,{variant:"text",onClick:j,children:[
-/* @__PURE__ */o(n,{fontWeight:700,fontSize:"0.875rem",children:R}),
-/* @__PURE__ */o(m,{size:2,icon:"arrowRight"})]})]})]}),!C&&/* @__PURE__ */o(p,{isOpen:l,onClose:()=>s(!1),article:{title:a,description:d,imageSrc:h,content:k||d}})]})};export{k as Article};
+/* @__PURE__ */i(b,{isRightColumn:R,isMain:g,children:[
+/* @__PURE__ */t(f,{isRightColumn:R,isMain:g,children:/* @__PURE__ */t(C,{onClick:j,children:/* @__PURE__ */t("img",{src:l,alt:s})})}),
+/* @__PURE__ */i(w,{children:[
+/* @__PURE__ */i(n,{children:[
+/* @__PURE__ */t(r,{variant:"h3",mb:"0.2rem",children:s}),
+/* @__PURE__ */t(x,{variant:"body",mb:"1rem",isFirst:u,articlesNumber:M,dangerouslySetInnerHTML:{__html:a}})]}),
+/* @__PURE__ */i(k,{variant:"text",onClick:j,children:[
+/* @__PURE__ */t(r,{fontWeight:700,fontSize:"0.875rem",children:v}),
+/* @__PURE__ */t(c,{size:2,icon:"arrowRight"})]})]})]}),!p&&/* @__PURE__ */t(h,{isOpen:y,onClose:()=>F(!1),article:{title:s,description:a,imageSrc:l,content:m||a}})]})};export{M as Article};

package/dist/components/CMS/ArticleBlock/ArticlesBox.d.ts

@@ -4,5 +4,5 @@ type ArticlesBoxProps = {
     articles: ArticleProps[];
     sxProps?: SxProps;
 };
-export declare const ArticlesBox: (props: ArticlesBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArticlesBox: (props: ArticlesBoxProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/CMS/ArticleBlock/ArticlesBox.js

@@ -1,4 +1,2 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{Grid as t}from"@mui/material";import{Box as r}from"@mui/system";import{Article as m}from"./Article.js";const s=s=>{const{articles:n=[],sxProps:l={}}=s,[a,...h]=n;/* @__PURE__ */
-return i(t,{container:!0,columns:h.length>0?2:1,sx:{...l,height:"100%","& .MuiGrid-item":{"@media (max-width: 1068px)":{width:"100%",maxWidth:"100%",flexBasis:"100%"}}},spacing:4,children:[
-/* @__PURE__ */e(t,{item:!0,xs:1,children:/* @__PURE__ */e(m,{...a,isFirst:!0,articlesNumber:n.length})}),
-/* @__PURE__ */e(t,{item:!0,xs:1,children:/* @__PURE__ */e(r,{gap:3,display:"flex",flexDirection:"column",justifyContent:"space-between",height:"100%",sx:{"@media (max-width: 1068px)":{gap:2,marginTop:0}},children:h.map((i,t)=>/* @__PURE__ */e(r,{height:"100%",children:/* @__PURE__ */e(m,{...i,isRightColumn:n.length>=3,articlesNumber:n.length})},`article-${t}`))})})]})};export{s as ArticlesBox};
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import{Grid2 as s}from"@mui/material";import{Article as t}from"./Article.js";const n=n=>{const{articles:e=[],sxProps:m={}}=n,[l,...c]=e,o=2===e.length;return l?/* @__PURE__ */i(s,{container:!0,columns:12,sx:{...m,minWidth:0},spacing:4,children:[
+/* @__PURE__ */r(s,{size:{xs:12,md:o?6:12},sx:{minWidth:0},children:/* @__PURE__ */r(t,{...l,isMain:!o,isFirst:!0,isRightColumn:!1,articlesNumber:e.length})}),c.map((i,n)=>/* @__PURE__ */r(s,{size:{xs:12,md:6,lg:o?6:4},sx:{minWidth:0},children:/* @__PURE__ */r(t,{...i,isMain:!1,isFirst:!1,isRightColumn:!1,articlesNumber:e.length})},`${n}-secondary-article-card`))]}):null};export{n as ArticlesBox};

package/dist/components/Cards/TrajectoryCards/Blocks/horizontal/index.js

@@ -1,6 +1,6 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{Step as n}from"../../components/Step.js";import{Container as i,LeftColumn as r,StyledStartStep as a,StyledWithoutPlanStep as l,RightColumn as m}from"../../styles/index.js";import{StartCurrentComparison as c,LastTargetComparison as s}from"../../components/Comparisons.js";import{TargetToGoalComparaison as p}from"../../components/TargetToGoalComparison.js";const u=u=>{const{steps:h,textOptions:d,improvement:v,completionPercentage:F,valueFormatterFn:A}=u,W=void 0===h.endWithoutAction;/* @__PURE__ */
+import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{Step as n}from"../../components/Step.js";import{Container as i,LeftColumn as r,StyledStartStep as a,StyledWithoutPlanStep as l,RightColumn as m}from"../../styles/index.js";import{StartCurrentComparison as c,LastTargetComparison as s}from"../../components/Comparisons.js";import{TargetToGoalComparaison as p}from"../../components/TargetToGoalComparison.js";const u=u=>{const{steps:h,textOptions:d,improvement:v,completionPercentage:F,valueFormatterFn:W,hideGoalWhenEmpty:A=!1}=u,b=void 0===h.endWithoutAction;/* @__PURE__ */
 return t(e,{children:[
 /* @__PURE__ */t(i,{container:!0,children:[
 /* @__PURE__ */t(r,{item:!0,xs:6,children:[
-/* @__PURE__ */o(a,{step:h.start,isLast:!1,fullHeight:!h.endWithoutAction,valueFormatterFn:A,children:h.endWithAction&&/* @__PURE__ */o(c,{targetValue:h.endWithAction.value,currentValue:h.start.value,orientation:"horizontal",improvement:v})}),h.endWithoutAction&&/* @__PURE__ */o(l,{step:h.endWithoutAction,isLast:!1,valueFormatterFn:A,children:h.endWithAction&&/* @__PURE__ */o(s,{targetValue:h.endWithAction.value,currentValue:h.endWithoutAction?.value,orientation:"horizontal",improvement:v,completionPercent:F})})]}),
-/* @__PURE__ */t(m,{item:!0,xs:6,children:[h.endWithAction&&/* @__PURE__ */o(n,{step:h.endWithAction,isLast:!0,valueFormatterFn:A}),!1===W&&/* @__PURE__ */o(p,{label:d.goalStep,noObjectiveLabel:d.noGoalLabel,orientation:"horizontal",improvement:v,completionPercent:F,valueFormatterFn:A})]})]}),!0===W&&/* @__PURE__ */o(p,{label:d.goalStep,noObjectiveLabel:d.noGoalLabel,orientation:"horizontal",improvement:v,outsideContainer:!0,completionPercent:F,valueFormatterFn:A})]})};export{u as Horizontal};
+/* @__PURE__ */o(a,{step:h.start,isLast:!1,fullHeight:!h.endWithoutAction,valueFormatterFn:W,children:h.endWithAction&&/* @__PURE__ */o(c,{targetValue:h.endWithAction.value,currentValue:h.start.value,orientation:"horizontal",improvement:v})}),h.endWithoutAction&&/* @__PURE__ */o(l,{step:h.endWithoutAction,isLast:!1,valueFormatterFn:W,children:h.endWithAction&&/* @__PURE__ */o(s,{targetValue:h.endWithAction.value,currentValue:h.endWithoutAction?.value,orientation:"horizontal",improvement:v,completionPercent:F})})]}),
+/* @__PURE__ */t(m,{item:!0,xs:6,children:[h.endWithAction&&/* @__PURE__ */o(n,{step:h.endWithAction,isLast:!0,valueFormatterFn:W}),(null!==F||!A)&&!1===b&&/* @__PURE__ */o(p,{label:d.goalStep,noObjectiveLabel:d.noGoalLabel,orientation:"horizontal",improvement:v,completionPercent:F,valueFormatterFn:W})]})]}),(null!==F||!A)&&!0===b&&/* @__PURE__ */o(p,{label:d.goalStep,noObjectiveLabel:d.noGoalLabel,orientation:"horizontal",improvement:v,outsideContainer:!0,completionPercent:F,valueFormatterFn:W})]})};export{u as Horizontal};

package/dist/components/Cards/TrajectoryCards/Blocks/types.d.ts

@@ -10,6 +10,7 @@ export type TrajectorySteps = {
 export type OrientedTrajectoryCardsProps = {
     completionPercentage: number | null;
     steps: TrajectorySteps;
+    hideGoalWhenEmpty?: boolean;
     unit?: string;
     textOptions: TrajectoryStepsText;
     improvement: Improvement;

package/dist/components/Cards/TrajectoryCards/Blocks/vertical/index.js

@@ -1,5 +1,5 @@
-import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{StartCurrentComparison as n}from"../../components/Comparisons.js";import{Container as r,StyledStartStep as i,StyledWithoutPlanStep as a}from"../../styles/index.js";import{useTheme as m}from"@mui/material";import{TargetToGoalComparaison as l}from"../../components/TargetToGoalComparison.js";const c=c=>{const{steps:s,textOptions:p,improvement:u,completionPercentage:v,valueFormatterFn:d}=c,h=m(),F=void 0===s.endWithoutAction,b=void 0===s.endWithoutAction?s.start:s.endWithoutAction;/* @__PURE__ */
+import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{StartCurrentComparison as n}from"../../components/Comparisons.js";import{Container as i,StyledStartStep as r,StyledWithoutPlanStep as a}from"../../styles/index.js";import{useTheme as m}from"@mui/material";import{TargetToGoalComparaison as l}from"../../components/TargetToGoalComparison.js";const c=c=>{const{steps:s,textOptions:p,improvement:u,completionPercentage:v,valueFormatterFn:d,hideGoalWhenEmpty:h=!1}=c,F=m(),W=void 0===s.endWithoutAction,b=void 0===s.endWithoutAction?s.start:s.endWithoutAction;/* @__PURE__ */
 return t(e,{children:[
-/* @__PURE__ */t(r,{container:!0,sx:{background:F?h.palette.primary[50]:void 0},children:[
-/* @__PURE__ */o(i,{step:b,isLast:!1,orientation:"vertical",valueFormatterFn:d,children:/* @__PURE__ */o(n,{targetValue:s.endWithAction.value,currentValue:b.value,orientation:"vertical",improvement:u})}),
-/* @__PURE__ */o(a,{step:s.endWithAction,isLast:!0,orientation:"vertical",valueFormatterFn:d})]}),null!==v&&/* @__PURE__ */o(l,{label:p.goalStep,noObjectiveLabel:p.noGoalLabel,orientation:"vertical",improvement:u,completionPercent:v,valueFormatterFn:d})]})};export{c as Vertical};
+/* @__PURE__ */t(i,{container:!0,sx:{background:W?F.palette.primary[50]:void 0},children:[
+/* @__PURE__ */o(r,{step:b,isLast:!1,orientation:"vertical",valueFormatterFn:d,children:/* @__PURE__ */o(n,{targetValue:s.endWithAction.value,currentValue:b.value,orientation:"vertical",improvement:u})}),
+/* @__PURE__ */o(a,{step:s.endWithAction,isLast:!0,orientation:"vertical",valueFormatterFn:d})]}),(null!==v||!h)&&/* @__PURE__ */o(l,{label:p.goalStep,noObjectiveLabel:p.noGoalLabel,orientation:"vertical",improvement:u,completionPercent:v,valueFormatterFn:d})]})};export{c as Vertical};

package/dist/components/Cards/TrajectoryCards/TrajectoryCards.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{Box as n}from"@mui/material";import{Horizontal as e}from"./Blocks/horizontal/index.js";import{Vertical as i}from"./Blocks/vertical/index.js";const o=o=>{const{position:r,goal:a=null,unit:u="",textOptions:s={startingStep:"",targetWithoutPlanStep:"",targetWithPlanStep:"",goalStep:""},steps:p,improvement:c,valueFormatterFn:m}=o,d=l(a,p),h={start:{value:p.start,label:s.startingStep,unit:u},endWithAction:{label:s.targetWithPlanStep,value:p.endWithAction,unit:u},endWithoutAction:void 0===p.endWithoutAction?void 0:{value:p.endWithoutAction,unit:u,label:s.targetWithoutPlanStep}};return"vertical"===r?/* @__PURE__ */t(n,{children:/* @__PURE__ */t(i,{improvement:c,steps:h,completionPercentage:d,textOptions:s,valueFormatterFn:m})}):"horizontal"===r?/* @__PURE__ */t(n,{sx:{width:"100%"},children:/* @__PURE__ */t(e,{improvement:c,steps:h,completionPercentage:d,textOptions:s,valueFormatterFn:m})}):void 0},l=(t,n)=>{if(null===t)return null;const{start:e,endWithAction:i,endWithoutAction:o}=n,l=void 0===o?a(t,e):a(o,t);if(null===l)return null;const u=a(o??e,i);if(null===u)return null;const s=r({partial:u,total:l});return Math.round(s)},r=t=>{const{partial:n,total:e}=t;return 0===e?0:n/e*100},a=(t,n)=>null===t||null===n?null:t-n;export{o as TrajectoryCards};
+import{jsx as t}from"react/jsx-runtime";import{Box as e}from"@mui/material";import{Horizontal as n}from"./Blocks/horizontal/index.js";import{Vertical as i}from"./Blocks/vertical/index.js";const o=o=>{const{position:r,goal:a=null,hideGoalWhenEmpty:u=!1,unit:p="",textOptions:s={startingStep:"",targetWithoutPlanStep:"",targetWithPlanStep:"",goalStep:""},steps:m,improvement:c,valueFormatterFn:h}=o,d=l(a,m),v={start:{value:m.start,label:s.startingStep,unit:p},endWithAction:{label:s.targetWithPlanStep,value:m.endWithAction,unit:p},endWithoutAction:void 0===m.endWithoutAction?void 0:{value:m.endWithoutAction,unit:p,label:s.targetWithoutPlanStep}};return"vertical"===r?/* @__PURE__ */t(e,{children:/* @__PURE__ */t(i,{hideGoalWhenEmpty:u,improvement:c,steps:v,completionPercentage:d,textOptions:s,valueFormatterFn:h})}):"horizontal"===r?/* @__PURE__ */t(e,{sx:{width:"100%"},children:/* @__PURE__ */t(n,{hideGoalWhenEmpty:u,improvement:c,steps:v,completionPercentage:d,textOptions:s,valueFormatterFn:h})}):void 0},l=(t,e)=>{if(null===t)return null;const{start:n,endWithAction:i,endWithoutAction:o}=e,l=void 0===o?a(t,n):a(o,t);if(null===l)return null;const u=a(o??n,i);if(null===u)return null;const p=r({partial:u,total:l});return Math.round(p)},r=t=>{const{partial:e,total:n}=t;return 0===n?0:e/n*100},a=(t,e)=>null===t||null===e?null:t-e;export{o as TrajectoryCards};

package/dist/components/Chart/DoughnutChart/DoughnutChart.js

@@ -1,6 +1,7 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as r}from"react";import{useTheme as t,useMediaQuery as a,Stack as n,Box as i}from"@mui/material";import{extractPaletteFromTheme as l,createPalette as s}from"../Legend/utils.js";import{prepareChartData as d,calculateSumValues as m,formatDisplayValue as c}from"./utils.js";import{useDoughnutChartInteractions as h}from"./useDoughnutChartInteractions.js";import{DoughnutChartContent as u}from"./DoughnutChartContent.js";import p from"i18next";import{PolymorphicDoughnutChart as g}from"../PolymorphicChart/charts/PolymorphicDoughnutChart.js";import{Legend as f}from"../Legend/Legend.js";const v=2,x=0,w=2,b="900px",y="0.2s",L=L=>{const C=t(),{values:j,labels:F,colors:T,legend:E,children:P,valuesUnit:$,className:D,valuesFormatterFn:H=C.numbers.valueFormatterFn,createPalette:I=!0,isLoading:M=!1,displayTotal:O=!0,fullWidthLegend:W=!1,displayTotalVariant:k="number-big",spacing:N=v,borderWidth:U=x,borderColor:V,hoverOffset:A=w,icons:R,showTooltip:q=!0,width:z=b}=L,B=r(null),G=r(null),J=p.language,K=a(C.breakpoints.down("md")),Q=l(C,100,700),S=E?.position??"bottom",X=I?s(T&&T.length?T:Q,j??[]):T??Q,Y=d(j,F,X),Z=m(j,O),_=c(P,O,Z,H),{HoveredChartElementIndex:ee,tooltipPos:oe,handleLegendHover:re,handleMouseEnter:te,handleMouseOut:ae}=h(Y,B);/* @__PURE__ */
-return e(n,{direction:"bottom"===S||K?"column":"row",gap:C.spacing(6),className:`doughnut-chart ${D}`,ref:G,sx:{maxWidth:z,width:"100%"},children:[
-/* @__PURE__ */o(n,{sx:{flex:1},children:/* @__PURE__ */e(i,{position:"relative",margin:"28px auto",sx:{"& *":{outline:"none"},".cell-hovered":{animation:`cell-hovered ${y} ease-in-out forwards`,transformOrigin:"center"},".cell-idle":{transform:"scale(1)",transformOrigin:"center",animation:`cell-idle ${y} ease-in-out forwards`},"@keyframes cell-hovered":{"0%":{transform:"scale(1)"},"100%":{transform:`scale(${1+A/100})`},"@keyframes cell-idle":{"0%":{transform:`scale(${1+A/100})`},"100%":{transform:"scale(1)"}}},width:"100%"},className:"doughnut-chart-wrapper",id:"doughnut-chart-wrapper",ref:B,children:[
-/* @__PURE__ */o(g,{data:Y,HoveredChartElementIndex:ee,spacing:N,borderWidth:U,borderColor:V,showTooltip:q,tooltipPos:oe,isLoading:M,valuesFormatterFn:H,language:J,valuesUnit:$,icons:R,onMouseEnter:te,onMouseLeave:ae,onLegendAction:e=>{E?.actions?.[e]&&E.actions[e]?.()}}),
-/* @__PURE__ */o(u,{isLoading:M,displayValue:_,displayTotalVariant:k,valuesUnit:$,displayTotal:O,isEmpty:0===Y.length})]})}),
-/* @__PURE__ */o(i,{display:"flex",width:W?"100%":"inherit",sx:{width:W?"100%":"inherit",flex:1},children:E&&/* @__PURE__ */o(f,{labels:F,hoveredDatasetIndex:ee,onLegendHover:re,values:j,colors:X,legend:E,icons:R,chartRef:B})})]})};export{L as DoughnutChart};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as r}from"react";import{useTheme as t,useMediaQuery as a,Stack as i,Box as n,Typography as l}from"@mui/material";import{extractPaletteFromTheme as s,createPalette as d}from"../Legend/utils.js";import{prepareChartData as m,calculateSumValues as c,formatDisplayValue as h}from"./utils.js";import{useDoughnutChartInteractions as u}from"./useDoughnutChartInteractions.js";import{DoughnutChartContent as p}from"./DoughnutChartContent.js";import f from"i18next";import{PolymorphicDoughnutChart as g}from"../PolymorphicChart/charts/PolymorphicDoughnutChart.js";import{Legend as v}from"../Legend/Legend.js";const x=2,b=0,w=2,y="900px",L="0.2s",C=C=>{const $=t(),{values:j,labels:F,colors:T,legend:W,children:D,valuesUnit:E,className:I,valuesFormatterFn:O=$.numbers.valueFormatterFn,createPalette:P=!0,isLoading:H=!1,displayTotal:M=!0,fullWidthLegend:N=!1,displayTotalVariant:k="number-big",spacing:U=x,borderWidth:V=b,borderColor:A,hoverOffset:R=w,icons:S,showTooltip:q=!0,width:z=y}=C,B=r(null),G=r(null),J=f.language,K=a($.breakpoints.down("md")),Q=s($,100,700),X=W?.position??"bottom",Y=P?d(T&&T.length?T:Q,j??[]):T??Q,Z=m(j,F,Y),_=c(j,M),ee=h(D,M,_,O),{HoveredChartElementIndex:oe,tooltipPos:re,handleLegendHover:te,handleMouseEnter:ae,handleMouseOut:ie}=u(Z,B);/* @__PURE__ */
+return e(i,{direction:"bottom"===X||K?"column":"row",gap:$.spacing(6),className:`doughnut-chart ${I}`,ref:G,sx:{maxWidth:z,width:"100%"},children:[
+/* @__PURE__ */o(i,{sx:{flex:1},children:/* @__PURE__ */e(n,{position:"relative",margin:"28px auto",sx:{"& :focus-visible":{outline:`2px solid ${$.palette.primary.main}`,outlineOffset:2},".cell-hovered":{animation:`cell-hovered ${L} ease-in-out forwards`,transformOrigin:"center"},".cell-idle":{transform:"scale(1)",transformOrigin:"center",animation:`cell-idle ${L} ease-in-out forwards`},"@keyframes cell-hovered":{"0%":{transform:"scale(1)"},"100%":{transform:`scale(${1+R/100})`},"@keyframes cell-idle":{"0%":{transform:`scale(${1+R/100})`},"100%":{transform:"scale(1)"}}},width:"100%"},className:"doughnut-chart-wrapper",id:"doughnut-chart-wrapper",ref:B,children:[
+/* @__PURE__ */o(g,{data:Z,HoveredChartElementIndex:oe,spacing:U,borderWidth:V,borderColor:A,showTooltip:q,tooltipPos:re,isLoading:H,valuesFormatterFn:O,language:J,valuesUnit:E,icons:S,onMouseEnter:ae,onMouseLeave:ie,onLegendAction:e=>{W?.actions?.[e]&&W.actions[e]?.()}}),
+/* @__PURE__ */o(p,{isLoading:H,displayValue:ee,displayTotalVariant:k,valuesUnit:E,displayTotal:M,isEmpty:0===Z.length})]})}),
+/* @__PURE__ */o(n,{display:"flex",width:N?"100%":"inherit",sx:{width:N?"100%":"inherit",flex:1},children:W&&/* @__PURE__ */o(v,{labels:F,isLoading:K&&H,renderItemDetails:K?e=>{const r=j?.[e],t="number"==typeof r&&Number.isFinite(r);/* @__PURE__ */
+return o(l,{variant:"body-medium",sx:{maxWidth:"100%",overflowWrap:"anywhere",whiteSpace:"normal"},children:t?`${O(r)}${E?` ${E}`:""}`:"—"})}:void 0,hoveredDatasetIndex:oe,onLegendHover:te,values:j,colors:Y,legend:W,icons:S,chartRef:B})})]})};export{C as DoughnutChart};

package/dist/components/Chart/Legend/Legend.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { Property } from 'csstype';
 export type ChartLegendProps = {
     labels?: string[];
+    renderItemDetails?: (index: number) => ReactNode;
     values?: number[];
     colors?: Property.Color[];
     icons?: ReactNode[];

package/dist/components/Chart/Legend/Legend.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{LegendBottom as o}from"./LegendBottom.js";import{LegendRight as r}from"./LegendRight.js";const t=t=>{const{labels:n,colors:a,icons:s=[],legend:l,hoveredDatasetIndex:i,onLegendHover:d,values:c,hidePercentage:m=!1,chartRef:g,isLoading:h=!1,maxScore:u,separator:v="/",threshold:p=1,valuesFormatterFn:f}=t;if(!n||!n.length)return null;const x=c?.reduce((e,o)=>e+(Number.isFinite(o)&&o>0?o:0),0)??0;return"raw"!==l?.mode&&c&&c.length>0&&x<=0?null:/* @__PURE__ */e("bottom"===l?.position?o:r,{labels:n,values:c,colors:a,legend:l,hoveredDatasetIndex:i,onLegendHover:d,icons:s,hidePercentage:m,chartRef:g,isLoading:h,maxScore:u,separator:v,threshold:p,valuesFormatterFn:f})};export{t as Legend};
+import{jsx as e}from"react/jsx-runtime";import{LegendBottom as r}from"./LegendBottom.js";import{LegendRight as t}from"./LegendRight.js";const o=o=>{const{labels:n,renderItemDetails:a,colors:s,icons:l=[],legend:i,hoveredDatasetIndex:d,onLegendHover:m,values:c,hidePercentage:g=!1,chartRef:h,isLoading:u=!1,maxScore:v,separator:p="/",threshold:f=1,valuesFormatterFn:x}=o;if(!n||!n.length)return null;const L=c?.reduce((e,r)=>e+(Number.isFinite(r)&&r>0?r:0),0)??0;return"raw"!==i?.mode&&c&&c.length>0&&L<=0&&!a?null:/* @__PURE__ */e("bottom"===i?.position?r:t,{labels:n,renderItemDetails:a,values:c,colors:s,legend:i,hoveredDatasetIndex:d,onLegendHover:m,icons:l,hidePercentage:g,chartRef:h,isLoading:u,maxScore:v,separator:p,threshold:f,valuesFormatterFn:x})};export{o as Legend};

package/dist/components/Chart/Legend/LegendBottom.d.ts

@@ -4,6 +4,7 @@ import { Property } from 'csstype';
 type ChartLegendVariantProps = {
     values?: number[];
     labels?: string[];
+    renderItemDetails?: (index: number) => ReactNode;
     colors?: Property.Color[];
     icons?: ReactNode[];
     legend?: ChartLegend;

package/dist/components/Chart/Legend/LegendBottom.js

@@ -1,10 +1,10 @@
-import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import{useTheme as o,Stack as t,Box as i}from"@mui/material";import{createDistribution as a,formatPercentage as s}from"./utils.js";import{LegendSeeMore as c}from"./LegendSeeMore.js";import{useLegendHoverHandlers as d}from"./useLegendHoverHandlers.js";import{LegendRow as l}from"./LegendRow.js";import{LegendValueBadge as h}from"./LegendValueBadge.js";import{LegendBottomSkeleton as m}from"./LegendBottomSkeleton.js";const g=g=>{const{values:p,labels:u,colors:v=[],legend:f,onLegendHover:M,icons:x=[],chartRef:L,hidePercentage:w=!1,isLoading:j=!1,maxScore:y,separator:b="/",threshold:I=1,valuesFormatterFn:S,hoveredDatasetIndex:F}=g,k=o(),H=a(p??[]),{handleMouseEnter:C,handleMouseLeave:E}=d({onLegendHover:M,chartRef:L,move:{xFactor:.6,yFactor:.5}});if(j){const n=Math.max(6,Math.min(8,u?.length??p?.length??6));/* @__PURE__ */
-return e(m,{count:n,hidePercentage:w,legend:f})}/* @__PURE__ */
-return e(t,"raw"===f?.mode?{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(t,{width:"100%",children:u?.map((o,a)=>{const s=!!p&&void 0!==p[a],d=s?Number(p[a]):0,m=Array.isArray(y)?y?.[a]:y,g="number"==typeof m&&isFinite(m)&&m>0,u=f?.actions&&f?.seeMore&&f?.actions[a]&&f,M=S?S(d):String(d),L=g?S?S(m):String(m):void 0;/* @__PURE__ */
-return e(l,{index:a,label:o,colors:v,icons:x,values:p||[],hovered:F===a,onMouseEnter:e=>C(a,s,e),onMouseLeave:E,showMarker:!1,onClick:u?()=>f?.actions?.[a]?.():void 0,children:u?/* @__PURE__ */n(t,{direction:"row",alignItems:"center",spacing:1,children:[
-/* @__PURE__ */e(h,{children:s?/* @__PURE__ */n(r,{children:[M,void 0!==L&&/* @__PURE__ */n(r,{children:[
-/* @__PURE__ */e(i,{component:"span",children:b}),L]})]}):"—"}),
-/* @__PURE__ */e(c,{action:f.actions[a],seeMore:f.seeMore})]}):/* @__PURE__ */e(h,{children:s?/* @__PURE__ */n(r,{children:[M,void 0!==L&&/* @__PURE__ */n(r,{children:[
-/* @__PURE__ */e(i,{component:"span",children:b}),L]})]}):"—"})},a)})})}:{width:"100%",alignItems:"left",className:"chart-legend-wrapper",children:/* @__PURE__ */e(t,{display:"inline-flex",justifyContent:"center",children:u?.map((r,o)=>{const i=void 0!==p&&o<(p?.length??0)&&void 0!==p[o],a=f?.actions&&f?.seeMore&&f?.actions[o]&&f;/* @__PURE__ */
-return e(l,{index:o,label:r,colors:v,icons:x,values:p||[],hovered:!1,onMouseEnter:e=>C(o,i,e),onMouseLeave:E,containerSx:{"&:hover":{background:k.custom.grey[500]},padding:k.spacing(1,.5)},children:a?/* @__PURE__ */n(t,{direction:"row",alignItems:"center",spacing:1,children:[!w&&/* @__PURE__ */e(h,{children:i?s(H[o],I):"--%"}),
-/* @__PURE__ */e(c,{action:f.actions[o],seeMore:f.seeMore})]}):!w&&/* @__PURE__ */e(h,{children:i?s(H[o],I):"--%"})},o)})})})};export{g as LegendBottom};
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import{useTheme as o,Stack as t,Box as i}from"@mui/material";import{createDistribution as a,formatPercentage as s}from"./utils.js";import{LegendSeeMore as c}from"./LegendSeeMore.js";import{useLegendHoverHandlers as d}from"./useLegendHoverHandlers.js";import{LegendRow as l}from"./LegendRow.js";import{LegendValueBadge as h}from"./LegendValueBadge.js";import{LegendBottomSkeleton as m}from"./LegendBottomSkeleton.js";const g=g=>{const{values:p,labels:u,renderItemDetails:v,colors:f=[],legend:M,onLegendHover:x,icons:L=[],chartRef:w,hidePercentage:j=!1,isLoading:y=!1,maxScore:I,separator:b="/",threshold:S=1,valuesFormatterFn:F,hoveredDatasetIndex:k}=g,H=o(),C=a(p??[]),{handleMouseEnter:E,handleMouseLeave:N}=d({onLegendHover:x,chartRef:w,move:{xFactor:.6,yFactor:.5}});if(y){const n=Math.max(6,Math.min(8,u?.length??p?.length??6));/* @__PURE__ */
+return e(m,{count:n,hidePercentage:j,legend:M})}/* @__PURE__ */
+return e(t,"raw"===M?.mode?{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(t,{width:"100%",children:u?.map((o,a)=>{const s=!!p&&void 0!==p[a],d=s?Number(p[a]):0,m=Array.isArray(I)?I?.[a]:I,g="number"==typeof m&&isFinite(m)&&m>0,u=M?.actions&&M?.seeMore&&M?.actions[a]&&M,x=F?F(d):String(d),w=g?F?F(m):String(m):void 0;/* @__PURE__ */
+return e(l,{index:a,label:o,details:v?.(a),colors:f,icons:L,values:p||[],hovered:k===a,onMouseEnter:e=>E(a,s,e),onMouseLeave:N,showMarker:!1,onClick:u?()=>M?.actions?.[a]?.():void 0,children:u?/* @__PURE__ */n(t,{direction:"row",alignItems:"center",spacing:1,children:[
+/* @__PURE__ */e(h,{children:s?/* @__PURE__ */n(r,{children:[x,void 0!==w&&/* @__PURE__ */n(r,{children:[
+/* @__PURE__ */e(i,{component:"span",children:b}),w]})]}):"—"}),
+/* @__PURE__ */e(c,{action:M.actions[a],seeMore:M.seeMore})]}):/* @__PURE__ */e(h,{children:s?/* @__PURE__ */n(r,{children:[x,void 0!==w&&/* @__PURE__ */n(r,{children:[
+/* @__PURE__ */e(i,{component:"span",children:b}),w]})]}):"—"})},a)})})}:{width:"100%",alignItems:"left",className:"chart-legend-wrapper",children:/* @__PURE__ */e(t,{display:"inline-flex",justifyContent:"center",children:u?.map((r,o)=>{const i=void 0!==p&&o<(p?.length??0)&&void 0!==p[o],a=M?.actions&&M?.seeMore&&M?.actions[o]&&M;/* @__PURE__ */
+return e(l,{index:o,label:r,details:v?.(o),colors:f,icons:L,values:p||[],hovered:!1,onMouseEnter:e=>E(o,i,e),onMouseLeave:N,containerSx:{"&:hover":{background:H.custom.grey[500]},padding:H.spacing(1,.5)},children:a?/* @__PURE__ */n(t,{direction:"row",alignItems:"center",spacing:1,children:[!j&&/* @__PURE__ */e(h,{children:i?s(C[o],S):"--%"}),
+/* @__PURE__ */e(c,{action:M.actions[o],seeMore:M.seeMore})]}):!j&&/* @__PURE__ */e(h,{children:i?s(C[o],S):"--%"})},o)})})})};export{g as LegendBottom};

package/dist/components/Chart/Legend/LegendRight.d.ts

@@ -4,6 +4,7 @@ import { Property } from 'csstype';
 type ChartLegendVariantProps = {
     values?: number[];
     labels?: string[];
+    renderItemDetails?: (index: number) => ReactNode;
     colors?: Property.Color[];
     icons?: ReactNode[];
     legend?: ChartLegend;

package/dist/components/Chart/Legend/LegendRight.js

@@ -1,18 +1,18 @@
-import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import{useTheme as o,useMediaQuery as t,Stack as i,Box as s}from"@mui/material";import{LegendSeeMore as a}from"./LegendSeeMore.js";import{createDistribution as c,formatPercentage as l}from"./utils.js";import{LegendRow as d}from"./LegendRow.js";import{LegendValueBadge as h}from"./LegendValueBadge.js";import{LegendRightSkeleton as m}from"./LegendRightSkeleton.js";import{useLegendHoverHandlers as g}from"./useLegendHoverHandlers.js";const p=p=>{const u=o(),v=t(u.breakpoints.up("md")),{values:f,labels:M,colors:x=[],icons:w=[],legend:y,hoveredDatasetIndex:L,onLegendHover:j,chartRef:C,hidePercentage:I=!1,isLoading:b=!1,maxScore:k,separator:S="/",threshold:A=1,valuesFormatterFn:F}=p,N=c(f??[]),{handleMouseEnter:E,handleMouseLeave:H}=g({onLegendHover:j,chartRef:C,move:{xFactor:.6,yFactor:.3}});if(b){const n=M?.length??f?.length??6,r=Math.max(6,Math.min(8,n));if("raw"===y?.mode){const n=v&&(M?.length??0)>=6,o=Math.ceil(r/2),t=Math.max(0,r-o);/* @__PURE__ */
-return e(m,{count:r,hidePercentage:I,twoColumns:n,leftCount:o,rightCount:t})}/* @__PURE__ */
-return e(m,{count:r,hidePercentage:I})}if("raw"===y?.mode){const o=M?.length??0;if(v&&o>=6){const t=Math.ceil(o/2),c=Array.from({length:t},(e,n)=>n),l=Array.from({length:o-t},(e,n)=>n+t);/* @__PURE__ */
-return e(i,{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(s,{sx:{display:"grid",gridTemplateColumns:"1fr 1fr",columnGap:u.spacing(3),width:"100%"},children:[c,l].map((o,t)=>/* @__PURE__ */e(i,{width:"100%",children:o.map(o=>{const t=M[o],c=!!f&&void 0!==f[o],l=c?Number(f[o]):0,m=Array.isArray(k)?k?.[o]:k,g="number"==typeof m&&isFinite(m)&&m>0,p=y?.actions&&y?.seeMore&&y?.actions[o]&&y,v=F?F(l):String(l),j=g?F?F(m):String(m):void 0;/* @__PURE__ */
-return e(d,{index:o,label:t,colors:x,icons:w,values:f||[],hovered:L===o,onMouseEnter:e=>E(o,c,e),onMouseLeave:H,showMarker:!1,onClick:p?()=>y?.actions?.[o]?.():void 0,children:p?/* @__PURE__ */n(i,{direction:"row",alignItems:"center",spacing:1,children:[
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import{useTheme as t,useMediaQuery as o,Stack as i,Box as s}from"@mui/material";import{LegendSeeMore as a}from"./LegendSeeMore.js";import{createDistribution as c,formatPercentage as l}from"./utils.js";import{LegendRow as d}from"./LegendRow.js";import{LegendValueBadge as h}from"./LegendValueBadge.js";import{LegendRightSkeleton as m}from"./LegendRightSkeleton.js";import{useLegendHoverHandlers as g}from"./useLegendHoverHandlers.js";const p=p=>{const u=t(),v=o(u.breakpoints.up("md")),{values:f,labels:M,renderItemDetails:x,colors:w=[],icons:y=[],legend:L,hoveredDatasetIndex:I,onLegendHover:j,chartRef:C,hidePercentage:b=!1,isLoading:k=!1,maxScore:S,separator:A="/",threshold:F=1,valuesFormatterFn:N}=p,E=c(f??[]),{handleMouseEnter:H,handleMouseLeave:R}=g({onLegendHover:j,chartRef:C,move:{xFactor:.6,yFactor:.3}});if(k){const n=M?.length??f?.length??6,r=Math.max(6,Math.min(8,n));if("raw"===L?.mode){const n=v&&(M?.length??0)>=6,t=Math.ceil(r/2),o=Math.max(0,r-t);/* @__PURE__ */
+return e(m,{count:r,hidePercentage:b,twoColumns:n,leftCount:t,rightCount:o})}/* @__PURE__ */
+return e(m,{count:r,hidePercentage:b})}if("raw"===L?.mode){const t=M?.length??0;if(v&&t>=6){const o=Math.ceil(t/2),c=Array.from({length:o},(e,n)=>n),l=Array.from({length:t-o},(e,n)=>n+o);/* @__PURE__ */
+return e(i,{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(s,{sx:{display:"grid",gridTemplateColumns:"1fr 1fr",columnGap:u.spacing(3),width:"100%"},children:[c,l].map((t,o)=>/* @__PURE__ */e(i,{width:"100%",children:t.map(t=>{const o=M[t],c=!!f&&void 0!==f[t],l=c?Number(f[t]):0,m=Array.isArray(S)?S?.[t]:S,g="number"==typeof m&&isFinite(m)&&m>0,p=L?.actions&&L?.seeMore&&L?.actions[t]&&L,v=N?N(l):String(l),j=g?N?N(m):String(m):void 0;/* @__PURE__ */
+return e(d,{index:t,label:o,details:x?.(t),colors:w,icons:y,values:f||[],hovered:I===t,onMouseEnter:e=>H(t,c,e),onMouseLeave:R,showMarker:!1,onClick:p?()=>L?.actions?.[t]?.():void 0,children:p?/* @__PURE__ */n(i,{direction:"row",alignItems:"center",spacing:1,children:[
 /* @__PURE__ */e(h,{children:c?/* @__PURE__ */n(r,{children:[v,void 0!==j&&/* @__PURE__ */n(r,{children:[
-/* @__PURE__ */e(s,{component:"span",sx:{mx:.25,color:u.palette.text.secondary},children:S}),j]})]}):"—"}),
-/* @__PURE__ */e(a,{action:y.actions[o],seeMore:y.seeMore})]}):/* @__PURE__ */e(h,{children:c?/* @__PURE__ */n(r,{children:[v,void 0!==j&&/* @__PURE__ */n(r,{children:[
-/* @__PURE__ */e(s,{component:"span",sx:{mx:.25,color:u.palette.text.secondary},children:S}),j]})]}):"—"})},o)})},`col-${t}`))})})}/* @__PURE__ */
-return e(i,{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(i,{width:"100%",children:M?.map((o,t)=>{const c=!!f&&void 0!==f[t],l=c?Number(f[t]):0,m=Array.isArray(k)?k?.[t]:k,g="number"==typeof m&&isFinite(m)&&m>0,p=y?.actions&&y?.seeMore&&y?.actions[t]&&y,u=F?F(l):String(l),v=g?F?F(m):String(m):void 0;/* @__PURE__ */
-return e(d,{index:t,label:o,colors:x,icons:w,values:f||[],hovered:L===t,onMouseEnter:e=>E(t,c,e),onMouseLeave:H,showMarker:!1,onClick:p?()=>y?.actions?.[t]?.():void 0,children:p?/* @__PURE__ */n(i,{direction:"row",alignItems:"center",spacing:1,children:[
+/* @__PURE__ */e(s,{component:"span",sx:{mx:.25,color:u.palette.text.secondary},children:A}),j]})]}):"—"}),
+/* @__PURE__ */e(a,{action:L.actions[t],seeMore:L.seeMore})]}):/* @__PURE__ */e(h,{children:c?/* @__PURE__ */n(r,{children:[v,void 0!==j&&/* @__PURE__ */n(r,{children:[
+/* @__PURE__ */e(s,{component:"span",sx:{mx:.25,color:u.palette.text.secondary},children:A}),j]})]}):"—"})},t)})},`col-${o}`))})})}/* @__PURE__ */
+return e(i,{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(i,{width:"100%",children:M?.map((t,o)=>{const c=!!f&&void 0!==f[o],l=c?Number(f[o]):0,m=Array.isArray(S)?S?.[o]:S,g="number"==typeof m&&isFinite(m)&&m>0,p=L?.actions&&L?.seeMore&&L?.actions[o]&&L,u=N?N(l):String(l),v=g?N?N(m):String(m):void 0;/* @__PURE__ */
+return e(d,{index:o,label:t,details:x?.(o),colors:w,icons:y,values:f||[],hovered:I===o,onMouseEnter:e=>H(o,c,e),onMouseLeave:R,showMarker:!1,onClick:p?()=>L?.actions?.[o]?.():void 0,children:p?/* @__PURE__ */n(i,{direction:"row",alignItems:"center",spacing:1,children:[
 /* @__PURE__ */e(h,{children:c?/* @__PURE__ */n(r,{children:[u,void 0!==v&&/* @__PURE__ */n(r,{children:[
-/* @__PURE__ */e(s,{component:"span",children:S}),v]})]}):"—"}),
-/* @__PURE__ */e(a,{action:y.actions[t],seeMore:y.seeMore})]}):/* @__PURE__ */e(h,{children:c?/* @__PURE__ */n(r,{children:[u,void 0!==v&&/* @__PURE__ */n(r,{children:[
-/* @__PURE__ */e(s,{component:"span",children:S}),v]})]}):"—"})},t)})})})}/* @__PURE__ */
-return e(i,{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(i,{width:"100%",children:M?.map((r,o)=>{const t=!!f&&void 0!==f[o],s=y?.actions&&y?.seeMore&&y?.actions[o]&&y;/* @__PURE__ */
-return e(d,{index:o,label:r,colors:x,icons:w,values:f||[],hovered:L===o,onMouseEnter:e=>E(o,t,e),onMouseLeave:H,onClick:s?()=>y?.actions?.[o]?.():void 0,children:s?/* @__PURE__ */n(i,{direction:"row",alignItems:"center",spacing:1,children:[!I&&/* @__PURE__ */e(h,{children:t?l(N[o],A):"--%"}),
-/* @__PURE__ */e(a,{action:y.actions[o],seeMore:y.seeMore})]}):!I&&/* @__PURE__ */e(h,{children:t?l(N[o],A):"--%"})},o)})})})};export{p as LegendRight};
+/* @__PURE__ */e(s,{component:"span",children:A}),v]})]}):"—"}),
+/* @__PURE__ */e(a,{action:L.actions[o],seeMore:L.seeMore})]}):/* @__PURE__ */e(h,{children:c?/* @__PURE__ */n(r,{children:[u,void 0!==v&&/* @__PURE__ */n(r,{children:[
+/* @__PURE__ */e(s,{component:"span",children:A}),v]})]}):"—"})},o)})})})}/* @__PURE__ */
+return e(i,{alignItems:"center",justifyContent:"center",sx:{width:"100%",alignItems:"flex-start"},className:"chart-legend-wrapper",children:/* @__PURE__ */e(i,{width:"100%",children:M?.map((r,t)=>{const o=!!f&&void 0!==f[t],s=L?.actions&&L?.seeMore&&L?.actions[t]&&L;/* @__PURE__ */
+return e(d,{index:t,label:r,details:x?.(t),colors:w,icons:y,values:f||[],hovered:I===t,onMouseEnter:e=>H(t,o,e),onMouseLeave:R,onClick:s?()=>L?.actions?.[t]?.():void 0,children:s?/* @__PURE__ */n(i,{direction:"row",alignItems:"center",spacing:1,children:[!b&&/* @__PURE__ */e(h,{children:o?l(E[t],F):"--%"}),
+/* @__PURE__ */e(a,{action:L.actions[t],seeMore:L.seeMore})]}):!b&&/* @__PURE__ */e(h,{children:o?l(E[t],F):"--%"})},t)})})})};export{p as LegendRight};

package/dist/components/Chart/Legend/LegendRow.d.ts

@@ -5,12 +5,13 @@ import { Property } from 'csstype';
 export type LegendRowProps = {
     index: number;
     label: string;
+    details?: ReactNode;
     colors: Property.Color[];
     icons: ReactNode[];
     values: number[];
     hovered: boolean;
-    onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: () => void;
     onClick?: () => void;
     children?: ReactNode;
     labelVariant?: TypographyProps["variant"];

package/dist/components/Chart/Legend/LegendRow.js

@@ -1,7 +1,7 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useTheme as t,useMediaQuery as r,Stack as o,Typography as i}from"@mui/material";import{RenderItemMarker as a}from"./RenderItemMarker.js";const l=l=>{const{index:s,label:c,colors:d,icons:m,values:p,hovered:g,onMouseEnter:x,onMouseLeave:u,onClick:h,children:b,labelVariant:f="h5",labelSx:v,containerSx:w,showMarker:k=!0}=l,M=t(),y=r(M.breakpoints.up("md"));/* @__PURE__ */
-return e(o,!y&&b?{direction:"row",alignItems:"stretch",gap:"12px",onMouseEnter:x,onMouseLeave:u,onClick:h,sx:{borderBottom:`1px solid ${M.palette.divider}`,"&:last-of-type":{borderBottom:"none"}},children:/* @__PURE__ */n(o,{direction:"column",gap:"4px",sx:{width:"100%",padding:".4rem",backgroundColor:g?M.custom.grey[500]:"unset",...w},className:"chart-legend-item",children:[
-/* @__PURE__ */n(o,{direction:"row",alignItems:"center",gap:M.spacing(1),children:[k&&/* @__PURE__ */e(a,{index:s,palette:d,icons:m,values:p||[]}),
-/* @__PURE__ */e(i,{variant:f,sx:{marginLeft:"4px",...v},className:"chart-legend-item-label",children:c})]}),
-/* @__PURE__ */e(o,{direction:"column",gap:M.spacing(1),justifyContent:"flex-end",alignItems:"flex-end",children:b})]})}:{direction:"row",alignItems:"center",gap:"12px",onMouseEnter:x,onMouseLeave:u,onClick:h,sx:{borderBottom:`1px solid ${M.palette.divider}`,"&:last-of-type":{borderBottom:"none"}},children:/* @__PURE__ */n(o,{direction:"row",gap:"8px",sx:{width:"100%",padding:".4rem",alignItems:"center",justifyContent:"space-between",backgroundColor:g?M.custom.grey[500]:"unset",...w},className:"chart-legend-item",children:[
-/* @__PURE__ */n(o,{direction:"row",alignItems:"center",gap:M.spacing(1),sx:{my:M.spacing(.5)},children:[k&&/* @__PURE__ */e(a,{index:s,palette:d,icons:m,values:p||[]}),
-/* @__PURE__ */e(i,{variant:f,sx:{marginLeft:"4px",...v},className:"chart-legend-item-label",children:c})]}),b]})})};export{l as LegendRow};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useTheme as t,useMediaQuery as i,Stack as r,Typography as a}from"@mui/material";import{RenderItemMarker as o}from"./RenderItemMarker.js";const s=s=>{const{index:l,label:c,details:d,colors:m,icons:p,values:g,hovered:h,onMouseEnter:x,onMouseLeave:u,onClick:b,children:f,labelVariant:v="h5",labelSx:w,containerSx:k,showMarker:I=!0}=s,M=t(),y=i(M.breakpoints.up("md"));/* @__PURE__ */
+return e(r,y||!f&&!d?{direction:"row",alignItems:"center",gap:"12px",onMouseEnter:x,onMouseLeave:u,onClick:b,sx:{borderBottom:`1px solid ${M.palette.divider}`,"&:last-of-type":{borderBottom:"none"}},children:/* @__PURE__ */n(r,{direction:"row",gap:"8px",sx:{width:"100%",padding:".4rem",alignItems:"center",justifyContent:"space-between",backgroundColor:h?M.custom.grey[500]:"unset",...k},className:"chart-legend-item",children:[
+/* @__PURE__ */n(r,{direction:"row",alignItems:"center",gap:M.spacing(1),sx:{my:M.spacing(.5)},children:[I&&/* @__PURE__ */e(o,{index:l,palette:m,icons:p,values:g||[]}),
+/* @__PURE__ */e(a,{variant:v,sx:{marginLeft:"4px",...w},className:"chart-legend-item-label",children:c})]}),d,f]})}:{direction:"row",alignItems:"stretch",gap:"12px",onMouseEnter:x,onMouseLeave:u,onClick:b,sx:{borderBottom:`1px solid ${M.palette.divider}`,"&:last-of-type":{borderBottom:"none"}},children:/* @__PURE__ */n(r,{direction:"row",gap:M.spacing(1),sx:{width:"100%",minWidth:0,alignItems:"flex-start",padding:".4rem",paddingBlock:M.spacing(1.5),backgroundColor:h?M.custom.grey[500]:"unset",...k},className:"chart-legend-item",children:[
+/* @__PURE__ */n(r,{gap:M.spacing(.5),sx:{flex:1,minWidth:0},children:[
+/* @__PURE__ */n(r,{direction:"row",alignItems:"center",gap:M.spacing(1),children:[I&&/* @__PURE__ */e(o,{index:l,palette:m,icons:p,values:g||[]}),
+/* @__PURE__ */e(a,{variant:v,sx:{marginLeft:"4px",minWidth:0,overflowWrap:"anywhere",...w},className:"chart-legend-item-label",children:c})]}),d]}),f&&/* @__PURE__ */e(r,{gap:M.spacing(1),alignItems:"flex-end",sx:{minWidth:0,maxWidth:"45%"},children:f})]})})};export{s as LegendRow};

package/dist/components/Chart/TrajectoryChart/TrajectoryChart.js

@@ -1,3 +1,3 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useTheme as a,Stack as r,Box as o}from"@mui/material";import{useRef as i,useMemo as s}from"react";import{useBars as n}from"./useBars.js";import{TrajectoryChartCore as l}from"./TrajectoryChartCore.js";import{TrajectoryLegend as c}from"./TrajectoryLegend/TrajectoryLegend.js";const d="100%",p="100%",u=0,m=m=>{const h=a(),{unit:g,width:f=d,height:j=p,showLegend:b=!0,improvement:y="decrease",urlEditTrajectories:x,valueFormatterFn:v=h.numbers.valueFormatterFn,precision:w=u,textOptions:F,forceGoalLegend:T,sx:D,...L}=m,C=n(L),E=i(null),G=i({}),k=s(()=>{const t=[];return C.labels.forEach((e,a)=>{const r={name:e};let o=0,i=!1;C.datasets.forEach(t=>{if("goal"===t.scope&&t.isGoalNull)return;const e=t.data[a]??null,s="number"==typeof e?e:null;null!==s&&(i=!0,"goal"===t.scope?r.goal=s:"initial"===t.scope?r.initial=s:"trajectory"===t.scope&&(o++,1===o?r.withoutActionPlan=s:2===o&&(r.withActionPlan=s)))}),i&&t.push(r)}),t},[C.datasets,C.labels]),A=s(()=>C.datasets.filter(t=>!("goal"===t.scope&&t.isGoalNull&&!T)&&("trajectory"!==t.scope||t.data.some(t=>null!==t))),[C.datasets,T]),N=s(()=>A.find(t=>"initial"===t.scope),[A]),O=s(()=>A.filter(t=>"trajectory"===t.scope),[A]),P=s(()=>A.find(t=>"goal"===t.scope),[A]);/* @__PURE__ */
-return t(r,{direction:"column",position:"relative",width:f,height:j,minHeight:h.spacing(50),justifyContent:"stretch",sx:{"& *":{outline:"none"}},children:[
-/* @__PURE__ */e(o,{sx:{border:`1px solid ${h.palette.divider}`,backgroundColor:h.palette.background.paper,borderRadius:h.spacing(1),height:"100%",width:"100%",padding:h.spacing(3),...D},ref:E,children:/* @__PURE__ */e(l,{transformedData:k,initialDataset:N,trajectoryDatasets:O,goalDataset:P,chartData:C,unit:g,valueFormatterFn:v,precision:w,barTopsRef:G})}),b&&/* @__PURE__ */e(c,{datasets:C.datasets,datasetsLabels:C.labels,improvement:y,urlEditTrajectories:x,textOptions:F})]})};export{m as TrajectoryChart};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useTheme as a,Stack as i,Box as r}from"@mui/material";import{useRef as o,useMemo as s}from"react";import{useBars as n}from"./useBars.js";import{TrajectoryChartCore as l}from"./TrajectoryChartCore.js";import{TrajectoryLegend as c}from"./TrajectoryLegend/TrajectoryLegend.js";const d="100%",m="100%",p=0,u=u=>{const h=a(),{unit:g,width:f=d,height:x=m,showLegend:j=!0,improvement:b="decrease",urlEditTrajectories:y,valueFormatterFn:v=h.numbers.valueFormatterFn,precision:w=p,textOptions:F,forceGoalLegend:T,sx:D,...L}=u,C=n(L),E=o(null),W=o({}),k=s(()=>{const t=[];return C.labels.forEach((e,a)=>{const i={name:e};let r=0,o=!1;C.datasets.forEach(t=>{if("goal"===t.scope&&t.isGoalNull)return;const e=t.data[a]??null,s="number"==typeof e?e:null;null!==s&&(o=!0,"goal"===t.scope?i.goal=s:"initial"===t.scope?i.initial=s:"trajectory"===t.scope&&(r++,1===r?i.withoutActionPlan=s:2===r&&(i.withActionPlan=s)))}),o&&t.push(i)}),t},[C.datasets,C.labels]),G=s(()=>C.datasets.filter(t=>!("goal"===t.scope&&t.isGoalNull&&!T)&&("trajectory"!==t.scope||t.data.some(t=>null!==t))),[C.datasets,T]),H=s(()=>G.find(t=>"initial"===t.scope),[G]),O=s(()=>G.filter(t=>"trajectory"===t.scope),[G]),A=s(()=>G.find(t=>"goal"===t.scope),[G]);/* @__PURE__ */
+return t(i,{direction:"column",position:"relative",width:f,height:{xs:"auto",md:x},minWidth:0,maxWidth:"100%",minHeight:h.spacing(50),justifyContent:"stretch",sx:{"& :focus-visible":{outline:`2px solid ${h.palette.primary.main}`,outlineOffset:2}},children:[
+/* @__PURE__ */e(r,{sx:{border:`1px solid ${h.palette.divider}`,backgroundColor:h.palette.background.paper,borderRadius:h.spacing(1),height:{xs:x,md:"100%"},minHeight:{xs:h.spacing(40),md:0},flexShrink:{xs:0,md:1},width:"100%",minWidth:0,overflowX:"auto",padding:h.spacing(3),...D},ref:E,children:/* @__PURE__ */e(r,{sx:{height:"100%",minHeight:{xs:h.spacing(34),md:0},minWidth:{xs:h.spacing(6*k.length+10),md:0}},children:/* @__PURE__ */e(l,{transformedData:k,initialDataset:H,trajectoryDatasets:O,goalDataset:A,chartData:C,unit:g,valueFormatterFn:v,precision:w,barTopsRef:W})})}),j&&/* @__PURE__ */e(c,{datasets:C.datasets,datasetsLabels:C.labels,improvement:b,urlEditTrajectories:y,textOptions:F})]})};export{u as TrajectoryChart};

package/dist/components/Chart/TrajectoryChart/TrajectoryChartCore.js

@@ -1,10 +1,10 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import{useEffect as i,useMemo as e}from"react";import{ResponsiveContainer as n,ComposedChart as o,CartesianGrid as l,XAxis as s,YAxis as m,Label as p,Tooltip as c,Bar as g,Line as u}from"recharts";import{createWithoutActionPlanBarShape as d,createScoreBarShape as f,createActionPlanBarShape as b}from"./TrajectoryChartBarShapes.js";import{TrajectoryTooltip as y}from"./TrajectoryTooltip.js";import{getColorString as h}from"./types.js";import k from"i18next";const v=v=>{const F=r(),{transformedData:C,initialDataset:D,trajectoryDatasets:S,goalDataset:T,chartData:w,unit:B,valueFormatterFn:P=F.numbers.valueFormatterFn,precision:j=0,barTopsRef:x}=v,A=k.language,N=(t,a)=>{if("string"==typeof t&&"number"==typeof a){const r=x.current[t];x.current[t]="number"==typeof r?Math.min(r,a):a}};i(()=>{x.current={}},[C,x]);const K=d({registerBarTopY:N,marginFactor:.3}),L=f({registerBarTopY:N,marginFactor:.3}),Y=b({registerBarTopY:N,marginFactor:.3}),M=e(()=>{const t=S[0]?.backgroundColor;return"string"==typeof t?t:"transparent"},[S]),$=e(()=>{const t=D?.backgroundColor;return"string"==typeof t?t:"transparent"},[D]),z=e(()=>{const t=S[1]?.backgroundColor;return"string"==typeof t?t:"transparent"},[S]),G=e(()=>D?.label?String(D.label):"Initial",[D]),W=e(()=>T?.label?String(T.label):"Goal",[T]),q=e(()=>S[0]?.label?String(S[0]?.label):"Without action plan",[S]),I=e(()=>S[1]?.label?String(S[1]?.label):"With action plan",[S]),R=[4,4,0,0];/* @__PURE__ */
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import{useEffect as e,useMemo as i}from"react";import{ResponsiveContainer as n,ComposedChart as o,CartesianGrid as l,XAxis as s,YAxis as m,Label as p,Tooltip as c,Bar as g,Line as u}from"recharts";import{createWithoutActionPlanBarShape as d,createScoreBarShape as f,createActionPlanBarShape as b}from"./TrajectoryChartBarShapes.js";import{TrajectoryTooltip as y}from"./TrajectoryTooltip.js";import{getColorString as h}from"./types.js";import k from"i18next";const v=v=>{const F=r(),{transformedData:C,initialDataset:D,trajectoryDatasets:S,goalDataset:T,chartData:w,unit:B,valueFormatterFn:j=F.numbers.valueFormatterFn,precision:P=0,barTopsRef:x}=v,A=k.language,N=(t,a)=>{if("string"==typeof t&&"number"==typeof a){const r=x.current[t];x.current[t]="number"==typeof r?Math.min(r,a):a}};e(()=>{x.current={}},[C,x]);const K=d({registerBarTopY:N,marginFactor:.3}),L=f({registerBarTopY:N,marginFactor:.3}),Y=b({registerBarTopY:N,marginFactor:.3}),M=i(()=>{const t=S[0]?.backgroundColor;return"string"==typeof t?t:"transparent"},[S]),$=i(()=>{const t=D?.backgroundColor;return"string"==typeof t?t:"transparent"},[D]),z=i(()=>{const t=S[1]?.backgroundColor;return"string"==typeof t?t:"transparent"},[S]),G=i(()=>D?.label?String(D.label):"Initial",[D]),W=i(()=>T?.label?String(T.label):"Goal",[T]),E=i(()=>S[0]?.label?String(S[0]?.label):"Without action plan",[S]),I=i(()=>S[1]?.label?String(S[1]?.label):"With action plan",[S]),R=[4,4,0,0];/* @__PURE__ */
 return t(n,{width:"100%",height:"100%",children:/* @__PURE__ */a(o,{data:C,margin:{left:10,right:0,top:50,bottom:10},barCategoryGap:"10%",barGap:2,children:[
 /* @__PURE__ */t(l,{strokeDasharray:"4 4",stroke:F.palette.divider,vertical:!1}),
-/* @__PURE__ */t(s,{dataKey:"name",tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateY(${F.spacing(2)})`}},axisLine:{stroke:F.palette.divider},tickLine:!1,interval:"equidistantPreserveStart",padding:{left:0,right:0}}),
-/* @__PURE__ */t(m,{width:"auto",tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateX(-${F.spacing(1)})`}},axisLine:{stroke:F.palette.divider},tickLine:!1,tickFormatter:t=>P(Number(t)),children:/* @__PURE__ */t(p,{value:B,position:"insideTopLeft",style:{fontFamily:"Montserrat",fontSize:"14px",transform:`translate(-${F.spacing(1.75)}, -${F.spacing(6)})`}})}),
-/* @__PURE__ */t(c,{cursor:!1,content:a=>{const r=!a||"string"!=typeof a.label&&"number"!=typeof a.label?void 0:String(a.label),i=r?x.current[r]:void 0,e=T?h(T.borderColor??T.backgroundColor,F.palette.primary.main):void 0;/* @__PURE__ */
-return t(y,{tooltipProps:a,unit:B,goalName:W,initialName:G,withoutActionPlanName:q,withActionPlanName:I,valueFormatterFn:P,language:A,precision:j,barTopY:i,goalData:T?.data,labels:w.labels,goalColor:e})}}),
-/* @__PURE__ */t(g,{animationBegin:100,animationDuration:200,dataKey:"withoutActionPlan",name:q,fill:M,radius:R,shape:K},"withoutActionPlan"),
+/* @__PURE__ */t(s,{dataKey:"name",tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateY(${F.spacing(2)})`}},axisLine:{stroke:F.palette.divider},tickLine:!1,interval:"preserveStartEnd",padding:{left:0,right:0}}),
+/* @__PURE__ */t(m,{width:"auto",tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateX(-${F.spacing(1)})`}},axisLine:{stroke:F.palette.divider},tickLine:!1,tickFormatter:t=>j(Number(t)),children:/* @__PURE__ */t(p,{value:B,position:"insideTopLeft",style:{fontFamily:"Montserrat",fontSize:"14px",transform:`translate(-${F.spacing(1.75)}, -${F.spacing(6)})`}})}),
+/* @__PURE__ */t(c,{cursor:!1,content:a=>{const r=!a||"string"!=typeof a.label&&"number"!=typeof a.label?void 0:String(a.label),e=r?x.current[r]:void 0,i=T?h(T.borderColor??T.backgroundColor,F.palette.primary.main):void 0;/* @__PURE__ */
+return t(y,{tooltipProps:a,unit:B,goalName:W,initialName:G,withoutActionPlanName:E,withActionPlanName:I,valueFormatterFn:j,language:A,precision:P,barTopY:e,goalData:T?.data,labels:w.labels,goalColor:i})}}),
+/* @__PURE__ */t(g,{animationBegin:100,animationDuration:200,dataKey:"withoutActionPlan",name:E,fill:M,radius:R,shape:K},"withoutActionPlan"),
 /* @__PURE__ */t(g,{animationBegin:0,animationDuration:200,dataKey:"initial",name:G,fill:$,radius:R,shape:L},"initial"),
 /* @__PURE__ */t(g,{animationBegin:150,animationDuration:200,dataKey:"withActionPlan",name:I,fill:z,radius:R,shape:Y},"withActionPlan"),T?/* @__PURE__ */t(u,{animationBegin:400,animationDuration:200,type:"linear",dataKey:"goal",name:W,stroke:h(T.borderColor??T.backgroundColor,F.palette.primary.main),strokeWidth:2,dot:{fill:h(T.borderColor??T.backgroundColor,F.palette.primary.main),r:4},connectNulls:!0,strokeDasharray:"0"},"goal"):null]})})};export{v as TrajectoryChartCore};

package/dist/components/Chart/WaterfallChart/WaterfallChart.d.ts

@@ -37,6 +37,8 @@ export type WaterfallChartProps = {
     valueFormatterFn?: (value: number, precision?: number) => string;
     precision?: number;
     sx?: SxProps<Theme>;
+    /** Show category names and values using the shared chart legend. Hidden by default. */
+    showDataLegend?: boolean;
     CoreOverride?: {
         XAxisHeight?: number;
     };

package/dist/components/Chart/WaterfallChart/WaterfallChart.js

@@ -1,3 +1,3 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useTheme as t,Stack as a,Box as o}from"@mui/material";import{useMemo as l}from"react";import{WaterfallChartCore as i}from"./WaterfallChartCore.js";import{WaterfallLegend as n}from"./WaterfallLegend/WaterfallLegend.js";const u=u=>{const s=t(),{reference:c,start:m,values:d,colors:p,target:v,goal:g,forcedPrecision:f=0,unit:h,width:F="100%",height:b="100%",improvement:x="decrease",textOptions:C,showLegend:j=!0,valueFormatterFn:w=s.numbers.valueFormatterFn,sx:O,CoreOverride:L}=u,W=l(()=>d?.length?d.map(e=>e.value).filter(e=>null!==e):null,[d]),k=l(()=>W?W.reduce((e,r)=>e+r,0):null,[W]),P=v?.value?v:{label:m?.label??c?.label??"",value:v?.value??(m?.value??c?.value??0)+(k??0)};/* @__PURE__ */
-return e(a,{direction:"column",position:"relative",width:F,minHeight:s.spacing(50),justifyContent:"stretch",sx:{"& *":{outline:"none"}},children:[
-/* @__PURE__ */r(o,{sx:{border:`1px solid ${s.palette.divider}`,backgroundColor:s.palette.background.paper,borderRadius:s.spacing(1),width:"100%",height:b,padding:s.spacing(3),...O},children:/* @__PURE__ */r(i,{reference:c,start:m,values:d,target:v,goal:g,colors:p,forcedPrecision:f,unit:h,improvement:x,targetValueFinal:v?.value??(m?.value??c?.value??0)+(k??0),valueFormatterFn:w,precision:f,CoreOverride:L})}),j&&/* @__PURE__ */r(n,{textOptions:C,target:P,improvement:x,goal:g,valueFormatterFn:w,actionsTotalValue:k,unit:h,precision:f})]})};export{u as WaterfallChart};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTheme as r,Stack as a,Box as i}from"@mui/material";import{useMemo as l}from"react";import{transformWaterfallData as o}from"./utils.js";import{WaterfallDataLegend as n}from"./WaterfallDataLegend.js";import{WaterfallChartCore as s}from"./WaterfallChartCore.js";import{WaterfallLegend as u}from"./WaterfallLegend/WaterfallLegend.js";const m=m=>{const d=r(),{reference:p,start:c,values:v,colors:g,target:f,goal:h,forcedPrecision:x=0,unit:F,width:b="100%",height:W="100%",improvement:j="decrease",textOptions:w,showLegend:C=!0,valueFormatterFn:L=d.numbers.valueFormatterFn,sx:O,CoreOverride:k,showDataLegend:y=!1}=m,D=l(()=>v?.length?v.map(e=>e.value).filter(e=>null!==e):null,[v]),P=l(()=>D?D.reduce((e,t)=>e+t,0):null,[D]),V=f?.value?f:{label:c?.label??p?.label??"",value:f?.value??(c?.value??p?.value??0)+(P??0)},$=l(()=>o(p,c,v,g,f,h,j,f?.value??(c?.value??p?.value??0)+(P??0),d),[p,c,v,g,f,h,j,P,d]);/* @__PURE__ */
+return e(a,{direction:"column",position:"relative",width:b,minWidth:0,maxWidth:"100%",minHeight:d.spacing(50),justifyContent:"stretch",sx:{"& :focus-visible":{outline:`2px solid ${d.palette.primary.main}`,outlineOffset:2}},children:[
+/* @__PURE__ */t(i,{sx:{border:`1px solid ${d.palette.divider}`,backgroundColor:d.palette.background.paper,borderRadius:d.spacing(1),width:"100%",height:W,minWidth:0,overflowX:{xs:"auto",sm:"visible"},padding:d.spacing(3),...O},children:/* @__PURE__ */t(s,{reference:p,start:c,values:v,target:f,goal:h,colors:g,forcedPrecision:x,unit:F,improvement:j,targetValueFinal:f?.value??(c?.value??p?.value??0)+(P??0),valueFormatterFn:L,precision:x,CoreOverride:k})}),y&&/* @__PURE__ */t(n,{data:$,unit:F,precision:x,valueFormatterFn:L}),C&&/* @__PURE__ */t(u,{textOptions:w,target:V,improvement:j,goal:h,valueFormatterFn:L,actionsTotalValue:P,unit:F,precision:x})]})};export{m as WaterfallChart};

package/dist/components/Chart/WaterfallChart/WaterfallChartCore.js

@@ -1,7 +1,7 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useRef as r,useState as i,useEffect as a,useMemo as o}from"react";import{ResponsiveContainer as n,ComposedChart as s,CartesianGrid as l,XAxis as m,YAxis as d,Label as c,ReferenceLine as h}from"recharts";import{useTheme as f}from"@mui/material";import{transformWaterfallData as p,calculateLabelSettings as u}from"./utils.js";import{WaterfallChartTick as g}from"./WaterfallChartTick.js";import{WaterfallChartBars as v}from"./WaterfallChartBars.js";const k=k=>{const y=f(),{reference:F,start:w,values:x,colors:L,target:W,goal:b,forcedPrecision:j,unit:z,improvement:C,targetValueFinal:D,valueFormatterFn:M=y.numbers.valueFormatterFn,precision:$,CoreOverride:B}=k,E=r(null),[P,S]=i(800);a(()=>{const t=()=>{if(E.current){const t=E.current.getBoundingClientRect().width;t>0&&S(t-60)}};t();const e=()=>t();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const T=o(()=>p(F,w,x,L,W,b,C,D,y),[F,w,x,L,W,b,C,D,y]),X=o(()=>u(T,P),[T,P]);/* @__PURE__ */
-return t("div",{ref:E,style:{width:"100%",height:"100%"},children:/* @__PURE__ */t(n,{width:"100%",height:"100%",children:/* @__PURE__ */e(s,{data:T,margin:{top:45,right:0,left:30,bottom:35},children:[
-/* @__PURE__ */t(l,{strokeDasharray:"4 4",stroke:y.palette.divider}),
-/* @__PURE__ */t(m,{dataKey:"label",strokeWidth:0,strokeDasharray:"4 4",tick:e=>/* @__PURE__ */t(g,{...e,maxWidth:X.maxWidth}),axisLine:{stroke:y.palette.divider},interval:X.interval,tickLine:!1,padding:{left:0,right:0},height:B?.XAxisHeight??40}),
-/* @__PURE__ */t(d,{width:"auto",domain:([t,e])=>[t<0?t-.2*Math.abs(t):t,e],strokeWidth:0,tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateX(-${y.spacing(2)})`}},axisLine:{stroke:y.palette.divider},tickLine:!1,tickFormatter:t=>M(Number(t),$),children:/* @__PURE__ */t(c,{value:z,position:"insideTopLeft",style:{fontFamily:"Montserrat",fontSize:"14px",transform:`translate(-${y.spacing(2.75)}, -${y.spacing(6)})`}})}),
-/* @__PURE__ */t(h,{y:0,stroke:y.custom.grey[600],strokeWidth:2}),
-/* @__PURE__ */t(v,{transformedData:T,valueFormatterFn:M,forcedPrecision:j,precision:$})]})})})};export{k as WaterfallChartCore};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useRef as r,useState as i,useEffect as a,useMemo as o}from"react";import{ResponsiveContainer as n,ComposedChart as s,CartesianGrid as m,XAxis as l,YAxis as d,Label as c,ReferenceLine as h}from"recharts";import{useTheme as f,useMediaQuery as p,Box as g}from"@mui/material";import{transformWaterfallData as u,calculateLabelSettings as k,wrapWaterfallLabel as v}from"./utils.js";import{WaterfallChartTick as x}from"./WaterfallChartTick.js";import{WaterfallChartBars as y}from"./WaterfallChartBars.js";import{TICK_VERTICAL_OFFSET as F,LINE_HEIGHT_PIXELS as w}from"./labelGeometry.js";const b=b=>{const W=f(),L=p(W.breakpoints.down("sm")),{reference:j,start:z,values:C,colors:M,target:D,goal:X,forcedPrecision:$,unit:A,improvement:B,targetValueFinal:E,valueFormatterFn:H=W.numbers.valueFormatterFn,precision:P,CoreOverride:S}=b,T=r(null),[G,K]=i(800);a(()=>{const t=()=>{if(T.current){const t=T.current.getBoundingClientRect().width;t>0&&K(t-60)}};t();const e=()=>t();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const N=o(()=>u(j,z,C,M,D,X,B,E,W),[j,z,C,M,D,X,B,E,W]),O=o(()=>k(N,G),[N,G]),R=Math.max(S?.XAxisHeight??40,...N.map(t=>F+v(t.label,80).length*w));/* @__PURE__ */
+return t(g,{ref:T,sx:{width:"100%",height:"100%",minWidth:{xs:96*N.length+100,sm:0}},children:/* @__PURE__ */t(n,{width:"100%",height:"100%",children:/* @__PURE__ */e(s,{data:N,margin:{top:45,right:0,left:30,bottom:35},children:[
+/* @__PURE__ */t(m,{strokeDasharray:"4 4",stroke:W.palette.divider}),
+/* @__PURE__ */t(l,{dataKey:"label",strokeWidth:0,strokeDasharray:"4 4",tick:e=>/* @__PURE__ */t(x,{...e,maxWidth:L?80:O.maxWidth}),axisLine:{stroke:W.palette.divider},interval:L?0:O.interval,tickLine:!1,padding:{left:0,right:0},height:L?R:S?.XAxisHeight??40}),
+/* @__PURE__ */t(d,{width:"auto",domain:([t,e])=>[t<0?t-.2*Math.abs(t):t,e],strokeWidth:0,tick:{fontFamily:"Montserrat",fontSize:14,style:{transform:`translateX(-${W.spacing(2)})`}},axisLine:{stroke:W.palette.divider},tickLine:!1,tickFormatter:t=>H(Number(t),P),children:/* @__PURE__ */t(c,{value:A,position:"insideTopLeft",style:{fontFamily:"Montserrat",fontSize:"14px",transform:`translate(-${W.spacing(2.75)}, -${W.spacing(6)})`}})}),
+/* @__PURE__ */t(h,{y:0,stroke:W.custom.grey[600],strokeWidth:2}),
+/* @__PURE__ */t(y,{transformedData:N,valueFormatterFn:H,forcedPrecision:$,precision:P})]})})})};export{b as WaterfallChartCore};

package/dist/components/Chart/WaterfallChart/WaterfallChartTick.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";const e=e=>{const{x:o,y:n,payload:a,maxWidth:i}=e,l=r(),m=a.value.split(" "),s=[];let p="";for(const t of m){const r=p?`${p} ${t}`:t;6*r.length>i&&p?(s.push(p),p=t):p=r}p&&s.push(p);const c="number"==typeof n?n:parseFloat(String(n));/* @__PURE__ */
-return t("g",{transform:`translate(${o},${c+22})`,children:/* @__PURE__ */t("g",{children:s.map((r,e)=>/* @__PURE__ */t("text",{x:0,y:16*e,textAnchor:"middle",fill:l.palette.text.primary,fontSize:"12",fontFamily:"Montserrat",children:r},e))})})};export{e as WaterfallChartTick};
+import{jsx as t}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import{wrapWaterfallLabel as e}from"./utils.js";import{LINE_HEIGHT_PIXELS as o,TICK_VERTICAL_OFFSET as m}from"./labelGeometry.js";const a=a=>{const{x:i,y:l,payload:n,maxWidth:p}=a,s=r(),f=n.value,x=e(f,p),c="number"==typeof l?l:parseFloat(String(l));/* @__PURE__ */
+return t("g",{transform:`translate(${i},${c+m})`,children:/* @__PURE__ */t("g",{children:x.map((r,e)=>/* @__PURE__ */t("text",{x:0,y:e*o,textAnchor:"middle",fill:s.palette.text.primary,fontSize:"12",fontFamily:"Montserrat",children:r},e))})})};export{a as WaterfallChartTick};

package/dist/components/Chart/WaterfallChart/WaterfallDataLegend.d.ts

@@ -0,0 +1,9 @@
+import { WaterfallTransformedItem } from './utils';
+type WaterfallDataLegendProps = {
+    data: WaterfallTransformedItem[];
+    unit?: string;
+    precision?: number;
+    valueFormatterFn: (value: number, precision?: number) => string;
+};
+export declare const WaterfallDataLegend: (props: WaterfallDataLegendProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Chart/WaterfallChart/WaterfallDataLegend.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Stack as a}from"@mui/material";import{LegendRow as n}from"../Legend/LegendRow.js";import{LegendValueBadge as t}from"../Legend/LegendValueBadge.js";const i=i=>{const{data:o,unit:l,precision:m,valueFormatterFn:d}=i;if(0===o.length)return null;const c=o.map(e=>e.color),p=o.map(e=>e.diff);/* @__PURE__ */
+return e(a,{sx:{mt:2,minWidth:0},className:"chart-legend-wrapper",children:o.map((a,i)=>/* @__PURE__ */e(n,{index:i,label:a.label,colors:c,icons:[],values:p,hovered:!1,labelSx:{overflowWrap:"anywhere",minWidth:0},containerSx:{minWidth:0},children:/* @__PURE__ */r(t,{sx:{whiteSpace:"normal",overflowWrap:"anywhere",minWidth:0},children:[d(a.diff,m),l?` ${l}`:""]})},`${a.type}-${i}-waterfall-data-legend`))})};export{i as WaterfallDataLegend};

package/dist/components/Chart/WaterfallChart/labelGeometry.d.ts

@@ -0,0 +1,2 @@
+export declare const LINE_HEIGHT_PIXELS = 16;
+export declare const TICK_VERTICAL_OFFSET = 22;

package/dist/components/Chart/WaterfallChart/labelGeometry.js

@@ -0,0 +1 @@
+const o=16,t=22;export{o as LINE_HEIGHT_PIXELS,t as TICK_VERTICAL_OFFSET};

package/dist/components/Chart/WaterfallChart/utils.d.ts

@@ -14,3 +14,4 @@ export declare const calculateLabelSettings: (transformedData: WaterfallTransfor
     interval: number | "preserveStartEnd";
     maxWidth: number;
 };
+export declare const wrapWaterfallLabel: (text: string, maxWidth: number) => string[];

package/dist/components/Chart/WaterfallChart/utils.js

@@ -1 +1 @@
-import{calculateWaterfall as a}from"../../../innerComponents/chartUtils.js";const e=(e,l,t,o,r,i,s,n,c)=>{const u=(t??[]).filter(a=>null!==a.value),m=u.map(a=>a.value),h=l?.value??e?.value??0,f=a({startingValue:h,differences:m}),v=[];if(e?.label&&v.push({label:e.label,low:0,high:e.value??0,diff:(e.value??0)-0,type:"reference",color:o?.reference??c.custom.dataviz.colors[2].main}),l?.label&&v.push({label:l.label,low:0,high:l.value??0,diff:(l.value??0)-0,type:"start",color:o?.start??c.custom.dataviz.colors[4].main}),u.forEach((a,e)=>{const l=f[e];if(!l)return;const[t,o]=l,r=o-t,i=r<=0,n="decrease"===s?c.custom.dataviz.colors[6].main:c.custom.dataviz.extra[14].main,u="decrease"===s?c.custom.dataviz.extra[14].main:c.custom.dataviz.colors[6].main;v.push({label:a.label,low:t,high:o,diff:r,type:"value",color:i?u:n})}),r?.label){const a=n??h+(m.length>0?m.reduce((a,e)=>a+e,0):0);v.push({label:r.label,low:0,high:a,diff:a-0,type:"target",color:o?.target??c.custom.dataviz.colors[4].main})}if(i?.label){const a=i.value??n??0;v.push({label:i.label,low:0,high:a,diff:a-0,type:"goal",color:o?.goal??c.custom.dataviz.extra[12].main})}return v},l=(a,e)=>{const l=a.length;if(0===l)return{interval:0,maxWidth:80};const t=e/l;let o=0;return t<85&&(o="preserveStartEnd"),{interval:o,maxWidth:Math.min(t,80)}};export{l as calculateLabelSettings,e as transformWaterfallData};
+import{calculateWaterfall as e}from"../../../innerComponents/chartUtils.js";const a=(a,t,l,o,r,i,s,n,c)=>{const u=(l??[]).filter(e=>null!==e.value),h=u.map(e=>e.value),f=t?.value??a?.value??0,m=e({startingValue:f,differences:h}),v=[];if(a?.label&&v.push({label:a.label,low:0,high:a.value??0,diff:(a.value??0)-0,type:"reference",color:o?.reference??c.custom.dataviz.colors[2].main}),t?.label&&v.push({label:t.label,low:0,high:t.value??0,diff:(t.value??0)-0,type:"start",color:o?.start??c.custom.dataviz.colors[4].main}),u.forEach((e,a)=>{const t=m[a];if(!t)return;const[l,o]=t,r=o-l,i=r<=0,n="decrease"===s?c.custom.dataviz.colors[6].main:c.custom.dataviz.extra[14].main,u="decrease"===s?c.custom.dataviz.extra[14].main:c.custom.dataviz.colors[6].main;v.push({label:e.label,low:l,high:o,diff:r,type:"value",color:i?u:n})}),r?.label){const e=n??f+(h.length>0?h.reduce((e,a)=>e+a,0):0);v.push({label:r.label,low:0,high:e,diff:e-0,type:"target",color:o?.target??c.custom.dataviz.colors[4].main})}if(i?.label){const e=i.value??n??0;v.push({label:i.label,low:0,high:e,diff:e-0,type:"goal",color:o?.goal??c.custom.dataviz.extra[12].main})}return v},t=(e,a)=>{const t=e.length;if(0===t)return{interval:0,maxWidth:80};const l=a/t;let o=0;return l<85&&(o="preserveStartEnd"),{interval:o,maxWidth:Math.min(l,80)}},l=(e,a)=>{const t=e.split(" "),l=[];let o="";for(const r of t){const e=o?`${o} ${r}`:r;6*e.length>a&&o?(l.push(o),o=r):o=e}return o&&l.push(o),l};export{t as calculateLabelSettings,a as transformWaterfallData,l as wrapWaterfallLabel};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.20.2",
+  "version": "2.21.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",
@@ -300,7 +300,7 @@
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "dependencies": {
     "@lexical/react": "^0.41.0",