@useloops/design-system 1.4.697 → 1.4.699

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

@@ -1 +1 @@
-import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useTheme as e,Stack as t,Box as i}from"@mui/material";import c from"../../WebCore/TintedSurface/TintedSurface.js";const n=({children:n,colorScheme:l="info",headSection:d,slotProps:m})=>(e(),o(c,{colorScheme:l,slotProps:{root:m?.root},...m?.root,children:r(t,{sx:{gap:2},children:[d&&o(i,{...m?.headSection,children:d}),o(i,{...m?.children,children:n})]})}));export{n as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Box as t,Stack as r,linearProgressClasses as o}from"@mui/material";import{AnimatePresence as n,motion as a}from"motion/react";import{useState as s,useEffect as d}from"react";import l from"../../WebCore/TintedSurface/TintedSurface.js";import c from"../../WebCore/ProgressBar/ProgressBar.js";import{Text as m}from"../../WebCore/Text/Text.js";const p={duration:.25,ease:"easeInOut"},h={hidden:{opacity:0,y:6},visible:e=>({opacity:1,y:0,transition:{delay:.08*e,duration:.25,ease:"easeOut"}}),exit:e=>({opacity:0,y:6,transition:{delay:.08*(2-e),duration:.2,ease:"easeIn"}})},x=({order:i,sx:r,children:o})=>e(t,{component:a.div,variants:h,custom:i,sx:r,children:o}),u=({children:h,colorScheme:u="info",headSection:y,loading:f,loadingTextPrimary:g,loadingTextSecondary:b,slotProps:v})=>{const[C,S]=s(!f);return d(()=>{f&&S(!1)},[f]),e(l,{colorScheme:u,slotProps:{root:v?.root},children:i(t,{sx:{position:"relative"},children:[e(n,{initial:!1,onExitComplete:()=>S(!0),children:f&&e(t,{component:a.div,initial:"hidden",animate:"visible",exit:"exit",sx:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"},children:i(r,{sx:{justifyContent:"center",alignItems:"center",textAlign:"center",width:200},children:[e(x,{order:2,sx:{width:"100%"},children:e(c,{variation:"indeterminate",sx:{[`&.${o.root}`]:{mb:e=>e.m.md,width:"100%",[`& .${o.bar}`]:{backgroundColor:e=>e.custom.palette.purple[500]}}}})}),g&&e(x,{order:0,children:e(m,{size:"sm",bold:!0,children:g})}),b&&e(x,{order:1,children:e(m,{size:"sm",secondary:!0,children:b})})]})},"loading")}),i(t,{component:a.div,animate:{opacity:C?1:0},transition:p,style:{pointerEvents:C?"auto":"none"},sx:{display:"flex",flexDirection:"column",gap:2},children:[y&&e(t,{...v?.headSection,children:y}),e(t,{...v?.children,children:h})]})]})})};export{u as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{FormGroup as o,Box as i}from"@mui/material";import{useMemo as n}from"react";import r from"../FormControlLabel/FormControlLabel.js";import a from"../Checkbox/StyledCheckbox.js";import c from"../TextField/TextField.js";const s=({sizing:s,options:u,other:d,internalChange:h,value:m,inputRef:f,onChange:p,maxSelections:b,noneOfTheseOption:g})=>{const x=d?.name||"other-option",C=g?.value||"none-of-these-option",v=`${x}-value-`,k=e=>`${v}${e}`,M=d?.enabled,F=m?.includes(x)&&M,j=m?.find(e=>e.includes(v)),y=n(()=>m?m.filter(e=>!e.startsWith(v)).length:0,[m,v]),z=!!b&&y>=b;if(!m)return e("div",{});const S=(e,l)=>{const t=m.includes(e);if(!t&&z&&!l)return;let o;t?o=m.filter(l=>l!==e):l?o=[e]:(o=[...new Set(m),e],o=o.filter(e=>!u.find(l=>l?.exclusive&&e===l.value)),g&&(o=o.filter(e=>e!==C))),d?.enabled&&(l?o=o.filter(e=>e!==x&&!e.includes(v)):e===x&&t&&(o=o.filter(e=>!e.includes(v)))),p(o),h&&h()},T=(e,l)=>!l&&(z&&!m.includes(e));return l(t,{children:[l(o,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[u?.map(l=>{const t=l.value,o=T(t,l.exclusive);return e(r,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:"default"!==s?.5:0}},onChange:()=>S(t,l.exclusive),checked:m.includes(t),disabled:o,control:e(a,{sizing:s,disabled:o}),label:l.label},t)}),M&&e(r,{inputRef:f,onChange:()=>S(x),label:d?.label||"Other",checked:m.includes(x),disabled:T(x),control:e(a,{sizing:s})},x),g&&e(r,{onChange:()=>S(C,!0),checked:m.includes(C),control:e(a,{sizing:s}),label:g.label},C)]}),F&&e(i,{sx:{mt:1},children:e(c,{fullWidth:!0,autoFocus:!0,defaultValue:j?j.replace(v,""):"",placeholder:d?.placeholder,onChange:e=>{const l=m.find(e=>e.includes(v)),t=(l?m.map(l=>l.includes(v)?k(e.target.value):l):[...m,k(e.target.value)]).filter(e=>e!==v);p(t),h&&h()},required:!0})})]})};export{s as default};
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{FormGroup as o,Box as i}from"@mui/material";import{useMemo as n}from"react";import r from"../FormControlLabel/FormControlLabel.js";import a from"../Checkbox/StyledCheckbox.js";import c from"../TextField/TextField.js";const s=({sizing:s,options:u,other:d,internalChange:h,value:m,inputRef:f,onChange:p,maxSelections:b,noneOfTheseOption:g})=>{const x=d?.name||"other-option",C=g?.value||"none-of-these-option",v=`${x}-value-`,k=e=>`${v}${e}`,M=d?.enabled,F=m?.includes(x)&&M,j=m?.find(e=>e.includes(v)),y=n(()=>m?m.filter(e=>!e.startsWith(v)).length:0,[m,v]),z=!!b&&y>=b;if(!m)return e("div",{});const S=(e,l)=>{const t=m.includes(e);if(!t&&z&&!l)return;let o;t?o=m.filter(l=>l!==e):l?o=[e]:(o=[...new Set(m),e],o=o.filter(e=>!u.find(l=>l?.exclusive&&e===l.value)),g&&(o=o.filter(e=>e!==C))),d?.enabled&&(l?o=o.filter(e=>e!==x&&!e.includes(v)):e===x&&t&&(o=o.filter(e=>!e.includes(v)))),p(o),h&&h()},T=(e,l)=>!l&&(z&&!m.includes(e));return l(t,{children:[l(o,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[u?.map(l=>{const t=l.value,o=T(t,l.exclusive);return e(r,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:0}},onChange:()=>S(t,l.exclusive),checked:m.includes(t),disabled:o,control:e(a,{sizing:s,disabled:o}),label:l.label},t)}),M&&e(r,{inputRef:f,onChange:()=>S(x),label:d?.label||"Other",checked:m.includes(x),disabled:T(x),control:e(a,{sizing:s})},x),g&&e(r,{onChange:()=>S(C,!0),checked:m.includes(C),control:e(a,{sizing:s}),label:g.label},C)]}),F&&e(i,{sx:{mt:1},children:e(c,{fullWidth:!0,autoFocus:!0,defaultValue:j?j.replace(v,""):"",placeholder:d?.placeholder,onChange:e=>{const l=m.find(e=>e.includes(v)),t=(l?m.map(l=>l.includes(v)?k(e.target.value):l):[...m,k(e.target.value)]).filter(e=>e!==v);p(t),h&&h()},required:!0})})]})};export{s as default};

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

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{styled as o,LinearProgress as t,linearProgressClasses as a}from"@mui/material";const u=o(t)(({theme:r})=>({[`&.${a.root}`]:{backgroundColor:r.custom.palette.neutral[200],borderRadius:r.custom.radius.round,[`& .${a.bar}`]:{backgroundColor:r.custom.palette.green[500],borderRadius:`0 ${r.custom.radius.round}px ${r.custom.radius.round}px 0`}}})),e=o=>{const{variation:t,value:a,...e}=o;return r(u,{variant:t,value:a?Math.min(a,100):a,...e})};export{e as default};
+import{jsx as r}from"react/jsx-runtime";import{styled as o,LinearProgress as t,linearProgressClasses as a}from"@mui/material";const u=o(t)(({theme:r})=>({[`&.${a.root}`]:{backgroundColor:r.custom.palette.neutralAlpha[2],borderRadius:r.custom.radius.round,[`& .${a.bar}`]:{backgroundColor:r.custom.palette.green[500],borderRadius:`0 ${r.custom.radius.round}px ${r.custom.radius.round}px 0`}}})),e=o=>{const{variation:t,value:a,...e}=o;return r(u,{variant:t,value:a?Math.min(a,100):a,...e})};export{e as default};

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

@@ -6,6 +6,9 @@ import { TintedSurfaceProps } from 'systems/WebCore/TintedSurface';
 interface CommentFeedbackCardProps extends PropsWithChildren {
     colorScheme?: TintedSurfaceProps['colorScheme'];
     headSection?: ReactNode;
+    loading?: boolean;
+    loadingTextPrimary?: string;
+    loadingTextSecondary?: string;
     slotProps?: {
         root?: Omit<SurfaceProps, 'children'>;
         headSection?: BoxProps;

package/dist/systems/Platform/CommentFeedbackCard/CommentFeedbackCard.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),o=require("../../WebCore/TintedSurface/TintedSurface.js");module.exports=({children:i,colorScheme:c="info",headSection:s,slotProps:t})=>(r.useTheme(),e.jsx(o,{colorScheme:c,slotProps:{root:t?.root},...t?.root,children:e.jsxs(r.Stack,{sx:{gap:2},children:[s&&e.jsx(r.Box,{...t?.headSection,children:s}),e.jsx(r.Box,{...t?.children,children:i})]})}));
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),r=require("motion/react"),t=require("react"),n=require("../../WebCore/TintedSurface/TintedSurface.js"),o=require("../../WebCore/ProgressBar/ProgressBar.js"),s=require("../../WebCore/Text/Text.js");const a={duration:.25,ease:"easeInOut"},l={hidden:{opacity:0,y:6},visible:e=>({opacity:1,y:0,transition:{delay:.08*e,duration:.25,ease:"easeOut"}}),exit:e=>({opacity:0,y:6,transition:{delay:.08*(2-e),duration:.2,ease:"easeIn"}})},c=({order:t,sx:n,children:o})=>e.jsx(i.Box,{component:r.motion.div,variants:l,custom:t,sx:n,children:o});module.exports=({children:l,colorScheme:d="info",headSection:x,loading:u,loadingTextPrimary:m,loadingTextSecondary:h,slotProps:j})=>{const[p,y]=t.useState(!u);return t.useEffect(()=>{u&&y(!1)},[u]),e.jsx(n,{colorScheme:d,slotProps:{root:j?.root},children:e.jsxs(i.Box,{sx:{position:"relative"},children:[e.jsx(r.AnimatePresence,{initial:!1,onExitComplete:()=>y(!0),children:u&&e.jsx(i.Box,{component:r.motion.div,initial:"hidden",animate:"visible",exit:"exit",sx:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsxs(i.Stack,{sx:{justifyContent:"center",alignItems:"center",textAlign:"center",width:200},children:[e.jsx(c,{order:2,sx:{width:"100%"},children:e.jsx(o,{variation:"indeterminate",sx:{[`&.${i.linearProgressClasses.root}`]:{mb:e=>e.m.md,width:"100%",[`& .${i.linearProgressClasses.bar}`]:{backgroundColor:e=>e.custom.palette.purple[500]}}}})}),m&&e.jsx(c,{order:0,children:e.jsx(s.Text,{size:"sm",bold:!0,children:m})}),h&&e.jsx(c,{order:1,children:e.jsx(s.Text,{size:"sm",secondary:!0,children:h})})]})},"loading")}),e.jsxs(i.Box,{component:r.motion.div,animate:{opacity:p?1:0},transition:a,style:{pointerEvents:p?"auto":"none"},sx:{display:"flex",flexDirection:"column",gap:2},children:[x&&e.jsx(i.Box,{...j?.headSection,children:x}),e.jsx(i.Box,{...j?.children,children:l})]})]})})};

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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _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" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "sx" | "alignItems" | "style" | "children" | "autoFocus" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "disableGutters" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType | undefined;
 } & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     component?: React.ElementType | undefined;
 } & {
     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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
-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>> & {
+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> & {
     component?: React.ElementType | undefined;
 } & 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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
-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>> & {
+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> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
 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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+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> & {
     component?: React.ElementType | undefined;
 } & {
     showGraphLines?: boolean;

package/dist/systems/WebCore/CheckboxGroup/CheckboxGroup.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("@mui/material"),i=require("react"),t=require("../FormControlLabel/FormControlLabel.js"),n=require("../Checkbox/StyledCheckbox.js"),r=require("../TextField/TextField.js");module.exports=({sizing:o,options:s,other:a,internalChange:u,value:c,inputRef:d,onChange:h,maxSelections:x,noneOfTheseOption:b})=>{const f=a?.name||"other-option",m=b?.value||"none-of-these-option",p=`${f}-value-`,g=e=>`${p}${e}`,j=a?.enabled,v=c?.includes(f)&&j,C=c?.find(e=>e.includes(p)),k=i.useMemo(()=>c?c.filter(e=>!e.startsWith(p)).length:0,[c,p]),q=!!x&&k>=x;if(!c)return e.jsx("div",{});const F=(e,l)=>{const i=c.includes(e);if(!i&&q&&!l)return;let t;i?t=c.filter(l=>l!==e):l?t=[e]:(t=[...new Set(c),e],t=t.filter(e=>!s.find(l=>l?.exclusive&&e===l.value)),b&&(t=t.filter(e=>e!==m))),a?.enabled&&(l?t=t.filter(e=>e!==f&&!e.includes(p)):e===f&&i&&(t=t.filter(e=>!e.includes(p)))),h(t),u&&u()},M=(e,l)=>!l&&(q&&!c.includes(e));return e.jsxs(e.Fragment,{children:[e.jsxs(l.FormGroup,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[s?.map(l=>{const i=l.value,r=M(i,l.exclusive);return e.jsx(t,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:"default"!==o?.5:0}},onChange:()=>F(i,l.exclusive),checked:c.includes(i),disabled:r,control:e.jsx(n,{sizing:o,disabled:r}),label:l.label},i)}),j&&e.jsx(t,{inputRef:d,onChange:()=>F(f),label:a?.label||"Other",checked:c.includes(f),disabled:M(f),control:e.jsx(n,{sizing:o})},f),b&&e.jsx(t,{onChange:()=>F(m,!0),checked:c.includes(m),control:e.jsx(n,{sizing:o}),label:b.label},m)]}),v&&e.jsx(l.Box,{sx:{mt:1},children:e.jsx(r,{fullWidth:!0,autoFocus:!0,defaultValue:C?C.replace(p,""):"",placeholder:a?.placeholder,onChange:e=>{const l=c.find(e=>e.includes(p)),i=(l?c.map(l=>l.includes(p)?g(e.target.value):l):[...c,g(e.target.value)]).filter(e=>e!==p);h(i),u&&u()},required:!0})})]})};
+"use strict";var e=require("react/jsx-runtime"),l=require("@mui/material"),i=require("react"),t=require("../FormControlLabel/FormControlLabel.js"),n=require("../Checkbox/StyledCheckbox.js"),r=require("../TextField/TextField.js");module.exports=({sizing:o,options:s,other:a,internalChange:u,value:c,inputRef:d,onChange:h,maxSelections:x,noneOfTheseOption:b})=>{const m=a?.name||"other-option",p=b?.value||"none-of-these-option",f=`${m}-value-`,g=e=>`${f}${e}`,j=a?.enabled,v=c?.includes(m)&&j,C=c?.find(e=>e.includes(f)),k=i.useMemo(()=>c?c.filter(e=>!e.startsWith(f)).length:0,[c,f]),q=!!x&&k>=x;if(!c)return e.jsx("div",{});const F=(e,l)=>{const i=c.includes(e);if(!i&&q&&!l)return;let t;i?t=c.filter(l=>l!==e):l?t=[e]:(t=[...new Set(c),e],t=t.filter(e=>!s.find(l=>l?.exclusive&&e===l.value)),b&&(t=t.filter(e=>e!==p))),a?.enabled&&(l?t=t.filter(e=>e!==m&&!e.includes(f)):e===m&&i&&(t=t.filter(e=>!e.includes(f)))),h(t),u&&u()},M=(e,l)=>!l&&(q&&!c.includes(e));return e.jsxs(e.Fragment,{children:[e.jsxs(l.FormGroup,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[s?.map(l=>{const i=l.value,r=M(i,l.exclusive);return e.jsx(t,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:0}},onChange:()=>F(i,l.exclusive),checked:c.includes(i),disabled:r,control:e.jsx(n,{sizing:o,disabled:r}),label:l.label},i)}),j&&e.jsx(t,{inputRef:d,onChange:()=>F(m),label:a?.label||"Other",checked:c.includes(m),disabled:M(m),control:e.jsx(n,{sizing:o})},m),b&&e.jsx(t,{onChange:()=>F(p,!0),checked:c.includes(p),control:e.jsx(n,{sizing:o}),label:b.label},p)]}),v&&e.jsx(l.Box,{sx:{mt:1},children:e.jsx(r,{fullWidth:!0,autoFocus:!0,defaultValue:C?C.replace(f,""):"",placeholder:a?.placeholder,onChange:e=>{const l=c.find(e=>e.includes(f)),i=(l?c.map(l=>l.includes(f)?g(e.target.value):l):[...c,g(e.target.value)]).filter(e=>e!==f);h(i),u&&u()},required:!0})})]})};

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

