@useloops/design-system 1.4.709 → 1.4.710

package/dist/Platform/Header.d.ts

@@ -1 +1,2 @@
 export { HeaderProps, default } from '../systems/Platform/Header/Header.js';
+export { HeaderSearchProps } from '../systems/Platform/Header/_partials/HeaderSearch.js';

package/dist/Platform.d.ts

@@ -22,6 +22,7 @@ export { default as FilterPyramidGraph, FilterPyramidGraphBarProps } from './sys
 export { default as FilterRow, FilterRowProps } from './systems/Platform/FilterRow/FilterRow.js';
 export { default as GraphBar, GraphBarProps } from './systems/Platform/GraphBar/GraphBar.js';
 export { default as Header, HeaderProps } from './systems/Platform/Header/Header.js';
+export { HeaderSearchProps } from './systems/Platform/Header/_partials/HeaderSearch.js';
 export { default as KpiDataPopover, KpiDataPopoverProps, QuestionStats } from './systems/Platform/KpiDataPopover/KpiDataPopover.js';
 export { default as KpiIndicator, KpiIndicatorProps } from './systems/Platform/KpiIndicator/KpiIndicator.js';
 export { getKpiIndicatorColor, mapKpiColorSchemeByInteger } from './systems/Platform/KpiIndicator/utils.js';

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

@@ -1 +1 @@
-import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{styled as r,Box as i,Container as a,Grid as s}from"@mui/material";import{mergeSx as n}from"merge-sx";import p from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../BrandCore/primitiveVariables.js";import{fontSizemap as l}from"../../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 m}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"../../WebCore/Badge/Badge.js";import d from"../../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 c from"../../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"../../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"../../WebCore/Pill/StyledPill.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../WebCore/Select/StyledSelect.js";import"../../WebCore/RankItem/_partials/RankItemContainer/RankItemContainer.js";import"../../WebCore/RankItem/_partials/RankItemDragArea/RankItemDragArea.js";import"../../WebCore/RankItem/_partials/RankItemLabel/RankItemLabel.js";import"../../WebCore/SortableList/SortableList.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 b 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"../../WebCore/TintedSurface/TintedSurface.js";const u=({backAction:r,title:u,showEditTitleOnlyOnHover:h=!0,breadcrumbLinks:y,buttons:f,controlBar:x,sx:I,slotProps:S,loading:k})=>{const L={...S,container:{maxWidth:!1,...S?.container}};return e(t,{children:[o(C,{sx:n({justifyContent:"space-between",position:"sticky",top:"0",zIndex:999},I),children:o(a,{...L.container,children:o(s,{container:!0,spacing:2,children:o(s,{size:12,children:e(B,{sx:{justifyContent:"space-between",py:1,height:61},children:[e(B,{children:[void 0!==r&&o(c,{sizing:"lg",icon:o(p,{name:"arrow-left",size:20}),sx:{color:e=>e.custom.palette.icon.primary},onClick:r}),e(B,{sx:{alignItems:"flex-start",flexDirection:"column",gap:0},children:[u&&e(i,{sx:{display:"flex",alignItems:"center",gap:1,...h&&{":hover .Header__TitleIconButton":{opacity:1}}},children:[k?o(b,{width:256,sx:{fontSize:l.lg,lineHeight:1.4}}):o(m,{size:"lg",bold:!0,children:u}),void 0!==L?.titleIconButton?.onClick&&o(c,{icon:o(p,{name:"edit"}),sizing:"md",sx:{my:"-4px",...h&&{opacity:0,transition:"opacity 0.3s ease"}},className:"Header__TitleIconButton",...L?.titleIconButton})]}),y&&o(t,{children:k?o(b,{width:200,height:17,sx:{fontSize:l.lg,lineHeight:1.4,mt:.5}}):o(d,{links:y})})]})]}),f&&o(B,{children:f})]})})})})}),x&&o(j,{children:o(a,{...L.container,children:o(s,{container:!0,spacing:2,children:o(s,{size:12,children:o(W,{children:o(g,{children:x})})})})})})]})},C=r(i)(({theme:e})=>({alignItems:"center",backgroundColor:e.custom.palette.surface.default,borderBottom:`1px solid ${e.custom.palette.stroke.light}`,display:"flex",gap:e.spacing(1),justifyContent:"space-between",padding:1,height:61})),j=r(i)(({theme:e})=>({borderBottom:`1px solid ${e.custom.palette.stroke.light}`,width:"100%"})),W=r(i)(({theme:e})=>({display:"flex",justifyContent:"flex-end",padding:`${e.spacing(1)} 0`})),g=r(i)(({theme:e})=>({backgroundColor:e.custom.palette.surface.sunken,borderRadius:e.spacing(e.custom.radius.lg),display:"flex",gap:e.spacing(.5),justifyContent:"flex-end",padding:e.spacing(1)})),B=r(i)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)}));export{u as default};
+import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{styled as r,Box as i,Container as a,Grid as s}from"@mui/material";import{mergeSx as n}from"merge-sx";import p from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../BrandCore/primitiveVariables.js";import{fontSizemap as l}from"../../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 m}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"../../WebCore/Badge/Badge.js";import d from"../../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 c from"../../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"../../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"../../WebCore/Pill/StyledPill.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../WebCore/Select/StyledSelect.js";import"../../WebCore/RankItem/_partials/RankItemContainer/RankItemContainer.js";import"../../WebCore/RankItem/_partials/RankItemDragArea/RankItemDragArea.js";import"../../WebCore/RankItem/_partials/RankItemLabel/RankItemLabel.js";import"../../WebCore/SortableList/SortableList.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 b 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"../../WebCore/TintedSurface/TintedSurface.js";import u from"./_partials/HeaderSearch.js";const C=({backAction:r,title:C,showEditTitleOnlyOnHover:y=!0,breadcrumbLinks:f,buttons:x,search:I,controlBar:S,sx:k,slotProps:L,loading:A})=>{const T={...L,container:{maxWidth:!1,...L?.container}};return e(t,{children:[o(j,{sx:n({justifyContent:"space-between",position:"sticky",top:"0",zIndex:999},k),children:o(a,{...T.container,children:o(s,{container:!0,spacing:2,children:o(s,{size:12,children:e(B,{sx:{justifyContent:"space-between",py:1,height:61},children:[e(B,{children:[void 0!==r&&o(c,{sizing:"lg",icon:o(p,{name:"arrow-left",size:20}),sx:{color:e=>e.custom.palette.icon.primary},onClick:r}),e(B,{sx:{alignItems:"flex-start",flexDirection:"column",gap:0},children:[C&&e(i,{sx:{display:"flex",alignItems:"center",gap:1,...y&&{":hover .Header__TitleIconButton":{opacity:1}}},children:[A?o(b,{width:256,sx:{fontSize:l.lg,lineHeight:1.4}}):o(m,{size:"lg",bold:!0,children:C}),void 0!==T?.titleIconButton?.onClick&&o(c,{icon:o(p,{name:"edit"}),sizing:"md",sx:{my:"-4px",...y&&{opacity:0,transition:"opacity 0.3s ease"}},className:"Header__TitleIconButton",...T?.titleIconButton})]}),f&&o(t,{children:A?o(b,{width:200,height:17,sx:{fontSize:l.lg,lineHeight:1.4,mt:.5}}):o(d,{links:f})})]})]}),I?o(u,{...I,buttons:x}):x&&o(B,{children:x})]})})})})}),S&&o(W,{children:o(a,{...T.container,children:o(s,{container:!0,spacing:2,children:o(s,{size:12,children:o(g,{children:o(h,{children:S})})})})})})]})},j=r(i)(({theme:e})=>({alignItems:"center",backgroundColor:e.custom.palette.surface.default,borderBottom:`1px solid ${e.custom.palette.stroke.light}`,display:"flex",gap:e.spacing(1),justifyContent:"space-between",padding:1,height:61})),W=r(i)(({theme:e})=>({borderBottom:`1px solid ${e.custom.palette.stroke.light}`,width:"100%"})),g=r(i)(({theme:e})=>({display:"flex",justifyContent:"flex-end",padding:`${e.spacing(1)} 0`})),h=r(i)(({theme:e})=>({backgroundColor:e.custom.palette.surface.sunken,borderRadius:e.spacing(e.custom.radius.lg),display:"flex",gap:e.spacing(.5),justifyContent:"flex-end",padding:e.spacing(1)})),B=r(i)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)}));export{C as default};

