@useloops/design-system 1.4.648 → 1.4.650

package/dist/esm/systems/Platform/SliderGraph/SliderGraph.js

@@ -1 +1 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useMemo as r}from"react";import i from"./_partials/SliderGraphBar/SliderGraphBar.js";import t from"./_partials/SliderGraphYAxis/SliderGraphYAxis.js";import{SliderGraphWrapper as o,SliderGraphBarWrapper as l}from"./_partials/StyledComponents.js";const s=({rounding:s,tickInterval:n=10,data:p,loading:d,disabled:h,onChangeHandler:c,animateBars:m,slotProps:g,hideYAxis:b=!1,hideValues:x=!1,showGraphLines:u=!1,hideLabels:v=!1,hideCheckboxes:k=!1,disableTooltips:C=!1,maxHeight:f=465,responsive:G=!1})=>{const H=r(()=>Math.ceil(p.reduce((e,{percentage:a})=>a>e?a:e,0)),[p]);return e(o,{...g?.root,maxHeight:f,responsive:G,children:[!b&&a(t,{graphMaxHeight:f,loading:d,yAxisMax:H,rounding:s,tickInterval:n,disabled:h,showGraphLines:u,hideLabel:v,hideCheckbox:k,responsive:G,slotProps:{root:g?.yAxis}}),a(l,{...g?.barsWrapper,maxHeight:f,responsive:G,children:p.map((e,r)=>{const{percentage:t,label:o,value:l,checked:s,id:p,amount:b,relativePercentage:u,onChange:A}=e;return a(i,{graphMaxHeight:f,loading:d,label:o,value:l,percentage:t,maxDataValue:H,checked:s,tickInterval:n,disabled:h||d,animateBar:m,hideValue:x,responsive:G,onChange:c?(e,a)=>c(e,a):A?(e,a)=>A({amount:b,percentage:t,name:o,relativePercentage:u},a):void 0,hideLabel:v,hideCheckbox:k,toolTipContent:null==t?null:`${t}%`,disableTooltip:C,id:p,className:`slider-graph-bar-${r+1}`,slotProps:{barWrapper:{},checkbox:{},value:{},label:{},tooltip:{},bar:{}},...g?.bar},r)})})]})};export{s as default};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useMemo as r}from"react";import i from"./_partials/SliderGraphBar/SliderGraphBar.js";import o from"./_partials/SliderGraphYAxis/SliderGraphYAxis.js";import{SliderGraphWrapper as t,SliderGraphBarWrapper as l}from"./_partials/StyledComponents.js";const n=({rounding:n,tickInterval:s=10,data:d,loading:p,disabled:h,onChangeHandler:c,animateBars:m,slotProps:g,hideYAxis:b=!1,hideValues:x=!1,showGraphLines:u=!1,hidePercentageSymbol:v=!1,hideLabels:k=!1,hideCheckboxes:C=!1,disableTooltips:P=!1,maxHeight:S=465,responsive:f=!1})=>{const y=r(()=>Math.ceil(d.reduce((e,{percentage:a})=>a>e?a:e,0)),[d]);return e(t,{...g?.root,maxHeight:S,responsive:f,children:[!b&&a(o,{graphMaxHeight:S,loading:p,yAxisMax:y,rounding:n,tickInterval:s,disabled:h,showGraphLines:u,hideLabel:k,hideCheckbox:C,responsive:f,slotProps:{root:g?.yAxis}}),a(l,{...g?.barsWrapper,maxHeight:S,responsive:f,children:d.map((e,r)=>{const{percentage:o,label:t,value:l,checked:n,id:d,amount:b,hidePercentageSymbol:u,relativePercentage:G,onChange:H,toolTipContent:A}=e,L=u??v;return a(i,{graphMaxHeight:S,loading:p,label:t,value:l,percentage:o,maxDataValue:y,hidePercentageSymbol:L,checked:n,tickInterval:s,disabled:h||p,animateBar:m,hideValue:x,responsive:f,onChange:c?(e,a)=>c(e,a):H?(e,a)=>H({amount:b,percentage:o,name:t,relativePercentage:G},a):void 0,hideLabel:k,hideCheckbox:C,toolTipContent:void 0!==A?A:null==o?null:`${o}${L?"":"%"}`,disableTooltip:P,id:d,className:`slider-graph-bar-${r+1}`,slotProps:{barWrapper:{},checkbox:{},value:{},label:{},tooltip:{}},...g?.bar},r)})})]})};export{n as default};

