@useloops/design-system 1.4.704 → 1.4.706

package/dist/esm/systems/WebCore/KbdGroup/Kbd.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{Text as o}from"../Text/Text.js";const r=t("kbd")(({theme:e})=>({display:"flex",minWidth:20,boxSizing:"border-box",justifyContent:"center",alignItems:"center",backgroundColor:e.custom.palette.surface.default,border:`1px solid ${e.custom.palette.stroke.light}`,borderRadius:e.spacing(e.custom.radius.sm),padding:"2px 4px"})),i=({children:t})=>e(r,{children:e(o,{size:"sm",secondary:!0,sx:{lineHeight:"110%",fontFamily:'"SF Compact", "Segoe UI Symbol", "Segoe Fluent Icons", "Segoe UI Emoji", "Founders Grotesk", sans-serif'},children:t})});export{i as default};
+import{jsx as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{Text as o}from"../Text/Text.js";const r=t("kbd")(({theme:e})=>({display:"flex",boxSizing:"border-box",justifyContent:"center",alignItems:"center",height:20,minWidth:20,padding:"0 4px",backgroundColor:e.custom.palette.surface.default,border:`1px solid ${e.custom.palette.stroke.light}`,borderRadius:e.spacing(e.custom.radius.sm)})),s=({children:t,sx:s})=>e(r,{sx:s,children:e(o,{size:"sm",secondary:!0,sx:{lineHeight:"110%",fontFamily:'"SF Compact", "Segoe UI Symbol", "Segoe Fluent Icons", "Segoe UI Emoji", "Founders Grotesk", sans-serif'},children:t})});export{s as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{DragHandle as i}from"@mui/icons-material";import{useTheme as r,Stack as o,Box as l,typographyClasses as n,selectClasses as a}from"@mui/material";import{useSortableItemContext as s}from"../SortableList/components/SortableItem/SortableItem.js";import{useBreakpoint as m}from"../../../utils/breakpoint.hook.js";import"react";import{iconSizeMap as c}from"../../BrandCore/Icon/Icon.js";import{space as d,base as p}from"../../BrandCore/primitiveVariables.js";import"../SelectItem/SelectItem.js";import f from"../Select/Select.js";import g from"./RankItemContainer.js";import b from"./RankItemLabel.js";const h=({label:h="Placeholder",disabled:u,onChange:x,options:v,fullWidth:I,sizing:j="lg"})=>{const S=r(),w=v.map(e=>e.label).indexOf(h),C=m(),{attributes:k,listeners:y,ref:z,isMobile:$}=s();return e(g,{disabled:u,fullWidth:I,sizing:j,children:t(o,{sx:{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",position:"relative",zIndex:1},children:[t(l,{sx:{display:"flex",alignItems:"center","& svg":{fill:S.custom.palette.icon.secondary}},children:[e(l,{ref:$?z:void 0,...$?k:{},...$?y:{},sx:{display:"flex",alignItems:"center",cursor:"grab",touchAction:$?"none":void 0},children:e(i,{"aria-label":"drag-handle",sx:{width:c.lg,height:c.lg,mr:S.custom.padding.sm}})}),e(b,{align:"left",disabled:u,children:h})]}),"lg"===j?e(f,{name:"rank",sizing:"sm"===C?"md":"xs",selections:v.map((e,t)=>({label:`${t+1}`,value:`${t}`})),disabled:u,value:`${w}`,onChange:function(e){const t=w,i=Number(e.target.value),r=v;let o=1;const l=r.splice(t,o)[0];o=0,r.splice(i,o,l),x(r)},MenuProps:{anchorOrigin:{vertical:d[400],horizontal:"center"}},sx:{[`&.${a.root}`]:{width:6*p,textAlign:"center"},[`& .${n.root}`]:{width:"fit-content",overflow:"visible"}}}):void 0]})})};export{h as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{DragHandle as i}from"@mui/icons-material";import{useTheme as r,Stack as o,Box as l,typographyClasses as n,selectClasses as a}from"@mui/material";import{useSortableItemContext as s}from"../SortableList/components/SortableItem/SortableItem.js";import{useBreakpoint as m}from"../../../utils/breakpoint.hook.js";import"react";import{iconSizeMap as c}from"../../BrandCore/Icon/Icon.js";import{space as d,base as p}from"../../BrandCore/primitiveVariables.js";import"../SelectItem/SelectItem.js";import f from"../Select/Select.js";import g from"./RankItemContainer.js";import h from"./RankItemLabel.js";const u=({label:u="Placeholder",disabled:b,onChange:x,options:I,fullWidth:j,sizing:v="lg"})=>{const S=r(),w=I.map(e=>e.label).indexOf(u),C=m(),{touchListeners:k,ref:y}=s();return e(g,{disabled:b,fullWidth:j,sizing:v,children:t(o,{sx:{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",position:"relative",zIndex:1},children:[t(l,{sx:{display:"flex",alignItems:"center","& svg":{fill:S.custom.palette.icon.secondary}},children:[e(l,{ref:y,...k,sx:{display:"flex",alignItems:"center",cursor:"grab",touchAction:"none"},children:e(i,{"aria-label":"drag-handle",sx:{width:c.lg,height:c.lg,mr:S.custom.padding.sm}})}),e(h,{align:"left",disabled:b,children:u})]}),"lg"===v?e(f,{name:"rank",sizing:"sm"===C?"md":"xs",selections:I.map((e,t)=>({label:`${t+1}`,value:`${t}`})),disabled:b,value:`${w}`,onChange:function(e){const t=w,i=Number(e.target.value),r=I;let o=1;const l=r.splice(t,o)[0];o=0,r.splice(i,o,l),x(r)},MenuProps:{anchorOrigin:{vertical:d[400],horizontal:"center"}},sx:{[`&.${a.root}`]:{width:6*p,textAlign:"center"},[`& .${n.root}`]:{width:"fit-content",overflow:"visible"}}}):void 0]})})};export{u as default};

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useSensors as n,useSensor as r,KeyboardSensor as a,DndContext as o,MeasuringStrategy as i,MouseSensor as d,TouchSensor as s}from"@dnd-kit/core";import{sortableKeyboardCoordinates as l,SortableContext as c,horizontalListSortingStrategy as m,verticalListSortingStrategy as f,arrayMove as p}from"@dnd-kit/sortable";import{useTheme as u,useMediaQuery as v,Stack as g}from"@mui/material";import{useState as h,useMemo as x,Fragment as b}from"react";import{SortableItem as y,DragHandle as S}from"./components/SortableItem/SortableItem.js";import{SortableOverlay as D}from"./components/SortableOverlay/SortableOverlay.js";const I=({nativeEvent:t})=>{let e=t.target;for(;e;){if(e.dataset.noDnd)return!1;e=e.parentElement}return!0};class C extends d{static activators=[{eventName:"onMouseDown",handler:I}]}class w extends s{static activators=[{eventName:"onTouchStart",handler:I}]}function j({items:d,onChange:s,renderItem:y,disabled:S,direction:I}){if(!d)return;const[j,k]=h(null),E=x(()=>d.find(t=>t?.id===j?.id),[j,d]),z=u(),M=v(z.breakpoints.down("md")),N=n(r(C,{activationConstraint:{distance:{y:2}}}),r(w,{activationConstraint:M?{distance:{y:2}}:{delay:0,tolerance:5}}),r(a,{coordinateGetter:l}));return t(o,{measuring:{droppable:{strategy:i.Always}},sensors:N,onDragStart:({active:t})=>{k(t)},onDragEnd:({active:t,over:e})=>{if(e&&t.id!==e?.id){const n=d.findIndex(({id:e})=>e===t.id),r=d.findIndex(({id:t})=>t===e.id);s(p(d,n,r))}k(null)},onDragCancel:()=>{k(null)},children:[e(c,{items:d,disabled:S,strategy:"horizontal"===I?m:f,children:e(g,{sx:{..."horizontal"===I&&{flexDirection:"row"},display:"flex",m:0,gap:1,padding:0,alignContent:"flex-start"},children:d.map(t=>e(b,{children:y(t)},t.id))})}),e(D,{children:E?y(E,!0,!!j):null})]})}j.Item=y,j.DragHandle=S;export{j as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useSensors as n,useSensor as r,KeyboardSensor as a,DndContext as i,MeasuringStrategy as o,MouseSensor as d,TouchSensor as s}from"@dnd-kit/core";import{sortableKeyboardCoordinates as l,SortableContext as c,horizontalListSortingStrategy as m,verticalListSortingStrategy as f,arrayMove as p}from"@dnd-kit/sortable";import{Stack as u}from"@mui/material";import{useState as v,useMemo as g,Fragment as h}from"react";import{SortableItem as x,DragHandle as b}from"./components/SortableItem/SortableItem.js";import{SortableOverlay as y}from"./components/SortableOverlay/SortableOverlay.js";const S=({nativeEvent:t})=>{let e=t.target;for(;e;){if(e.dataset.noDnd)return!1;e=e.parentElement}return!0};class D extends d{static activators=[{eventName:"onMouseDown",handler:S}]}class I extends s{static activators=[{eventName:"onTouchStart",handler:S}]}function C({items:d,onChange:s,renderItem:x,disabled:b,direction:S}){if(!d)return;const[C,j]=v(null),w=g(()=>d.find(t=>t?.id===C?.id),[C,d]),E=n(r(D,{activationConstraint:{distance:{y:2}}}),r(I,{activationConstraint:{distance:{y:2}}}),r(a,{coordinateGetter:l}));return t(i,{measuring:{droppable:{strategy:o.Always}},sensors:E,onDragStart:({active:t})=>{j(t)},onDragEnd:({active:t,over:e})=>{if(e&&t.id!==e?.id){const n=d.findIndex(({id:e})=>e===t.id),r=d.findIndex(({id:t})=>t===e.id);s(p(d,n,r))}j(null)},onDragCancel:()=>{j(null)},children:[e(c,{items:d,disabled:b,strategy:"horizontal"===S?m:f,children:e(u,{sx:{..."horizontal"===S&&{flexDirection:"row"},display:"flex",m:0,gap:1,padding:0,alignContent:"flex-start"},children:d.map(t=>e(h,{children:x(t)},t.id))})}),e(y,{children:w?x(w,!0,!!C):null})]})}C.Item=x,C.DragHandle=b;export{C as default};

package/dist/esm/systems/WebCore/SortableList/components/SortableItem/SortableItem.js

@@ -1 +1 @@
-import{jsx as t,jsxs as r}from"react/jsx-runtime";import{useSortable as i,defaultAnimateLayoutChanges as e}from"@dnd-kit/sortable";import{CSS as o}from"@dnd-kit/utilities";import{useTheme as a,useMediaQuery as s,Stack as n,Box as m}from"@mui/material";import{createContext as d,useMemo as l,useContext as f}from"react";const c=d({attributes:{},listeners:void 0,ref(){},isMobile:!1}),u=()=>f(c),p=t=>e({...t,wasDragging:!0});function b({children:e,top:d,bottom:f,id:u}){const{attributes:b,isDragging:g,listeners:h,setNodeRef:v,setActivatorNodeRef:A,transform:x,transition:z}=i({id:u,animateLayoutChanges:p}),w=a(),k=s(w.breakpoints.down("md")),y=l(()=>({attributes:b,listeners:h,ref:A,isMobile:k}),[b,h,A,k]),M={opacity:g?.4:void 0,transform:o.Translate.toString(x),transition:z};return t(c.Provider,{value:y,children:r(n,{className:"SortableItem",...b,sx:{position:"relative",...M,width:"100%"},ref:v,children:[d&&d,t(m,{...k?{}:h,sx:{display:"flex",cursor:k?"default":"grab"},children:e}),f&&f]})})}function g(){const{attributes:r,listeners:i,ref:e}=f(c);return t(m,{...r,...i,ref:e,children:t("svg",{viewBox:"0 0 20 20",width:"12",children:t("path",{d:"M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"})})})}export{g as DragHandle,b as SortableItem,u as useSortableItemContext};
+import{jsx as t,jsxs as r}from"react/jsx-runtime";import{useSortable as i,defaultAnimateLayoutChanges as e}from"@dnd-kit/sortable";import{CSS as o}from"@dnd-kit/utilities";import{Stack as n,Box as s}from"@mui/material";import{createContext as a,useMemo as c,useContext as m}from"react";const d=a({attributes:{},listeners:void 0,touchListeners:void 0,ref(){}}),u=()=>m(d),l=t=>e({...t,wasDragging:!0});function f({children:e,top:a,bottom:m,id:u}){const{attributes:f,isDragging:h,listeners:g,setNodeRef:p,setActivatorNodeRef:v,transform:b,transition:A}=i({id:u,animateLayoutChanges:l}),{onTouchStart:x,...z}=g??{},w=c(()=>({attributes:f,listeners:g,touchListeners:x?{onTouchStart:x}:void 0,ref:v}),[f,g,x,v]),L={opacity:h?.4:void 0,transform:o.Translate.toString(b),transition:A};return t(d.Provider,{value:w,children:r(n,{className:"SortableItem",...f,sx:{position:"relative",...L,width:"100%"},ref:p,children:[a&&a,t(s,{...z,sx:{display:"flex",cursor:"grab"},children:e}),m&&m]})})}function h(){const{attributes:r,touchListeners:i,ref:e}=m(d);return t(s,{...r,...i,ref:e,sx:{cursor:"grab",touchAction:"none"},children:t("svg",{viewBox:"0 0 20 20",width:"12",children:t("path",{d:"M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"})})})}export{h as DragHandle,f as SortableItem,u as useSortableItemContext};

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts

@@ -5,40 +5,40 @@ import * as _mui_system from '@mui/system';
 import * as _mui_material from '@mui/material';
 import { SliderGraphBarProps, CommonComponentProps } from '../types.js';
 
-declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "sx" | "alignItems" | "style" | "children" | "autoFocus" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "disableGutters" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
-declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 } & CommonComponentProps & {
     value: number;
     checked: boolean;
 }, {}, {}>;
-declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
-declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 }, {}, {}>;
 declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
@@ -46,7 +46,7 @@ declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.
 } & {
     maxHeight: number;
 } & Partial<SliderGraphBarProps>, {}, {}>;
-declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
     component?: React.ElementType | undefined;
 } & {
     showGraphLines?: boolean;

package/dist/systems/WebCore/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/KbdGroup/Kbd.d.ts

@@ -1,6 +1,8 @@
+import { SxProps, Theme } from '@mui/material';
 import { FunctionComponent, PropsWithChildren } from 'react';
 
 interface KbdProps extends PropsWithChildren {
+    sx?: SxProps<Theme>;
 }
 declare const Kbd: FunctionComponent<KbdProps>;
 

package/dist/systems/WebCore/KbdGroup/Kbd.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("../Text/Text.js");const s=t.styled("kbd")(({theme:e})=>({display:"flex",minWidth:20,boxSizing:"border-box",justifyContent:"center",alignItems:"center",backgroundColor:e.custom.palette.surface.default,border:`1px solid ${e.custom.palette.stroke.light}`,borderRadius:e.spacing(e.custom.radius.sm),padding:"2px 4px"}));module.exports=({children:t})=>e.jsx(s,{children:e.jsx(r.Text,{size:"sm",secondary:!0,sx:{lineHeight:"110%",fontFamily:'"SF Compact", "Segoe UI Symbol", "Segoe Fluent Icons", "Segoe UI Emoji", "Founders Grotesk", sans-serif'},children:t})});
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),s=require("../Text/Text.js");const r=t.styled("kbd")(({theme:e})=>({display:"flex",boxSizing:"border-box",justifyContent:"center",alignItems:"center",height:20,minWidth:20,padding:"0 4px",backgroundColor:e.custom.palette.surface.default,border:`1px solid ${e.custom.palette.stroke.light}`,borderRadius:e.spacing(e.custom.radius.sm)}));module.exports=({children:t,sx:i})=>e.jsx(r,{sx:i,children:e.jsx(s.Text,{size:"sm",secondary:!0,sx:{lineHeight:"110%",fontFamily:'"SF Compact", "Segoe UI Symbol", "Segoe Fluent Icons", "Segoe UI Emoji", "Founders Grotesk", sans-serif'},children:t})});