package/dist/esm/systems/Platform/Header/_partials/HeaderSearch.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as n,Box as i,useTheme as r}from"@mui/material";import{motion as o}from"motion/react";import{useRef as a,useState as l,useEffect as s}from"react";import c from"../../../BrandCore/Icon/Icon.js";import d from"../../../WebCore/IconButton/IconButton.js";import"../../../BrandCore/primitiveVariables.js";import u from"../../../WebCore/TextField/TextField.js";const m=[.16,1,.3,1],p=({value:n,onChange:i,placeholder:o="Search…",open:p,defaultOpen:b=!1,onOpenChange:w,onSubmit:y,onClear:I,results:O,maxWidth:j=640,buttons:z,slotProps:B})=>{const E=r(),R=a(null),W=a(null),k=a(null),[F,M]=l(b),A=void 0!==p,S=A?p:F,[T,D]=l(null),G=e=>{A||M(e),w?.(e)};s(()=>{const e=()=>{const e=W.current,t=k.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.getBoundingClientRect(),a=i.left+i.width/2,l=r.left+r.width/2,s=o.left+o.width/2,c=Math.min(j,i.width),d=s-c/2,u=Math.max(i.left,Math.min(d,i.right-c))+c/2;D({width:r.width,closedOffset:l-a,openOffset:u-a})};e();const t=new ResizeObserver(e);return W.current&&t.observe(W.current),()=>t.disconnect()},[j]),s(()=>{S&&R.current?.focus()},[S]);const K=()=>G(!1),P=()=>{i?.(""),R.current&&(R.current.value="")};return e(h,{children:[e(f,{children:[t(d,{ref:k,icon:t(c,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-label":"Open search",onClick:()=>G(!0),sx:{opacity:S?0:1,pointerEvents:S?"none":"auto"}}),t(f,{"aria-hidden":S,initial:!1,animate:{opacity:S?0:1},transition:{duration:.6,ease:m},sx:{pointerEvents:S?"none":"auto"},children:z})]}),t(x,{ref:W,sx:{pointerEvents:S?"auto":"none"},children:T&&e(g,{initial:!1,animate:{width:S?j:T.width,x:S?T.openOffset:T.closedOffset,opacity:S?1:0},transition:{duration:.6,ease:m,opacity:{duration:S?0:.6,ease:m}},children:[t(v,{sx:{borderRadius:E.r.md},children:t(u,{fullWidth:!0,value:n,placeholder:o,inputRef:R,onChange:e=>i?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&K(),"Enter"===e.key&&y?.(R.current?.value??n??"")},startAdornment:t(c,{name:"search",size:20}),endAdornment:t(d,{icon:t(c,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{I?I({clear:P,collapse:K}):(P(),K())}}),...B?.textField})}),S&&O&&t(C,{children:O})]})})]})},h=n(i)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),f=n(o.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),x=n(i)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center"}),g=n(o.div)({position:"relative",maxWidth:"100%"}),v=n(i)({overflow:"hidden"}),C=n(i)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));export{p as default};

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

@@ -1 +1 @@
-import{jsxs as o,jsx as e,Fragment as r}from"react/jsx-runtime";import{useTheme as s}from"@mui/material";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import i from"../../BrandCore/Icon/Icon.js";import t from"../IconButton/IconButton.js";import n from"../Progress/Progress.js";import{Text as a}from"../Text/Text.js";import d from"../Tooltip/Tooltip.js";import l from"./StyledPill.js";import m from"./useTextTruncation.js";const p=p=>{const c=s(),{label:u,secondaryLabel:x,iconLeft:f,iconRight:g,onDelete:b,active:j,slots:y,loading:B,sizing:C,disabled:h,slotProps:T}=p,{textRef:z,isTruncated:I}=m([u]),P=o(l,{className:"loops-pill",tabIndex:0,...p,sx:{...T?.root?.sx},children:[B&&e(n,{sizing:C||"xl",sx:{color:c.custom.palette.icon.disabled}}),!B&&o(r,{children:[f&&e(i,{disabled:h,size:16,name:f}),"string"==typeof u?e(a,{size:"sm",noWrap:!0,ref:z,disabled:h,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:u}):u,"string"==typeof x?e(a,{secondary:!0,size:"sm",monospaced:!0,noWrap:!0,ref:z,disabled:h,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:x}):x,g&&e(i,{disabled:h,size:16,name:g}),b&&e(t,{sizing:"xs",onClick:b,shape:"round",disabled:h,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:e(i,{name:"cancel",sx:{color:j?c.custom.palette.blue[1e3]:c.custom.palette.icon.secondary}})})]})]});return I?e(d,{message:u,...y?.tooltip,children:P}):P};export{p as default};
+import{jsxs as o,jsx as r,Fragment as e}from"react/jsx-runtime";import{useTheme as s}from"@mui/material";import{mergeSx as i}from"merge-sx";import"../../BrandCore/colorRamps.js";import"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import t from"../../BrandCore/Icon/Icon.js";import a from"../IconButton/IconButton.js";import n from"../Progress/Progress.js";import{Text as l}from"../Text/Text.js";import d from"../Tooltip/Tooltip.js";import m from"./StyledPill.js";import{pillVariationIconColor as p}from"./pill.helpers.js";import c from"./useTextTruncation.js";const x=x=>{const u=s(),{label:f,secondaryLabel:g,iconLeft:b,iconRight:j,onDelete:h,active:y,slots:B,loading:C,sizing:T,disabled:v,variation:z,sx:I,slotProps:P}=x,{textRef:R,isTruncated:k}=c([f]),L=!v&&z?p(u,z):void 0,{sx:M,...W}=P?.root??{},$=o(m,{className:"loops-pill",tabIndex:0,...x,...W,sx:i(I,M),children:[C&&r(n,{sizing:T||"xl",sx:{color:u.custom.palette.icon.disabled}}),!C&&o(e,{children:[b&&r(t,{disabled:v,size:16,name:b,sx:L?{color:L}:void 0}),f&&"string"==typeof f?r(l,{size:"sm",noWrap:!0,ref:R,disabled:v,sx:{padding:`0 ${u.spacing(u.custom.padding.xs)}`},children:f}):f,"string"==typeof g?r(l,{secondary:!0,size:"sm",monospaced:!0,noWrap:!0,ref:R,disabled:v,sx:{padding:`0 ${u.spacing(u.custom.padding.xs)}`},children:g}):g,j&&r(t,{disabled:v,size:16,name:j,sx:L?{color:L}:void 0}),h&&r(a,{sizing:"xs",onClick:h,shape:"round",disabled:v,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:r(t,{name:"cancel",sx:{color:y?u.custom.palette.blue[1e3]:u.custom.palette.icon.secondary}})})]})]});return k?r(d,{message:f,...B?.tooltip,children:$}):$};export{x as default};

package/dist/esm/systems/WebCore/Pill/StyledPill.js

@@ -1 +1 @@
-import{styled as e,Box as t}from"@mui/material";import"react";import{omitProps as i}from"../../../utils/shouldForwardProp.js";import{buttonHeightMap as s}from"../ButtonBase/Button.variant-helpers.js";import{focusedInputState as o}from"../styleblocks/focusedStyle.js";import{selectedState as a,selectedStateActive as r,selectedStateHover as l}from"../styleblocks/selectedStyle.js";import{pillDefaultState as n,pillDisabledState as d,pillDefaultStateActive as m,pillDefaultStateHover as c}from"./pill.helpers.js";const p=e(t,{shouldForwardProp:i("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","secondaryLabel","slots","slotProps")})(({theme:e,active:t,disabled:i,sizing:p,onDelete:u,freezeInteractions:g,loading:f})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:s[p||"md"],paddingLeft:e.spacing(e.custom.padding.sm),paddingRight:u?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:g?"auto":"pointer",...n(e),...t&&a(e),...(i||f)&&d(e),"&:hover":{...c(e),...(i||f)&&d(e),...t&&l(e),...g&&n(e),...g&&t&&a(e)},"&:active":{...m(e),...(i||f)&&d(e),...t&&r(e),...g&&n(e),...g&&t&&a(e)},"&:focus-visible":{...o(e)}}));export{p as default};
+import{styled as e,Box as t}from"@mui/material";import"react";import{omitProps as i}from"../../../utils/shouldForwardProp.js";import{buttonHeightMap as o}from"../ButtonBase/Button.variant-helpers.js";import{focusedInputState as a}from"../styleblocks/focusedStyle.js";import{selectedState as s,selectedStateActive as l,selectedStateHover as r}from"../styleblocks/selectedStyle.js";import{pillVariationState as n,pillDefaultState as d,pillDisabledState as c,pillVariationStateActive as m,pillDefaultStateActive as p,pillVariationStateHover as u,pillDefaultStateHover as f}from"./pill.helpers.js";const g=e(t,{shouldForwardProp:i("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","label","secondaryLabel","variation","slots","slotProps")})(({theme:e,active:t,disabled:i,sizing:g,onDelete:h,freezeInteractions:b,loading:v,variation:y,label:j,secondaryLabel:L,iconLeft:x,iconRight:z})=>{const B=!j&&!L&&!h&&Boolean(x||z),R=o[g||"md"];return{display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:R,width:B?R:void 0,paddingLeft:B?0:e.spacing(e.custom.padding.sm),paddingRight:B?0:h?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:b?"auto":"pointer",...d(e),...y&&"default"!==y&&n(e,y),...t&&s(e),...(i||v)&&c(e),"&:hover":{...f(e),...y&&"default"!==y&&u(e,y),...(i||v)&&c(e),...t&&r(e),...b&&d(e),...b&&y&&"default"!==y&&n(e,y),...b&&t&&s(e)},"&:active":{...p(e),...y&&"default"!==y&&m(e,y),...(i||v)&&c(e),...t&&l(e),...b&&d(e),...b&&y&&"default"!==y&&n(e,y),...b&&t&&s(e)},"&:focus-visible":{...a(e)}}});export{g as default};

package/dist/esm/systems/WebCore/Pill/pill.helpers.js

@@ -1 +1 @@
-import{getInteractionStateStyles as t}from"../styleblocks/interactionStates.js";const o=t=>({backgroundColor:t.custom.palette.neutral[0],border:`1px solid ${t.custom.palette.stroke.default}`}),e=o=>({backgroundColor:t(o,"hover",o.custom.palette.neutral[0]),border:`1px solid ${o.custom.palette.stroke.default}`}),r=o=>({backgroundColor:t(o,"active",o.custom.palette.neutral[0]),border:`1px solid ${o.custom.palette.stroke.default}`}),l=t=>({backgroundColor:t.custom.palette.interaction.disabled,borderColor:t.custom.palette.stroke.disabled,pointerEvents:"none"});export{o as pillDefaultState,r as pillDefaultStateActive,e as pillDefaultStateHover,l as pillDisabledState};
+import{getInteractionStateStyles as e}from"../styleblocks/interactionStates.js";const t=(e,t)=>{switch(t){case"info":return e.custom.palette.blue;case"success":return e.custom.palette.green;case"warning":return e.custom.palette.yellow;case"danger":return e.custom.palette.red;default:return null}},o=(e,o)=>{const r=t(e,o);return r?{backgroundColor:r[0],border:`1px solid ${r[500]}`}:{}},r=(o,r)=>{const l=t(o,r);return l?{backgroundColor:e(o,"hover",l[0]),border:`1px solid ${l[500]}`}:{}},l=(o,r)=>{const l=t(o,r);return l?{backgroundColor:e(o,"active",l[0]),border:`1px solid ${l[500]}`}:{}},s=(e,o)=>t(e,o)?.[500],a=e=>({backgroundColor:e.custom.palette.neutral[0],border:`1px solid ${e.custom.palette.stroke.default}`}),u=t=>({backgroundColor:e(t,"hover",t.custom.palette.neutral[0]),border:`1px solid ${t.custom.palette.stroke.default}`}),n=t=>({backgroundColor:e(t,"active",t.custom.palette.neutral[0]),border:`1px solid ${t.custom.palette.stroke.default}`}),c=e=>({backgroundColor:e.custom.palette.interaction.disabled,borderColor:e.custom.palette.stroke.disabled,pointerEvents:"none"});export{a as pillDefaultState,n as pillDefaultStateActive,u as pillDefaultStateHover,c as pillDisabledState,s as pillVariationIconColor,o as pillVariationState,l as pillVariationStateActive,r as pillVariationStateHover};

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as FilterPyramidGraph, FilterPyramidGraphBarProps } from './sys
 export { default as FilterRow, FilterRowProps } from './systems/Platform/FilterRow/FilterRow.js';
 export { default as GraphBar, GraphBarProps } from './systems/Platform/GraphBar/GraphBar.js';
 export { default as Header, HeaderProps } from './systems/Platform/Header/Header.js';
+export { HeaderSearchProps } from './systems/Platform/Header/_partials/HeaderSearch.js';
 export { default as KpiDataPopover, KpiDataPopoverProps, QuestionStats } from './systems/Platform/KpiDataPopover/KpiDataPopover.js';
 export { default as KpiIndicator, KpiIndicatorProps } from './systems/Platform/KpiIndicator/KpiIndicator.js';
 export { getKpiIndicatorColor, mapKpiColorSchemeByInteger } from './systems/Platform/KpiIndicator/utils.js';

package/dist/systems/Platform/Header/Header.d.ts

@@ -2,6 +2,7 @@ import { SxProps, Theme, ContainerProps } from '@mui/material';
 import { FunctionComponent, ReactNode } from 'react';
 import { BreadcrumbLink } from '../../WebCore/Breadcrumb/Breadcrumb.js';
 import { IconButtonProps } from '../../WebCore/IconButton/IconButton.js';
+import { HeaderSearchProps } from './_partials/HeaderSearch.js';
 
 interface HeaderProps {
     backAction?: IconButtonProps['onClick'];
@@ -9,6 +10,7 @@ interface HeaderProps {
     showEditTitleOnlyOnHover?: boolean;
     breadcrumbLinks?: BreadcrumbLink[];
     buttons?: ReactNode;
+    search?: HeaderSearchProps;
     controlBar?: ReactNode;
     sx?: SxProps<Theme>;
     slotProps?: {

package/dist/systems/Platform/Header/Header.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),i=require("../../BrandCore/Icon/Icon.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/primitiveVariables.js");var o=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 a=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("../../WebCore/Badge/Badge.js");var s=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");var n=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"),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"),require("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../WebCore/Select/StyledSelect.js"),require("../../WebCore/RankItem/_partials/RankItemContainer/RankItemContainer.js"),require("../../WebCore/RankItem/_partials/RankItemDragArea/RankItemDragArea.js"),require("../../WebCore/RankItem/_partials/RankItemLabel/RankItemLabel.js"),require("../../WebCore/SortableList/SortableList.js"),require("../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../WebCore/RichTextField/StyledRichTextEditor.js");var l=require("../../WebCore/Skeleton/Skeleton.js");require("../../WebCore/Slider/StyledSlider.js"),require("../../WebCore/StarRating/StarRating.js"),require("../../WebCore/Switch/StyledSwitch.js"),require("../../WebCore/Textarea/Textarea.js"),require("../../WebCore/TrialCard/TrialCardContainers.js"),require("../../WebCore/TrialCard/TrialPill.js"),require("../../WebCore/UserMenu/UserMenuButton.js"),require("../../WebCore/VideoModal/VideoModal.js"),require("../../WebCore/TintedSurface/TintedSurface.js");const u=r.styled(r.Box)(({theme:e})=>({alignItems:"center",backgroundColor:e.custom.palette.surface.default,borderBottom:`1px solid ${e.custom.palette.stroke.light}`,display:"flex",gap:e.spacing(1),justifyContent:"space-between",padding:1,height:61})),d=r.styled(r.Box)(({theme:e})=>({borderBottom:`1px solid ${e.custom.palette.stroke.light}`,width:"100%"})),c=r.styled(r.Box)(({theme:e})=>({display:"flex",justifyContent:"flex-end",padding:`${e.spacing(1)} 0`})),b=r.styled(r.Box)(({theme:e})=>({backgroundColor:e.custom.palette.surface.sunken,borderRadius:e.spacing(e.custom.radius.lg),display:"flex",gap:e.spacing(.5),justifyContent:"flex-end",padding:e.spacing(1)})),p=r.styled(r.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)}));module.exports=({backAction:j,title:C,showEditTitleOnlyOnHover:q=!0,breadcrumbLinks:m,buttons:W,controlBar:x,sx:g,slotProps:B,loading:h})=>{const y={...B,container:{maxWidth:!1,...B?.container}};return e.jsxs(e.Fragment,{children:[e.jsx(u,{sx:t.mergeSx({justifyContent:"space-between",position:"sticky",top:"0",zIndex:999},g),children:e.jsx(r.Container,{...y.container,children:e.jsx(r.Grid,{container:!0,spacing:2,children:e.jsx(r.Grid,{size:12,children:e.jsxs(p,{sx:{justifyContent:"space-between",py:1,height:61},children:[e.jsxs(p,{children:[void 0!==j&&e.jsx(n,{sizing:"lg",icon:e.jsx(i.default,{name:"arrow-left",size:20}),sx:{color:e=>e.custom.palette.icon.primary},onClick:j}),e.jsxs(p,{sx:{alignItems:"flex-start",flexDirection:"column",gap:0},children:[C&&e.jsxs(r.Box,{sx:{display:"flex",alignItems:"center",gap:1,...q&&{":hover .Header__TitleIconButton":{opacity:1}}},children:[h?e.jsx(l,{width:256,sx:{fontSize:o.fontSizemap.lg,lineHeight:1.4}}):e.jsx(a.Text,{size:"lg",bold:!0,children:C}),void 0!==y?.titleIconButton?.onClick&&e.jsx(n,{icon:e.jsx(i.default,{name:"edit"}),sizing:"md",sx:{my:"-4px",...q&&{opacity:0,transition:"opacity 0.3s ease"}},className:"Header__TitleIconButton",...y?.titleIconButton})]}),m&&e.jsx(e.Fragment,{children:h?e.jsx(l,{width:200,height:17,sx:{fontSize:o.fontSizemap.lg,lineHeight:1.4,mt:.5}}):e.jsx(s,{links:m})})]})]}),W&&e.jsx(p,{children:W})]})})})})}),x&&e.jsx(d,{children:e.jsx(r.Container,{...y.container,children:e.jsx(r.Grid,{container:!0,spacing:2,children:e.jsx(r.Grid,{size:12,children:e.jsx(c,{children:e.jsx(b,{children:x})})})})})})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),i=require("../../BrandCore/Icon/Icon.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/primitiveVariables.js");var o=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 a=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("../../WebCore/Badge/Badge.js");var s=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");var n=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"),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"),require("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../WebCore/Select/StyledSelect.js"),require("../../WebCore/RankItem/_partials/RankItemContainer/RankItemContainer.js"),require("../../WebCore/RankItem/_partials/RankItemDragArea/RankItemDragArea.js"),require("../../WebCore/RankItem/_partials/RankItemLabel/RankItemLabel.js"),require("../../WebCore/SortableList/SortableList.js"),require("../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../WebCore/RichTextField/StyledRichTextEditor.js");var l=require("../../WebCore/Skeleton/Skeleton.js");require("../../WebCore/Slider/StyledSlider.js"),require("../../WebCore/StarRating/StarRating.js"),require("../../WebCore/Switch/StyledSwitch.js"),require("../../WebCore/Textarea/Textarea.js"),require("../../WebCore/TrialCard/TrialCardContainers.js"),require("../../WebCore/TrialCard/TrialPill.js"),require("../../WebCore/UserMenu/UserMenuButton.js"),require("../../WebCore/VideoModal/VideoModal.js"),require("../../WebCore/TintedSurface/TintedSurface.js");var u=require("./_partials/HeaderSearch.js");const d=r.styled(r.Box)(({theme:e})=>({alignItems:"center",backgroundColor:e.custom.palette.surface.default,borderBottom:`1px solid ${e.custom.palette.stroke.light}`,display:"flex",gap:e.spacing(1),justifyContent:"space-between",padding:1,height:61})),c=r.styled(r.Box)(({theme:e})=>({borderBottom:`1px solid ${e.custom.palette.stroke.light}`,width:"100%"})),b=r.styled(r.Box)(({theme:e})=>({display:"flex",justifyContent:"flex-end",padding:`${e.spacing(1)} 0`})),p=r.styled(r.Box)(({theme:e})=>({backgroundColor:e.custom.palette.surface.sunken,borderRadius:e.spacing(e.custom.radius.lg),display:"flex",gap:e.spacing(.5),justifyContent:"flex-end",padding:e.spacing(1)})),j=r.styled(r.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)}));module.exports=({backAction:C,title:q,showEditTitleOnlyOnHover:m=!0,breadcrumbLinks:x,buttons:W,search:g,controlBar:B,sx:h,slotProps:y,loading:S})=>{const I={...y,container:{maxWidth:!1,...y?.container}};return e.jsxs(e.Fragment,{children:[e.jsx(d,{sx:t.mergeSx({justifyContent:"space-between",position:"sticky",top:"0",zIndex:999},h),children:e.jsx(r.Container,{...I.container,children:e.jsx(r.Grid,{container:!0,spacing:2,children:e.jsx(r.Grid,{size:12,children:e.jsxs(j,{sx:{justifyContent:"space-between",py:1,height:61},children:[e.jsxs(j,{children:[void 0!==C&&e.jsx(n,{sizing:"lg",icon:e.jsx(i.default,{name:"arrow-left",size:20}),sx:{color:e=>e.custom.palette.icon.primary},onClick:C}),e.jsxs(j,{sx:{alignItems:"flex-start",flexDirection:"column",gap:0},children:[q&&e.jsxs(r.Box,{sx:{display:"flex",alignItems:"center",gap:1,...m&&{":hover .Header__TitleIconButton":{opacity:1}}},children:[S?e.jsx(l,{width:256,sx:{fontSize:o.fontSizemap.lg,lineHeight:1.4}}):e.jsx(a.Text,{size:"lg",bold:!0,children:q}),void 0!==I?.titleIconButton?.onClick&&e.jsx(n,{icon:e.jsx(i.default,{name:"edit"}),sizing:"md",sx:{my:"-4px",...m&&{opacity:0,transition:"opacity 0.3s ease"}},className:"Header__TitleIconButton",...I?.titleIconButton})]}),x&&e.jsx(e.Fragment,{children:S?e.jsx(l,{width:200,height:17,sx:{fontSize:o.fontSizemap.lg,lineHeight:1.4,mt:.5}}):e.jsx(s,{links:x})})]})]}),g?e.jsx(u,{...g,buttons:W}):W&&e.jsx(j,{children:W})]})})})})}),B&&e.jsx(c,{children:e.jsx(r.Container,{...I.container,children:e.jsx(r.Grid,{container:!0,spacing:2,children:e.jsx(r.Grid,{size:12,children:e.jsx(b,{children:e.jsx(p,{children:B})})})})})})]})};