package/dist/esm/systems/Platform/SliderGraph/_partials/SliderGraphBar/SliderGraphBar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import{mergeSx as i}from"merge-sx";import{useState as a,useRef as p,useEffect as l,useCallback as s}from"react";import"../../../../../utils/formValidation/misc.js";import"../../../../BrandCore/Icon/Icon.js";import"../../../../BrandCore/primitiveVariables.js";import"../../../../WebCore/utils/typography.util.js";import"../../../../WebCore/AnnualController/AnnualController.js";import"../../../../WebCore/SelectItem/SelectItem.js";import"../../../../WebCore/Accordion/Accordion.js";import m from"../../../../WebCore/Typography/Typography.js";import"@mui/icons-material";import"../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js";import"../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js";import"../../../../WebCore/Badge/Badge.js";import"../../../../WebCore/Breadcrumb/Breadcrumb.js";import"../../../../WebCore/Button/Button.js";import"../../../../WebCore/ButtonBase/ButtonBase.js";import"../../../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../../../WebCore/ButtonTabGroup/_partials/TabButton.js";import n from"../../../../WebCore/Checkbox/Checkbox.js";import"../../../../WebCore/Checkbox/StyledCheckbox.js";import"../../../../WebCore/InputFieldBase/InputFieldBase.js";import"../../../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"../../../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../../../WebCore/Differential/DifferentialContainer.js";import"../../../../WebCore/Differential/DifferentialRadio.js";import"../../../../WebCore/DropdownMenu/StyledMenu.js";import"../../../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js";import"../../../../WebCore/FormGenerator/FormGenerator.js";import"../../../../WebCore/GridOverlay/GridOverlay.js";import"html-react-parser";import"../../../../WebCore/IconButton/IconButton.js";import"../../../../WebCore/IconButtonBase/IconButtonBase.js";import"../../../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../../../WebCore/Image/Image.js";import"../../../../WebCore/KeyValueLabel/KeyValueLabel.js";import"../../../../WebCore/Label/Label.js";import"../../../../WebCore/Likert/LikertContainer.js";import"../../../../WebCore/Likert/LikertLabel.js";import"../../../../WebCore/Likert/LikertRadio.js";import"../../../../WebCore/Link/StyledLink.js";import"@lottiefiles/dotlottie-react";import"../../../../WebCore/LoopsAiButton/LoopsAiButton.js";import"markdown-to-jsx";import"material-ui-popup-state/hooks";import"../../../../WebCore/Surface/Surface.js";import"../../../../WebCore/Menu/MenuItem.js";import"../../../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js";import"../../../../WebCore/ModalLayout/_partials/ModalContentWrapper.js";import"../../../../WebCore/NavigationButton/NavigationButton.js";import"../../../../WebCore/Nudge/NudgeButton.js";import"../../../../WebCore/NumberField/NumberField.js";import"../../../../BrandCore/colorRamps.js";import"../../../../BrandCore/semanticColor.js";import"../../../../BrandCore/types.js";import"../../../../BrandCore/typography.js";import"../../../../WebCore/Progress/Progress.js";import b from"../../../../WebCore/Tooltip/Tooltip.js";import"../../../../WebCore/Pill/StyledPill.js";import"../../../../WebCore/ProgressBar/ProgressBar.js";import"../../../../WebCore/Radio/StyledRadio.js";import"../../../../WebCore/Select/StyledSelect.js";import"../../../../WebCore/RankItem/RankItemContainer.js";import"../../../../WebCore/RankItem/RankItemLabel.js";import"../../../../WebCore/SortableList/SortableList.js";import"../../../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js";import"@tiptap/extension-placeholder";import"@tiptap/starter-kit";import"mui-tiptap";import"../../../../WebCore/RichTextField/StyledRichTextEditor.js";import d from"../../../../WebCore/Skeleton/Skeleton.js";import"../../../../WebCore/Slider/StyledSlider.js";import"../../../../WebCore/StarRating/StarRating.js";import"../../../../WebCore/Switch/StyledSwitch.js";import"../../../../WebCore/Textarea/Textarea.js";import"../../../../WebCore/TrialCard/TrialCardContainers.js";import"../../../../WebCore/TrialCard/TrialPill.js";import"../../../../WebCore/UserMenu/UserMenuButton.js";import"../../../../WebCore/VideoModal/VideoModal.js";import{heightBasedOnPercentage as c}from"../../utils/heightBasedOnPercentage.js";import{VeticalBarWrapper as C,VerticalBarValue as u,VerticalBar as j,VerticalBarActions as W,VerticalBarLabel as h}from"../StyledComponents.js";const B=({percentage:B,label:x,checked:g,toolTipContent:y,hideValue:S,hideLabel:k,hideCheckbox:f,disableTooltip:L,animateBar:I,slotProps:v,tickInterval:A,onChange:T,maxDataValue:w,disabled:F,loading:M,value:R,id:P,className:_,graphMaxHeight:G,responsive:V})=>{r();const[N,D]=a(0),O=p(null);l(()=>{const e=c(B,A,w,G,{hideLabel:k,hideCheckbox:f,hideValue:S}),o=I?N:e,t=performance.now(),r=i=>{const a=i-t,p=Math.min(a/250,1);D(o+(e-o)*(p*(2-p))),p<1&&requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[R]);const H=s(()=>{!F&&T&&T(P,!g)},[F,T,g]);return e(b,{message:y||null,disableHoverListener:L||!y,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{height:"fill-available",width:1,minWidth:0,...v?.tooltip?.slotProps?.wrapper?.sx}}},children:o(C,{maxHeight:G,disabled:F,...v?.barWrapper,id:P,className:_,onClick:H,responsive:V,children:[!S&&e(u,{...v?.value,children:M?e(d,{width:20,height:18}):e(m,{variation:"xxs",component:"p",monospaced:!0,sx:{fontSize:"10px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"100%",textAlign:"center",minWidth:0,color:e=>F||!g?e.custom.palette.text.disabled:e.custom.palette.text.secondary},children:`${Math.round(B)}%`})}),M?e(d,{width:"fill-available",height:N}):e(j,{checked:g,value:N,maxHeight:G,disabled:F,...v?.bar}),o(W,{children:[!k&&e(h,{...v?.label,children:M?e(d,{width:20,height:20}):e(m,{variation:"xs",component:"p",weight:"bold",sx:{color:e=>F||!g?e.custom.palette.text.disabled:e.custom.palette.text.primary},children:x})}),!f&&e(t,{children:M?e(d,{width:24,height:24,sx:{borderRadius:.5}}):e(n,{id:`${P}-checkbox`,variant:"secondary",checked:!F&&g,disabled:F,checkboxLabel:void 0,inputRef:O,onChange:H,...v?.checkbox,sx:i({mr:0,mt:1},v?.checkbox?.sx)})})]})]})})};export{B as default};
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useTheme as r}from"@mui/material";import{mergeSx as i}from"merge-sx";import{useState as a,useRef as l,useEffect as p,useCallback as s}from"react";import"../../../../../utils/formValidation/misc.js";import"../../../../BrandCore/Icon/Icon.js";import"../../../../BrandCore/primitiveVariables.js";import"../../../../WebCore/utils/typography.util.js";import"../../../../WebCore/AnnualController/AnnualController.js";import"../../../../WebCore/SelectItem/SelectItem.js";import"../../../../WebCore/Accordion/Accordion.js";import m from"../../../../WebCore/Typography/Typography.js";import"@mui/icons-material";import"../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js";import"../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js";import"../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js";import"../../../../WebCore/Badge/Badge.js";import"../../../../WebCore/Breadcrumb/Breadcrumb.js";import"../../../../WebCore/Button/Button.js";import"../../../../WebCore/ButtonBase/ButtonBase.js";import"../../../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../../../WebCore/ButtonTabGroup/_partials/TabButton.js";import n from"../../../../WebCore/Checkbox/Checkbox.js";import"../../../../WebCore/Checkbox/StyledCheckbox.js";import"../../../../WebCore/InputFieldBase/InputFieldBase.js";import"../../../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"../../../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../../../WebCore/Differential/DifferentialContainer.js";import"../../../../WebCore/Differential/DifferentialRadio.js";import"../../../../WebCore/DropdownMenu/StyledMenu.js";import"../../../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js";import"../../../../WebCore/FormGenerator/FormGenerator.js";import"../../../../WebCore/GridOverlay/GridOverlay.js";import"html-react-parser";import"../../../../WebCore/IconButton/IconButton.js";import"../../../../WebCore/IconButtonBase/IconButtonBase.js";import"../../../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../../../WebCore/Image/Image.js";import"../../../../WebCore/KeyValueLabel/KeyValueLabel.js";import"../../../../WebCore/Label/Label.js";import"../../../../WebCore/Likert/LikertContainer.js";import"../../../../WebCore/Likert/LikertLabel.js";import"../../../../WebCore/Likert/LikertRadio.js";import"../../../../WebCore/Link/StyledLink.js";import"@lottiefiles/dotlottie-react";import"../../../../WebCore/LoopsAiButton/LoopsAiButton.js";import"markdown-to-jsx";import"material-ui-popup-state/hooks";import"../../../../WebCore/Surface/Surface.js";import"../../../../WebCore/Menu/MenuItem.js";import"../../../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js";import"../../../../WebCore/ModalLayout/_partials/ModalContentWrapper.js";import"../../../../WebCore/NavigationButton/NavigationButton.js";import"../../../../WebCore/Nudge/NudgeButton.js";import"../../../../WebCore/NumberField/NumberField.js";import"../../../../BrandCore/colorRamps.js";import"../../../../BrandCore/semanticColor.js";import"../../../../BrandCore/types.js";import"../../../../BrandCore/typography.js";import"../../../../WebCore/Progress/Progress.js";import b from"../../../../WebCore/Tooltip/Tooltip.js";import"../../../../WebCore/Pill/StyledPill.js";import"../../../../WebCore/ProgressBar/ProgressBar.js";import"../../../../WebCore/Radio/StyledRadio.js";import"../../../../WebCore/Select/StyledSelect.js";import"../../../../WebCore/RankItem/RankItemContainer.js";import"../../../../WebCore/RankItem/RankItemLabel.js";import"../../../../WebCore/SortableList/SortableList.js";import"../../../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js";import"@tiptap/extension-placeholder";import"@tiptap/starter-kit";import"mui-tiptap";import"../../../../WebCore/RichTextField/StyledRichTextEditor.js";import d from"../../../../WebCore/Skeleton/Skeleton.js";import"../../../../WebCore/Slider/StyledSlider.js";import"../../../../WebCore/StarRating/StarRating.js";import"../../../../WebCore/Switch/StyledSwitch.js";import"../../../../WebCore/Textarea/Textarea.js";import"../../../../WebCore/TrialCard/TrialCardContainers.js";import"../../../../WebCore/TrialCard/TrialPill.js";import"../../../../WebCore/UserMenu/UserMenuButton.js";import"../../../../WebCore/VideoModal/VideoModal.js";import{heightBasedOnPercentage as c}from"../../utils/heightBasedOnPercentage.js";import{VeticalBarWrapper as C,VerticalBarValue as u,VerticalBar as j,VerticalBarActions as h,VerticalBarLabel as W}from"../StyledComponents.js";const B=({percentage:B,label:x,checked:g,toolTipContent:y,hideValue:S,hideLabel:k,hideCheckbox:f,hidePercentageSymbol:L,disableTooltip:I,animateBar:v,slotProps:A,tickInterval:T,onChange:w,maxDataValue:F,disabled:M,loading:R,value:P,id:_,className:G,graphMaxHeight:V,responsive:N})=>{const D=r(),[O,H]=a(0),E=l(null);p(()=>{const e=c(B,T,F,V,{hideLabel:k,hideCheckbox:f,hideValue:S}),o=v?O:e,t=performance.now(),r=i=>{const a=i-t,l=Math.min(a/250,1);H(o+(e-o)*(l*(2-l))),l<1&&requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[P]);const $=s(()=>{!M&&w&&w(_,!g)},[M,w,g]);return e(b,{message:y||null,disableHoverListener:I||!y,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{height:"fill-available",width:1,minWidth:0,...A?.tooltip?.slotProps?.wrapper?.sx}}},children:o(C,{maxHeight:V,disabled:M,...A?.barWrapper,id:_,className:G,onClick:$,responsive:N,children:[!S&&e(u,{...A?.value,children:R?e(d,{width:20,height:18}):e(m,{variation:"xxs",component:"p",monospaced:!0,sx:{fontSize:"10px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"100%",textAlign:"center",minWidth:0,color:e=>M||!g?e.custom.palette.text.disabled:e.custom.palette.text.secondary},children:`${Math.round(B)}${L?"":"%"}`})}),R?e(d,{width:"fill-available",height:O}):e(j,{checked:g,value:O,maxHeight:V,disabled:M,sx:i(A?.bar?.sx||{},{backgroundColor:M||!g?D.custom.palette.interaction.disabled:A?.bar?.sx?.backgroundColor||D.custom.palette.interaction.hover})}),o(h,{children:[!k&&e(W,{...A?.label,children:R?e(d,{width:20,height:20}):e(m,{variation:"xs",component:"p",weight:"bold",sx:{color:e=>M||!g?e.custom.palette.text.disabled:e.custom.palette.text.primary},children:x})}),!f&&e(t,{children:R?e(d,{width:24,height:24,sx:{borderRadius:.5}}):e(n,{id:`${_}-checkbox`,variant:"secondary",checked:!M&&g,disabled:M,checkboxLabel:void 0,inputRef:E,onChange:$,...A?.checkbox,sx:i({mr:0,mt:1},A?.checkbox?.sx)})})]})]})})};export{B as default};