package/dist/systems/WebCore/RankItem/RankItem.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),r=require("@mui/material"),t=require("../SortableList/components/SortableItem/SortableItem.js"),s=require("../../../utils/breakpoint.hook.js");require("react");var l=require("../../BrandCore/Icon/Icon.js"),a=require("../../BrandCore/primitiveVariables.js");require("../SelectItem/SelectItem.js");var n=require("../Select/Select.js"),o=require("./RankItemContainer.js"),c=require("./RankItemLabel.js");module.exports=({label:d="Placeholder",disabled:u,onChange:m,options:x,fullWidth:g,sizing:p="lg"})=>{const b=r.useTheme(),h=x.map(e=>e.label).indexOf(d),j=s.useBreakpoint(),{attributes:f,listeners:v,ref:I,isMobile:q}=t.useSortableItemContext();return e.jsx(o,{disabled:u,fullWidth:g,sizing:p,children:e.jsxs(r.Stack,{sx:{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",position:"relative",zIndex:1},children:[e.jsxs(r.Box,{sx:{display:"flex",alignItems:"center","& svg":{fill:b.custom.palette.icon.secondary}},children:[e.jsx(r.Box,{ref:q?I:void 0,...q?f:{},...q?v:{},sx:{display:"flex",alignItems:"center",cursor:"grab",touchAction:q?"none":void 0},children:e.jsx(i.DragHandle,{"aria-label":"drag-handle",sx:{width:l.iconSizeMap.lg,height:l.iconSizeMap.lg,mr:b.custom.padding.sm}})}),e.jsx(c,{align:"left",disabled:u,children:d})]}),"lg"===p?e.jsx(n,{name:"rank",sizing:"sm"===j?"md":"xs",selections:x.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:u,value:`${h}`,onChange:function(e){const i=h,r=Number(e.target.value),t=x;let s=1;const l=t.splice(i,s)[0];s=0,t.splice(r,s,l),m(t)},MenuProps:{anchorOrigin:{vertical:a.space[400],horizontal:"center"}},sx:{[`&.${r.selectClasses.root}`]:{width:6*a.base,textAlign:"center"},[`& .${r.typographyClasses.root}`]:{width:"fit-content",overflow:"visible"}}}):void 0]})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),r=require("@mui/material"),t=require("../SortableList/components/SortableItem/SortableItem.js"),s=require("../../../utils/breakpoint.hook.js");require("react");var l=require("../../BrandCore/Icon/Icon.js"),a=require("../../BrandCore/primitiveVariables.js");require("../SelectItem/SelectItem.js");var n=require("../Select/Select.js"),o=require("./RankItemContainer.js"),c=require("./RankItemLabel.js");module.exports=({label:u="Placeholder",disabled:d,onChange:m,options:x,fullWidth:g,sizing:h="lg"})=>{const p=r.useTheme(),b=x.map(e=>e.label).indexOf(u),j=s.useBreakpoint(),{touchListeners:f,ref:v}=t.useSortableItemContext();return e.jsx(o,{disabled:d,fullWidth:g,sizing:h,children:e.jsxs(r.Stack,{sx:{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",position:"relative",zIndex:1},children:[e.jsxs(r.Box,{sx:{display:"flex",alignItems:"center","& svg":{fill:p.custom.palette.icon.secondary}},children:[e.jsx(r.Box,{ref:v,...f,sx:{display:"flex",alignItems:"center",cursor:"grab",touchAction:"none"},children:e.jsx(i.DragHandle,{"aria-label":"drag-handle",sx:{width:l.iconSizeMap.lg,height:l.iconSizeMap.lg,mr:p.custom.padding.sm}})}),e.jsx(c,{align:"left",disabled:d,children:u})]}),"lg"===h?e.jsx(n,{name:"rank",sizing:"sm"===j?"md":"xs",selections:x.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:d,value:`${b}`,onChange:function(e){const i=b,r=Number(e.target.value),t=x;let s=1;const l=t.splice(i,s)[0];s=0,t.splice(r,s,l),m(t)},MenuProps:{anchorOrigin:{vertical:a.space[400],horizontal:"center"}},sx:{[`&.${r.selectClasses.root}`]:{width:6*a.base,textAlign:"center"},[`& .${r.typographyClasses.root}`]:{width:"fit-content",overflow:"visible"}}}):void 0]})})};

