@useloops/design-system 1.4.640 → 1.4.642

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

@@ -1 +1 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{KeyboardArrowDown as t}from"@mui/icons-material";import{Box as a,autocompleteClasses as o}from"@mui/material";import r,{useState as n,useEffect as i}from"react";import s from"../SelectItem/SelectItem.js";import u from"./_partials/AutocompleteListbox.js";import p from"./_partials/AutocompletePopper.js";import c from"./_partials/StyledAutocompleteField.js";const m=({selections:m,disableClearable:d=!1,disabled:b,internalChange:g,grouped:f=!1,multi:v,onChange:y,placeholder:h="",renderListItem:A,renderInput:O,renderValue:I,sizing:j="lg",value:C=(v?[]:""),getOptionLabel:S,slots:x,...k})=>{const[L,z]=n(m?.find(e=>C===e?.value)||null),[B,F]=n(Array.isArray(C)?C.flatMap(e=>m?.find(l=>l.value===e)??[]):[]);i(()=>{if(v&&Array.isArray(C)&&F(C.flatMap(e=>m?.find(l=>l.value===e)??[])),!v&&"string"==typeof C){const e=m?.find(e=>e.value===C)||null;z(e)}},[C]);const V=r.useCallback((e,l)=>{const t=(v?B:[L].filter(Boolean)).length===m?.length,a=l&&t,o=a?[]:l?m:[],r=a?[]:l?m.map(({value:e})=>e):[];v?F(o):z(o[0]||null),y?.(e,r,"selectOption"),g?.()},[m,v,y,g,B]);return e(c,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e(t,{}),disabled:b,disableClearable:d,multiple:v,options:m,renderInput:O,renderValue:I,value:v?B:L,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l,t)=>{const a=(e=>Array.isArray(e)?e.map(e=>e.value):e?.value??null)(l);v?F(l):z(l),y?.(e,a,t),g?.()},...f?{groupBy:e=>{const l=e;return(e=>Object.hasOwn(e,"group"))(l)?l.group:""},renderGroup:t=>l(r.Fragment,{children:[0!==parseInt(`${t.key}`)&&e(a,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),t.group&&e(a,{component:"div",className:o.groupLabel,children:t.group}),t.children]},t.key)}:{},getOptionLabel:e=>"object"==typeof e&&null!==e&&"label"in e?e.label:"",renderOption:(e,t,{selected:a})=>{const{key:o,...r}=e,n=t;return l(s,{value:n.value,sizing:j,selected:a,...r,children:[A?A(n.value,n.label):n.label," "]},n.value)},slots:{...x,popper:l=>e(p,{...l,sizing:j,placement:"bottom-end"}),listbox:l=>e(u,{...l,handleSelectAll:V,showSelectAll:Boolean(v),value:v?B:L,selections:m,sizing:j})}})};export{m as default};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{KeyboardArrowDown as t}from"@mui/icons-material";import{Box as r,autocompleteClasses as a}from"@mui/material";import o,{useState as n,useEffect as i}from"react";import s from"../SelectItem/SelectItem.js";import u from"./_partials/AutocompleteListbox.js";import p from"./_partials/AutocompletePopper.js";import c from"./_partials/StyledAutocompleteField.js";const m=({selections:m,disableClearable:d=!1,disabled:b,internalChange:g,grouped:f=!1,multi:v,onChange:y,placeholder:h="",renderListItem:A,renderInput:O,renderValue:I,sizing:j="lg",value:C=(v?[]:""),getOptionLabel:S,slots:x,...k})=>{const[L,z]=n(m?.find(e=>C===e?.value)||null),[B,F]=n(Array.isArray(C)?C.flatMap(e=>m?.find(l=>l.value===e)??[]):[]);i(()=>{if(v&&Array.isArray(C)&&F(C.flatMap(e=>m?.find(l=>l.value===e)??[])),!v&&"string"==typeof C){const e=m?.find(e=>e.value===C)||null;z(e)}},[C]);const V=o.useCallback((e,l)=>{const t=(v?B:[L].filter(Boolean)).length===m?.length,r=l&&t,a=r?[]:l?m:[],o=r?[]:l?m.map(({value:e})=>e):[];v?F(a):z(a[0]||null),y?.(e,o,"selectOption"),g?.()},[m,v,y,g,B]);return e(c,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e(t,{}),disabled:b,disableClearable:d,multiple:v,options:m,renderInput:O,renderValue:I,value:v?B:L,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l,t)=>{const r=(e=>Array.isArray(e)?e.map(e=>e.value):e?.value??null)(l);v?F(l):z(l),y?.(e,r,t),g?.()},...f?{groupBy:e=>{const l=e;return(e=>Object.hasOwn(e,"group"))(l)?l.group:""},renderGroup:t=>l(o.Fragment,{children:[0!==parseInt(`${t.key}`)&&e(r,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),t.group&&e(r,{component:"div",className:a.groupLabel,children:t.group}),t.children]},t.key)}:{},getOptionLabel:e=>"object"==typeof e&&null!==e&&"label"in e?e.label:"",renderOption:(e,t,{selected:r})=>{const{key:a,...o}=e,n=t;return l(s,{value:n.value,sizing:j,selected:r,...o,children:[A?A(n.value,n.label):n.label," "]},n.value)},slots:{...x,popper:l=>e(p,{...l,sizing:j}),listbox:l=>e(u,{...l,handleSelectAll:V,showSelectAll:Boolean(v),value:v?B:L,selections:m,sizing:j})}})};export{m as default};

