@useloops/design-system 1.4.579 → 1.4.581

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{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useTheme as o,ListItem as i,ListItemIcon as a,Stack as n,Box as l,ListItemText as s,formControlLabelClasses as c}from"@mui/material";import p from"@number-flow/react";import{mergeSx as m}from"merge-sx";import{useState as d,useRef as h,useEffect as x,useCallback as g}from"react";import y from"../../WebCore/Checkbox/Checkbox.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import u from"../../WebCore/Tooltip/Tooltip.js";import b from"../../WebCore/Typography/Typography.js";import f from"./_partials/StyledLinearProgress/StyledLinearProgress.js";import C from"./_partials/StyledListItemButton/StyledLisItemButton.js";import k from"./_partials/UnitText/UnitText.js";const T=({id:T,label:v,value:j=0,relativePercentage:w,respondentCount:B,tooltipContent:I,icon:P,hideIcon:S=!1,hideCheckbox:W=!1,hideUnitColumn1:L=!1,hideUnitColumn2:U=!1,animated:A=!0,checked:F=!1,disabled:_=!1,onChange:q,percentageSymbol:R=!1,compact:$,slotProps:M={}})=>{const z=o(),[D,E]=d(0),G=h(null),H=M.icon;x(()=>{const e=D,t=w||j,r=performance.now(),o=i=>{const a=i-r,n=Math.min(a/250,1);E(e+(t-e)*(n*(2-n))),n<1&&requestAnimationFrame(o)},i=requestAnimationFrame(o);return()=>cancelAnimationFrame(i)},[w,j]);const J=g(()=>{!_&&q&&q(!F)},[_,q,F]),K=L&&U,N=null!=j,O=null!=B;return e(i,{disablePadding:!0,sx:{mb:z.spacing(z.custom.margin.xs)},...M?.listItem,children:e(u,{message:I||v,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...M.tooltip,children:t(C,{id:T,role:void 0,onClick:J,dense:!0,disabled:_,sx:{display:"flex"},children:[!S&&P&&e(a,{...H,sx:m({minWidth:0,mr:z.custom.margin.xs,color:z.custom.palette.text.primary},H?.sx),children:P}),t(n,{direction:"row",width:1,gap:$?z.custom.margin.sm:z.custom.margin.md,alignItems:"center",children:[t(l,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!_&&e(f,{variant:"determinate",value:D,checked:F,...M.graphBar}),e(s,{disableTypography:!0,primary:e(b,{...M.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:m(M.graphBarTypography?.sx,{color:(()=>{if(!F||_)return z.custom.palette.text.disabled;return("object"==typeof M.graphBarTypography?.sx&&null!==M.graphBarTypography?.sx&&"color"in M.graphBarTypography.sx?M.graphBarTypography.sx.color:void 0)||z.palette.text.primary})()}),children:v}),sx:{my:0,position:"absolute",display:"flex",alignItems:"center",inset:0,ml:1}})]}),!K&&t(l,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:z.custom.margin.xs,children:[!L&&e(k,{weight:"bold",color:z.palette.text.primary,disabled:_,checked:F,...M?.unitText1,children:N?t(r,{children:[e(p,{value:j,animated:A}),""+(R?"%":"")]}):"-"}),!U&&e(k,{color:z.palette.text.secondary,disabled:_,checked:F,...M?.unitText2,children:O?e(p,{value:B,animated:A}):"-"})]}),!W&&e(l,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e(y,{id:`${T}-checkbox`,variant:"secondary",checked:!_&&F,disabled:_,...M.checkbox,checkboxLabel:void 0,inputRef:G,sx:m(M.checkbox?.sx,{[`&.${c.root}`]:{marginRight:0}})})})]})]})})})};export{T as default};
1
+ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useTheme as o,ListItem as i,ListItemIcon as a,Stack as n,Box as l,ListItemText as s,formControlLabelClasses as m}from"@mui/material";import c from"@number-flow/react";import{mergeSx as p}from"merge-sx";import{useState as d,useRef as h,useEffect as x,useCallback as g}from"react";import u from"../../WebCore/Checkbox/Checkbox.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import y from"../../WebCore/Tooltip/Tooltip.js";import b from"../../WebCore/Typography/Typography.js";import f from"./_partials/StyledLinearProgress/StyledLinearProgress.js";import C from"./_partials/StyledListItemButton/StyledLisItemButton.js";import k from"./_partials/UnitText/UnitText.js";const T=({id:T,label:v,value:j=0,relativePercentage:w,respondentCount:B,tooltipContent:I,icon:P,hideIcon:S=!1,hideCheckbox:W=!1,hideUnitColumn1:F=!1,hideUnitColumn2:L=!1,animated:U=!0,checked:A=!1,disabled:_=!1,onChange:q,percentageSymbol:D=!1,compact:R,slotProps:$={}})=>{const M=o(),[z,E]=d(0),G=h(null),H=$.icon;x(()=>{const e=z,t=w||j,r=performance.now(),o=i=>{const a=i-r,n=Math.min(a/250,1);E(e+(t-e)*(n*(2-n))),n<1&&requestAnimationFrame(o)},i=requestAnimationFrame(o);return()=>cancelAnimationFrame(i)},[w,j]);const J=g(()=>{!_&&q&&q(!A)},[_,q,A]),K=F&&L,N=null!=j,O=null!=B;return e(i,{disablePadding:!0,sx:{mb:M.spacing(M.custom.margin.xs)},...$?.listItem,children:e(y,{message:I||v,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...$.tooltip,children:t(C,{id:T,role:void 0,onClick:J,dense:!0,disabled:_,sx:{display:"flex"},children:[!S&&P&&e(a,{...H,sx:p({minWidth:0,mr:M.custom.margin.xs,color:M.custom.palette.text.primary},H?.sx),children:P}),t(n,{direction:"row",width:1,gap:R?M.custom.margin.sm:M.custom.margin.md,alignItems:"center",children:[t(l,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!_&&e(f,{variant:"determinate",value:z,checked:A,...$.graphBar}),e(s,{disableTypography:!0,primary:e(b,{...$.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:p($.graphBarTypography?.sx,{color:(()=>{if(!A||_)return M.custom.palette.text.disabled;return("object"==typeof $.graphBarTypography?.sx&&null!==$.graphBarTypography?.sx&&"color"in $.graphBarTypography.sx?$.graphBarTypography.sx.color:void 0)||M.palette.text.primary})()}),children:v}),sx:{my:0,position:"absolute",display:"flex",alignItems:"center",inset:0,ml:1}})]}),!K&&t(l,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:M.custom.margin.xs,children:[!F&&e(k,{weight:"bold",color:M.palette.text.primary,disabled:_,checked:A,...$?.unitText1,children:N?t(r,{children:[e(c,{value:j,animated:U,...D&&{format:{minimumFractionDigits:1,maximumFractionDigits:1}}}),""+(D?"%":"")]}):"-"}),!L&&e(k,{color:M.palette.text.secondary,disabled:_,checked:A,...$?.unitText2,children:O?e(c,{value:B,animated:U}):"-"})]}),!W&&e(l,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e(u,{id:`${T}-checkbox`,variant:"secondary",checked:!_&&A,disabled:_,...$.checkbox,checkboxLabel:void 0,inputRef:G,sx:p($.checkbox?.sx,{[`&.${m.root}`]:{marginRight:0}})})})]})]})})})};export{T as default};
@@ -1 +1 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import{styled as t,Box as r,useTheme as i,Stack as a,boxClasses as s}from"@mui/material";import m from"@number-flow/react";import"../../BrandCore/colorRamps.js";import{base as n}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import p from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../WebCore/utils/typography.util.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/Accordion/Accordion.js";import l from"../../WebCore/Typography/Typography.js";import"merge-sx";import"../../WebCore/Badge/Badge.js";import"../../WebCore/Breadcrumb/Breadcrumb.js";import d from"../../WebCore/Button/Button.js";import"../../WebCore/ButtonBase/ButtonBase.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"@mui/icons-material";import"../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../WebCore/Differential/DifferentialContainer.js";import"../../WebCore/Differential/DifferentialRadio.js";import"../../WebCore/DropdownMenu/StyledMenu.js";import"react";import"../../WebCore/FormGenerator/FormGenerator.js";import"../../WebCore/GridOverlay/GridOverlay.js";import c from"../../WebCore/HtmlParser/HtmlParser.js";import"../../WebCore/IconButton/IconButton.js";import"../../WebCore/IconButtonBase/IconButtonBase.js";import"../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../WebCore/Image/Image.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"../../WebCore/Pill/StyledPill.js";import"../../WebCore/Progress/Progress.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/utils/autocomplete.styles.js";import"../../WebCore/Select/AutocompleteListbox.js";import"../../WebCore/Select/StyledAutocomplete.js";import"../../WebCore/Select/SelectItem.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"../../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 u from"../AssetItem/AssetItem.js";import b from"../QuestionLabel/QuestionLabel.js";const C=t(r)(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,borderRadius:e.spacing(e.custom.radius.lg),boxShadow:e.custom.elevation.raised,minWidth:32*n+"px",maxWidth:64*n+"px",paddingBottom:e.spacing(e.custom.padding.md),display:"grid",gridTemplateRows:"auto 1fr 118px auto",gap:e.spacing(e.custom.margin.md)})),j=({question:t,questionType:n,subCopy:j,assetThumbnail:g,assetType:W,statTitle:h,statValue:x,onClickAsset:y,resultGraph:S,onClickShowMore:f})=>{const B=i();return e(C,{children:[o(b,{type:n,slotProps:{container:{sx:{borderRadius:`${B.spacing(B.custom.radius.lg)} ${B.spacing(B.custom.radius.lg)} 0 0`}}}}),e(a,{sx:{gap:B.spacing(B.custom.margin.sm),flexDirection:"row",justifyContent:"space-between",paddingX:B.spacing(B.custom.padding.md)},children:[e(a,{sx:{gap:B.spacing(B.custom.margin.sm)},children:[o(l,{component:"p",variation:"lg",weight:"bold",clamp:4,children:t}),j&&o(c,{typographyProps:{secondary:!0,variation:"sm",component:"p",clamp:3},children:j})]}),o(r,{sx:{minWidth:"92px",width:"92px",height:"92px",overflow:"hidden",borderRadius:B.spacing(B.custom.radius.xs),border:`1px solid ${B.custom.palette.stroke.light}`,boxShadow:B.custom.elevation.raised,[`> .${s.root}`]:{display:"flex",height:"100%"}},children:o(u,{mediaType:W,thumbnail:g,onClick:y})})]}),e(a,{sx:{gap:B.spacing(B.custom.margin.xs)},children:[e(a,{sx:{placeSelf:"center",alignItems:"center",flexDirection:"row",gap:B.spacing(B.custom.margin.sm),height:"18px"},children:[o(l,{component:"p",variation:"xs",children:h}),x&&e(l,{component:"p",variation:"xs",weight:"bold",monospaced:!0,children:[o(m,{value:x,animated:!0,format:{minimumFractionDigits:2,maximumFractionDigits:2}}),"likert"===n&&"%"]})]}),o(r,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",height:"96px",paddingX:B.spacing(B.custom.padding.md)},children:S})]}),f&&o(d,{sizing:"sm",sx:{placeSelf:"center"},variation:"outlined",endIcon:o(p,{name:"open-in-new"}),onClick:f,children:"View full result"})]})};export{j as default};
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import{styled as t,Box as r,useTheme as i,Stack as a,boxClasses as s}from"@mui/material";import m from"@number-flow/react";import"../../BrandCore/colorRamps.js";import{base as p}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import n from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../WebCore/utils/typography.util.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/Accordion/Accordion.js";import l from"../../WebCore/Typography/Typography.js";import"merge-sx";import"../../WebCore/Badge/Badge.js";import"../../WebCore/Breadcrumb/Breadcrumb.js";import d from"../../WebCore/Button/Button.js";import"../../WebCore/ButtonBase/ButtonBase.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"@mui/icons-material";import"../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../WebCore/Differential/DifferentialContainer.js";import"../../WebCore/Differential/DifferentialRadio.js";import"../../WebCore/DropdownMenu/StyledMenu.js";import"react";import"../../WebCore/FormGenerator/FormGenerator.js";import"../../WebCore/GridOverlay/GridOverlay.js";import c from"../../WebCore/HtmlParser/HtmlParser.js";import"../../WebCore/IconButton/IconButton.js";import"../../WebCore/IconButtonBase/IconButtonBase.js";import"../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../WebCore/Image/Image.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"../../WebCore/Pill/StyledPill.js";import"../../WebCore/Progress/Progress.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/utils/autocomplete.styles.js";import"../../WebCore/Select/AutocompleteListbox.js";import"../../WebCore/Select/StyledAutocomplete.js";import"../../WebCore/Select/SelectItem.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"../../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 b from"../AssetItem/AssetItem.js";import{mapQuestionTypeToLabel as u}from"../utils/mapQuestionTypeToLabel.js";const C=({cardNumber:t,testTitle:p,question:C,questionType:h,subCopy:g,assetThumbnail:x,assetType:f,statTitle:y,statValue:S,onClickAsset:B,resultGraph:k,onClickShowMore:I})=>{const L=i(),{icon:v,label:w}=u(h);return e(j,{children:[e(W,{children:[o(a,{sx:{height:"22px",borderRadius:L.r.md,backgroundColor:L.custom.palette.icon.primary,paddingX:L.p.sm,justifyContent:"center"},children:o(l,{component:"p",variation:"sm",monospaced:!0,textColor:L.custom.palette.text.primaryInverted,children:t})}),o(l,{component:"p",variation:"md",children:p})]}),e(a,{sx:{flexDirection:"row",gap:L.m.xs,borderRadius:L.r.round,border:`1px solid ${L.custom.palette.stroke.light}`,placeSelf:"center",padding:`2px ${L.p.sm}`,alignItems:"center"},children:[o(n,{name:v,size:16}),o(l,{variation:"sm",component:"p",sx:{px:L.p.xs},children:w})]}),e(a,{sx:{gap:L.m.sm,flexDirection:"row",justifyContent:"space-between",paddingX:L.p.md},children:[e(a,{sx:{gap:L.m.sm},children:[o(l,{component:"p",variation:"lg",weight:"bold",clamp:4,children:C}),g&&o(c,{typographyProps:{secondary:!0,variation:"sm",component:"p",clamp:3},children:g})]}),o(r,{sx:{minWidth:"92px",width:"92px",height:"92px",overflow:"hidden",borderRadius:L.r.xs,border:`1px solid ${L.custom.palette.stroke.light}`,boxShadow:L.custom.elevation.raised,[`> .${s.root}`]:{display:"flex",height:"100%"}},children:o(b,{mediaType:f,thumbnail:x,onClick:B})})]}),e(a,{sx:{gap:L.m.xs},children:[e(a,{sx:{placeSelf:"center",alignItems:"center",flexDirection:"row",gap:L.m.sm,height:"18px"},children:[o(l,{component:"p",variation:"xs",children:y}),S&&e(l,{component:"p",variation:"xs",weight:"bold",monospaced:!0,children:[o(m,{value:S,animated:!0,format:{minimumFractionDigits:2,maximumFractionDigits:2}}),"likert"===h&&"%"]})]}),o(r,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",height:"96px",paddingX:L.p.md},children:k})]}),I&&o(d,{sizing:"sm",sx:{placeSelf:"center"},variation:"outlined",endIcon:o(n,{name:"open-in-new"}),onClick:I,children:"View full result"})]})},j=t(r)(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,borderRadius:e.r.lg,boxShadow:e.custom.elevation.raised,minWidth:32*p+"px",maxWidth:64*p+"px",paddingBottom:e.p.md,display:"grid",gridTemplateRows:"auto auto 1fr 118px auto",gap:e.m.md})),W=t(r)(({theme:e})=>({backgroundColor:e.custom.palette.surface.sunken,display:"flex",alignItems:"start",gap:e.m.sm,padding:e.p.md,borderRadius:`${e.r.lg} ${e.r.lg} 0 0`}));export{C as default};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as o}from"react/jsx-runtime";import{styled as r,Box as t,useTheme as i}from"@mui/material";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import a from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../WebCore/utils/typography.util.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/Accordion/Accordion.js";import s from"../../WebCore/Typography/Typography.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/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"@mui/icons-material";import"../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../WebCore/Differential/DifferentialContainer.js";import"../../WebCore/Differential/DifferentialRadio.js";import"../../WebCore/DropdownMenu/StyledMenu.js";import"react";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/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"../../WebCore/Pill/StyledPill.js";import"../../WebCore/Progress/Progress.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/utils/autocomplete.styles.js";import"../../WebCore/Select/AutocompleteListbox.js";import"../../WebCore/Select/StyledAutocomplete.js";import"../../WebCore/Select/SelectItem.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 n 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";const p=r(t)(({theme:e,type:o})=>({backgroundColor:"focus"===o?e.custom.palette.peach[300]:e.custom.palette.surface.sunken,display:"flex",alignItems:"center",gap:e.spacing(e.custom.margin.xs),padding:`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`})),m=({type:r,loading:t,slotProps:m})=>{const l=i(),c=(e=>{switch(e){case"single-punch":return{icon:"check",label:"Single punch question"};case"multi-punch":return{icon:"check-double",label:"Multi punch question"};case"slider":return{icon:"linear-scale",label:"Slider question"};case"likert":return{icon:"thumbs-up-down",label:"Likert question"};case"rank":return{icon:"rank",label:"Rank question"};case"open-question":return{icon:"comment",label:"Open question"};case"emoji":return{icon:"emoticon",label:"Emoji question"};case"focus":return{icon:"image-search",label:"Focus step"};default:return{icon:"help",label:"Unknown type"}}})(r);return t?e(n,{width:"100%",height:36,sx:{borderRadius:`${l.spacing(l.custom.radius.lg)} ${l.spacing(l.custom.radius.lg)} 0 0`}}):o(p,{...m?.container,type:r,children:[e(a,{name:c.icon,size:16}),e(s,{variation:"sm",component:"p",sx:{px:l.spacing(l.custom.padding.xs)},children:c.label})]})};export{m as default};
1
+ import{jsx as e,jsxs as o}from"react/jsx-runtime";import{styled as r,Box as t,useTheme as i}from"@mui/material";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import a from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../WebCore/utils/typography.util.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/Accordion/Accordion.js";import s from"../../WebCore/Typography/Typography.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/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"@mui/icons-material";import"../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../WebCore/Differential/DifferentialContainer.js";import"../../WebCore/Differential/DifferentialRadio.js";import"../../WebCore/DropdownMenu/StyledMenu.js";import"react";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/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"../../WebCore/Pill/StyledPill.js";import"../../WebCore/Progress/Progress.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/utils/autocomplete.styles.js";import"../../WebCore/Select/AutocompleteListbox.js";import"../../WebCore/Select/StyledAutocomplete.js";import"../../WebCore/Select/SelectItem.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 p 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{mapQuestionTypeToLabel as m}from"../utils/mapQuestionTypeToLabel.js";const n=r(t)(({theme:e,type:o})=>({backgroundColor:"focus"===o?e.custom.palette.peach[300]:e.custom.palette.surface.sunken,display:"flex",alignItems:"center",gap:e.spacing(e.custom.margin.xs),padding:`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`})),l=({type:r,loading:t,slotProps:l})=>{const b=i(),C=m(r);return t?e(p,{width:"100%",height:36,sx:{borderRadius:`${b.spacing(b.custom.radius.lg)} ${b.spacing(b.custom.radius.lg)} 0 0`}}):o(n,{...l?.container,type:r,children:[e(a,{name:C.icon,size:16}),e(s,{variation:"sm",component:"p",sx:{px:b.spacing(b.custom.padding.xs)},children:C.label})]})};export{l as default};
@@ -0,0 +1 @@
1
+ const e=e=>{switch(e){case"single-punch":return{icon:"check",label:"Single punch question"};case"multi-punch":return{icon:"check-double",label:"Multi punch question"};case"slider":return{icon:"linear-scale",label:"Slider question"};case"likert":return{icon:"thumbs-up-down",label:"Likert question"};case"rank":return{icon:"rank",label:"Rank question"};case"open-question":return{icon:"comment",label:"Open question"};case"emoji":return{icon:"emoticon",label:"Emoji question"};case"focus":return{icon:"image-search",label:"Focus step"};default:return{icon:"help",label:"Unknown type"}}};export{e as mapQuestionTypeToLabel};
@@ -1 +1 @@
1
- import{createTheme as t}from"@mui/material";import{greenRamp as e,blueRamp as o,yellowRamp as a,peachRamp as r,redRamp as n,purpleRamp as i,neutralRamp as s}from"../systems/BrandCore/colorRamps.js";import{purple as l,neutralAlpha as d,darkNeutralAlpha as p}from"../systems/BrandCore/primitiveColor.js";import{breakpoints as f,base as m,easing as u,boxShadow as c,elevationFilter as y,elevation as g,radius as h,padding as b,margin as w}from"../systems/BrandCore/primitiveVariables.js";import{semantic as $}from"../systems/BrandCore/semanticColor.js";import{fonts as v}from"../systems/BrandCore/typography.js";import{typographyVariants as k,typographyVariantMap as x}from"../systems/WebCore/utils/typography.util.js";const F="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/",C=(C,R,G)=>t({direction:G,custom:{palette:{black:"#000000",white:"#ffffff",neutral:s[C],neutralAlpha:"light"===C?d:p,purple:i[C],red:n[C],peach:r[C],yellow:a[C],blue:o[C],green:e[C],icon:$[C].icon,interaction:$[C].interaction,stroke:$[C].stroke,surface:$[C].surface,text:$[C].text,input:$[C].input,skeleton:$[C].skeleton,data:$[C].data,body:$[C].surface.default},margin:w,padding:b,radius:h,elevation:g,elevationFilter:y,boxShadow:c,easing:u,typography:x[R]},palette:{mode:C,primary:{main:l[500]}},spacing:m,shape:{borderRadius:m,hotspot:{default:12,active:24}},breakpoints:{values:f},typography:{fontFamily:`"${v.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:k(R),styleOverrides:{root:{color:$[C].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n @font-face {\n font-family: '${v.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.Domaine.default.weight};\n src: url(${F}${v.Domaine.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.Domaine.bold.weight};\n src: url(${F}${v.Domaine.bold.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.FoundersGrotesk.default.weight};\n src: url(${F}${v.FoundersGrotesk.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.FoundersGrotesk.bold.weight};\n src: url(${F}${v.FoundersGrotesk.bold.fileName}) format('woff2');\n }\n `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${f.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${f.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:v.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*m}px ${t.padding.md*m}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});export{C as customTheme};
1
+ import{createTheme as t}from"@mui/material";import{greenRamp as e,blueRamp as o,yellowRamp as a,peachRamp as r,redRamp as n,purpleRamp as i,neutralRamp as s}from"../systems/BrandCore/colorRamps.js";import{purple as l,neutralAlpha as d,darkNeutralAlpha as p}from"../systems/BrandCore/primitiveColor.js";import{breakpoints as m,base as f,easing as u,boxShadow as c,elevationFilter as y,elevation as g,radius as h,padding as b,margin as w}from"../systems/BrandCore/primitiveVariables.js";import{semantic as $}from"../systems/BrandCore/semanticColor.js";import{fonts as v}from"../systems/BrandCore/typography.js";import{typographyVariants as k,typographyVariantMap as x}from"../systems/WebCore/utils/typography.util.js";const F="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/",C=(t,e)=>Object.fromEntries(Object.entries(t).map(([t,o])=>[t,o*e+"px"])),R=(R,G,B)=>t({direction:B,p:C(b,f),m:C(w,f),r:C(h,f),custom:{palette:{black:"#000000",white:"#ffffff",neutral:s[R],neutralAlpha:"light"===R?d:p,purple:i[R],red:n[R],peach:r[R],yellow:a[R],blue:o[R],green:e[R],icon:$[R].icon,interaction:$[R].interaction,stroke:$[R].stroke,surface:$[R].surface,text:$[R].text,input:$[R].input,skeleton:$[R].skeleton,data:$[R].data,body:$[R].surface.default},margin:w,padding:b,radius:h,elevation:g,elevationFilter:y,boxShadow:c,easing:u,typography:x[G]},palette:{mode:R,primary:{main:l[500]}},spacing:f,shape:{borderRadius:f,hotspot:{default:12,active:24}},breakpoints:{values:m},typography:{fontFamily:`"${v.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:k(G),styleOverrides:{root:{color:$[R].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n @font-face {\n font-family: '${v.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.Domaine.default.weight};\n src: url(${F}${v.Domaine.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.Domaine.bold.weight};\n src: url(${F}${v.Domaine.bold.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.FoundersGrotesk.default.weight};\n src: url(${F}${v.FoundersGrotesk.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.FoundersGrotesk.bold.weight};\n src: url(${F}${v.FoundersGrotesk.bold.fileName}) format('woff2');\n }\n `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${m.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${m.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:v.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*f}px ${t.padding.md*f}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});export{R as customTheme};
package/dist/index.d.ts CHANGED
@@ -329,9 +329,63 @@ declare module '@mui/material/styles' {
329
329
  };
330
330
  };
331
331
  };
332
+ p?: {
333
+ none?: string;
334
+ xs?: string;
335
+ sm?: string;
336
+ md?: string;
337
+ lg?: string;
338
+ xl?: string;
339
+ };
340
+ m?: {
341
+ none?: string;
342
+ xs?: string;
343
+ sm?: string;
344
+ md?: string;
345
+ lg?: string;
346
+ xl?: string;
347
+ xxl?: string;
348
+ xxxl?: string;
349
+ };
350
+ r?: {
351
+ none?: string;
352
+ xs?: string;
353
+ sm?: string;
354
+ md?: string;
355
+ lg?: string;
356
+ xl?: string;
357
+ round?: string;
358
+ };
332
359
  }
333
360
  interface Theme {
334
361
  custom: CustomTheme;
362
+ p: {
363
+ none: string;
364
+ xs: string;
365
+ sm: string;
366
+ md: string;
367
+ lg: string;
368
+ xl: string;
369
+ };
370
+ m: {
371
+ none: string;
372
+ xs: string;
373
+ sm: string;
374
+ md: string;
375
+ lg: string;
376
+ xl: string;
377
+ xxl: string;
378
+ xxxl: string;
379
+ };
380
+ r: {
381
+ none: string;
382
+ xs: string;
383
+ sm: string;
384
+ md: string;
385
+ lg: string;
386
+ xl: string;
387
+ round: string;
388
+ };
335
389
  margin: {
336
390
  0: number;
337
391
  xs: number;
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@number-flow/react"),a=require("merge-sx"),i=require("react"),s=require("../../WebCore/Checkbox/Checkbox.js");require("../../WebCore/Checkbox/StyledCheckbox.js");var o=require("../../WebCore/Tooltip/Tooltip.js"),n=require("../../WebCore/Typography/Typography.js"),l=require("./_partials/StyledLinearProgress/StyledLinearProgress.js"),c=require("./_partials/StyledListItemButton/StyledLisItemButton.js"),d=require("./_partials/UnitText/UnitText.js");function x(e){return e&&e.__esModule?e:{default:e}}var p=x(r);module.exports=({id:r,label:x,value:m=0,relativePercentage:u,respondentCount:h,tooltipContent:g,icon:y,hideIcon:b=!1,hideCheckbox:j=!1,hideUnitColumn1:f=!1,hideUnitColumn2:C=!1,animated:k=!0,checked:T=!1,disabled:v=!1,onChange:q,percentageSymbol:B=!1,compact:I,slotProps:w={}})=>{const S=t.useTheme(),[L,P]=i.useState(0),W=i.useRef(null),_=w.icon;i.useEffect(()=>{const e=L,t=u||m,r=performance.now(),a=i=>{const s=i-r,o=Math.min(s/250,1);P(e+(t-e)*(o*(2-o))),o<1&&requestAnimationFrame(a)},i=requestAnimationFrame(a);return()=>cancelAnimationFrame(i)},[u,m]);const F=i.useCallback(()=>{!v&&q&&q(!T)},[v,q,T]),U=f&&C,A=null!=m,R=null!=h;return e.jsx(t.ListItem,{disablePadding:!0,sx:{mb:S.spacing(S.custom.margin.xs)},...w?.listItem,children:e.jsx(o,{message:g||x,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...w.tooltip,children:e.jsxs(c,{id:r,role:void 0,onClick:F,dense:!0,disabled:v,sx:{display:"flex"},children:[!b&&y&&e.jsx(t.ListItemIcon,{..._,sx:a.mergeSx({minWidth:0,mr:S.custom.margin.xs,color:S.custom.palette.text.primary},_?.sx),children:y}),e.jsxs(t.Stack,{direction:"row",width:1,gap:I?S.custom.margin.sm:S.custom.margin.md,alignItems:"center",children:[e.jsxs(t.Box,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!v&&e.jsx(l,{variant:"determinate",value:L,checked:T,...w.graphBar}),e.jsx(t.ListItemText,{disableTypography:!0,primary:e.jsx(n,{...w.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:a.mergeSx(w.graphBarTypography?.sx,{color:(()=>{if(!T||v)return S.custom.palette.text.disabled;return("object"==typeof w.graphBarTypography?.sx&&null!==w.graphBarTypography?.sx&&"color"in w.graphBarTypography.sx?w.graphBarTypography.sx.color:void 0)||S.palette.text.primary})()}),children:x}),sx:{my:0,position:"absolute",display:"flex",alignItems:"center",inset:0,ml:1}})]}),!U&&e.jsxs(t.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:S.custom.margin.xs,children:[!f&&e.jsx(d,{weight:"bold",color:S.palette.text.primary,disabled:v,checked:T,...w?.unitText1,children:A?e.jsxs(e.Fragment,{children:[e.jsx(p.default,{value:m,animated:k}),""+(B?"%":"")]}):"-"}),!C&&e.jsx(d,{color:S.palette.text.secondary,disabled:v,checked:T,...w?.unitText2,children:R?e.jsx(p.default,{value:h,animated:k}):"-"})]}),!j&&e.jsx(t.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e.jsx(s,{id:`${r}-checkbox`,variant:"secondary",checked:!v&&T,disabled:v,...w.checkbox,checkboxLabel:void 0,inputRef:W,sx:a.mergeSx(w.checkbox?.sx,{[`&.${t.formControlLabelClasses.root}`]:{marginRight:0}})})})]})]})})})};
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@number-flow/react"),i=require("merge-sx"),a=require("react"),s=require("../../WebCore/Checkbox/Checkbox.js");require("../../WebCore/Checkbox/StyledCheckbox.js");var o=require("../../WebCore/Tooltip/Tooltip.js"),n=require("../../WebCore/Typography/Typography.js"),l=require("./_partials/StyledLinearProgress/StyledLinearProgress.js"),c=require("./_partials/StyledListItemButton/StyledLisItemButton.js"),d=require("./_partials/UnitText/UnitText.js");function m(e){return e&&e.__esModule?e:{default:e}}var x=m(r);module.exports=({id:r,label:m,value:p=0,relativePercentage:u,respondentCount:h,tooltipContent:g,icon:y,hideIcon:b=!1,hideCheckbox:j=!1,hideUnitColumn1:f=!1,hideUnitColumn2:C=!1,animated:k=!0,checked:T=!1,disabled:v=!1,onChange:q,percentageSymbol:B=!1,compact:I,slotProps:w={}})=>{const S=t.useTheme(),[L,F]=a.useState(0),P=a.useRef(null),W=w.icon;a.useEffect(()=>{const e=L,t=u||p,r=performance.now(),i=a=>{const s=a-r,o=Math.min(s/250,1);F(e+(t-e)*(o*(2-o))),o<1&&requestAnimationFrame(i)},a=requestAnimationFrame(i);return()=>cancelAnimationFrame(a)},[u,p]);const _=a.useCallback(()=>{!v&&q&&q(!T)},[v,q,T]),U=f&&C,A=null!=p,R=null!=h;return e.jsx(t.ListItem,{disablePadding:!0,sx:{mb:S.spacing(S.custom.margin.xs)},...w?.listItem,children:e.jsx(o,{message:g||m,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...w.tooltip,children:e.jsxs(c,{id:r,role:void 0,onClick:_,dense:!0,disabled:v,sx:{display:"flex"},children:[!b&&y&&e.jsx(t.ListItemIcon,{...W,sx:i.mergeSx({minWidth:0,mr:S.custom.margin.xs,color:S.custom.palette.text.primary},W?.sx),children:y}),e.jsxs(t.Stack,{direction:"row",width:1,gap:I?S.custom.margin.sm:S.custom.margin.md,alignItems:"center",children:[e.jsxs(t.Box,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!v&&e.jsx(l,{variant:"determinate",value:L,checked:T,...w.graphBar}),e.jsx(t.ListItemText,{disableTypography:!0,primary:e.jsx(n,{...w.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:i.mergeSx(w.graphBarTypography?.sx,{color:(()=>{if(!T||v)return S.custom.palette.text.disabled;return("object"==typeof w.graphBarTypography?.sx&&null!==w.graphBarTypography?.sx&&"color"in w.graphBarTypography.sx?w.graphBarTypography.sx.color:void 0)||S.palette.text.primary})()}),children:m}),sx:{my:0,position:"absolute",display:"flex",alignItems:"center",inset:0,ml:1}})]}),!U&&e.jsxs(t.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:S.custom.margin.xs,children:[!f&&e.jsx(d,{weight:"bold",color:S.palette.text.primary,disabled:v,checked:T,...w?.unitText1,children:A?e.jsxs(e.Fragment,{children:[e.jsx(x.default,{value:p,animated:k,...B&&{format:{minimumFractionDigits:1,maximumFractionDigits:1}}}),""+(B?"%":"")]}):"-"}),!C&&e.jsx(d,{color:S.palette.text.secondary,disabled:v,checked:T,...w?.unitText2,children:R?e.jsx(x.default,{value:h,animated:k}):"-"})]}),!j&&e.jsx(t.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e.jsx(s,{id:`${r}-checkbox`,variant:"secondary",checked:!v&&T,disabled:v,...w.checkbox,checkboxLabel:void 0,inputRef:P,sx:i.mergeSx(w.checkbox?.sx,{[`&.${t.formControlLabelClasses.root}`]:{marginRight:0}})})})]})]})})})};
@@ -1,7 +1,9 @@
1
1
  import { FunctionComponent, ReactNode } from 'react';
2
- import { QuestionType } from '../QuestionLabel/QuestionLabel.js';
2
+ import { QuestionType } from '../utils/mapQuestionTypeToLabel.js';
3
3
 
4
4
  interface MiniResultCardProps {
5
+ testTitle: string;
6
+ cardNumber: number;
5
7
  question: string;
6
8
  questionType: QuestionType;
7
9
  assetThumbnail: string;
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("@number-flow/react");require("../../BrandCore/colorRamps.js");var o=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var t=require("../../BrandCore/Icon/Icon.js");require("../../../utils/formValidation/misc.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js");var s=require("../../WebCore/Typography/Typography.js");require("merge-sx"),require("../../WebCore/Badge/Badge.js"),require("../../WebCore/Breadcrumb/Breadcrumb.js");var a=require("../../WebCore/Button/Button.js");require("../../WebCore/ButtonBase/ButtonBase.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("react"),require("../../WebCore/FormGenerator/FormGenerator.js"),require("../../WebCore/GridOverlay/GridOverlay.js");var u=require("../../WebCore/HtmlParser/HtmlParser.js");require("../../WebCore/IconButton/IconButton.js"),require("../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../WebCore/Image/Image.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("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.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"),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 n=require("../AssetItem/AssetItem.js"),l=require("../QuestionLabel/QuestionLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}var c=d(i);const p=r.styled(r.Box)(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,borderRadius:e.spacing(e.custom.radius.lg),boxShadow:e.custom.elevation.raised,minWidth:32*o.base+"px",maxWidth:64*o.base+"px",paddingBottom:e.spacing(e.custom.padding.md),display:"grid",gridTemplateRows:"auto 1fr 118px auto",gap:e.spacing(e.custom.margin.md)}));module.exports=({question:i,questionType:o,subCopy:d,assetThumbnail:b,assetType:m,statTitle:C,statValue:j,onClickAsset:q,resultGraph:g,onClickShowMore:W})=>{const x=r.useTheme();return e.jsxs(p,{children:[e.jsx(l,{type:o,slotProps:{container:{sx:{borderRadius:`${x.spacing(x.custom.radius.lg)} ${x.spacing(x.custom.radius.lg)} 0 0`}}}}),e.jsxs(r.Stack,{sx:{gap:x.spacing(x.custom.margin.sm),flexDirection:"row",justifyContent:"space-between",paddingX:x.spacing(x.custom.padding.md)},children:[e.jsxs(r.Stack,{sx:{gap:x.spacing(x.custom.margin.sm)},children:[e.jsx(s,{component:"p",variation:"lg",weight:"bold",clamp:4,children:i}),d&&e.jsx(u,{typographyProps:{secondary:!0,variation:"sm",component:"p",clamp:3},children:d})]}),e.jsx(r.Box,{sx:{minWidth:"92px",width:"92px",height:"92px",overflow:"hidden",borderRadius:x.spacing(x.custom.radius.xs),border:`1px solid ${x.custom.palette.stroke.light}`,boxShadow:x.custom.elevation.raised,[`> .${r.boxClasses.root}`]:{display:"flex",height:"100%"}},children:e.jsx(n,{mediaType:m,thumbnail:b,onClick:q})})]}),e.jsxs(r.Stack,{sx:{gap:x.spacing(x.custom.margin.xs)},children:[e.jsxs(r.Stack,{sx:{placeSelf:"center",alignItems:"center",flexDirection:"row",gap:x.spacing(x.custom.margin.sm),height:"18px"},children:[e.jsx(s,{component:"p",variation:"xs",children:C}),j&&e.jsxs(s,{component:"p",variation:"xs",weight:"bold",monospaced:!0,children:[e.jsx(c.default,{value:j,animated:!0,format:{minimumFractionDigits:2,maximumFractionDigits:2}}),"likert"===o&&"%"]})]}),e.jsx(r.Box,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",height:"96px",paddingX:x.spacing(x.custom.padding.md)},children:g})]}),W&&e.jsx(a,{sizing:"sm",sx:{placeSelf:"center"},variation:"outlined",endIcon:e.jsx(t.default,{name:"open-in-new"}),onClick:W,children:"View full result"})]})};
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("@number-flow/react");require("../../BrandCore/colorRamps.js");var o=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var i=require("../../BrandCore/Icon/Icon.js");require("../../../utils/formValidation/misc.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js");var s=require("../../WebCore/Typography/Typography.js");require("merge-sx"),require("../../WebCore/Badge/Badge.js"),require("../../WebCore/Breadcrumb/Breadcrumb.js");var a=require("../../WebCore/Button/Button.js");require("../../WebCore/ButtonBase/ButtonBase.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("react"),require("../../WebCore/FormGenerator/FormGenerator.js"),require("../../WebCore/GridOverlay/GridOverlay.js");var n=require("../../WebCore/HtmlParser/HtmlParser.js");require("../../WebCore/IconButton/IconButton.js"),require("../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../WebCore/Image/Image.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("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.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"),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 l=require("../AssetItem/AssetItem.js"),u=require("../utils/mapQuestionTypeToLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}var p=d(t);const c=r.styled(r.Box)(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,borderRadius:e.r.lg,boxShadow:e.custom.elevation.raised,minWidth:32*o.base+"px",maxWidth:64*o.base+"px",paddingBottom:e.p.md,display:"grid",gridTemplateRows:"auto auto 1fr 118px auto",gap:e.m.md})),m=r.styled(r.Box)(({theme:e})=>({backgroundColor:e.custom.palette.surface.sunken,display:"flex",alignItems:"start",gap:e.m.sm,padding:e.p.md,borderRadius:`${e.r.lg} ${e.r.lg} 0 0`}));module.exports=({cardNumber:t,testTitle:o,question:d,questionType:b,subCopy:j,assetThumbnail:C,assetType:q,statTitle:x,statValue:W,onClickAsset:h,resultGraph:g,onClickShowMore:y})=>{const S=r.useTheme(),{icon:B,label:f}=u.mapQuestionTypeToLabel(b);return e.jsxs(c,{children:[e.jsxs(m,{children:[e.jsx(r.Stack,{sx:{height:"22px",borderRadius:S.r.md,backgroundColor:S.custom.palette.icon.primary,paddingX:S.p.sm,justifyContent:"center"},children:e.jsx(s,{component:"p",variation:"sm",monospaced:!0,textColor:S.custom.palette.text.primaryInverted,children:t})}),e.jsx(s,{component:"p",variation:"md",children:o})]}),e.jsxs(r.Stack,{sx:{flexDirection:"row",gap:S.m.xs,borderRadius:S.r.round,border:`1px solid ${S.custom.palette.stroke.light}`,placeSelf:"center",padding:`2px ${S.p.sm}`,alignItems:"center"},children:[e.jsx(i.default,{name:B,size:16}),e.jsx(s,{variation:"sm",component:"p",sx:{px:S.p.xs},children:f})]}),e.jsxs(r.Stack,{sx:{gap:S.m.sm,flexDirection:"row",justifyContent:"space-between",paddingX:S.p.md},children:[e.jsxs(r.Stack,{sx:{gap:S.m.sm},children:[e.jsx(s,{component:"p",variation:"lg",weight:"bold",clamp:4,children:d}),j&&e.jsx(n,{typographyProps:{secondary:!0,variation:"sm",component:"p",clamp:3},children:j})]}),e.jsx(r.Box,{sx:{minWidth:"92px",width:"92px",height:"92px",overflow:"hidden",borderRadius:S.r.xs,border:`1px solid ${S.custom.palette.stroke.light}`,boxShadow:S.custom.elevation.raised,[`> .${r.boxClasses.root}`]:{display:"flex",height:"100%"}},children:e.jsx(l,{mediaType:q,thumbnail:C,onClick:h})})]}),e.jsxs(r.Stack,{sx:{gap:S.m.xs},children:[e.jsxs(r.Stack,{sx:{placeSelf:"center",alignItems:"center",flexDirection:"row",gap:S.m.sm,height:"18px"},children:[e.jsx(s,{component:"p",variation:"xs",children:x}),W&&e.jsxs(s,{component:"p",variation:"xs",weight:"bold",monospaced:!0,children:[e.jsx(p.default,{value:W,animated:!0,format:{minimumFractionDigits:2,maximumFractionDigits:2}}),"likert"===b&&"%"]})]}),e.jsx(r.Box,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",height:"96px",paddingX:S.p.md},children:g})]}),y&&e.jsx(a,{sizing:"sm",sx:{placeSelf:"center"},variation:"outlined",endIcon:e.jsx(i.default,{name:"open-in-new"}),onClick:y,children:"View full result"})]})};
@@ -1,6 +1,6 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import { TypographyProps } from '../../WebCore/Typography/Typography.js';
3
- import { QuestionType } from '../QuestionLabel/QuestionLabel.js';
3
+ import { QuestionType } from '../utils/mapQuestionTypeToLabel.js';
4
4
 
