@useloops/design-system 1.4.694 → 1.4.695

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTheme as o,Box as r,Stack as i}from"@mui/material";import"../../../utils/formValidation/misc.js";import"../../BrandCore/Icon/Icon.js";import"../../BrandCore/primitiveVariables.js";import"../../WebCore/utils/typography.util.js";import"../../BrandCore/textures.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/SelectItem/SelectItem.js";import"../../WebCore/Accordion/Accordion.js";import"../../WebCore/Animations/FadeIn.js";import{Text as a}from"../../WebCore/Text/Text.js";import"@mui/icons-material";import"react";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"merge-sx";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"../../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/KbdGroup/Kbd.js";import"../../WebCore/KbdGroup/KbdGroup.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 n from"../../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 s 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"../../WebCore/Skeleton/Skeleton.js";import p from"../../WebCore/Slider/Slider.js";import"../../WebCore/StarRating/StarRating.js";import l from"../../WebCore/Switch/Switch.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{HistogramWrapper as m,HistogramInner as d,ZoneLayer as b,Zone as u,BarsLayer as c,Bar as C,ZoneLine as j}from"./_partials/StyledComponents.js";const h=({label:r,value:n,prefix:s})=>{const p=o();return e(i,{sx:{flex:1,alignItems:"center",gap:p.p.xs},children:[t(a,{size:"sm",secondary:!0,children:r}),t(a,{size:"sm",bold:!0,monospaced:!0,children:s?`${s} ${n}`:n})]})},W=({min:W,max:x,bins:g,binTooltips:B,p25:y,p50:f,p75:S,mean:I,range:A,onRangeChange:L,capped:M,onCapChange:k,capLabel:w="Cap to 60 seconds",step:T=1,marksStep:P=10,unit:v="sec",formatStat:R,disabled:F,slotProps:G})=>{const _=o(),z=x-W||1,D=e=>(e=>Math.max(0,Math.min(100,e)))((e-W)/z*100),O=Math.max(1,...g),N=z/(g.length||1),K=R??(e=>`${e.toFixed(1)} ${v}`),[V,E]=A,$=D(y),U=D(S);return e(r,{...G?.root,children:[t(r,{sx:{display:"flex",justifyContent:"flex-end",mb:_.p.lg},children:t(l,{sizing:"sm",value:M,label:t(a,{size:"xs",secondary:!0,children:w}),disabled:F,onChange:(e,t)=>k(t)})}),e(i,{sx:{gap:_.p.sm},children:[e(i,{direction:"row",children:[t(h,{label:"Fastest 25%",prefix:"≤",value:K(y)}),t(h,{label:"Average",value:K(I)}),t(h,{label:"Slowest 25%",prefix:"≥",value:K(S)})]}),t(m,{children:e(d,{children:[e(b,{children:[t(u,{tone:"green",widthPct:$}),t(u,{tone:"yellow",widthPct:Math.max(0,U-$)}),t(u,{tone:"red",widthPct:Math.max(0,100-U)})]}),t(c,{children:g.map((o,r)=>{const n=W+(r+.5)*N,p=n>=V&&n<=E,l=o/O*100,m=B?.[r];return m?t(s,{placement:"top",enterDelay:200,enterNextDelay:100,message:e(i,{sx:{gap:_.p.xs,p:_.p.xs},children:[t(a,{size:"sm",bold:!0,children:m.headline}),t(a,{size:"xs",secondary:!0,children:m.body})]}),slotProps:{wrapper:{sx:{flex:1,height:"100%",flexDirection:"column",justifyContent:"flex-end",alignItems:"center",pointerEvents:"auto"}}},children:t(C,{heightPct:l,inRange:p})},r):t(C,{heightPct:l,inRange:p},r)})}),t(j,{leftPct:D(y)}),t(j,{leftPct:D(f)}),t(j,{leftPct:D(S)})]})}),t(p,{labelLeft:"",labelRight:"",min:W,max:x,step:T,marksStep:P,value:A,disabled:F,onChange:(e,t)=>{Array.isArray(t)&&L([t[0],t[1]])}}),e(i,{direction:"row",sx:{justifyContent:"space-between",gap:_.p.md},children:[e(i,{sx:{gap:_.p.xs,alignItems:"center"},children:[t(a,{size:"sm",children:"Minimum"}),t(r,{sx:{width:88},children:t(n,{value:V,min:W,max:E,step:T,disabled:F,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:24,flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:t(a,{size:"sm",secondary:!0,children:v}),onChange:e=>{"number"==typeof e&&L([e,E])}})})]}),e(i,{sx:{gap:_.p.xs,alignItems:"center"},children:[t(a,{size:"sm",children:"Maximum"}),t(r,{sx:{width:88},children:t(n,{value:E,min:V,max:x,step:T,disabled:F,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:24,flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:t(a,{size:"sm",secondary:!0,children:v}),onChange:e=>{"number"==typeof e&&L([V,e])}})})]})]})]})]})};export{W as default};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTheme as o,Box as r,Stack as i}from"@mui/material";import"../../../utils/formValidation/misc.js";import"../../BrandCore/Icon/Icon.js";import"../../BrandCore/primitiveVariables.js";import"../../WebCore/utils/typography.util.js";import"../../BrandCore/textures.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/SelectItem/SelectItem.js";import"../../WebCore/Accordion/Accordion.js";import"../../WebCore/Animations/FadeIn.js";import{Text as a}from"../../WebCore/Text/Text.js";import"@mui/icons-material";import"react";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"merge-sx";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"../../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/KbdGroup/Kbd.js";import"../../WebCore/KbdGroup/KbdGroup.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 s from"../../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 n 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"../../WebCore/Skeleton/Skeleton.js";import p from"../../WebCore/Slider/Slider.js";import"../../WebCore/StarRating/StarRating.js";import l from"../../WebCore/Switch/Switch.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{HistogramWrapper as m,HistogramInner as d,ZoneLayer as b,Zone as u,BarsLayer as c,Bar as C,ZoneLine as j}from"./_partials/StyledComponents.js";const h=({label:r,value:s,prefix:n})=>{const p=o();return e(i,{sx:{flex:1,alignItems:"center",gap:p.p.xs},children:[t(a,{size:"sm",secondary:!0,children:r}),t(a,{size:"sm",bold:!0,monospaced:!0,children:n?`${n} ${s}`:s})]})},W=({min:W,max:x,bins:g,binTooltips:f,p25:B,p50:y,p75:S,mean:I,range:A,onRangeChange:L,capped:M,onCapChange:w,capLabel:k="Cap to 60 seconds",step:T=1,marksStep:P=10,unit:v="sec",formatStat:F,disabled:R,slotProps:G})=>{const _=o(),z=x-W||1,D=e=>(e=>Math.max(0,Math.min(100,e)))((e-W)/z*100),O=Math.max(1,...g),N=z/(g.length||1),K=F??(e=>`${e.toFixed(1)} ${v}`),[V,$]=A,E=D(B),U=D(S);return e(r,{...G?.root,children:[t(r,{sx:{display:"flex",justifyContent:"flex-end",mb:_.p.lg},children:t(l,{sizing:"sm",value:M,label:t(a,{size:"xs",secondary:!0,children:k}),disabled:R,onChange:(e,t)=>w(t)})}),e(i,{sx:{gap:_.p.sm},children:[e(i,{direction:"row",children:[t(h,{label:"Fastest 25%",prefix:"≤",value:K(B)}),t(h,{label:"Average",value:K(I)}),t(h,{label:"Slowest 25%",prefix:"≥",value:K(S)})]}),t(m,{children:e(d,{children:[e(b,{children:[t(u,{tone:"green",widthPct:E}),t(u,{tone:"yellow",widthPct:Math.max(0,U-E)}),t(u,{tone:"red",widthPct:Math.max(0,100-U)})]}),t(c,{children:g.map((o,r)=>{const s=W+(r+.5)*N,p=s>=V&&s<=$,l=o/O*100,m=f?.[r];return m?t(n,{followCursor:!0,enterDelay:200,enterNextDelay:100,message:e(i,{sx:{gap:_.p.xs,p:_.p.xs},children:[t(a,{size:"sm",bold:!0,children:m.headline}),t(a,{size:"xs",secondary:!0,children:m.body})]}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,12]}}]},wrapper:{sx:{flex:1,height:"100%",flexDirection:"column",justifyContent:"flex-end",alignItems:"center",pointerEvents:"auto"}}},children:t(C,{heightPct:l,inRange:p})},r):t(C,{heightPct:l,inRange:p},r)})}),t(j,{leftPct:D(B)}),t(j,{leftPct:D(y)}),t(j,{leftPct:D(S)})]})}),t(p,{labelLeft:"",labelRight:"",min:W,max:x,step:T,marksStep:P,value:A,valueLabelFormat:e=>`${Math.round(e)}`,disabled:R,onChange:(e,t)=>{Array.isArray(t)&&L([t[0],t[1]])}}),e(i,{direction:"row",sx:{justifyContent:"space-between",gap:_.p.md},children:[e(i,{sx:{gap:_.p.xs,alignItems:"center"},children:[t(a,{size:"sm",children:"Minimum"}),t(r,{sx:{width:104},children:t(s,{value:V,min:W,max:$,step:T,disabled:R,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:"4ch",flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:t(a,{size:"sm",secondary:!0,children:v}),onChange:e=>{"number"==typeof e&&L([e,$])}})})]}),e(i,{sx:{gap:_.p.xs,alignItems:"center"},children:[t(a,{size:"sm",children:"Maximum"}),t(r,{sx:{width:104},children:t(s,{value:$,min:V,max:x,step:T,disabled:R,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:"4ch",flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:t(a,{size:"sm",secondary:!0,children:v}),onChange:e=>{"number"==typeof e&&L([V,e])}})})]})]})]})]})};export{W as default};
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../BrandCore/textures.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/SelectItem/SelectItem.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Animations/FadeIn.js");var t=require("../../WebCore/Text/Text.js");require("@mui/icons-material"),require("react"),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("merge-sx"),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"),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/KbdGroup/Kbd.js"),require("../../WebCore/KbdGroup/KbdGroup.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");var i=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 o=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"),require("../../WebCore/Skeleton/Skeleton.js");var s=require("../../WebCore/Slider/Slider.js");require("../../WebCore/StarRating/StarRating.js");var a=require("../../WebCore/Switch/Switch.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 n=require("./_partials/StyledComponents.js");const l=({label:i,value:o,prefix:s})=>{const a=r.useTheme();return e.jsxs(r.Stack,{sx:{flex:1,alignItems:"center",gap:a.p.xs},children:[e.jsx(t.Text,{size:"sm",secondary:!0,children:i}),e.jsx(t.Text,{size:"sm",bold:!0,monospaced:!0,children:s?`${s} ${o}`:o})]})};module.exports=({min:u,max:d,bins:p,binTooltips:b,p25:j,p50:c,p75:x,mean:C,range:m,onRangeChange:q,capped:h,onCapChange:W,capLabel:B="Cap to 60 seconds",step:g=1,marksStep:y=10,unit:S="sec",formatStat:f,disabled:I,slotProps:L})=>{const T=r.useTheme(),A=d-u||1,k=e=>(e=>Math.max(0,Math.min(100,e)))((e-u)/A*100),v=Math.max(1,...p),M=A/(p.length||1),w=f??(e=>`${e.toFixed(1)} ${S}`),[P,R]=m,F=k(j),G=k(x);return e.jsxs(r.Box,{...L?.root,children:[e.jsx(r.Box,{sx:{display:"flex",justifyContent:"flex-end",mb:T.p.lg},children:e.jsx(a,{sizing:"sm",value:h,label:e.jsx(t.Text,{size:"xs",secondary:!0,children:B}),disabled:I,onChange:(e,r)=>W(r)})}),e.jsxs(r.Stack,{sx:{gap:T.p.sm},children:[e.jsxs(r.Stack,{direction:"row",children:[e.jsx(l,{label:"Fastest 25%",prefix:"≤",value:w(j)}),e.jsx(l,{label:"Average",value:w(C)}),e.jsx(l,{label:"Slowest 25%",prefix:"≥",value:w(x)})]}),e.jsx(n.HistogramWrapper,{children:e.jsxs(n.HistogramInner,{children:[e.jsxs(n.ZoneLayer,{children:[e.jsx(n.Zone,{tone:"green",widthPct:F}),e.jsx(n.Zone,{tone:"yellow",widthPct:Math.max(0,G-F)}),e.jsx(n.Zone,{tone:"red",widthPct:Math.max(0,100-G)})]}),e.jsx(n.BarsLayer,{children:p.map((i,s)=>{const a=u+(s+.5)*M,l=a>=P&&a<=R,d=i/v*100,p=b?.[s];return p?e.jsx(o,{placement:"top",enterDelay:200,enterNextDelay:100,message:e.jsxs(r.Stack,{sx:{gap:T.p.xs,p:T.p.xs},children:[e.jsx(t.Text,{size:"sm",bold:!0,children:p.headline}),e.jsx(t.Text,{size:"xs",secondary:!0,children:p.body})]}),slotProps:{wrapper:{sx:{flex:1,height:"100%",flexDirection:"column",justifyContent:"flex-end",alignItems:"center",pointerEvents:"auto"}}},children:e.jsx(n.Bar,{heightPct:d,inRange:l})},s):e.jsx(n.Bar,{heightPct:d,inRange:l},s)})}),e.jsx(n.ZoneLine,{leftPct:k(j)}),e.jsx(n.ZoneLine,{leftPct:k(c)}),e.jsx(n.ZoneLine,{leftPct:k(x)})]})}),e.jsx(s,{labelLeft:"",labelRight:"",min:u,max:d,step:g,marksStep:y,value:m,disabled:I,onChange:(e,r)=>{Array.isArray(r)&&q([r[0],r[1]])}}),e.jsxs(r.Stack,{direction:"row",sx:{justifyContent:"space-between",gap:T.p.md},children:[e.jsxs(r.Stack,{sx:{gap:T.p.xs,alignItems:"center"},children:[e.jsx(t.Text,{size:"sm",children:"Minimum"}),e.jsx(r.Box,{sx:{width:88},children:e.jsx(i.default,{value:P,min:u,max:R,step:g,disabled:I,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:24,flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:e.jsx(t.Text,{size:"sm",secondary:!0,children:S}),onChange:e=>{"number"==typeof e&&q([e,R])}})})]}),e.jsxs(r.Stack,{sx:{gap:T.p.xs,alignItems:"center"},children:[e.jsx(t.Text,{size:"sm",children:"Maximum"}),e.jsx(r.Box,{sx:{width:88},children:e.jsx(i.default,{value:R,min:P,max:d,step:g,disabled:I,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:24,flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:e.jsx(t.Text,{size:"sm",secondary:!0,children:S}),onChange:e=>{"number"==typeof e&&q([P,e])}})})]})]})]})]})};
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../BrandCore/textures.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/SelectItem/SelectItem.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Animations/FadeIn.js");var t=require("../../WebCore/Text/Text.js");require("@mui/icons-material"),require("react"),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("merge-sx"),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"),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/KbdGroup/Kbd.js"),require("../../WebCore/KbdGroup/KbdGroup.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");var i=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 o=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"),require("../../WebCore/Skeleton/Skeleton.js");var s=require("../../WebCore/Slider/Slider.js");require("../../WebCore/StarRating/StarRating.js");var a=require("../../WebCore/Switch/Switch.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 n=require("./_partials/StyledComponents.js");const l=({label:i,value:o,prefix:s})=>{const a=r.useTheme();return e.jsxs(r.Stack,{sx:{flex:1,alignItems:"center",gap:a.p.xs},children:[e.jsx(t.Text,{size:"sm",secondary:!0,children:i}),e.jsx(t.Text,{size:"sm",bold:!0,monospaced:!0,children:s?`${s} ${o}`:o})]})};module.exports=({min:u,max:d,bins:p,binTooltips:b,p25:j,p50:c,p75:x,mean:C,range:m,onRangeChange:q,capped:h,onCapChange:W,capLabel:B="Cap to 60 seconds",step:g=1,marksStep:y=10,unit:S="sec",formatStat:f,disabled:I,slotProps:L})=>{const T=r.useTheme(),A=d-u||1,k=e=>(e=>Math.max(0,Math.min(100,e)))((e-u)/A*100),v=Math.max(1,...p),M=A/(p.length||1),w=f??(e=>`${e.toFixed(1)} ${S}`),[P,F]=m,R=k(j),G=k(x);return e.jsxs(r.Box,{...L?.root,children:[e.jsx(r.Box,{sx:{display:"flex",justifyContent:"flex-end",mb:T.p.lg},children:e.jsx(a,{sizing:"sm",value:h,label:e.jsx(t.Text,{size:"xs",secondary:!0,children:B}),disabled:I,onChange:(e,r)=>W(r)})}),e.jsxs(r.Stack,{sx:{gap:T.p.sm},children:[e.jsxs(r.Stack,{direction:"row",children:[e.jsx(l,{label:"Fastest 25%",prefix:"≤",value:w(j)}),e.jsx(l,{label:"Average",value:w(C)}),e.jsx(l,{label:"Slowest 25%",prefix:"≥",value:w(x)})]}),e.jsx(n.HistogramWrapper,{children:e.jsxs(n.HistogramInner,{children:[e.jsxs(n.ZoneLayer,{children:[e.jsx(n.Zone,{tone:"green",widthPct:R}),e.jsx(n.Zone,{tone:"yellow",widthPct:Math.max(0,G-R)}),e.jsx(n.Zone,{tone:"red",widthPct:Math.max(0,100-G)})]}),e.jsx(n.BarsLayer,{children:p.map((i,s)=>{const a=u+(s+.5)*M,l=a>=P&&a<=F,d=i/v*100,p=b?.[s];return p?e.jsx(o,{followCursor:!0,enterDelay:200,enterNextDelay:100,message:e.jsxs(r.Stack,{sx:{gap:T.p.xs,p:T.p.xs},children:[e.jsx(t.Text,{size:"sm",bold:!0,children:p.headline}),e.jsx(t.Text,{size:"xs",secondary:!0,children:p.body})]}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,12]}}]},wrapper:{sx:{flex:1,height:"100%",flexDirection:"column",justifyContent:"flex-end",alignItems:"center",pointerEvents:"auto"}}},children:e.jsx(n.Bar,{heightPct:d,inRange:l})},s):e.jsx(n.Bar,{heightPct:d,inRange:l},s)})}),e.jsx(n.ZoneLine,{leftPct:k(j)}),e.jsx(n.ZoneLine,{leftPct:k(c)}),e.jsx(n.ZoneLine,{leftPct:k(x)})]})}),e.jsx(s,{labelLeft:"",labelRight:"",min:u,max:d,step:g,marksStep:y,value:m,valueLabelFormat:e=>`${Math.round(e)}`,disabled:I,onChange:(e,r)=>{Array.isArray(r)&&q([r[0],r[1]])}}),e.jsxs(r.Stack,{direction:"row",sx:{justifyContent:"space-between",gap:T.p.md},children:[e.jsxs(r.Stack,{sx:{gap:T.p.xs,alignItems:"center"},children:[e.jsx(t.Text,{size:"sm",children:"Minimum"}),e.jsx(r.Box,{sx:{width:104},children:e.jsx(i.default,{value:P,min:u,max:F,step:g,disabled:I,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:"4ch",flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:e.jsx(t.Text,{size:"sm",secondary:!0,children:S}),onChange:e=>{"number"==typeof e&&q([e,F])}})})]}),e.jsxs(r.Stack,{sx:{gap:T.p.xs,alignItems:"center"},children:[e.jsx(t.Text,{size:"sm",children:"Maximum"}),e.jsx(r.Box,{sx:{width:104},children:e.jsx(i.default,{value:F,min:P,max:d,step:g,disabled:I,hideActionButtons:!0,slotProps:{input:{sx:{width:"100%",height:40,"& .MuiOutlinedInput-root":{justifyContent:"center"},"& .MuiOutlinedInput-input":{width:"4ch",flexGrow:0,px:0,textAlign:"center"}}}},endAdornment:e.jsx(t.Text,{size:"sm",secondary:!0,children:S}),onChange:e=>{"number"==typeof e&&q([P,e])}})})]})]})]})]})};
@@ -21,6 +21,7 @@ interface SliderProps {
21
21
  onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
22
22
  step?: number;
23
23
  value?: number | number[];
24
+ valueLabelFormat?: (value: number, index: number) => ReactNode;
24
25
  slotProps?: {
25
26
  root?: BoxProps;
26
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useloops/design-system",
3
- "version": "1.4.694",
3
+ "version": "1.4.695",
4
4
  "description": "The official React based Loops design system",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",