package/dist/esm/systems/Platform/SliderGraph/utils/useSliderGraphProps.js

@@ -1 +1 @@
-import e from"react";import a from"../../../../node_modules/uuid/dist/esm-browser/v4.js";const t=(e,t=465)=>{const r=Math.max(...e.map(e=>e.percentage));return e.map(e=>({percentage:e.percentage,amount:e.amount,label:e.name,relativePercentage:e.relativePercentage,id:a(),checked:!0,tickInterval:10,disableTooltip:!1,hideCheckbox:!1,hideLabel:!1,hideValue:!1,animateBar:!0,disabled:!1,loading:!1,onChange:(a,t)=>console.warn(e,t),value:e.percentage,toolTipContent:`${e.percentage}%`,maxDataValue:r,graphMaxHeight:t}))},r=(a,r=465)=>{const[n,o]=e.useState(()=>t(a,r));return{storedData:n,setStoredData:o,createInitialData:t}};export{t as createInitialData,r as default};
+import e from"react";import a from"../../../../node_modules/uuid/dist/esm-browser/v4.js";const t=(e,t=465)=>{const r=Math.max(...e.map(e=>e.percentage));return e.map(e=>({percentage:e.percentage,amount:e.amount,label:e.name,relativePercentage:e.relativePercentage,id:a(),checked:!0,tickInterval:10,disableTooltip:!1,hideCheckbox:!1,hideLabel:!1,hideValue:!1,animateBar:!0,disabled:!1,loading:!1,onChange:(a,t)=>console.warn(e,t),value:e.percentage,hidePercentageSymbol:e.hidePercentageSymbol,maxDataValue:r,graphMaxHeight:t}))},r=(a,r=465)=>{const[n,o]=e.useState(()=>t(a,r));return{storedData:n,setStoredData:o,createInitialData:t}};export{t as createInitialData,r as default};