package/dist/esm/systems/WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js

@@ -1 +1 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{Box as r}from"@mui/material";import{forwardRef as t}from"react";import n from"./AutocompleteSelectAll.js";const i=t(({children:t,handleSelectAll:i,showSelectAll:o,value:c=[],selections:s,sizing:a,...m},h)=>{const A=Array.isArray(c)&&c.length===s.length,d=Array.isArray(c)&&c.length>0&&c.length<s.length;return e(r,{component:"ul",ref:h,...m,children:[o&&l(r,{sx:{pr:1},children:l(n,{handleSelectAll:i,isIndeterminate:d,isAllSelected:A,sizing:a})}),t]})});export{i as default};
+import{jsxs as e,jsx as l}from"react/jsx-runtime";import{Box as t}from"@mui/material";import{forwardRef as r}from"react";import i from"./AutocompleteSelectAll.js";const n=r(({children:r,handleSelectAll:n,showSelectAll:o,value:a=[],selections:s,sizing:c,...m},h)=>{const A=Array.isArray(a)&&a.length===s.length,d=Array.isArray(a)&&a.length>0&&a.length<s.length;return e(t,{component:"ul",ref:h,sx:{maxHeight:"40vh",overflow:"auto"},...m,children:[o&&l(t,{sx:{pr:1},children:l(i,{handleSelectAll:n,isIndeterminate:d,isAllSelected:A,sizing:c})}),r]})});export{n as default};