package/dist/systems/WebCore/SortableList/SortableList.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@dnd-kit/core"),r=require("@dnd-kit/sortable"),n=require("@mui/material"),a=require("react"),i=require("./components/SortableItem/SortableItem.js"),o=require("./components/SortableOverlay/SortableOverlay.js");const s=({nativeEvent:e})=>{let t=e.target;for(;t;){if(t.dataset.noDnd)return!1;t=t.parentElement}return!0};class d extends t.MouseSensor{static activators=[{eventName:"onMouseDown",handler:s}]}class l extends t.TouchSensor{static activators=[{eventName:"onTouchStart",handler:s}]}function c({items:i,onChange:s,renderItem:c,disabled:u,direction:m}){if(!i)return;const[S,g]=a.useState(null),v=a.useMemo(()=>i.find(e=>e?.id===S?.id),[S,i]),x=n.useTheme(),y=n.useMediaQuery(x.breakpoints.down("md")),b=t.useSensors(t.useSensor(d,{activationConstraint:{distance:{y:2}}}),t.useSensor(l,{activationConstraint:y?{distance:{y:2}}:{delay:0,tolerance:5}}),t.useSensor(t.KeyboardSensor,{coordinateGetter:r.sortableKeyboardCoordinates}));return e.jsxs(t.DndContext,{measuring:{droppable:{strategy:t.MeasuringStrategy.Always}},sensors:b,onDragStart:({active:e})=>{g(e)},onDragEnd:({active:e,over:t})=>{if(t&&e.id!==t?.id){const n=i.findIndex(({id:t})=>t===e.id),a=i.findIndex(({id:e})=>e===t.id);s(r.arrayMove(i,n,a))}g(null)},onDragCancel:()=>{g(null)},children:[e.jsx(r.SortableContext,{items:i,disabled:u,strategy:"horizontal"===m?r.horizontalListSortingStrategy:r.verticalListSortingStrategy,children:e.jsx(n.Stack,{sx:{..."horizontal"===m&&{flexDirection:"row"},display:"flex",m:0,gap:1,padding:0,alignContent:"flex-start"},children:i.map(t=>e.jsx(a.Fragment,{children:c(t)},t.id))})}),e.jsx(o.SortableOverlay,{children:v?c(v,!0,!!S):null})]})}c.Item=i.SortableItem,c.DragHandle=i.DragHandle,module.exports=c;
+"use strict";var e=require("react/jsx-runtime"),t=require("@dnd-kit/core"),r=require("@dnd-kit/sortable"),n=require("@mui/material"),a=require("react"),i=require("./components/SortableItem/SortableItem.js"),o=require("./components/SortableOverlay/SortableOverlay.js");const s=({nativeEvent:e})=>{let t=e.target;for(;t;){if(t.dataset.noDnd)return!1;t=t.parentElement}return!0};class d extends t.MouseSensor{static activators=[{eventName:"onMouseDown",handler:s}]}class l extends t.TouchSensor{static activators=[{eventName:"onTouchStart",handler:s}]}function c({items:i,onChange:s,renderItem:c,disabled:u,direction:S}){if(!i)return;const[m,g]=a.useState(null),v=a.useMemo(()=>i.find(e=>e?.id===m?.id),[m,i]),x=t.useSensors(t.useSensor(d,{activationConstraint:{distance:{y:2}}}),t.useSensor(l,{activationConstraint:{distance:{y:2}}}),t.useSensor(t.KeyboardSensor,{coordinateGetter:r.sortableKeyboardCoordinates}));return e.jsxs(t.DndContext,{measuring:{droppable:{strategy:t.MeasuringStrategy.Always}},sensors:x,onDragStart:({active:e})=>{g(e)},onDragEnd:({active:e,over:t})=>{if(t&&e.id!==t?.id){const n=i.findIndex(({id:t})=>t===e.id),a=i.findIndex(({id:e})=>e===t.id);s(r.arrayMove(i,n,a))}g(null)},onDragCancel:()=>{g(null)},children:[e.jsx(r.SortableContext,{items:i,disabled:u,strategy:"horizontal"===S?r.horizontalListSortingStrategy:r.verticalListSortingStrategy,children:e.jsx(n.Stack,{sx:{..."horizontal"===S&&{flexDirection:"row"},display:"flex",m:0,gap:1,padding:0,alignContent:"flex-start"},children:i.map(t=>e.jsx(a.Fragment,{children:c(t)},t.id))})}),e.jsx(o.SortableOverlay,{children:v?c(v,!0,!!m):null})]})}c.Item=i.SortableItem,c.DragHandle=i.DragHandle,module.exports=c;