package/dist/systems/Platform/SliderGraph/SliderGraph.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("./_partials/SliderGraphBar/SliderGraphBar.js"),i=require("./_partials/SliderGraphYAxis/SliderGraphYAxis.js"),s=require("./_partials/StyledComponents.js");module.exports=({rounding:l,tickInterval:t=10,data:n,loading:o,disabled:d,onChangeHandler:p,animateBars:h,slotProps:c,hideYAxis:u=!1,hideValues:g=!1,showGraphLines:x=!1,hideLabels:b=!1,hideCheckboxes:m=!1,disableTooltips:v=!1,maxHeight:k=465,responsive:j=!1})=>{const C=a.useMemo(()=>Math.ceil(n.reduce((e,{percentage:a})=>a>e?a:e,0)),[n]);return e.jsxs(s.SliderGraphWrapper,{...c?.root,maxHeight:k,responsive:j,children:[!u&&e.jsx(i,{graphMaxHeight:k,loading:o,yAxisMax:C,rounding:l,tickInterval:t,disabled:d,showGraphLines:x,hideLabel:b,hideCheckbox:m,responsive:j,slotProps:{root:c?.yAxis}}),e.jsx(s.SliderGraphBarWrapper,{...c?.barsWrapper,maxHeight:k,responsive:j,children:n.map((a,i)=>{const{percentage:s,label:l,value:n,checked:u,id:x,amount:G,relativePercentage:S,onChange:H}=a;return e.jsx(r,{graphMaxHeight:k,loading:o,label:l,value:n,percentage:s,maxDataValue:C,checked:u,tickInterval:t,disabled:d||o,animateBar:h,hideValue:g,responsive:j,onChange:p?(e,a)=>p(e,a):H?(e,a)=>H({amount:G,percentage:s,name:l,relativePercentage:S},a):void 0,hideLabel:b,hideCheckbox:m,toolTipContent:null==s?null:`${s}%`,disableTooltip:v,id:x,className:`slider-graph-bar-${i+1}`,slotProps:{barWrapper:{},checkbox:{},value:{},label:{},tooltip:{},bar:{}},...c?.bar},i)})})]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("./_partials/SliderGraphBar/SliderGraphBar.js"),i=require("./_partials/SliderGraphYAxis/SliderGraphYAxis.js"),l=require("./_partials/StyledComponents.js");module.exports=({rounding:t,tickInterval:s=10,data:o,loading:n,disabled:d,onChangeHandler:h,animateBars:p,slotProps:c,hideYAxis:g=!1,hideValues:u=!1,showGraphLines:b=!1,hidePercentageSymbol:x=!1,hideLabels:m=!1,hideCheckboxes:v=!1,disableTooltips:S=!1,maxHeight:k=465,responsive:C=!1})=>{const j=a.useMemo(()=>Math.ceil(o.reduce((e,{percentage:a})=>a>e?a:e,0)),[o]);return e.jsxs(l.SliderGraphWrapper,{...c?.root,maxHeight:k,responsive:C,children:[!g&&e.jsx(i,{graphMaxHeight:k,loading:n,yAxisMax:j,rounding:t,tickInterval:s,disabled:d,showGraphLines:b,hideLabel:m,hideCheckbox:v,responsive:C,slotProps:{root:c?.yAxis}}),e.jsx(l.SliderGraphBarWrapper,{...c?.barsWrapper,maxHeight:k,responsive:C,children:o.map((a,i)=>{const{percentage:l,label:t,value:o,checked:g,id:b,amount:G,hidePercentageSymbol:P,relativePercentage:y,onChange:H,toolTipContent:q}=a,A=P??x;return e.jsx(r,{graphMaxHeight:k,loading:n,label:t,value:o,percentage:l,maxDataValue:j,hidePercentageSymbol:A,checked:g,tickInterval:s,disabled:d||n,animateBar:p,hideValue:u,responsive:C,onChange:h?(e,a)=>h(e,a):H?(e,a)=>H({amount:G,percentage:l,name:t,relativePercentage:y},a):void 0,hideLabel:m,hideCheckbox:v,toolTipContent:void 0!==q?q:null==l?null:`${l}${A?"":"%"}`,disableTooltip:S,id:b,className:`slider-graph-bar-${i+1}`,slotProps:{barWrapper:{},checkbox:{},value:{},label:{},tooltip:{}},...c?.bar},i)})})]})};

package/dist/systems/Platform/SliderGraph/_partials/SliderGraphBar/SliderGraphBar.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),o=require("react");require("../../../../../utils/formValidation/misc.js"),require("../../../../BrandCore/Icon/Icon.js"),require("../../../../BrandCore/primitiveVariables.js"),require("../../../../WebCore/utils/typography.util.js"),require("../../../../WebCore/AnnualController/AnnualController.js"),require("../../../../WebCore/SelectItem/SelectItem.js"),require("../../../../WebCore/Accordion/Accordion.js");var i=require("../../../../WebCore/Typography/Typography.js");require("@mui/icons-material"),require("../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js"),require("../../../../WebCore/Badge/Badge.js"),require("../../../../WebCore/Breadcrumb/Breadcrumb.js"),require("../../../../WebCore/Button/Button.js"),require("../../../../WebCore/ButtonBase/ButtonBase.js"),require("../../../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js"),require("../../../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js"),require("../../../../WebCore/ButtonTabGroup/_partials/TabButton.js");var a=require("../../../../WebCore/Checkbox/Checkbox.js");require("../../../../WebCore/Checkbox/StyledCheckbox.js"),require("../../../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("../../../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../../../WebCore/Differential/DifferentialContainer.js"),require("../../../../WebCore/Differential/DifferentialRadio.js"),require("../../../../WebCore/DropdownMenu/StyledMenu.js"),require("../../../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js"),require("../../../../WebCore/FormGenerator/FormGenerator.js"),require("../../../../WebCore/GridOverlay/GridOverlay.js"),require("html-react-parser"),require("../../../../WebCore/IconButton/IconButton.js"),require("../../../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../../../WebCore/Image/Image.js"),require("../../../../WebCore/KeyValueLabel/KeyValueLabel.js"),require("../../../../WebCore/Label/Label.js"),require("../../../../WebCore/Likert/LikertContainer.js"),require("../../../../WebCore/Likert/LikertLabel.js"),require("../../../../WebCore/Likert/LikertRadio.js"),require("../../../../WebCore/Link/StyledLink.js"),require("@lottiefiles/dotlottie-react"),require("../../../../WebCore/LoopsAiButton/LoopsAiButton.js"),require("markdown-to-jsx"),require("material-ui-popup-state/hooks"),require("../../../../WebCore/Surface/Surface.js"),require("../../../../WebCore/Menu/MenuItem.js"),require("../../../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js"),require("../../../../WebCore/ModalLayout/_partials/ModalContentWrapper.js"),require("../../../../WebCore/NavigationButton/NavigationButton.js"),require("../../../../WebCore/Nudge/NudgeButton.js"),require("../../../../WebCore/NumberField/NumberField.js"),require("../../../../BrandCore/colorRamps.js"),require("../../../../BrandCore/semanticColor.js"),require("../../../../BrandCore/types.js"),require("../../../../BrandCore/typography.js"),require("../../../../WebCore/Progress/Progress.js");var s=require("../../../../WebCore/Tooltip/Tooltip.js");require("../../../../WebCore/Pill/StyledPill.js"),require("../../../../WebCore/ProgressBar/ProgressBar.js"),require("../../../../WebCore/Radio/StyledRadio.js"),require("../../../../WebCore/Select/StyledSelect.js"),require("../../../../WebCore/RankItem/RankItemContainer.js"),require("../../../../WebCore/RankItem/RankItemLabel.js"),require("../../../../WebCore/SortableList/SortableList.js"),require("../../../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../../../WebCore/RichTextField/StyledRichTextEditor.js");var l=require("../../../../WebCore/Skeleton/Skeleton.js");require("../../../../WebCore/Slider/StyledSlider.js"),require("../../../../WebCore/StarRating/StarRating.js"),require("../../../../WebCore/Switch/StyledSwitch.js"),require("../../../../WebCore/Textarea/Textarea.js"),require("../../../../WebCore/TrialCard/TrialCardContainers.js"),require("../../../../WebCore/TrialCard/TrialPill.js"),require("../../../../WebCore/UserMenu/UserMenuButton.js"),require("../../../../WebCore/VideoModal/VideoModal.js");var u=require("../../utils/heightBasedOnPercentage.js"),n=require("../StyledComponents.js");module.exports=({percentage:b,label:d,checked:c,toolTipContent:p,hideValue:C,hideLabel:j,hideCheckbox:q,disableTooltip:m,animateBar:h,slotProps:W,tickInterval:x,onChange:B,maxDataValue:g,disabled:S,loading:y,value:k,id:L,className:v,graphMaxHeight:I,responsive:A})=>{r.useTheme();const[f,T]=o.useState(0),w=o.useRef(null);o.useEffect(()=>{const e=u.heightBasedOnPercentage(b,x,g,I,{hideLabel:j,hideCheckbox:q,hideValue:C}),r=h?f:e,t=performance.now(),o=i=>{const a=i-t,s=Math.min(a/250,1);T(r+(e-r)*(s*(2-s))),s<1&&requestAnimationFrame(o)},i=requestAnimationFrame(o);return()=>cancelAnimationFrame(i)},[k]);const F=o.useCallback(()=>{!S&&B&&B(L,!c)},[S,B,c]);return e.jsx(s,{message:p||null,disableHoverListener:m||!p,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{height:"fill-available",width:1,minWidth:0,...W?.tooltip?.slotProps?.wrapper?.sx}}},children:e.jsxs(n.VeticalBarWrapper,{maxHeight:I,disabled:S,...W?.barWrapper,id:L,className:v,onClick:F,responsive:A,children:[!C&&e.jsx(n.VerticalBarValue,{...W?.value,children:y?e.jsx(l,{width:20,height:18}):e.jsx(i,{variation:"xxs",component:"p",monospaced:!0,sx:{fontSize:"10px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"100%",textAlign:"center",minWidth:0,color:e=>S||!c?e.custom.palette.text.disabled:e.custom.palette.text.secondary},children:`${Math.round(b)}%`})}),y?e.jsx(l,{width:"fill-available",height:f}):e.jsx(n.VerticalBar,{checked:c,value:f,maxHeight:I,disabled:S,...W?.bar}),e.jsxs(n.VerticalBarActions,{children:[!j&&e.jsx(n.VerticalBarLabel,{...W?.label,children:y?e.jsx(l,{width:20,height:20}):e.jsx(i,{variation:"xs",component:"p",weight:"bold",sx:{color:e=>S||!c?e.custom.palette.text.disabled:e.custom.palette.text.primary},children:d})}),!q&&e.jsx(e.Fragment,{children:y?e.jsx(l,{width:24,height:24,sx:{borderRadius:.5}}):e.jsx(a,{id:`${L}-checkbox`,variant:"secondary",checked:!S&&c,disabled:S,checkboxLabel:void 0,inputRef:w,onChange:F,...W?.checkbox,sx:t.mergeSx({mr:0,mt:1},W?.checkbox?.sx)})})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),o=require("react");require("../../../../../utils/formValidation/misc.js"),require("../../../../BrandCore/Icon/Icon.js"),require("../../../../BrandCore/primitiveVariables.js"),require("../../../../WebCore/utils/typography.util.js"),require("../../../../WebCore/AnnualController/AnnualController.js"),require("../../../../WebCore/SelectItem/SelectItem.js"),require("../../../../WebCore/Accordion/Accordion.js");var i=require("../../../../WebCore/Typography/Typography.js");require("@mui/icons-material"),require("../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js"),require("../../../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js"),require("../../../../WebCore/Badge/Badge.js"),require("../../../../WebCore/Breadcrumb/Breadcrumb.js"),require("../../../../WebCore/Button/Button.js"),require("../../../../WebCore/ButtonBase/ButtonBase.js"),require("../../../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js"),require("../../../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js"),require("../../../../WebCore/ButtonTabGroup/_partials/TabButton.js");var a=require("../../../../WebCore/Checkbox/Checkbox.js");require("../../../../WebCore/Checkbox/StyledCheckbox.js"),require("../../../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("../../../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../../../WebCore/Differential/DifferentialContainer.js"),require("../../../../WebCore/Differential/DifferentialRadio.js"),require("../../../../WebCore/DropdownMenu/StyledMenu.js"),require("../../../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js"),require("../../../../WebCore/FormGenerator/FormGenerator.js"),require("../../../../WebCore/GridOverlay/GridOverlay.js"),require("html-react-parser"),require("../../../../WebCore/IconButton/IconButton.js"),require("../../../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../../../WebCore/Image/Image.js"),require("../../../../WebCore/KeyValueLabel/KeyValueLabel.js"),require("../../../../WebCore/Label/Label.js"),require("../../../../WebCore/Likert/LikertContainer.js"),require("../../../../WebCore/Likert/LikertLabel.js"),require("../../../../WebCore/Likert/LikertRadio.js"),require("../../../../WebCore/Link/StyledLink.js"),require("@lottiefiles/dotlottie-react"),require("../../../../WebCore/LoopsAiButton/LoopsAiButton.js"),require("markdown-to-jsx"),require("material-ui-popup-state/hooks"),require("../../../../WebCore/Surface/Surface.js"),require("../../../../WebCore/Menu/MenuItem.js"),require("../../../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js"),require("../../../../WebCore/ModalLayout/_partials/ModalContentWrapper.js"),require("../../../../WebCore/NavigationButton/NavigationButton.js"),require("../../../../WebCore/Nudge/NudgeButton.js"),require("../../../../WebCore/NumberField/NumberField.js"),require("../../../../BrandCore/colorRamps.js"),require("../../../../BrandCore/semanticColor.js"),require("../../../../BrandCore/types.js"),require("../../../../BrandCore/typography.js"),require("../../../../WebCore/Progress/Progress.js");var s=require("../../../../WebCore/Tooltip/Tooltip.js");require("../../../../WebCore/Pill/StyledPill.js"),require("../../../../WebCore/ProgressBar/ProgressBar.js"),require("../../../../WebCore/Radio/StyledRadio.js"),require("../../../../WebCore/Select/StyledSelect.js"),require("../../../../WebCore/RankItem/RankItemContainer.js"),require("../../../../WebCore/RankItem/RankItemLabel.js"),require("../../../../WebCore/SortableList/SortableList.js"),require("../../../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../../../WebCore/RichTextField/StyledRichTextEditor.js");var l=require("../../../../WebCore/Skeleton/Skeleton.js");require("../../../../WebCore/Slider/StyledSlider.js"),require("../../../../WebCore/StarRating/StarRating.js"),require("../../../../WebCore/Switch/StyledSwitch.js"),require("../../../../WebCore/Textarea/Textarea.js"),require("../../../../WebCore/TrialCard/TrialCardContainers.js"),require("../../../../WebCore/TrialCard/TrialPill.js"),require("../../../../WebCore/UserMenu/UserMenuButton.js"),require("../../../../WebCore/VideoModal/VideoModal.js");var u=require("../../utils/heightBasedOnPercentage.js"),n=require("../StyledComponents.js");module.exports=({percentage:b,label:d,checked:c,toolTipContent:p,hideValue:C,hideLabel:j,hideCheckbox:q,hidePercentageSymbol:m,disableTooltip:h,animateBar:W,slotProps:x,tickInterval:B,onChange:g,maxDataValue:S,disabled:y,loading:k,value:v,id:L,className:I,graphMaxHeight:A,responsive:f})=>{const T=r.useTheme(),[w,F]=o.useState(0),R=o.useRef(null);o.useEffect(()=>{const e=u.heightBasedOnPercentage(b,B,S,A,{hideLabel:j,hideCheckbox:q,hideValue:C}),r=W?w:e,t=performance.now(),o=i=>{const a=i-t,s=Math.min(a/250,1);F(r+(e-r)*(s*(2-s))),s<1&&requestAnimationFrame(o)},i=requestAnimationFrame(o);return()=>cancelAnimationFrame(i)},[v]);const M=o.useCallback(()=>{!y&&g&&g(L,!c)},[y,g,c]);return e.jsx(s,{message:p||null,disableHoverListener:h||!p,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{height:"fill-available",width:1,minWidth:0,...x?.tooltip?.slotProps?.wrapper?.sx}}},children:e.jsxs(n.VeticalBarWrapper,{maxHeight:A,disabled:y,...x?.barWrapper,id:L,className:I,onClick:M,responsive:f,children:[!C&&e.jsx(n.VerticalBarValue,{...x?.value,children:k?e.jsx(l,{width:20,height:18}):e.jsx(i,{variation:"xxs",component:"p",monospaced:!0,sx:{fontSize:"10px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"100%",textAlign:"center",minWidth:0,color:e=>y||!c?e.custom.palette.text.disabled:e.custom.palette.text.secondary},children:`${Math.round(b)}${m?"":"%"}`})}),k?e.jsx(l,{width:"fill-available",height:w}):e.jsx(n.VerticalBar,{checked:c,value:w,maxHeight:A,disabled:y,sx:t.mergeSx(x?.bar?.sx||{},{backgroundColor:y||!c?T.custom.palette.interaction.disabled:x?.bar?.sx?.backgroundColor||T.custom.palette.interaction.hover})}),e.jsxs(n.VerticalBarActions,{children:[!j&&e.jsx(n.VerticalBarLabel,{...x?.label,children:k?e.jsx(l,{width:20,height:20}):e.jsx(i,{variation:"xs",component:"p",weight:"bold",sx:{color:e=>y||!c?e.custom.palette.text.disabled:e.custom.palette.text.primary},children:d})}),!q&&e.jsx(e.Fragment,{children:k?e.jsx(l,{width:24,height:24,sx:{borderRadius:.5}}):e.jsx(a,{id:`${L}-checkbox`,variant:"secondary",checked:!y&&c,disabled:y,checkboxLabel:void 0,inputRef:R,onChange:M,...x?.checkbox,sx:t.mergeSx({mr:0,mt:1},x?.checkbox?.sx)})})]})]})})};