package/dist/esm/systems/WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{omitProps as e}from"../../../../utils/shouldForwardProp.js";import{getButtonSizing as i}from"../../ButtonBase/Button.variant-helpers.js";import{getTypographyStyle as r,getInputSize as u,selectBaseStyles as a}from"../../Select/StyledSelect.variant-helpers.js";import n from"../../TextField/TextField.js";import{getInputPadding as s}from"../helpers.js";const l=o(n,{shouldForwardProp:e(["sizing","multi"])})(({theme:t,sizing:o,multi:e})=>({"& .MuiOutlinedInput-root":{...a(t,o||"lg"),...o&&{...s(t,o)},...o&&{...u(t,o)},...o&&{...r(t,o)},...e&&{height:"auto",minHeight:i(o||"lg").height},paddingLeft:t.spacing(1),paddingRight:t.spacing(8),backgroundColor:t.custom.palette.surface.raised,transition:t.custom.easing.input,"& .MuiOutlinedInput-input":{padding:0,paddingLeft:t.spacing(1)},"&:hover":{"& .MuiOutlinedInput-notchedOutline":{borderColor:t.custom.palette.stroke.default}},"&.Mui-focused":{borderColor:t.custom.palette.stroke.focus},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,borderColor:t.custom.palette.stroke.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled}}},"& .MuiButtonBase-root":{transition:t.custom.easing.input,"&:hover:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.hover},"&:active:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled":{backgroundColor:t.custom.palette.interaction.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled,transition:t.custom.easing.input}}}})),d=o=>t(l,{...o});export{l as StyledTextField,d as default};
+import{jsx as t}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{omitProps as e}from"../../../../utils/shouldForwardProp.js";import{getButtonSizing as i}from"../../ButtonBase/Button.variant-helpers.js";import{getTypographyStyle as r,getInputSize as s,selectBaseStyles as a}from"../../Select/StyledSelect.variant-helpers.js";import n from"../../TextField/TextField.js";import{getInputPadding as u}from"../helpers.js";const l=o(n,{shouldForwardProp:e(["sizing","multi"])})(({theme:t,sizing:o,multi:e})=>({"& .MuiOutlinedInput-root":{...a(t,o||"lg"),...o&&{...u(t,o)},...o&&{...s(t,o)},...o&&{...r(t,o)},...e&&{height:"auto",minHeight:i(o||"lg").height},padding:`${t.spacing(1)} ${t.spacing(8)} ${t.spacing(1)} ${t.spacing(1)}`,backgroundColor:t.custom.palette.surface.raised,transition:t.custom.easing.input,"& .MuiOutlinedInput-input":{padding:0,paddingLeft:t.spacing(1)},"&:hover":{"& .MuiOutlinedInput-notchedOutline":{borderColor:t.custom.palette.stroke.default}},"&.Mui-focused":{borderColor:t.custom.palette.stroke.focus},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,borderColor:t.custom.palette.stroke.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled}}},"& .MuiButtonBase-root":{transition:t.custom.easing.input,"&:hover:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.hover},"&:active:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled":{backgroundColor:t.custom.palette.interaction.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled,transition:t.custom.easing.input}}}})),d=o=>t(l,{...o});export{l as StyledTextField,d as default};

package/dist/esm/systems/WebCore/AutocompleteBaseField/_partials/StyledPopper.js

@@ -1 +1 @@
-import{styled as o,Popper as t,autocompleteClasses as e}from"@mui/material";import{selectMenuItemSize as r,popperBoxShadow as i}from"../../Select/StyledSelect.variant-helpers.js";import{fontSizemap as a}from"../../utils/typography.util.js";import"../../../BrandCore/colorRamps.js";import{base as s,margin as n}from"../../../BrandCore/primitiveVariables.js";import"../../../BrandCore/semanticColor.js";import"../../../BrandCore/types.js";import"../../../BrandCore/typography.js";import"react/jsx-runtime";import"../../../BrandCore/Icon/Icon.js";const p=(o,t)=>({"& .MuiPaper-root":{margin:0,marginTop:o.spacing(n.xs),border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:i,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${e.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${e.option}`]:{fontSize:a[t],...t&&{minHeight:"lg"===t?5*s+"px":4*s+"px"},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),gap:o.spacing(o.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:o.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}},"&.Mui-focused":{background:"inherit"},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}}),d=o(t)(({theme:o,sizing:t})=>({...t&&{...p(o,t)},[`& .${e.listbox} .${e.groupLabel}`]:{...t&&{minHeight:r(t),fontSize:a[t]},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),paddingRight:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),color:o.custom.palette.text.secondary,fontWeight:o.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));export{d as StyledPopper,p as popperStyles};
+import{styled as o,Popper as t,autocompleteClasses as e}from"@mui/material";import{selectMenuItemSize as r,popperBoxShadow as i}from"../../Select/StyledSelect.variant-helpers.js";import{fontSizemap as a}from"../../utils/typography.util.js";import"../../../BrandCore/colorRamps.js";import{base as s,margin as n}from"../../../BrandCore/primitiveVariables.js";import"../../../BrandCore/semanticColor.js";import"../../../BrandCore/types.js";import"../../../BrandCore/typography.js";import"react/jsx-runtime";import"../../../BrandCore/Icon/Icon.js";const p=(o,t)=>({"& .MuiPaper-root":{margin:0,marginTop:o.spacing(n.xs),border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:i,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${e.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${e.option}`]:{fontSize:a[t],...t&&{minHeight:"lg"===t?5*s+"px":4*s+"px"},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),gap:o.spacing(o.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:o.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}},"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.hover},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}}),d=o(t)(({theme:o,sizing:t})=>({...t&&{...p(o,t)},[`& .${e.listbox} .${e.groupLabel}`]:{...t&&{minHeight:r(t),fontSize:a[t]},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),paddingRight:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),color:o.custom.palette.text.secondary,fontWeight:o.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));export{d as StyledPopper,p as popperStyles};

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, "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> & {
+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" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "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/AutocompleteBaseField/AutocompleteBaseField.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("@mui/icons-material"),t=require("@mui/material"),a=require("react"),r=require("../SelectItem/SelectItem.js"),s=require("./_partials/AutocompleteListbox.js"),o=require("./_partials/AutocompletePopper.js"),n=require("./_partials/StyledAutocompleteField.js");function u(e){return e&&e.__esModule?e:{default:e}}var i=u(a);module.exports=({selections:u,disableClearable:p=!1,disabled:c,internalChange:d,grouped:m=!1,multi:b,onChange:g,placeholder:v="",renderListItem:f,renderInput:x,renderValue:j,sizing:y="lg",value:h=(b?[]:""),getOptionLabel:A,slots:q,...O})=>{const[S,C]=a.useState(u?.find(e=>h===e?.value)||null),[I,B]=a.useState(Array.isArray(h)?h.flatMap(e=>u?.find(l=>l.value===e)??[]):[]);a.useEffect(()=>{if(b&&Array.isArray(h)&&B(h.flatMap(e=>u?.find(l=>l.value===e)??[])),!b&&"string"==typeof h){const e=u?.find(e=>e.value===h)||null;C(e)}},[h]);const k=i.default.useCallback((e,l)=>{const t=(b?I:[S].filter(Boolean)).length===u?.length,a=l&&t,r=a?[]:l?u:[],s=a?[]:l?u.map(({value:e})=>e):[];b?B(r):C(r[0]||null),g?.(e,s,"selectOption"),d?.()},[u,b,g,d,I]);return e.jsx(n,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e.jsx(l.KeyboardArrowDown,{}),disabled:c,disableClearable:p,multiple:b,options:u,renderInput:x,renderValue:j,value:b?I:S,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l,t)=>{const a=(e=>Array.isArray(e)?e.map(e=>e.value):e?.value??null)(l);b?B(l):C(l),g?.(e,a,t),d?.()},...m?{groupBy:e=>{const l=e;return(e=>Object.hasOwn(e,"group"))(l)?l.group:""},renderGroup:l=>e.jsxs(i.default.Fragment,{children:[0!==parseInt(`${l.key}`)&&e.jsx(t.Box,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),l.group&&e.jsx(t.Box,{component:"div",className:t.autocompleteClasses.groupLabel,children:l.group}),l.children]},l.key)}:{},getOptionLabel:e=>"object"==typeof e&&null!==e&&"label"in e?e.label:"",renderOption:(l,t,{selected:a})=>{const{key:s,...o}=l,n=t;return e.jsxs(r,{value:n.value,sizing:y,selected:a,...o,children:[f?f(n.value,n.label):n.label," "]},n.value)},slots:{...q,popper:l=>e.jsx(o,{...l,sizing:y,placement:"bottom-end"}),listbox:l=>e.jsx(s,{...l,handleSelectAll:k,showSelectAll:Boolean(b),value:b?I:S,selections:u,sizing:y})}})};
+"use strict";var e=require("react/jsx-runtime"),l=require("@mui/icons-material"),t=require("@mui/material"),r=require("react"),a=require("../SelectItem/SelectItem.js"),s=require("./_partials/AutocompleteListbox.js"),o=require("./_partials/AutocompletePopper.js"),u=require("./_partials/StyledAutocompleteField.js");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(r);module.exports=({selections:n,disableClearable:p=!1,disabled:c,internalChange:d,grouped:b=!1,multi:m,onChange:g,placeholder:v="",renderListItem:f,renderInput:x,renderValue:j,sizing:y="lg",value:h=(m?[]:""),getOptionLabel:A,slots:q,...O})=>{const[S,C]=r.useState(n?.find(e=>h===e?.value)||null),[I,B]=r.useState(Array.isArray(h)?h.flatMap(e=>n?.find(l=>l.value===e)??[]):[]);r.useEffect(()=>{if(m&&Array.isArray(h)&&B(h.flatMap(e=>n?.find(l=>l.value===e)??[])),!m&&"string"==typeof h){const e=n?.find(e=>e.value===h)||null;C(e)}},[h]);const k=i.default.useCallback((e,l)=>{const t=(m?I:[S].filter(Boolean)).length===n?.length,r=l&&t,a=r?[]:l?n:[],s=r?[]:l?n.map(({value:e})=>e):[];m?B(a):C(a[0]||null),g?.(e,s,"selectOption"),d?.()},[n,m,g,d,I]);return e.jsx(u,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e.jsx(l.KeyboardArrowDown,{}),disabled:c,disableClearable:p,multiple:m,options:n,renderInput:x,renderValue:j,value:m?I:S,isOptionEqualToValue:(e,l)=>e.value===l.value,onChange:(e,l,t)=>{const r=(e=>Array.isArray(e)?e.map(e=>e.value):e?.value??null)(l);m?B(l):C(l),g?.(e,r,t),d?.()},...b?{groupBy:e=>{const l=e;return(e=>Object.hasOwn(e,"group"))(l)?l.group:""},renderGroup:l=>e.jsxs(i.default.Fragment,{children:[0!==parseInt(`${l.key}`)&&e.jsx(t.Box,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),l.group&&e.jsx(t.Box,{component:"div",className:t.autocompleteClasses.groupLabel,children:l.group}),l.children]},l.key)}:{},getOptionLabel:e=>"object"==typeof e&&null!==e&&"label"in e?e.label:"",renderOption:(l,t,{selected:r})=>{const{key:s,...o}=l,u=t;return e.jsxs(a,{value:u.value,sizing:y,selected:r,...o,children:[f?f(u.value,u.label):u.label," "]},u.value)},slots:{...q,popper:l=>e.jsx(o,{...l,sizing:y}),listbox:l=>e.jsx(s,{...l,handleSelectAll:k,showSelectAll:Boolean(m),value:m?I:S,selections:n,sizing:y})}})};

package/dist/systems/WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),l=require("react"),t=require("./AutocompleteSelectAll.js");const i=l.forwardRef(({children:l,handleSelectAll:i,showSelectAll:n,value:s=[],selections:c,sizing:a,...o},u)=>{const h=Array.isArray(s)&&s.length===c.length,A=Array.isArray(s)&&s.length>0&&s.length<c.length;return e.jsxs(r.Box,{component:"ul",ref:u,...o,children:[n&&e.jsx(r.Box,{sx:{pr:1},children:e.jsx(t,{handleSelectAll:i,isIndeterminate:A,isAllSelected:h,sizing:a})}),l]})});module.exports=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),l=require("react"),t=require("./AutocompleteSelectAll.js");const i=l.forwardRef(({children:l,handleSelectAll:i,showSelectAll:s,value:n=[],selections:a,sizing:c,...o},h)=>{const u=Array.isArray(n)&&n.length===a.length,x=Array.isArray(n)&&n.length>0&&n.length<a.length;return e.jsxs(r.Box,{component:"ul",ref:h,sx:{maxHeight:"40vh",overflow:"auto"},...o,children:[s&&e.jsx(r.Box,{sx:{pr:1},children:e.jsx(t,{handleSelectAll:i,isIndeterminate:x,isAllSelected:u,sizing:c})}),l]})});module.exports=i;

package/dist/systems/WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@mui/material"),o=require("../../../../utils/shouldForwardProp.js"),i=require("../../ButtonBase/Button.variant-helpers.js"),r=require("../../Select/StyledSelect.variant-helpers.js"),u=require("../../TextField/TextField.js"),s=require("../helpers.js");const n=e.styled(u,{shouldForwardProp:o.omitProps(["sizing","multi"])})(({theme:t,sizing:e,multi:o})=>({"& .MuiOutlinedInput-root":{...r.selectBaseStyles(t,e||"lg"),...e&&{...s.getInputPadding(t,e)},...e&&{...r.getInputSize(t,e)},...e&&{...r.getTypographyStyle(t,e)},...o&&{height:"auto",minHeight:i.getButtonSizing(e||"lg").height},paddingLeft:t.spacing(1),paddingRight:t.spacing(8),backgroundColor:t.custom.palette.surface.raised,transition:t.custom.easing.input,"& .MuiOutlinedInput-input":{padding:0,paddingLeft:t.spacing(1)},"&:hover":{"& .MuiOutlinedInput-notchedOutline":{borderColor:t.custom.palette.stroke.default}},"&.Mui-focused":{borderColor:t.custom.palette.stroke.focus},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,borderColor:t.custom.palette.stroke.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled}}},"& .MuiButtonBase-root":{transition:t.custom.easing.input,"&:hover:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.hover},"&:active:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled":{backgroundColor:t.custom.palette.interaction.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled,transition:t.custom.easing.input}}}}));exports.StyledTextField=n,exports.default=e=>t.jsx(n,{...e});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("@mui/material"),o=require("../../../../utils/shouldForwardProp.js"),i=require("../../ButtonBase/Button.variant-helpers.js"),r=require("../../Select/StyledSelect.variant-helpers.js"),u=require("../../TextField/TextField.js"),s=require("../helpers.js");const n=e.styled(u,{shouldForwardProp:o.omitProps(["sizing","multi"])})(({theme:t,sizing:e,multi:o})=>({"& .MuiOutlinedInput-root":{...r.selectBaseStyles(t,e||"lg"),...e&&{...s.getInputPadding(t,e)},...e&&{...r.getInputSize(t,e)},...e&&{...r.getTypographyStyle(t,e)},...o&&{height:"auto",minHeight:i.getButtonSizing(e||"lg").height},padding:`${t.spacing(1)} ${t.spacing(8)} ${t.spacing(1)} ${t.spacing(1)}`,backgroundColor:t.custom.palette.surface.raised,transition:t.custom.easing.input,"& .MuiOutlinedInput-input":{padding:0,paddingLeft:t.spacing(1)},"&:hover":{"& .MuiOutlinedInput-notchedOutline":{borderColor:t.custom.palette.stroke.default}},"&.Mui-focused":{borderColor:t.custom.palette.stroke.focus},"&.Mui-disabled":{backgroundColor:t.custom.palette.input.disabled,borderColor:t.custom.palette.stroke.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled}}},"& .MuiButtonBase-root":{transition:t.custom.easing.input,"&:hover:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.hover},"&:active:not(.MuiChip-root)":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled":{backgroundColor:t.custom.palette.interaction.disabled,"& .MuiSvgIcon-root":{color:t.custom.palette.icon.disabled,transition:t.custom.easing.input}}}}));exports.StyledTextField=n,exports.default=e=>t.jsx(n,{...e});

