@useloops/design-system 1.4.666 → 1.4.668
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/WebCore/IconButtonBase.d.ts +1 -1
- package/dist/esm/systems/WebCore/IconButtonBase/IconButton.variant-helpers.js +1 -1
- package/dist/esm/systems/WebCore/IconButtonBase/IconButtonBase.js +1 -1
- package/dist/esm/systems/WebCore/RankItem/RankItem.js +1 -1
- package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts +8 -8
- package/dist/systems/WebCore/IconButtonBase/IconButton.variant-helpers.d.ts +2 -2
- package/dist/systems/WebCore/IconButtonBase/IconButton.variant-helpers.js +1 -1
- package/dist/systems/WebCore/IconButtonBase/IconButtonBase.d.ts +2 -1
- package/dist/systems/WebCore/IconButtonBase/IconButtonBase.js +1 -1
- package/dist/systems/WebCore/IconButtonBase/types.d.ts +2 -1
- package/dist/systems/WebCore/InputFieldBase/InputFieldBase.d.ts +1 -1
- package/dist/systems/WebCore/RankItem/RankItem.js +1 -1
- package/dist/systems/WebCore/Typography/Typography.d.ts +1 -1
- package/dist/theme/theme.hooks.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { IconSizeMap, buttonSizeMap, defaultStyle, elevated, getIconButtonRadius, getIconButtonSizing, getIconSizing, outlined, raised, toggle } from '../systems/WebCore/IconButtonBase/IconButton.variant-helpers.js';
|
|
2
2
|
export { IconButtonBaseProps, default } from '../systems/WebCore/IconButtonBase/IconButtonBase.js';
|
|
3
|
-
export { IconButtonShapeMap, IconButtonSizing, IconButtonVariation } from '../systems/WebCore/IconButtonBase/types.js';
|
|
3
|
+
export { IconButtonShapeMap, IconButtonSizing, IconButtonToggleColor, IconButtonVariation } from '../systems/WebCore/IconButtonBase/types.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{base as o}from"../../BrandCore/primitiveVariables.js";const
|
|
1
|
+
import{base as o}from"../../BrandCore/primitiveVariables.js";const t=o=>({backgroundColor:o.custom.palette.interaction.none,color:o.custom.palette.icon.primary}),e=(o,t)=>({"&.MuiButtonBase-root":{color:t?o.custom.palette.icon.lockedWhite:o.custom.palette.icon.primary,backgroundColor:t?o.custom.palette[t][500]:o.custom.palette.purple[100],"&:focus:before":{backgroundColor:"none"},"&:hover:before":{backgroundColor:o.custom.palette.interaction.hoverOnDark},"&:active:before":{backgroundColor:o.custom.palette.interaction.pressOnDark},"&:focus-visible:before":{backgroundColor:o.custom.palette.surface.transparent},"&.Mui-disabled":{backgroundColor:o.custom.palette.interaction.disabled,"&:before":{color:o.custom.palette.icon.disabled}}}}),r=o=>({backgroundColor:o.custom.palette.surface.raised,border:`1px solid ${o.custom.palette.stroke.default}`,color:o.custom.palette.icon.primary,"&.MuiIconButton-root:disabled":{border:"none"}}),a=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.raised,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),c=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.overlay,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),s=(o,t)=>({borderRadius:"default"===o?t.spacing(t.custom.radius.md):t.custom.radius.round}),u={xs:3*o,sm:3.5*o,md:4*o,lg:5*o,xl:6*o},i=o=>({height:u[o],width:u[o]}),l={xs:2*o,sm:2*o,md:2*o,lg:2.5*o,xl:3*o},n=o=>({height:l[o],width:l[o]});export{l as IconSizeMap,u as buttonSizeMap,t as defaultStyle,c as elevated,s as getIconButtonRadius,i as getIconButtonSizing,n as getIconSizing,r as outlined,a as raised,e as toggle};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{styled as e,IconButton as t}from"@mui/material";import{forwardRef as i}from"react";import{getIconButtonRadius as r,elevated as a,raised as n,outlined as l,toggle as s,defaultStyle as c,getIconSizing as u,getIconButtonSizing as d}from"./IconButton.variant-helpers.js";const m=e(t)(({theme:o,variation:e,shape:t="default",sizing:i})=>({boxSizing:"border-box",transition:"all 200ms ease",overflow:"hidden","&::before":{content:'""',backgroundColor:"transparent",transition:"all 200ms ease",position:"absolute",inset:0,zIndex:1},...t&&{...r(t,o)},...i&&{...d(i)},"&.MuiIconButton-root":{"&:focus:before":{backgroundColor:o.custom.palette.interaction.none},"&:hover:before":{backgroundColor:o.custom.palette.interaction.hover},"&:active:before":{backgroundColor:o.custom.palette.interaction.press},"&:focus-visible":{boxShadow:o.custom.boxShadow.input.focus},"&.Mui-disabled":{"&:before":{backgroundColor:o.custom.palette.interaction.disabled,color:o.custom.palette.icon.disabled},"& .MuiSvgIcon-root":{fill:o.custom.palette.icon.disabled,"& path":{fill:"inherit"}}},"& .MuiSvgIcon-root":{fill:o.custom.palette.icon.primary,...i&&{...u(i)},position:"relative",zIndex:2},..."default"===e&&{...c(o)},..."toggle"===e&&{...s(o)},..."outlined"===e&&{...l(o)},..."raised"===e&&{...n(o)},..."elevated"===e&&{...a(o)},...t&&{...r(t,o)}}})),
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{styled as e,IconButton as t}from"@mui/material";import{forwardRef as i}from"react";import{getIconButtonRadius as r,elevated as a,raised as n,outlined as l,toggle as s,defaultStyle as c,getIconSizing as u,getIconButtonSizing as d}from"./IconButton.variant-helpers.js";const m=e(t)(({theme:o,variation:e,shape:t="default",sizing:i,toggleColor:m})=>({boxSizing:"border-box",transition:"all 200ms ease",overflow:"hidden","&::before":{content:'""',backgroundColor:"transparent",transition:"all 200ms ease",position:"absolute",inset:0,zIndex:1},...t&&{...r(t,o)},...i&&{...d(i)},"&.MuiIconButton-root":{"&:focus:before":{backgroundColor:o.custom.palette.interaction.none},"&:hover:before":{backgroundColor:o.custom.palette.interaction.hover},"&:active:before":{backgroundColor:o.custom.palette.interaction.press},"&:focus-visible":{boxShadow:o.custom.boxShadow.input.focus},"&.Mui-disabled":{"&:before":{backgroundColor:o.custom.palette.interaction.disabled,color:o.custom.palette.icon.disabled},"& .MuiSvgIcon-root":{fill:o.custom.palette.icon.disabled,"& path":{fill:"inherit"}}},"& .MuiSvgIcon-root":{fill:m?o.custom.palette.icon.lockedWhite:o.custom.palette.icon.primary,...i&&{...u(i)},position:"relative",zIndex:2},..."default"===e&&{...c(o)},..."toggle"===e&&{...s(o,m)},..."outlined"===e&&{...l(o)},..."raised"===e&&{...n(o)},..."elevated"===e&&{...a(o)},...t&&{...r(t,o)}}})),p=i((e,t)=>o(m,{ref:t,...e}));export{p as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{DragHandle as t}from"@mui/icons-material";import{useTheme as l,Stack as r,Box as n,typographyClasses as o,selectClasses as a}from"@mui/material";import{iconSizeMap as s}from"../../BrandCore/Icon/Icon.js";import{space as m,base as c}from"../../BrandCore/primitiveVariables.js";import"../SelectItem/SelectItem.js";import d from"../Select/Select.js";import p from"./RankItemContainer.js";import f from"./RankItemLabel.js";const g=({label:g="Placeholder",disabled:h,onChange:u,options:b,fullWidth:x,sizing:v="lg"})=>{const I=l(),j=b.map(e=>e.label).indexOf(g);return e(p,{disabled:h,fullWidth:x,sizing:v,children:i(r,{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",sx:{position:"relative",zIndex:1},children:[i(n,{display:"flex",alignItems:"center",sx:{"& svg":{fill:I.custom.palette.icon.secondary}},children:[e(t,{"aria-label":"drag-handle",sx:{width:s.lg,height:s.lg,mr:I.custom.padding.sm}}),e(f,{align:"left",disabled:h,children:g})]}),"lg"===v?e(d,{name:"rank",sizing:"xs",selections:b.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:h,value:`${j}`,onChange:function(e){const i=j,t=Number(e.target.value),l=b;let r=1;const n=l.splice(i,r)[0];r=0,l.splice(t,r,n),u(l)},MenuProps:{anchorOrigin:{vertical:m[400],horizontal:"center"}},sx:{[`&.${a.root}`]:{width:6*c,textAlign:"center"},[`& .${o.root}`]:{width:"fit-content",overflow:"visible"}}}):void 0]})})};export{g as default};
|
|
@@ -5,40 +5,40 @@ import * as _mui_system from '@mui/system';
|
|
|
5
5
|
import * as _mui_material from '@mui/material';
|
|
6
6
|
import { SliderGraphBarProps, CommonComponentProps } from '../types.js';
|
|
7
7
|
|
|
8
|
-
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
|
|
8
|
+
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> & {
|
|
9
9
|
component?: React.ElementType | undefined;
|
|
10
10
|
} & {
|
|
11
11
|
maxHeight: number;
|
|
12
12
|
} & {
|
|
13
13
|
responsive?: boolean;
|
|
14
14
|
}, {}, {}>;
|
|
15
|
-
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>, "
|
|
15
|
+
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> & {
|
|
16
16
|
component?: React.ElementType | undefined;
|
|
17
17
|
} & {
|
|
18
18
|
maxHeight: number;
|
|
19
19
|
} & {
|
|
20
20
|
responsive?: boolean;
|
|
21
21
|
}, {}, {}>;
|
|
22
|
-
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
|
|
22
|
+
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> & {
|
|
23
23
|
component?: React.ElementType | undefined;
|
|
24
24
|
} & {
|
|
25
25
|
maxHeight: number;
|
|
26
26
|
} & {
|
|
27
27
|
responsive?: boolean;
|
|
28
28
|
}, {}, {}>;
|
|
29
|
-
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
|
|
29
|
+
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> & {
|
|
30
30
|
component?: React.ElementType | undefined;
|
|
31
31
|
}, {}, {}>;
|
|
32
|
-
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
|
|
32
|
+
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> & {
|
|
33
33
|
component?: React.ElementType | undefined;
|
|
34
34
|
} & CommonComponentProps & {
|
|
35
35
|
value: number;
|
|
36
36
|
checked: boolean;
|
|
37
37
|
}, {}, {}>;
|
|
38
|
-
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
|
|
38
|
+
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> & {
|
|
39
39
|
component?: React.ElementType | undefined;
|
|
40
40
|
}, {}, {}>;
|
|
41
|
-
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
|
|
41
|
+
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> & {
|
|
42
42
|
component?: React.ElementType | undefined;
|
|
43
43
|
}, {}, {}>;
|
|
44
44
|
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.
|
|
|
46
46
|
} & {
|
|
47
47
|
maxHeight: number;
|
|
48
48
|
} & Partial<SliderGraphBarProps>, {}, {}>;
|
|
49
|
-
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
|
|
49
|
+
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> & {
|
|
50
50
|
component?: React.ElementType | undefined;
|
|
51
51
|
} & {
|
|
52
52
|
showGraphLines?: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Theme, CSSObject } from '@mui/material';
|
|
2
|
-
import { IconButtonShapeMap, IconButtonSizing } from './types.js';
|
|
2
|
+
import { IconButtonToggleColor, IconButtonShapeMap, IconButtonSizing } from './types.js';
|
|
3
3
|
|
|
4
4
|
declare const defaultStyle: (theme: Theme) => CSSObject;
|
|
5
|
-
declare const toggle: (theme: Theme) => CSSObject;
|
|
5
|
+
declare const toggle: (theme: Theme, toggleColor?: IconButtonToggleColor) => CSSObject;
|
|
6
6
|
declare const outlined: (theme: Theme) => CSSObject;
|
|
7
7
|
declare const raised: (theme: Theme) => CSSObject;
|
|
8
8
|
declare const elevated: (theme: Theme) => CSSObject;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var o=require("../../BrandCore/primitiveVariables.js");const e={xs:3*o.base,sm:3.5*o.base,md:4*o.base,lg:5*o.base,xl:6*o.base},t={xs:2*o.base,sm:2*o.base,md:2*o.base,lg:2.5*o.base,xl:3*o.base};exports.IconSizeMap=t,exports.buttonSizeMap=e,exports.defaultStyle=o=>({backgroundColor:o.custom.palette.interaction.none,color:o.custom.palette.icon.primary}),exports.elevated=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.overlay,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),exports.getIconButtonRadius=(o,e)=>({borderRadius:"default"===o?e.spacing(e.custom.radius.md):e.custom.radius.round}),exports.getIconButtonSizing=o=>({height:e[o],width:e[o]}),exports.getIconSizing=o=>({height:t[o],width:t[o]}),exports.outlined=o=>({backgroundColor:o.custom.palette.surface.raised,border:`1px solid ${o.custom.palette.stroke.default}`,color:o.custom.palette.icon.primary,"&.MuiIconButton-root:disabled":{border:"none"}}),exports.raised=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.raised,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),exports.toggle=o=>({"&.MuiButtonBase-root":{color:o.custom.palette.icon.primary,backgroundColor:o.custom.palette.purple[100],"&:focus:before":{backgroundColor:"none"},"&:hover:before":{backgroundColor:o.custom.palette.interaction.hoverOnDark},"&:active:before":{backgroundColor:o.custom.palette.interaction.pressOnDark},"&:focus-visible:before":{backgroundColor:o.custom.palette.surface.transparent},"&.Mui-disabled":{backgroundColor:o.custom.palette.interaction.disabled,"&:before":{color:o.custom.palette.icon.disabled}}}});
|
|
1
|
+
"use strict";var o=require("../../BrandCore/primitiveVariables.js");const e={xs:3*o.base,sm:3.5*o.base,md:4*o.base,lg:5*o.base,xl:6*o.base},t={xs:2*o.base,sm:2*o.base,md:2*o.base,lg:2.5*o.base,xl:3*o.base};exports.IconSizeMap=t,exports.buttonSizeMap=e,exports.defaultStyle=o=>({backgroundColor:o.custom.palette.interaction.none,color:o.custom.palette.icon.primary}),exports.elevated=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.overlay,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),exports.getIconButtonRadius=(o,e)=>({borderRadius:"default"===o?e.spacing(e.custom.radius.md):e.custom.radius.round}),exports.getIconButtonSizing=o=>({height:e[o],width:e[o]}),exports.getIconSizing=o=>({height:t[o],width:t[o]}),exports.outlined=o=>({backgroundColor:o.custom.palette.surface.raised,border:`1px solid ${o.custom.palette.stroke.default}`,color:o.custom.palette.icon.primary,"&.MuiIconButton-root:disabled":{border:"none"}}),exports.raised=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.raised,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),exports.toggle=(o,e)=>({"&.MuiButtonBase-root":{color:e?o.custom.palette.icon.lockedWhite:o.custom.palette.icon.primary,backgroundColor:e?o.custom.palette[e][500]:o.custom.palette.purple[100],"&:focus:before":{backgroundColor:"none"},"&:hover:before":{backgroundColor:o.custom.palette.interaction.hoverOnDark},"&:active:before":{backgroundColor:o.custom.palette.interaction.pressOnDark},"&:focus-visible:before":{backgroundColor:o.custom.palette.surface.transparent},"&.Mui-disabled":{backgroundColor:o.custom.palette.interaction.disabled,"&:before":{color:o.custom.palette.icon.disabled}}}});
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { IconButtonProps } from '@mui/material';
|
|
3
|
-
import { IconButtonVariation, IconButtonShapeMap, IconButtonSizing } from './types.js';
|
|
3
|
+
import { IconButtonVariation, IconButtonShapeMap, IconButtonSizing, IconButtonToggleColor } from './types.js';
|
|
4
4
|
|
|
5
5
|
interface IconButtonBaseProps extends IconButtonProps {
|
|
6
6
|
variation?: IconButtonVariation;
|
|
7
7
|
shape?: IconButtonShapeMap;
|
|
8
8
|
sizing?: IconButtonSizing;
|
|
9
|
+
toggleColor?: IconButtonToggleColor;
|
|
9
10
|
}
|
|
10
11
|
declare const IconButtonBase: react.ForwardRefExoticComponent<Omit<IconButtonBaseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
11
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),o=require("@mui/material"),t=require("react"),i=require("./IconButton.variant-helpers.js");const r=o.styled(o.IconButton)(({theme:e,variation:o,shape:t="default",sizing:r})=>({boxSizing:"border-box",transition:"all 200ms ease",overflow:"hidden","&::before":{content:'""',backgroundColor:"transparent",transition:"all 200ms ease",position:"absolute",inset:0,zIndex:1},...t&&{...i.getIconButtonRadius(t,e)},...r&&{...i.getIconButtonSizing(r)},"&.MuiIconButton-root":{"&:focus:before":{backgroundColor:e.custom.palette.interaction.none},"&:hover:before":{backgroundColor:e.custom.palette.interaction.hover},"&:active:before":{backgroundColor:e.custom.palette.interaction.press},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus},"&.Mui-disabled":{"&:before":{backgroundColor:e.custom.palette.interaction.disabled,color:e.custom.palette.icon.disabled},"& .MuiSvgIcon-root":{fill:e.custom.palette.icon.disabled,"& path":{fill:"inherit"}}},"& .MuiSvgIcon-root":{fill:e.custom.palette.icon.primary,...r&&{...i.getIconSizing(r)},position:"relative",zIndex:2},..."default"===o&&{...i.defaultStyle(e)},..."toggle"===o&&{...i.toggle(e)},..."outlined"===o&&{...i.outlined(e)},..."raised"===o&&{...i.raised(e)},..."elevated"===o&&{...i.elevated(e)},...t&&{...i.getIconButtonRadius(t,e)}}})),n=t.forwardRef((o,t)=>e.jsx(r,{ref:t,...o}));module.exports=n;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),o=require("@mui/material"),t=require("react"),i=require("./IconButton.variant-helpers.js");const r=o.styled(o.IconButton)(({theme:e,variation:o,shape:t="default",sizing:r,toggleColor:n})=>({boxSizing:"border-box",transition:"all 200ms ease",overflow:"hidden","&::before":{content:'""',backgroundColor:"transparent",transition:"all 200ms ease",position:"absolute",inset:0,zIndex:1},...t&&{...i.getIconButtonRadius(t,e)},...r&&{...i.getIconButtonSizing(r)},"&.MuiIconButton-root":{"&:focus:before":{backgroundColor:e.custom.palette.interaction.none},"&:hover:before":{backgroundColor:e.custom.palette.interaction.hover},"&:active:before":{backgroundColor:e.custom.palette.interaction.press},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus},"&.Mui-disabled":{"&:before":{backgroundColor:e.custom.palette.interaction.disabled,color:e.custom.palette.icon.disabled},"& .MuiSvgIcon-root":{fill:e.custom.palette.icon.disabled,"& path":{fill:"inherit"}}},"& .MuiSvgIcon-root":{fill:n?e.custom.palette.icon.lockedWhite:e.custom.palette.icon.primary,...r&&{...i.getIconSizing(r)},position:"relative",zIndex:2},..."default"===o&&{...i.defaultStyle(e)},..."toggle"===o&&{...i.toggle(e,n)},..."outlined"===o&&{...i.outlined(e)},..."raised"===o&&{...i.raised(e)},..."elevated"===o&&{...i.elevated(e)},...t&&{...i.getIconButtonRadius(t,e)}}})),n=t.forwardRef((o,t)=>e.jsx(r,{ref:t,...o}));module.exports=n;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
type IconButtonSizing = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2
2
|
type IconButtonShapeMap = 'default' | 'round';
|
|
3
3
|
type IconButtonVariation = 'default' | 'toggle' | 'outlined' | 'raised' | 'elevated';
|
|
4
|
+
type IconButtonToggleColor = 'purple' | 'red' | 'yellow' | 'green';
|
|
4
5
|
|
|
5
|
-
export type { IconButtonShapeMap, IconButtonSizing, IconButtonVariation };
|
|
6
|
+
export type { IconButtonShapeMap, IconButtonSizing, IconButtonToggleColor, IconButtonVariation };
|
|
@@ -6,7 +6,7 @@ import { TextFieldProps } from '@mui/material';
|
|
|
6
6
|
type InputFieldBaseProps = TextFieldProps;
|
|
7
7
|
declare const InputFieldBase: _emotion_styled.StyledComponent<{
|
|
8
8
|
variant?: _mui_material.TextFieldVariants | undefined;
|
|
9
|
-
} & Omit<_mui_material.
|
|
9
|
+
} & Omit<_mui_material.FilledTextFieldProps | _mui_material.OutlinedTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
|
|
10
10
|
|
|
11
11
|
export { InputFieldBase as default };
|
|
12
12
|
export type { InputFieldBaseProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),l=require("@mui/material"),r=require("../../BrandCore/Icon/Icon.js"),s=require("../../BrandCore/primitiveVariables.js");require("../SelectItem/SelectItem.js");var t=require("../Select/Select.js"),a=require("./RankItemContainer.js"),n=require("./RankItemLabel.js");module.exports=({label:o="Placeholder",disabled:c,onChange:d,options:u,fullWidth:m,sizing:g="lg"})=>{const x=l.useTheme(),h=u.map(e=>e.label).indexOf(o);return e.jsx(a,{disabled:c,fullWidth:m,sizing:g,children:e.jsxs(l.Stack,{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",sx:{position:"relative",zIndex:1},children:[e.jsxs(l.Box,{display:"flex",alignItems:"center",sx:{"& svg":{fill:x.custom.palette.icon.secondary}},children:[e.jsx(i.DragHandle,{"aria-label":"drag-handle",sx:{width:r.iconSizeMap.lg,height:r.iconSizeMap.lg,mr:x.custom.padding.sm}}),e.jsx(n,{align:"left",disabled:c,children:o})]}),"lg"===g?e.jsx(t,{name:"rank",sizing:"xs",selections:u.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:c,value:`${h}`,onChange:function(e){const i=h,l=Number(e.target.value),r=u;let s=1;const t=r.splice(i,s)[0];s=0,r.splice(l,s,t),d(r)},MenuProps:{anchorOrigin:{vertical:s.space[400],horizontal:"center"}},sx:{[`&.${l.selectClasses.root}`]:{width:6*s.base,textAlign:"center"},[`& .${l.typographyClasses.root}`]:{width:"fit-content"}}}):void 0]})})};
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),l=require("@mui/material"),r=require("../../BrandCore/Icon/Icon.js"),s=require("../../BrandCore/primitiveVariables.js");require("../SelectItem/SelectItem.js");var t=require("../Select/Select.js"),a=require("./RankItemContainer.js"),n=require("./RankItemLabel.js");module.exports=({label:o="Placeholder",disabled:c,onChange:d,options:u,fullWidth:m,sizing:g="lg"})=>{const x=l.useTheme(),h=u.map(e=>e.label).indexOf(o);return e.jsx(a,{disabled:c,fullWidth:m,sizing:g,children:e.jsxs(l.Stack,{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",sx:{position:"relative",zIndex:1},children:[e.jsxs(l.Box,{display:"flex",alignItems:"center",sx:{"& svg":{fill:x.custom.palette.icon.secondary}},children:[e.jsx(i.DragHandle,{"aria-label":"drag-handle",sx:{width:r.iconSizeMap.lg,height:r.iconSizeMap.lg,mr:x.custom.padding.sm}}),e.jsx(n,{align:"left",disabled:c,children:o})]}),"lg"===g?e.jsx(t,{name:"rank",sizing:"xs",selections:u.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:c,value:`${h}`,onChange:function(e){const i=h,l=Number(e.target.value),r=u;let s=1;const t=r.splice(i,s)[0];s=0,r.splice(l,s,t),d(r)},MenuProps:{anchorOrigin:{vertical:s.space[400],horizontal:"center"}},sx:{[`&.${l.selectClasses.root}`]:{width:6*s.base,textAlign:"center"},[`& .${l.typographyClasses.root}`]:{width:"fit-content",overflow:"visible"}}}):void 0]})})};
|
|
@@ -14,7 +14,7 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
|
|
|
14
14
|
textColor?: string;
|
|
15
15
|
ai?: boolean;
|
|
16
16
|
}
|
|
17
|
-
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<
|
|
17
|
+
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
|
|
18
18
|
|
|
19
19
|
export { Typography as default };
|
|
20
20
|
export type { TypographyProps };
|
|
@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
|
|
|
4
4
|
import { ScreenSize, CustomTheme } from './types.js';
|
|
5
5
|
|
|
6
6
|
declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
|
|
7
|
-
breakpoint: "" | "sm" | "
|
|
7
|
+
breakpoint: "" | "sm" | "md" | "lg" | "xl";
|
|
8
8
|
custom: CustomTheme;
|
|
9
9
|
gridOverlayVisible: boolean;
|
|
10
10
|
mode: PaletteMode;
|