package/dist/systems/Platform/Header/_partials/HeaderSearch.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { TextFieldProps } from '../../../WebCore/TextField/TextField.js';
+
+interface HeaderSearchProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSubmit?: (value: string) => void;
+    onClear?: (actions: {
+        clear: () => void;
+        collapse: () => void;
+    }) => void;
+    results?: ReactNode;
+    maxWidth?: number;
+    buttons?: ReactNode;
+    slotProps?: {
+        textField?: Partial<TextFieldProps>;
+    };
+}
+
+export type { HeaderSearchProps };

package/dist/systems/Platform/Header/_partials/HeaderSearch.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),n=require("motion/react"),i=require("react"),r=require("../../../BrandCore/Icon/Icon.js"),s=require("../../../WebCore/IconButton/IconButton.js");require("../../../BrandCore/primitiveVariables.js");var o=require("../../../WebCore/TextField/TextField.js");const a=[.16,1,.3,1],l=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),u=t.styled(n.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),d=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center"}),c=t.styled(n.motion.div)({position:"relative",maxWidth:"100%"}),h=t.styled(t.Box)({overflow:"hidden"}),f=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:n,onChange:x,placeholder:p="Search…",open:m,defaultOpen:v=!1,onOpenChange:j,onSubmit:g,onClear:y,results:C,maxWidth:b=640,buttons:w,slotProps:B})=>{const E=t.useTheme(),R=i.useRef(null),q=i.useRef(null),I=i.useRef(null),[O,z]=i.useState(v),W=void 0!==m,k=W?m:O,[S,F]=i.useState(null),M=e=>{W||z(e),j?.(e)};i.useEffect(()=>{const e=()=>{const e=q.current,t=I.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=n.getBoundingClientRect(),o=i.left+i.width/2,a=r.left+r.width/2,l=s.left+s.width/2,u=Math.min(b,i.width),d=l-u/2,c=Math.max(i.left,Math.min(d,i.right-u))+u/2;F({width:r.width,closedOffset:a-o,openOffset:c-o})};e();const t=new ResizeObserver(e);return q.current&&t.observe(q.current),()=>t.disconnect()},[b]),i.useEffect(()=>{k&&R.current?.focus()},[k]);const T=()=>M(!1),A=()=>{x?.(""),R.current&&(R.current.value="")};return e.jsxs(l,{children:[e.jsxs(u,{children:[e.jsx(s,{ref:I,icon:e.jsx(r.default,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-label":"Open search",onClick:()=>M(!0),sx:{opacity:k?0:1,pointerEvents:k?"none":"auto"}}),e.jsx(u,{"aria-hidden":k,initial:!1,animate:{opacity:k?0:1},transition:{duration:.6,ease:a},sx:{pointerEvents:k?"none":"auto"},children:w})]}),e.jsx(d,{ref:q,sx:{pointerEvents:k?"auto":"none"},children:S&&e.jsxs(c,{initial:!1,animate:{width:k?b:S.width,x:k?S.openOffset:S.closedOffset,opacity:k?1:0},transition:{duration:.6,ease:a,opacity:{duration:k?0:.6,ease:a}},children:[e.jsx(h,{sx:{borderRadius:E.r.md},children:e.jsx(o,{fullWidth:!0,value:n,placeholder:p,inputRef:R,onChange:e=>x?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&T(),"Enter"===e.key&&g?.(R.current?.value??n??"")},startAdornment:e.jsx(r.default,{name:"search",size:20}),endAdornment:e.jsx(s,{icon:e.jsx(r.default,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{y?y({clear:A,collapse:T}):(A(),T())}}),...B?.textField})}),k&&C&&e.jsx(f,{children:C})]})})]})};