package/dist/systems/WebCore/SortableList/components/SortableItem/SortableItem.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@dnd-kit/sortable"),r=require("@dnd-kit/utilities"),i=require("@mui/material"),s=require("react");const a=s.createContext({attributes:{},listeners:void 0,ref(){},isMobile:!1}),o=e=>t.defaultAnimateLayoutChanges({...e,wasDragging:!0});exports.DragHandle=function(){const{attributes:t,listeners:r,ref:o}=s.useContext(a);return e.jsx(i.Box,{...t,...r,ref:o,children:e.jsx("svg",{viewBox:"0 0 20 20",width:"12",children:e.jsx("path",{d:"M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"})})})},exports.SortableItem=function({children:n,top:u,bottom:l,id:d}){const{attributes:c,isDragging:m,listeners:x,setNodeRef:b,setActivatorNodeRef:f,transform:g,transition:h}=t.useSortable({id:d,animateLayoutChanges:o}),p=i.useTheme(),v=i.useMediaQuery(p.breakpoints.down("md")),A=s.useMemo(()=>({attributes:c,listeners:x,ref:f,isMobile:v}),[c,x,f,v]),S={opacity:m?.4:void 0,transform:r.CSS.Translate.toString(g),transition:h};return e.jsx(a.Provider,{value:A,children:e.jsxs(i.Stack,{className:"SortableItem",...c,sx:{position:"relative",...S,width:"100%"},ref:b,children:[u&&u,e.jsx(i.Box,{...v?{}:x,sx:{display:"flex",cursor:v?"default":"grab"},children:n}),l&&l]})})},exports.useSortableItemContext=()=>s.useContext(a);
+"use strict";var t=require("react/jsx-runtime"),e=require("@dnd-kit/sortable"),r=require("@dnd-kit/utilities"),s=require("@mui/material"),i=require("react");const o=i.createContext({attributes:{},listeners:void 0,touchListeners:void 0,ref(){}}),a=t=>e.defaultAnimateLayoutChanges({...t,wasDragging:!0});exports.DragHandle=function(){const{attributes:e,touchListeners:r,ref:a}=i.useContext(o);return t.jsx(s.Box,{...e,...r,ref:a,sx:{cursor:"grab",touchAction:"none"},children:t.jsx("svg",{viewBox:"0 0 20 20",width:"12",children:t.jsx("path",{d:"M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"})})})},exports.SortableItem=function({children:n,top:u,bottom:c,id:d}){const{attributes:l,isDragging:x,listeners:m,setNodeRef:h,setActivatorNodeRef:f,transform:g,transition:b}=e.useSortable({id:d,animateLayoutChanges:a}),{onTouchStart:v,...S}=m??{},A=i.useMemo(()=>({attributes:l,listeners:m,touchListeners:v?{onTouchStart:v}:void 0,ref:f}),[l,m,v,f]),p={opacity:x?.4:void 0,transform:r.CSS.Translate.toString(g),transition:b};return t.jsx(o.Provider,{value:A,children:t.jsxs(s.Stack,{className:"SortableItem",...l,sx:{position:"relative",...p,width:"100%"},ref:h,children:[u&&u,t.jsx(s.Box,{...S,sx:{display:"flex",cursor:"grab"},children:n}),c&&c]})})},exports.useSortableItemContext=()=>i.useContext(o);

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