@useloops/design-system 1.4.562 → 1.4.564

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

@@ -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,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??0-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)},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};
+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)},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};

package/dist/esm/systems/WebCore/Menu/MenuItem.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Button as n,Box as i,Stack as r,useTheme as a,Grow as s}from"@mui/material";import{mergeSx as l}from"merge-sx";import"../../BrandCore/colorRamps.js";import{base as c}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import d from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as p}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import m from"../Typography/Typography.js";const h=o(n,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),maxWidth:"100%",padding:o.spacing(.5,1),textTransform:"none",width:"100%",...p(o,e),backgroundColor:e?o.custom.palette.surface.sunken:"transparent","& p":{alignItems:"center",display:"flex",height:t},"&:disabled":{backgroundColor:"inherit","& p":{color:o.custom.palette.text.disabled}}})),g=o(i)(({theme:e})=>({padding:e.spacing(.5,1.5)})),u=o(i)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between",textAlign:"left"})),x=o(r)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"})),f=({baseState:o,label:n,active:r,danger:p,divider:f,heading:y,selected:B,disabled:C,closeOnClick:b,hidden:j,onClick:v,startIcon:I,slotProps:k,children:w})=>{const H=a(),T=3*c;return j?null:f?e(i,{sx:{height:"32px",display:"flex",alignItems:"center"},children:e(i,{sx:{borderBottom:`1px solid ${H.custom.palette.stroke.default}`,width:"100%"}})}):n?y?e(g,{children:e(m,{component:"p",type:"button",variation:"md",sx:{color:H.custom.palette.text.secondary},children:n})}):e(h,{active:r,disabled:C,onClick:e=>{v&&v(e),b&&o?.close()},iconHeight:T,children:t(u,{sx:{flex:1,gap:1,justifyContent:"start"},children:[void 0!==I&&e(d,{name:I,...k?.startIcon}),e(u,{sx:{px:.5},children:e(m,{monospaced:!0,component:"p",sx:l(p&&{color:H.custom.palette.text.negative},y&&{color:H.custom.palette.text.secondary}),type:"button",variation:"md",children:n})}),(Boolean(w?.length)||B)&&t(x,{iconHeight:T,children:[w?.length&&w.length>0&&e(s,{in:!0,children:e(i,{sx:{display:"flex",alignItems:"center"},children:e(d,{name:"chevron-right",size:T})})}),B&&e(s,{in:!0,children:e(i,{sx:{display:"flex",alignItems:"center"},children:e(d,{name:"check",size:T})})})]})]})}):null};export{f as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Button as i,Box as r,Stack as n,useTheme as a,Grow as s}from"@mui/material";import{mergeSx as l}from"merge-sx";import"../../BrandCore/colorRamps.js";import{base as c}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import d from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as p}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import m from"../Tooltip/Tooltip.js";import h from"../Typography/Typography.js";const g=o(i,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),maxWidth:"100%",padding:o.spacing(.5,1),textTransform:"none",width:"100%",textOverflow:"ellipsis",whiteSpace:"nowrap",...p(o,e),backgroundColor:e?o.custom.palette.surface.sunken:"transparent","& p":{minHeight:t},"&:disabled":{backgroundColor:"inherit","& p":{color:o.custom.palette.text.disabled}}})),u=o(r)(({theme:e})=>({padding:e.spacing(.5,1)})),x=o(r)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),textAlign:"left"})),f=o(n)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"})),y=({baseState:o,label:i,active:n,danger:p,divider:y,heading:v,selected:w,disabled:b,closeOnClick:B,hidden:C,onClick:j,startIcon:I,slotProps:k,tooltip:H,children:T})=>{const O=a(),S=3*c;return C?null:y?e(r,{sx:{height:32,display:"flex",alignItems:"center"},children:e(r,{sx:{borderBottom:`1px solid ${O.custom.palette.stroke.default}`,width:"100%"}})}):i?v?e(u,{children:e(h,{component:"p",type:"button",variation:"md",sx:{color:O.custom.palette.text.secondary},children:i})}):e(g,{active:n,disabled:b,onClick:e=>{j&&j(e),B&&o?.close()},iconHeight:S,children:t(x,{sx:{width:"100%",justifyContent:"space-between",gap:1},children:[t(x,{sx:{flex:"1 1 auto",gap:1,minWidth:0},children:[void 0!==I&&e(d,{name:I,...k?.startIcon}),H?e(m,{message:i,slotProps:{wrapper:{sx:{minWidth:0,overflow:"hidden",flex:"1 1 auto"}}},children:e(h,{monospaced:!0,component:"p",sx:l({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},p&&{color:O.custom.palette.text.negative},v&&{color:O.custom.palette.text.secondary}),type:"button",variation:"md",children:i})}):e(h,{monospaced:!0,component:"p",sx:l({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},p&&{color:O.custom.palette.text.negative},v&&{color:O.custom.palette.text.secondary}),type:"button",variation:"md",children:i})]}),t(f,{iconHeight:S,minWidth:S,children:[T?.length&&T.length>0&&e(s,{in:!0,children:e(r,{sx:{display:"flex",alignItems:"center"},children:e(d,{name:"chevron-right",size:S})})}),w&&e(s,{in:!0,children:e(r,{sx:{display:"flex",alignItems:"center"},children:e(d,{name:"check",size:S})})})]})]})}):null};export{y as default};