5
5
  interface QuestionBlockProps {
6
6
  preQuestionText?: string;
@@ -1,7 +1,7 @@
1
1
  import { BoxProps } from '@mui/material';
2
2
  import { FunctionComponent, PropsWithChildren } from 'react';
3
+ import { QuestionType } from '../utils/mapQuestionTypeToLabel.js';
3
4
 
4
- type QuestionType = 'single-punch' | 'multi-punch' | 'slider' | 'likert' | 'rank' | 'open-question' | 'emoji' | 'focus';
5
5
  interface QuestionLabelProps extends PropsWithChildren {
6
6
  type?: QuestionType;
7
7
  loading?: boolean;
@@ -12,4 +12,4 @@ interface QuestionLabelProps extends PropsWithChildren {
12
12
  declare const QuestionLabel: FunctionComponent<QuestionLabelProps>;
13
13
 
14
14
  export { QuestionLabel as default };
15
- export type { QuestionLabelProps, QuestionType };
15
+ export type { QuestionLabelProps };
@@ -1 +1 @@
1
- "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var o=require("../../BrandCore/Icon/Icon.js");require("../../../utils/formValidation/misc.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js");var i=require("../../WebCore/Typography/Typography.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/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("react"),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/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("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.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 t=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");const a=r.styled(r.Box)(({theme:e,type:r})=>({backgroundColor:"focus"===r?e.custom.palette.peach[300]:e.custom.palette.surface.sunken,display:"flex",alignItems:"center",gap:e.spacing(e.custom.margin.xs),padding:`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`}));module.exports=({type:s,loading:u,slotProps:n})=>{const l=r.useTheme(),c=(e=>{switch(e){case"single-punch":return{icon:"check",label:"Single punch question"};case"multi-punch":return{icon:"check-double",label:"Multi punch question"};case"slider":return{icon:"linear-scale",label:"Slider question"};case"likert":return{icon:"thumbs-up-down",label:"Likert question"};case"rank":return{icon:"rank",label:"Rank question"};case"open-question":return{icon:"comment",label:"Open question"};case"emoji":return{icon:"emoticon",label:"Emoji question"};case"focus":return{icon:"image-search",label:"Focus step"};default:return{icon:"help",label:"Unknown type"}}})(s);return u?e.jsx(t,{width:"100%",height:36,sx:{borderRadius:`${l.spacing(l.custom.radius.lg)} ${l.spacing(l.custom.radius.lg)} 0 0`}}):e.jsxs(a,{...n?.container,type:s,children:[e.jsx(o.default,{name:c.icon,size:16}),e.jsx(i,{variation:"sm",component:"p",sx:{px:l.spacing(l.custom.padding.xs)},children:c.label})]})};
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var o=require("../../BrandCore/Icon/Icon.js");require("../../../utils/formValidation/misc.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js");var i=require("../../WebCore/Typography/Typography.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/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("react"),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/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("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.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 t=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 a=require("../utils/mapQuestionTypeToLabel.js");const s=r.styled(r.Box)(({theme:e,type:r})=>({backgroundColor:"focus"===r?e.custom.palette.peach[300]:e.custom.palette.surface.sunken,display:"flex",alignItems:"center",gap:e.spacing(e.custom.margin.xs),padding:`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`}));module.exports=({type:u,loading:n,slotProps:l})=>{const b=r.useTheme(),C=a.mapQuestionTypeToLabel(u);return n?e.jsx(t,{width:"100%",height:36,sx:{borderRadius:`${b.spacing(b.custom.radius.lg)} ${b.spacing(b.custom.radius.lg)} 0 0`}}):e.jsxs(s,{...l?.container,type:u,children:[e.jsx(o.default,{name:C.icon,size:16}),e.jsx(i,{variation:"sm",component:"p",sx:{px:b.spacing(b.custom.padding.xs)},children:C.label})]})};
@@ -0,0 +1,3 @@
1
+ type QuestionType = 'single-punch' | 'multi-punch' | 'slider' | 'likert' | 'rank' | 'open-question' | 'emoji' | 'focus';
2
+
3
+ export type { QuestionType };
@@ -0,0 +1 @@
1
+ "use strict";exports.mapQuestionTypeToLabel=e=>{switch(e){case"single-punch":return{icon:"check",label:"Single punch question"};case"multi-punch":return{icon:"check-double",label:"Multi punch question"};case"slider":return{icon:"linear-scale",label:"Slider question"};case"likert":return{icon:"thumbs-up-down",label:"Likert question"};case"rank":return{icon:"rank",label:"Rank question"};case"open-question":return{icon:"comment",label:"Open question"};case"emoji":return{icon:"emoticon",label:"Emoji question"};case"focus":return{icon:"image-search",label:"Focus step"};default:return{icon:"help",label:"Unknown type"}}};
@@ -1 +1 @@
1
- "use strict";var t=require("@mui/material"),e=require("../systems/BrandCore/colorRamps.js"),a=require("../systems/BrandCore/primitiveColor.js"),o=require("../systems/BrandCore/primitiveVariables.js"),n=require("../systems/BrandCore/semanticColor.js"),r=require("../systems/BrandCore/typography.js"),i=require("../systems/WebCore/utils/typography.util.js");const s="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/";exports.customTheme=(l,p,d)=>t.createTheme({direction:d,custom:{palette:{black:"#000000",white:"#ffffff",neutral:e.neutralRamp[l],neutralAlpha:"light"===l?a.neutralAlpha:a.darkNeutralAlpha,purple:e.purpleRamp[l],red:e.redRamp[l],peach:e.peachRamp[l],yellow:e.yellowRamp[l],blue:e.blueRamp[l],green:e.greenRamp[l],icon:n.semantic[l].icon,interaction:n.semantic[l].interaction,stroke:n.semantic[l].stroke,surface:n.semantic[l].surface,text:n.semantic[l].text,input:n.semantic[l].input,skeleton:n.semantic[l].skeleton,data:n.semantic[l].data,body:n.semantic[l].surface.default},margin:o.margin,padding:o.padding,radius:o.radius,elevation:o.elevation,elevationFilter:o.elevationFilter,boxShadow:o.boxShadow,easing:o.easing,typography:i.typographyVariantMap[p]},palette:{mode:l,primary:{main:a.purple[500]}},spacing:o.base,shape:{borderRadius:o.base,hotspot:{default:12,active:24}},breakpoints:{values:o.breakpoints},typography:{fontFamily:`"${r.fonts.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:i.typographyVariants(p),styleOverrides:{root:{color:n.semantic[l].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n @font-face {\n font-family: '${r.fonts.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.Domaine.default.weight};\n src: url(${s}${r.fonts.Domaine.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.Domaine.bold.weight};\n src: url(${s}${r.fonts.Domaine.bold.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.FoundersGrotesk.default.weight};\n src: url(${s}${r.fonts.FoundersGrotesk.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.FoundersGrotesk.bold.weight};\n src: url(${s}${r.fonts.FoundersGrotesk.bold.fileName}) format('woff2');\n }\n `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${o.breakpoints.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${o.breakpoints.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:r.fonts.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*o.base}px ${t.padding.md*o.base}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});
1
+ "use strict";var t=require("@mui/material"),e=require("../systems/BrandCore/colorRamps.js"),a=require("../systems/BrandCore/primitiveColor.js"),n=require("../systems/BrandCore/primitiveVariables.js"),o=require("../systems/BrandCore/semanticColor.js"),r=require("../systems/BrandCore/typography.js"),i=require("../systems/WebCore/utils/typography.util.js");const s="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/",l=(t,e)=>Object.fromEntries(Object.entries(t).map(([t,a])=>[t,a*e+"px"]));exports.customTheme=(p,d,m)=>t.createTheme({direction:m,p:l(n.padding,n.base),m:l(n.margin,n.base),r:l(n.radius,n.base),custom:{palette:{black:"#000000",white:"#ffffff",neutral:e.neutralRamp[p],neutralAlpha:"light"===p?a.neutralAlpha:a.darkNeutralAlpha,purple:e.purpleRamp[p],red:e.redRamp[p],peach:e.peachRamp[p],yellow:e.yellowRamp[p],blue:e.blueRamp[p],green:e.greenRamp[p],icon:o.semantic[p].icon,interaction:o.semantic[p].interaction,stroke:o.semantic[p].stroke,surface:o.semantic[p].surface,text:o.semantic[p].text,input:o.semantic[p].input,skeleton:o.semantic[p].skeleton,data:o.semantic[p].data,body:o.semantic[p].surface.default},margin:n.margin,padding:n.padding,radius:n.radius,elevation:n.elevation,elevationFilter:n.elevationFilter,boxShadow:n.boxShadow,easing:n.easing,typography:i.typographyVariantMap[d]},palette:{mode:p,primary:{main:a.purple[500]}},spacing:n.base,shape:{borderRadius:n.base,hotspot:{default:12,active:24}},breakpoints:{values:n.breakpoints},typography:{fontFamily:`"${r.fonts.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:i.typographyVariants(d),styleOverrides:{root:{color:o.semantic[p].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n @font-face {\n font-family: '${r.fonts.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.Domaine.default.weight};\n src: url(${s}${r.fonts.Domaine.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.Domaine.bold.weight};\n src: url(${s}${r.fonts.Domaine.bold.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.FoundersGrotesk.default.weight};\n src: url(${s}${r.fonts.FoundersGrotesk.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.FoundersGrotesk.bold.weight};\n src: url(${s}${r.fonts.FoundersGrotesk.bold.fileName}) format('woff2');\n }\n `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${n.breakpoints.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${n.breakpoints.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:r.fonts.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*n.base}px ${t.padding.md*n.base}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useloops/design-system",
3
- "version": "1.4.579",
3
+ "version": "1.4.581",
4
4
  "description": "The official React based Loops design system",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",