@useloops/design-system 1.4.716 → 1.4.717

package/dist/esm/systems/Platform/Header/_partials/HeaderSearch.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as n,Box as i,useTheme as o}from"@mui/material";import{motion as r}from"motion/react";import{useRef as a,useState as s,useEffect as l}from"react";import d from"../../../BrandCore/Icon/Icon.js";import{space as u}from"../../../BrandCore/primitiveVariables.js";import c from"../../../WebCore/IconButton/IconButton.js";import h from"../../../WebCore/TextField/TextField.js";const p=.3,m=[.16,1,.3,1],f=u[500],g=({value:n,onChange:i,placeholder:r="Search…",open:u,defaultOpen:g=!1,onOpenChange:E,onSubmit:O,onClear:z,hideClearButton:B=!1,results:M,maxWidth:j=640,buttons:R,slotProps:W})=>{const S=o(),F=a(null),A=a(null),D=a(null),[K,T]=s(g),$=void 0!==u,G=$?u:K,[L,P]=s(null),V=e=>{$||T(e),E?.(e)};l(()=>{const e=()=>{const e=A.current,t=D.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.getBoundingClientRect(),a=i.left+i.width/2,s=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(j,i.width),u=l-d/2,c=Math.max(i.left,Math.min(u,i.right-d))+d/2;P({width:o.width,height:o.height,closedOffset:s-a,openOffset:c-a})};e();const t=new ResizeObserver(e);return A.current&&t.observe(A.current),()=>t.disconnect()},[j]),l(()=>{G?F.current?.focus():F.current?.blur()},[G]);const Y=()=>V(!1),q=()=>{i?.(""),F.current&&(F.current.value="")};return e(v,{children:[e(x,{children:[t(c,{ref:D,icon:t(d,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),t(x,{"aria-hidden":G,initial:!1,animate:{opacity:G?0:1},transition:{duration:p,ease:m},sx:{pointerEvents:G?"none":"auto"},children:R})]}),t(b,{ref:A,children:L&&e(C,{initial:!1,animate:{width:G?j:L.width,height:G?f:L.height,x:G?L.openOffset:L.closedOffset},transition:{duration:p,ease:m},children:[e(w,{initial:!1,animate:{backgroundColor:G?S.custom.palette.input.default:S.custom.palette.surface.raised},transition:{duration:p,ease:m},role:G?void 0:"button","aria-label":G?void 0:"Open search",tabIndex:G?-1:0,onClick:()=>{G||V(!0)},onKeyDown:e=>{G||"Enter"!==e.key&&" "!==e.key||V(!0)},sx:{borderRadius:S.r.md,border:`1px solid ${S.custom.palette.stroke.default}`,cursor:G?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:S.custom.easing.input},"&:hover::after":{backgroundColor:S.custom.palette.interaction.hover},"&:focus-within":G?{borderColor:S.custom.palette.stroke.focus,boxShadow:S.custom.boxShadow.input.focus}:void 0},children:[t(y,{initial:!1,animate:{left:G?10:(L.width-20)/2-1},transition:{duration:p,ease:m},children:t(d,{name:"search",size:20})}),t(I,{initial:!1,animate:{opacity:G?1:0},transition:{duration:.15,ease:m,delay:G?p/3:0},inert:!G,sx:{pointerEvents:G?"auto":"none"},children:t(h,{fullWidth:!0,value:n,placeholder:r,autoComplete:"off",inputRef:F,onChange:e=>i?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&Y(),"Enter"===e.key&&O?.(F.current?.value??n??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:S.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:B?void 0:t(c,{icon:t(d,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{z?z({clear:q,collapse:Y}):(q(),Y())},sx:{width:24,height:24}}),...W?.textField})})]}),G&&M&&t(k,{children:M})]})})]})},v=n(i)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),x=n(r.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),b=n(i)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),C=n(r.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),w=n(r.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),y=n(r.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),I=n(r.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),k=n(i)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));export{g as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as n,Box as i,useTheme as o}from"@mui/material";import{motion as r}from"motion/react";import{useRef as a,useState as l,useEffect as s}from"react";import d from"../../../BrandCore/Icon/Icon.js";import{space as u}from"../../../BrandCore/primitiveVariables.js";import c from"../../../WebCore/IconButton/IconButton.js";import h from"../../../WebCore/TextField/TextField.js";const p=.3,m=[.16,1,.3,1],f=u[500],g=({value:n,onChange:i,placeholder:r="Search…",open:u,defaultOpen:g=!1,onOpenChange:E,onSubmit:O,onClear:z,hideClearButton:B=!1,results:M,maxWidth:j=640,buttons:R,slotProps:W})=>{const S=o(),F=a(null),A=a(null),D=a(null),K=a(null),[T,$]=l(g),G=void 0!==u,L=G?u:T,[P,V]=l(null),Y=e=>{G||$(e),E?.(e)},q=a(L),H=q.current!==L;s(()=>{q.current=L});const J=H?{duration:p,ease:m}:{duration:0};s(()=>{const e=()=>{const e=A.current,t=K.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.getBoundingClientRect(),a=i.left+i.width/2,l=o.left+o.width/2,s=r.left+r.width/2,d=Math.min(j,i.width),u=s-d/2,c=Math.max(i.left,Math.min(u,i.right-d))+d/2;V({width:o.width,height:o.height,closedOffset:l-a,openOffset:c-a})};e();const t=new ResizeObserver(e);return A.current&&t.observe(A.current),D.current&&t.observe(D.current),()=>t.disconnect()},[j]),s(()=>{L?F.current?.focus():F.current?.blur()},[L]);const N=()=>Y(!1),Q=()=>{i?.(""),F.current&&(F.current.value="")};return e(v,{children:[e(x,{ref:D,children:[t(c,{ref:K,icon:t(d,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),t(x,{"aria-hidden":L,initial:!1,animate:{opacity:L?0:1},transition:{duration:p,ease:m},sx:{pointerEvents:L?"none":"auto"},children:R})]}),t(b,{ref:A,children:P&&e(C,{initial:!1,animate:{width:L?j:P.width,height:L?f:P.height,x:L?P.openOffset:P.closedOffset},transition:J,children:[e(w,{initial:!1,animate:{backgroundColor:L?S.custom.palette.input.default:S.custom.palette.surface.raised},transition:{duration:p,ease:m},role:L?void 0:"button","aria-label":L?void 0:"Open search",tabIndex:L?-1:0,onClick:()=>{L||Y(!0)},onKeyDown:e=>{L||"Enter"!==e.key&&" "!==e.key||Y(!0)},sx:{borderRadius:S.r.md,border:`1px solid ${S.custom.palette.stroke.default}`,cursor:L?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:S.custom.easing.input},"&:hover::after":{backgroundColor:S.custom.palette.interaction.hover},"&:focus-within":L?{borderColor:S.custom.palette.stroke.focus,boxShadow:S.custom.boxShadow.input.focus}:void 0},children:[t(y,{initial:!1,animate:{left:L?10:(P.width-20)/2-1},transition:J,children:t(d,{name:"search",size:20})}),t(I,{initial:!1,animate:{opacity:L?1:0},transition:{duration:.15,ease:m,delay:L?p/3:0},inert:!L,sx:{pointerEvents:L?"auto":"none"},children:t(h,{fullWidth:!0,value:n,placeholder:r,autoComplete:"off",inputRef:F,onChange:e=>i?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&N(),"Enter"===e.key&&O?.(F.current?.value??n??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:S.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:B?void 0:t(c,{icon:t(d,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{z?z({clear:Q,collapse:N}):(Q(),N())},sx:{width:24,height:24}}),...W?.textField})})]}),L&&M&&t(k,{children:M})]})})]})},v=n(i)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),x=n(r.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),b=n(i)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),C=n(r.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),w=n(r.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),y=n(r.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),I=n(r.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),k=n(i)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));export{g as default};