package/dist/systems/WebCore/Pill/Pill.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var r=require("../../BrandCore/Icon/Icon.js"),i=require("../IconButton/IconButton.js"),o=require("../Progress/Progress.js"),a=require("../Text/Text.js"),t=require("../Tooltip/Tooltip.js"),n=require("./StyledPill.js"),d=require("./useTextTruncation.js");module.exports=l=>{const c=s.useTheme(),{label:u,secondaryLabel:x,iconLeft:p,iconRight:j,onDelete:m,active:g,slots:b,loading:q,sizing:f,disabled:T,slotProps:h}=l,{textRef:y,isTruncated:B}=d([u]),C=e.jsxs(n,{className:"loops-pill",tabIndex:0,...l,sx:{...h?.root?.sx},children:[q&&e.jsx(o,{sizing:f||"xl",sx:{color:c.custom.palette.icon.disabled}}),!q&&e.jsxs(e.Fragment,{children:[p&&e.jsx(r.default,{disabled:T,size:16,name:p}),"string"==typeof u?e.jsx(a.Text,{size:"sm",noWrap:!0,ref:y,disabled:T,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:u}):u,"string"==typeof x?e.jsx(a.Text,{secondary:!0,size:"sm",monospaced:!0,noWrap:!0,ref:y,disabled:T,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:x}):x,j&&e.jsx(r.default,{disabled:T,size:16,name:j}),m&&e.jsx(i,{sizing:"xs",onClick:m,shape:"round",disabled:T,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:e.jsx(r.default,{name:"cancel",sx:{color:g?c.custom.palette.blue[1e3]:c.custom.palette.icon.secondary}})})]})]});return B?e.jsx(t,{message:u,...b?.tooltip,children:C}):C};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),s=require("merge-sx");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var i=require("../../BrandCore/Icon/Icon.js"),o=require("../IconButton/IconButton.js"),a=require("../Progress/Progress.js"),t=require("../Text/Text.js"),n=require("../Tooltip/Tooltip.js"),l=require("./StyledPill.js"),d=require("./pill.helpers.js"),c=require("./useTextTruncation.js");module.exports=u=>{const x=r.useTheme(),{label:p,secondaryLabel:j,iconLeft:m,iconRight:g,onDelete:q,active:b,slots:f,loading:h,sizing:C,disabled:T,variation:v,sx:y,slotProps:B}=u,{textRef:z,isTruncated:I}=c([p]),P=!T&&v?d.pillVariationIconColor(x,v):void 0,{sx:R,...k}=B?.root??{},L=e.jsxs(l,{className:"loops-pill",tabIndex:0,...u,...k,sx:s.mergeSx(y,R),children:[h&&e.jsx(a,{sizing:C||"xl",sx:{color:x.custom.palette.icon.disabled}}),!h&&e.jsxs(e.Fragment,{children:[m&&e.jsx(i.default,{disabled:T,size:16,name:m,sx:P?{color:P}:void 0}),p&&"string"==typeof p?e.jsx(t.Text,{size:"sm",noWrap:!0,ref:z,disabled:T,sx:{padding:`0 ${x.spacing(x.custom.padding.xs)}`},children:p}):p,"string"==typeof j?e.jsx(t.Text,{secondary:!0,size:"sm",monospaced:!0,noWrap:!0,ref:z,disabled:T,sx:{padding:`0 ${x.spacing(x.custom.padding.xs)}`},children:j}):j,g&&e.jsx(i.default,{disabled:T,size:16,name:g,sx:P?{color:P}:void 0}),q&&e.jsx(o,{sizing:"xs",onClick:q,shape:"round",disabled:T,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:e.jsx(i.default,{name:"cancel",sx:{color:b?x.custom.palette.blue[1e3]:x.custom.palette.icon.secondary}})})]})]});return I?e.jsx(n,{message:p,...f?.tooltip,children:L}):L};

