@useloops/design-system 1.4.562 → 1.4.563

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/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/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.563",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",