package/dist/systems/Platform/Header/_partials/HeaderSearch.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("motion/react"),n=require("react"),o=require("../../../BrandCore/Icon/Icon.js"),r=require("../../../BrandCore/primitiveVariables.js"),s=require("../../../WebCore/IconButton/IconButton.js"),a=require("../../../WebCore/TextField/TextField.js");const l=.3,d=[.16,1,.3,1],u=r.space[500],c=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),h=t.styled(i.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),p=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),f=t.styled(i.motion.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),m=t.styled(i.motion.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),x=t.styled(i.motion.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),g=t.styled(i.motion.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),v=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:i,onChange:r,placeholder:y="Search…",open:b,defaultOpen:j=!1,onOpenChange:C,onSubmit:w,onClear:I,hideClearButton:E=!1,results:k,maxWidth:B=640,buttons:O,slotProps:R})=>{const z=t.useTheme(),q=n.useRef(null),M=n.useRef(null),S=n.useRef(null),[W,F]=n.useState(j),T=void 0!==b,A=T?b:W,[D,K]=n.useState(null),$=e=>{T||F(e),C?.(e)};n.useEffect(()=>{const e=()=>{const e=M.current,t=S.current;if(!e||!t)return;const i=e.parentElement?.parentElement??e,n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=i.getBoundingClientRect(),s=n.left+n.width/2,a=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(B,n.width),u=l-d/2,c=Math.max(n.left,Math.min(u,n.right-d))+d/2;K({width:o.width,height:o.height,closedOffset:a-s,openOffset:c-s})};e();const t=new ResizeObserver(e);return M.current&&t.observe(M.current),()=>t.disconnect()},[B]),n.useEffect(()=>{A?q.current?.focus():q.current?.blur()},[A]);const G=()=>$(!1),L=()=>{r?.(""),q.current&&(q.current.value="")};return e.jsxs(c,{children:[e.jsxs(h,{children:[e.jsx(s,{ref:S,icon:e.jsx(o.default,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),e.jsx(h,{"aria-hidden":A,initial:!1,animate:{opacity:A?0:1},transition:{duration:l,ease:d},sx:{pointerEvents:A?"none":"auto"},children:O})]}),e.jsx(p,{ref:M,children:D&&e.jsxs(f,{initial:!1,animate:{width:A?B:D.width,height:A?u:D.height,x:A?D.openOffset:D.closedOffset},transition:{duration:l,ease:d},children:[e.jsxs(m,{initial:!1,animate:{backgroundColor:A?z.custom.palette.input.default:z.custom.palette.surface.raised},transition:{duration:l,ease:d},role:A?void 0:"button","aria-label":A?void 0:"Open search",tabIndex:A?-1:0,onClick:()=>{A||$(!0)},onKeyDown:e=>{A||"Enter"!==e.key&&" "!==e.key||$(!0)},sx:{borderRadius:z.r.md,border:`1px solid ${z.custom.palette.stroke.default}`,cursor:A?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:z.custom.easing.input},"&:hover::after":{backgroundColor:z.custom.palette.interaction.hover},"&:focus-within":A?{borderColor:z.custom.palette.stroke.focus,boxShadow:z.custom.boxShadow.input.focus}:void 0},children:[e.jsx(x,{initial:!1,animate:{left:A?10:(D.width-20)/2-1},transition:{duration:l,ease:d},children:e.jsx(o.default,{name:"search",size:20})}),e.jsx(g,{initial:!1,animate:{opacity:A?1:0},transition:{duration:.15,ease:d,delay:A?l/3:0},inert:!A,sx:{pointerEvents:A?"auto":"none"},children:e.jsx(a,{fullWidth:!0,value:i,placeholder:y,autoComplete:"off",inputRef:q,onChange:e=>r?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&G(),"Enter"===e.key&&w?.(q.current?.value??i??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:z.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:E?void 0:e.jsx(s,{icon:e.jsx(o.default,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{I?I({clear:L,collapse:G}):(L(),G())},sx:{width:24,height:24}}),...R?.textField})})]}),A&&k&&e.jsx(v,{children:k})]})})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),n=require("motion/react"),i=require("react"),o=require("../../../BrandCore/Icon/Icon.js"),r=require("../../../BrandCore/primitiveVariables.js"),s=require("../../../WebCore/IconButton/IconButton.js"),a=require("../../../WebCore/TextField/TextField.js");const l=.3,d=[.16,1,.3,1],u=r.space[500],c=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),h=t.styled(n.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),p=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),f=t.styled(n.motion.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),m=t.styled(n.motion.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),x=t.styled(n.motion.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),g=t.styled(n.motion.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),v=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:n,onChange:r,placeholder:b="Search…",open:y,defaultOpen:j=!1,onOpenChange:C,onSubmit:w,onClear:I,hideClearButton:E=!1,results:R,maxWidth:k=640,buttons:B,slotProps:O})=>{const z=t.useTheme(),q=i.useRef(null),M=i.useRef(null),S=i.useRef(null),W=i.useRef(null),[F,T]=i.useState(j),A=void 0!==y,D=A?y:F,[K,$]=i.useState(null),G=e=>{A||T(e),C?.(e)},L=i.useRef(D),P=L.current!==D;i.useEffect(()=>{L.current=D});const V=P?{duration:l,ease:d}:{duration:0};i.useEffect(()=>{const e=()=>{const e=M.current,t=W.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.getBoundingClientRect(),s=i.left+i.width/2,a=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(k,i.width),u=l-d/2,c=Math.max(i.left,Math.min(u,i.right-d))+d/2;$({width:o.width,height:o.height,closedOffset:a-s,openOffset:c-s})};e();const t=new ResizeObserver(e);return M.current&&t.observe(M.current),S.current&&t.observe(S.current),()=>t.disconnect()},[k]),i.useEffect(()=>{D?q.current?.focus():q.current?.blur()},[D]);const Y=()=>G(!1),H=()=>{r?.(""),q.current&&(q.current.value="")};return e.jsxs(c,{children:[e.jsxs(h,{ref:S,children:[e.jsx(s,{ref:W,icon:e.jsx(o.default,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),e.jsx(h,{"aria-hidden":D,initial:!1,animate:{opacity:D?0:1},transition:{duration:l,ease:d},sx:{pointerEvents:D?"none":"auto"},children:B})]}),e.jsx(p,{ref:M,children:K&&e.jsxs(f,{initial:!1,animate:{width:D?k:K.width,height:D?u:K.height,x:D?K.openOffset:K.closedOffset},transition:V,children:[e.jsxs(m,{initial:!1,animate:{backgroundColor:D?z.custom.palette.input.default:z.custom.palette.surface.raised},transition:{duration:l,ease:d},role:D?void 0:"button","aria-label":D?void 0:"Open search",tabIndex:D?-1:0,onClick:()=>{D||G(!0)},onKeyDown:e=>{D||"Enter"!==e.key&&" "!==e.key||G(!0)},sx:{borderRadius:z.r.md,border:`1px solid ${z.custom.palette.stroke.default}`,cursor:D?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:z.custom.easing.input},"&:hover::after":{backgroundColor:z.custom.palette.interaction.hover},"&:focus-within":D?{borderColor:z.custom.palette.stroke.focus,boxShadow:z.custom.boxShadow.input.focus}:void 0},children:[e.jsx(x,{initial:!1,animate:{left:D?10:(K.width-20)/2-1},transition:V,children:e.jsx(o.default,{name:"search",size:20})}),e.jsx(g,{initial:!1,animate:{opacity:D?1:0},transition:{duration:.15,ease:d,delay:D?l/3:0},inert:!D,sx:{pointerEvents:D?"auto":"none"},children:e.jsx(a,{fullWidth:!0,value:n,placeholder:b,autoComplete:"off",inputRef:q,onChange:e=>r?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&Y(),"Enter"===e.key&&w?.(q.current?.value??n??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:z.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:E?void 0:e.jsx(s,{icon:e.jsx(o.default,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{I?I({clear:H,collapse:Y}):(H(),Y())},sx:{width:24,height:24}}),...O?.textField})})]}),D&&R&&e.jsx(v,{children:R})]})})]})};

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