package/dist/systems/Platform/GraphBar/GraphBar.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=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(t);module.exports=({id:t,label:x,value:m,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:w,slotProps:I={}})=>{const S=r.useTheme(),[L,P]=i.useState(0),W=i.useRef(null),_=I.icon;i.useEffect(()=>{const e=L,r=u||m,t=performance.now(),a=i=>{const s=i-t,o=Math.min(s/250,1);P(e+(r??0-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(r.ListItem,{disablePadding:!0,sx:{mb:S.spacing(S.custom.margin.xs)},children:e.jsx(o,{message:g||x,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...I.tooltip,children:e.jsxs(c,{id:t,role:void 0,onClick:F,dense:!0,disabled:v,sx:{display:"flex"},children:[!b&&y&&e.jsx(r.ListItemIcon,{..._,sx:a.mergeSx({minWidth:0,mr:S.custom.margin.xs,color:S.custom.palette.text.primary},_?.sx),children:y}),e.jsxs(r.Stack,{direction:"row",width:1,gap:w?S.custom.margin.sm:S.custom.margin.md,alignItems:"center",children:[e.jsxs(r.Box,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!v&&e.jsx(l,{variant:"determinate",value:L,checked:T,...I.graphBar}),e.jsx(r.ListItemText,{disableTypography:!0,primary:e.jsx(n,{...I.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:a.mergeSx(I.graphBarTypography?.sx,{color:(()=>{if(!T||v)return S.custom.palette.text.disabled;return("object"==typeof I.graphBarTypography?.sx&&null!==I.graphBarTypography?.sx&&"color"in I.graphBarTypography.sx?I.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(r.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,...I?.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,...I?.unitText2,children:R?e.jsx(p.default,{value:h,animated:k}):"-"})]}),!j&&e.jsx(r.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e.jsx(s,{id:`${t}-checkbox`,variant:"secondary",checked:!v&&T,disabled:v,...I.checkbox,checkboxLabel:void 0,inputRef:W,sx:a.mergeSx(I.checkbox?.sx,{[`&.${r.formControlLabelClasses.root}`]:{marginRight:0}})})})]})]})})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=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(t);module.exports=({id:t,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:w,slotProps:I={}})=>{const S=r.useTheme(),[L,P]=i.useState(0),W=i.useRef(null),_=I.icon;i.useEffect(()=>{const e=L,r=u||m,t=performance.now(),a=i=>{const s=i-t,o=Math.min(s/250,1);P(e+(r-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(r.ListItem,{disablePadding:!0,sx:{mb:S.spacing(S.custom.margin.xs)},children:e.jsx(o,{message:g||x,followCursor:!0,placement:"bottom-start",slotProps:{wrapper:{sx:{width:"100%"}}},...I.tooltip,children:e.jsxs(c,{id:t,role:void 0,onClick:F,dense:!0,disabled:v,sx:{display:"flex"},children:[!b&&y&&e.jsx(r.ListItemIcon,{..._,sx:a.mergeSx({minWidth:0,mr:S.custom.margin.xs,color:S.custom.palette.text.primary},_?.sx),children:y}),e.jsxs(r.Stack,{direction:"row",width:1,gap:w?S.custom.margin.sm:S.custom.margin.md,alignItems:"center",children:[e.jsxs(r.Box,{sx:{display:"flex",position:"relative",width:"fill-available"},children:[!v&&e.jsx(l,{variant:"determinate",value:L,checked:T,...I.graphBar}),e.jsx(r.ListItemText,{disableTypography:!0,primary:e.jsx(n,{...I.graphBarTypography,component:"p",variation:"xs",noWrap:!0,sx:a.mergeSx(I.graphBarTypography?.sx,{color:(()=>{if(!T||v)return S.custom.palette.text.disabled;return("object"==typeof I.graphBarTypography?.sx&&null!==I.graphBarTypography?.sx&&"color"in I.graphBarTypography.sx?I.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(r.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,...I?.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,...I?.unitText2,children:R?e.jsx(p.default,{value:h,animated:k}):"-"})]}),!j&&e.jsx(r.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",children:e.jsx(s,{id:`${t}-checkbox`,variant:"secondary",checked:!v&&T,disabled:v,...I.checkbox,checkboxLabel:void 0,inputRef:W,sx:a.mergeSx(I.checkbox?.sx,{[`&.${r.formControlLabelClasses.root}`]:{marginRight:0}})})})]})]})})})};

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts

@@ -5,40 +5,40 @@ import * as _mui_system from '@mui/system';
 import * as _mui_material from '@mui/material';
 import { SliderGraphBarProps, CommonComponentProps } from '../types.js';
 
-declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | "alignItems" | "style" | "children" | "autoFocus" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 }, {}, {}>;
-declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 } & CommonComponentProps & {
     value: number;
     checked: boolean;
 }, {}, {}>;
-declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 }, {}, {}>;
-declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 }, {}, {}>;
 declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
@@ -46,7 +46,7 @@ declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.
 } & {
     maxHeight: number;
 } & Partial<SliderGraphBarProps>, {}, {}>;
-declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
+declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     component?: React.ElementType;
 } & {
     showGraphLines?: boolean;

package/dist/systems/WebCore/Menu/MenuItem.d.ts

@@ -13,6 +13,7 @@ interface MenuItemProps {
     selected?: boolean;
     disabled?: boolean;
     closeOnClick?: boolean;
+    tooltip?: boolean;
     hidden?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;
     children?: MenuItemProps[];

package/dist/systems/WebCore/Menu/MenuItem.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx");require("../../BrandCore/colorRamps.js");var s=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var n=require("../../BrandCore/Icon/Icon.js"),i=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var o=require("../Typography/Typography.js");const a=t.styled(t.Button,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:r})=>({borderRadius:r.spacing(r.custom.radius.sm),maxWidth:"100%",padding:r.spacing(.5,1),textTransform:"none",width:"100%",...i.buttonInteraction(r,e),backgroundColor:e?r.custom.palette.surface.sunken:"transparent","& p":{alignItems:"center",display:"flex",height:t},"&:disabled":{backgroundColor:"inherit","& p":{color:r.custom.palette.text.disabled}}})),l=t.styled(t.Box)(({theme:e})=>({padding:e.spacing(.5,1.5)})),c=t.styled(t.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between",textAlign:"left"})),d=t.styled(t.Stack)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"}));module.exports=({baseState:i,label:u,active:x,danger:p,divider:h,heading:m,selected:g,disabled:j,closeOnClick:y,hidden:B,onClick:f,startIcon:b,slotProps:v,children:C})=>{const q=t.useTheme(),I=3*s.base;return B?null:h?e.jsx(t.Box,{sx:{height:"32px",display:"flex",alignItems:"center"},children:e.jsx(t.Box,{sx:{borderBottom:`1px solid ${q.custom.palette.stroke.default}`,width:"100%"}})}):u?m?e.jsx(l,{children:e.jsx(o,{component:"p",type:"button",variation:"md",sx:{color:q.custom.palette.text.secondary},children:u})}):e.jsx(a,{active:x,disabled:j,onClick:e=>{f&&f(e),y&&i?.close()},iconHeight:I,children:e.jsxs(c,{sx:{flex:1,gap:1,justifyContent:"start"},children:[void 0!==b&&e.jsx(n.default,{name:b,...v?.startIcon}),e.jsx(c,{sx:{px:.5},children:e.jsx(o,{monospaced:!0,component:"p",sx:r.mergeSx(p&&{color:q.custom.palette.text.negative},m&&{color:q.custom.palette.text.secondary}),type:"button",variation:"md",children:u})}),(Boolean(C?.length)||g)&&e.jsxs(d,{iconHeight:I,children:[C?.length&&C.length>0&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(n.default,{name:"chevron-right",size:I})})}),g&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(n.default,{name:"check",size:I})})})]})]})}):null};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx");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"),s=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var n=require("../Tooltip/Tooltip.js"),a=require("../Typography/Typography.js");const l=t.styled(t.Button,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:r})=>({borderRadius:r.spacing(r.custom.radius.sm),maxWidth:"100%",padding:r.spacing(.5,1),textTransform:"none",width:"100%",textOverflow:"ellipsis",whiteSpace:"nowrap",...s.buttonInteraction(r,e),backgroundColor:e?r.custom.palette.surface.sunken:"transparent","& p":{minHeight:t},"&:disabled":{backgroundColor:"inherit","& p":{color:r.custom.palette.text.disabled}}})),c=t.styled(t.Box)(({theme:e})=>({padding:e.spacing(.5,1)})),d=t.styled(t.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),textAlign:"left"})),p=t.styled(t.Stack)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"}));module.exports=({baseState:s,label:x,active:h,danger:u,divider:m,heading:g,selected:j,disabled:y,closeOnClick:v,hidden:f,onClick:w,startIcon:B,slotProps:b,tooltip:C,children:q})=>{const I=t.useTheme(),k=3*o.base;return f?null:m?e.jsx(t.Box,{sx:{height:32,display:"flex",alignItems:"center"},children:e.jsx(t.Box,{sx:{borderBottom:`1px solid ${I.custom.palette.stroke.default}`,width:"100%"}})}):x?g?e.jsx(c,{children:e.jsx(a,{component:"p",type:"button",variation:"md",sx:{color:I.custom.palette.text.secondary},children:x})}):e.jsx(l,{active:h,disabled:y,onClick:e=>{w&&w(e),v&&s?.close()},iconHeight:k,children:e.jsxs(d,{sx:{width:"100%",justifyContent:"space-between",gap:1},children:[e.jsxs(d,{sx:{flex:"1 1 auto",gap:1,minWidth:0},children:[void 0!==B&&e.jsx(i.default,{name:B,...b?.startIcon}),C?e.jsx(n,{message:x,slotProps:{wrapper:{sx:{minWidth:0,overflow:"hidden",flex:"1 1 auto"}}},children:e.jsx(a,{monospaced:!0,component:"p",sx:r.mergeSx({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},u&&{color:I.custom.palette.text.negative},g&&{color:I.custom.palette.text.secondary}),type:"button",variation:"md",children:x})}):e.jsx(a,{monospaced:!0,component:"p",sx:r.mergeSx({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},u&&{color:I.custom.palette.text.negative},g&&{color:I.custom.palette.text.secondary}),type:"button",variation:"md",children:x})]}),e.jsxs(p,{iconHeight:k,minWidth:k,children:[q?.length&&q.length>0&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(i.default,{name:"chevron-right",size:k})})}),j&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(i.default,{name:"check",size:k})})})]})]})}):null};

package/dist/systems/WebCore/Typography/Typography.d.ts

@@ -12,7 +12,7 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
     secondary?: boolean;
     textColor?: string;
 }
-declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
+declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;
 
 export { Typography as default };
 export type { TypographyProps };

package/dist/theme/theme.hooks.d.ts

@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
 import { ScreenSize, CustomTheme } from './types.js';
 
 declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
-    breakpoint: "" | "sm" | "md" | "lg" | "xl";
+    breakpoint: "" | "sm" | "lg" | "md" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

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