package/dist/systems/WebCore/AutocompleteBaseField/_partials/StyledPopper.js

@@ -1 +1 @@
-"use strict";var e=require("@mui/material"),t=require("../../Select/StyledSelect.variant-helpers.js"),o=require("../../utils/typography.util.js");require("../../../BrandCore/colorRamps.js");var r=require("../../../BrandCore/primitiveVariables.js");require("../../../BrandCore/semanticColor.js"),require("../../../BrandCore/types.js"),require("../../../BrandCore/typography.js"),require("react/jsx-runtime"),require("../../../BrandCore/Icon/Icon.js");const s=(s,a)=>({"& .MuiPaper-root":{margin:0,marginTop:s.spacing(r.margin.xs),border:`1px solid ${s.custom.palette.stroke.default}`,backgroundColor:s.custom.palette.surface.raised,boxShadow:t.popperBoxShadow,borderRadius:s.spacing(s.custom.radius.sm)},[`& .${e.autocompleteClasses.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${s.spacing(s.custom.padding.sm)} 0`,[`& .${e.autocompleteClasses.option}`]:{fontSize:o.fontSizemap[a],...a&&{minHeight:"lg"===a?5*r.base+"px":4*r.base+"px"},paddingLeft:s.spacing("xs"===a?s.custom.padding.sm:s.custom.padding.md),gap:s.spacing(s.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:s.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:s.custom.palette.interaction.press},"&:hover":{backgroundColor:s.custom.palette.interaction.hover}},"&.Mui-focused":{background:"inherit"},"&:hover":{backgroundColor:s.custom.palette.interaction.hover}}}}),a=e.styled(e.Popper)(({theme:r,sizing:a})=>({...a&&{...s(r,a)},[`& .${e.autocompleteClasses.listbox} .${e.autocompleteClasses.groupLabel}`]:{...a&&{minHeight:t.selectMenuItemSize(a),fontSize:o.fontSizemap[a]},paddingLeft:r.spacing("xs"===a?r.custom.padding.sm:r.custom.padding.md),paddingRight:r.spacing("xs"===a?r.custom.padding.sm:r.custom.padding.md),color:r.custom.palette.text.secondary,fontWeight:r.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));exports.StyledPopper=a,exports.popperStyles=s;
+"use strict";var e=require("@mui/material"),t=require("../../Select/StyledSelect.variant-helpers.js"),o=require("../../utils/typography.util.js");require("../../../BrandCore/colorRamps.js");var r=require("../../../BrandCore/primitiveVariables.js");require("../../../BrandCore/semanticColor.js"),require("../../../BrandCore/types.js"),require("../../../BrandCore/typography.js"),require("react/jsx-runtime"),require("../../../BrandCore/Icon/Icon.js");const s=(s,a)=>({"& .MuiPaper-root":{margin:0,marginTop:s.spacing(r.margin.xs),border:`1px solid ${s.custom.palette.stroke.default}`,backgroundColor:s.custom.palette.surface.raised,boxShadow:t.popperBoxShadow,borderRadius:s.spacing(s.custom.radius.sm)},[`& .${e.autocompleteClasses.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${s.spacing(s.custom.padding.sm)} 0`,[`& .${e.autocompleteClasses.option}`]:{fontSize:o.fontSizemap[a],...a&&{minHeight:"lg"===a?5*r.base+"px":4*r.base+"px"},paddingLeft:s.spacing("xs"===a?s.custom.padding.sm:s.custom.padding.md),gap:s.spacing(s.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:s.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:s.custom.palette.interaction.press},"&:hover":{backgroundColor:s.custom.palette.interaction.hover}},"&.Mui-focused":{backgroundColor:s.custom.palette.interaction.hover},"&:hover":{backgroundColor:s.custom.palette.interaction.hover}}}}),a=e.styled(e.Popper)(({theme:r,sizing:a})=>({...a&&{...s(r,a)},[`& .${e.autocompleteClasses.listbox} .${e.autocompleteClasses.groupLabel}`]:{...a&&{minHeight:t.selectMenuItemSize(a),fontSize:o.fontSizemap[a]},paddingLeft:r.spacing("xs"===a?r.custom.padding.sm:r.custom.padding.md),paddingRight:r.spacing("xs"===a?r.custom.padding.sm:r.custom.padding.md),color:r.custom.palette.text.secondary,fontWeight:r.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));exports.StyledPopper=a,exports.popperStyles=s;

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/Typography/Typography.d.ts

@@ -14,7 +14,7 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
     textColor?: string;
     ai?: boolean;
 }
-declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;
+declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
 
 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" | "lg" | "md" | "xl";
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

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