package/dist/systems/WebCore/Pill/StyledPill.js

@@ -1 +1 @@
-"use strict";var e=require("@mui/material");require("react");var t=require("../../../utils/shouldForwardProp.js"),i=require("../ButtonBase/Button.variant-helpers.js"),a=require("../styleblocks/focusedStyle.js"),l=require("../styleblocks/selectedStyle.js"),s=require("./pill.helpers.js");const r=e.styled(e.Box,{shouldForwardProp:t.omitProps("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","secondaryLabel","slots","slotProps")})(({theme:e,active:t,disabled:r,sizing:o,onDelete:d,freezeInteractions:n,loading:c})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:i.buttonHeightMap[o||"md"],paddingLeft:e.spacing(e.custom.padding.sm),paddingRight:d?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:n?"auto":"pointer",...s.pillDefaultState(e),...t&&l.selectedState(e),...(r||c)&&s.pillDisabledState(e),"&:hover":{...s.pillDefaultStateHover(e),...(r||c)&&s.pillDisabledState(e),...t&&l.selectedStateHover(e),...n&&s.pillDefaultState(e),...n&&t&&l.selectedState(e)},"&:active":{...s.pillDefaultStateActive(e),...(r||c)&&s.pillDisabledState(e),...t&&l.selectedStateActive(e),...n&&s.pillDefaultState(e),...n&&t&&l.selectedState(e)},"&:focus-visible":{...a.focusedInputState(e)}}));module.exports=r;
+"use strict";var e=require("@mui/material");require("react");var t=require("../../../utils/shouldForwardProp.js"),a=require("../ButtonBase/Button.variant-helpers.js"),i=require("../styleblocks/focusedStyle.js"),l=require("../styleblocks/selectedStyle.js"),s=require("./pill.helpers.js");const o=e.styled(e.Box,{shouldForwardProp:t.omitProps("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","label","secondaryLabel","variation","slots","slotProps")})(({theme:e,active:t,disabled:o,sizing:r,onDelete:d,freezeInteractions:n,loading:c,variation:u,label:p,secondaryLabel:f,iconLeft:S,iconRight:g})=>{const v=!p&&!f&&!d&&Boolean(S||g),m=a.buttonHeightMap[r||"md"];return{display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:m,width:v?m:void 0,paddingLeft:v?0:e.spacing(e.custom.padding.sm),paddingRight:v?0:d?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:n?"auto":"pointer",...s.pillDefaultState(e),...u&&"default"!==u&&s.pillVariationState(e,u),...t&&l.selectedState(e),...(o||c)&&s.pillDisabledState(e),"&:hover":{...s.pillDefaultStateHover(e),...u&&"default"!==u&&s.pillVariationStateHover(e,u),...(o||c)&&s.pillDisabledState(e),...t&&l.selectedStateHover(e),...n&&s.pillDefaultState(e),...n&&u&&"default"!==u&&s.pillVariationState(e,u),...n&&t&&l.selectedState(e)},"&:active":{...s.pillDefaultStateActive(e),...u&&"default"!==u&&s.pillVariationStateActive(e,u),...(o||c)&&s.pillDisabledState(e),...t&&l.selectedStateActive(e),...n&&s.pillDefaultState(e),...n&&u&&"default"!==u&&s.pillVariationState(e,u),...n&&t&&l.selectedState(e)},"&:focus-visible":{...i.focusedInputState(e)}}});module.exports=o;