package/dist/systems/Platform/SliderGraph/types.d.ts

@@ -13,6 +13,7 @@ interface SliderGraphDataItem {
     percentage: number;
     name: string;
     relativePercentage: number;
+    hidePercentageSymbol?: boolean;
 }
 interface SliderGraphYAxisProps extends CommonComponentProps {
     rounding: number | null;
@@ -44,6 +45,7 @@ interface SliderGraphProps extends CommonComponentProps {
     };
     hideYAxis?: boolean;
     hideCheckboxes?: boolean;
+    hidePercentageSymbol?: boolean;
     hideLabels?: boolean;
     hideValues?: boolean;
     showGraphLines?: boolean;
@@ -67,6 +69,7 @@ interface SliderGraphBarProps extends CommonComponentProps {
     hideValue?: boolean;
     hideLabel?: boolean;
     hideCheckbox?: boolean;
+    hidePercentageSymbol?: boolean;
     animateBar?: boolean;
     onChange?: (id: string, checked: boolean) => void;
     graphMaxHeight: number;

package/dist/systems/Platform/SliderGraph/utils/useSliderGraphProps.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../../../node_modules/uuid/dist/esm-browser/v4.js");function t(e){return e&&e.__esModule?e:{default:e}}var r=t(e);const n=(e,t=465)=>{const r=Math.max(...e.map(e=>e.percentage));return e.map(e=>({percentage:e.percentage,amount:e.amount,label:e.name,relativePercentage:e.relativePercentage,id:a(),checked:!0,tickInterval:10,disableTooltip:!1,hideCheckbox:!1,hideLabel:!1,hideValue:!1,animateBar:!0,disabled:!1,loading:!1,onChange:(a,t)=>console.warn(e,t),value:e.percentage,toolTipContent:`${e.percentage}%`,maxDataValue:r,graphMaxHeight:t}))};exports.createInitialData=n,exports.default=(e,a=465)=>{const[t,o]=r.default.useState(()=>n(e,a));return{storedData:t,setStoredData:o,createInitialData:n}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../../../node_modules/uuid/dist/esm-browser/v4.js");function t(e){return e&&e.__esModule?e:{default:e}}var r=t(e);const n=(e,t=465)=>{const r=Math.max(...e.map(e=>e.percentage));return e.map(e=>({percentage:e.percentage,amount:e.amount,label:e.name,relativePercentage:e.relativePercentage,id:a(),checked:!0,tickInterval:10,disableTooltip:!1,hideCheckbox:!1,hideLabel:!1,hideValue:!1,animateBar:!0,disabled:!1,loading:!1,onChange:(a,t)=>console.warn(e,t),value:e.percentage,hidePercentageSymbol:e.hidePercentageSymbol,maxDataValue:r,graphMaxHeight:t}))};exports.createInitialData=n,exports.default=(e,a=465)=>{const[t,i]=r.default.useState(()=>n(e,a));return{storedData:t,setStoredData:i,createInitialData:n}};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.648",
+    "version": "1.4.650",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",
@@ -160,11 +160,11 @@
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
-        "@storybook/addon-docs": "^10.2.8",
-        "@storybook/addon-links": "^10.2.8",
-        "@storybook/addon-onboarding": "^10.2.8",
-        "@storybook/addon-themes": "^10.2.8",
-        "@storybook/react-vite": "^10.2.8",
+        "@storybook/addon-docs": "^10.3.5",
+        "@storybook/addon-links": "^10.3.5",
+        "@storybook/addon-onboarding": "^10.3.5",
+        "@storybook/addon-themes": "^10.3.5",
+        "@storybook/react-vite": "^10.3.5",
         "@swc/core": "^1.10.18",
         "@testing-library/react": "^16.3.0",
         "@types/react": "^19.2.2",
@@ -178,7 +178,7 @@
         "eslint": "^9.14.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.37.2",
-        "eslint-plugin-storybook": "^10.2.8",
+        "eslint-plugin-storybook": "^10.3.5",
         "eslint-plugin-unused-imports": "^4.1.4",
         "happy-dom": "^20.0.1",
         "prettier": "^3.3.3",
@@ -196,11 +196,11 @@
         "rollup-plugin-preserve-directives": "^0.4.0",
         "rollup-plugin-svg": "^2.0.0",
         "rollup-preserve-directives": "^1.1.3",
-        "storybook": "^10.2.8",
-        "tsx": "^4.19.2",
+        "storybook": "^10.3.5",
+        "tsx": "^4.21.0",
         "typescript": "^5.6.3",
-        "vite": "^7.1.10",
-        "vite-plugin-svgr": "^4.5.0"
+        "vite": "^8.0.10",
+        "vite-plugin-svgr": "^5.2.0"
     },
     "eslintConfig": {
         "extends": [