@@ -6,7 +6,7 @@ import { TextFieldProps } from '@mui/material';
 type InputFieldBaseProps = TextFieldProps;
 declare const InputFieldBase: _emotion_styled.StyledComponent<{
     variant?: _mui_material.TextFieldVariants | undefined;
-} & Omit<_mui_material.OutlinedTextFieldProps | _mui_material.FilledTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
+} & Omit<_mui_material.FilledTextFieldProps | _mui_material.OutlinedTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
 
 export { InputFieldBase as default };
 export type { InputFieldBaseProps };

package/dist/systems/WebCore/ProgressBar/ProgressBar.js

@@ -1 +1 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("@mui/material");const s=e.styled(e.LinearProgress)(({theme:r})=>({[`&.${e.linearProgressClasses.root}`]:{backgroundColor:r.custom.palette.neutral[200],borderRadius:r.custom.radius.round,[`& .${e.linearProgressClasses.bar}`]:{backgroundColor:r.custom.palette.green[500],borderRadius:`0 ${r.custom.radius.round}px ${r.custom.radius.round}px 0`}}}));module.exports=e=>{const{variation:a,value:o,...t}=e;return r.jsx(s,{variant:a,value:o?Math.min(o,100):o,...t})};
+"use strict";var r=require("react/jsx-runtime"),e=require("@mui/material");const s=e.styled(e.LinearProgress)(({theme:r})=>({[`&.${e.linearProgressClasses.root}`]:{backgroundColor:r.custom.palette.neutralAlpha[2],borderRadius:r.custom.radius.round,[`& .${e.linearProgressClasses.bar}`]:{backgroundColor:r.custom.palette.green[500],borderRadius:`0 ${r.custom.radius.round}px ${r.custom.radius.round}px 0`}}}));module.exports=e=>{const{variation:a,value:o,...t}=e;return r.jsx(s,{variant:a,value:o?Math.min(o,100):o,...t})};

package/package.json

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