package/dist/systems/WebCore/Pill/pill.helpers.js

@@ -1 +1 @@
-"use strict";var t=require("../styleblocks/interactionStates.js");exports.pillDefaultState=t=>({backgroundColor:t.custom.palette.neutral[0],border:`1px solid ${t.custom.palette.stroke.default}`}),exports.pillDefaultStateActive=e=>({backgroundColor:t.getInteractionStateStyles(e,"active",e.custom.palette.neutral[0]),border:`1px solid ${e.custom.palette.stroke.default}`}),exports.pillDefaultStateHover=e=>({backgroundColor:t.getInteractionStateStyles(e,"hover",e.custom.palette.neutral[0]),border:`1px solid ${e.custom.palette.stroke.default}`}),exports.pillDisabledState=t=>({backgroundColor:t.custom.palette.interaction.disabled,borderColor:t.custom.palette.stroke.disabled,pointerEvents:"none"});
+"use strict";var t=require("../styleblocks/interactionStates.js");const e=(t,e)=>{switch(e){case"info":return t.custom.palette.blue;case"success":return t.custom.palette.green;case"warning":return t.custom.palette.yellow;case"danger":return t.custom.palette.red;default:return null}};exports.pillDefaultState=t=>({backgroundColor:t.custom.palette.neutral[0],border:`1px solid ${t.custom.palette.stroke.default}`}),exports.pillDefaultStateActive=e=>({backgroundColor:t.getInteractionStateStyles(e,"active",e.custom.palette.neutral[0]),border:`1px solid ${e.custom.palette.stroke.default}`}),exports.pillDefaultStateHover=e=>({backgroundColor:t.getInteractionStateStyles(e,"hover",e.custom.palette.neutral[0]),border:`1px solid ${e.custom.palette.stroke.default}`}),exports.pillDisabledState=t=>({backgroundColor:t.custom.palette.interaction.disabled,borderColor:t.custom.palette.stroke.disabled,pointerEvents:"none"}),exports.pillVariationIconColor=(t,o)=>e(t,o)?.[500],exports.pillVariationState=(t,o)=>{const r=e(t,o);return r?{backgroundColor:r[0],border:`1px solid ${r[500]}`}:{}},exports.pillVariationStateActive=(o,r)=>{const a=e(o,r);return a?{backgroundColor:t.getInteractionStateStyles(o,"active",a[0]),border:`1px solid ${a[500]}`}:{}},exports.pillVariationStateHover=(o,r)=>{const a=e(o,r);return a?{backgroundColor:t.getInteractionStateStyles(o,"hover",a[0]),border:`1px solid ${a[500]}`}:{}};

package/dist/systems/WebCore/Pill/types.d.ts

@@ -3,13 +3,15 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { IconName } from '../../../BrandCore/Icon.js';
 import { TooltipProps } from '../Tooltip/Tooltip.js';
 
+type PillVariation = 'default' | 'info' | 'success' | 'warning' | 'danger';
 interface PillProps {
     id?: string;
-    label: string;
+    label?: string;
     secondaryLabel?: string;
     iconLeft?: IconName;
     freezeInteractions?: boolean;
     iconRight?: IconName;
+    variation?: PillVariation;
     sizing?: 'md' | 'sm' | 'xs';
     onDelete?: ((event: any) => void) | undefined;
     active?: boolean;
@@ -24,4 +26,4 @@ interface PillProps {
     };
 }
 
-export type { PillProps };
+export type { PillProps, PillVariation };

package/package.json

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