@useloops/design-system 1.4.696 → 1.4.698

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useTheme as o,Stack as c,Box as i}from"@mui/material";import t from"../../WebCore/TintedSurface/TintedSurface.js";const n=({children:n,colorScheme:d="info",headSection:m,slotProps:l})=>{const a=o();return e(t,{colorScheme:d,...l?.root,children:r(c,{spacing:a.p.md,children:[m&&e(i,{...l?.headSection,children:m}),e(i,{...l?.children,children:n})]})})};export{n as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Box as t}from"@mui/material";import{AnimatePresence as o,motion as n}from"motion/react";import r from"../../WebCore/TintedSurface/TintedSurface.js";import{Text as a}from"../../WebCore/Text/Text.js";const c={duration:.25,ease:"easeInOut"},l=({children:l,colorScheme:s="info",headSection:d,loading:m,loadingText:p="Loading",slotProps:h})=>e(r,{colorScheme:s,slotProps:{root:h?.root},children:i(t,{sx:{position:"relative"},children:[e(o,{initial:!1,children:m&&e(t,{component:n.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:c,sx:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"},children:e(a,{children:p})},"loading")}),i(t,{component:n.div,animate:{opacity:m?0:1},transition:c,style:{pointerEvents:m?"none":"auto"},sx:{display:"flex",flexDirection:"column",gap:2},children:[d&&e(t,{...h?.headSection,children:d}),e(t,{...h?.children,children:l})]})]})});export{l 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/systems/Platform/CommentFeedbackCard/CommentFeedbackCard.d.ts

@@ -6,6 +6,8 @@ import { TintedSurfaceProps } from 'systems/WebCore/TintedSurface';
 interface CommentFeedbackCardProps extends PropsWithChildren {
     colorScheme?: TintedSurfaceProps['colorScheme'];
     headSection?: ReactNode;
+    loading?: boolean;
+    loadingText?: ReactNode;
     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"),c=require("../../WebCore/TintedSurface/TintedSurface.js");module.exports=({children:i,colorScheme:o="info",headSection:n,slotProps:s})=>{const t=r.useTheme();return e.jsx(c,{colorScheme:o,...s?.root,children:e.jsxs(r.Stack,{spacing:t.p.md,children:[n&&e.jsx(r.Box,{...s?.headSection,children:n}),e.jsx(r.Box,{...s?.children,children:i})]})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),o=require("motion/react"),t=require("../../WebCore/TintedSurface/TintedSurface.js"),n=require("../../WebCore/Text/Text.js");const r={duration:.25,ease:"easeInOut"};module.exports=({children:s,colorScheme:a="info",headSection:c,loading:l,loadingText:x="Loading",slotProps:d})=>e.jsx(t,{colorScheme:a,slotProps:{root:d?.root},children:e.jsxs(i.Box,{sx:{position:"relative"},children:[e.jsx(o.AnimatePresence,{initial:!1,children:l&&e.jsx(i.Box,{component:o.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:r,sx:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx(n.Text,{children:x})},"loading")}),e.jsxs(i.Box,{component:o.motion.div,animate:{opacity:l?0:1},transition:r,style:{pointerEvents:l?"none":"auto"},sx:{display:"flex",flexDirection:"column",gap:2},children:[c&&e.jsx(i.Box,{...d?.headSection,children:c}),e.jsx(i.Box,{...d?.children,children:s})]})]})});

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 | 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>, "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> & {
+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> & {
     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_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 | 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_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 | 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_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 | 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_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 | 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_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 | 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_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 | 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.FilledTextFieldProps | _mui_material.OutlinedTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
+} & Omit<_mui_material.OutlinedTextFieldProps | _mui_material.FilledTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
 
 export { InputFieldBase as default };
 export type { InputFieldBaseProps };

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