@useloops/design-system 1.4.667 → 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.
Files changed (13) hide show
  1. package/dist/WebCore/IconButtonBase.d.ts +1 -1
  2. package/dist/esm/systems/WebCore/IconButtonBase/IconButton.variant-helpers.js +1 -1
  3. package/dist/esm/systems/WebCore/IconButtonBase/IconButtonBase.js +1 -1
  4. package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts +8 -8
  5. package/dist/systems/WebCore/IconButtonBase/IconButton.variant-helpers.d.ts +2 -2
  6. package/dist/systems/WebCore/IconButtonBase/IconButton.variant-helpers.js +1 -1
  7. package/dist/systems/WebCore/IconButtonBase/IconButtonBase.d.ts +2 -1
  8. package/dist/systems/WebCore/IconButtonBase/IconButtonBase.js +1 -1
  9. package/dist/systems/WebCore/IconButtonBase/types.d.ts +2 -1
  10. package/dist/systems/WebCore/InputFieldBase/InputFieldBase.d.ts +1 -1
  11. package/dist/systems/WebCore/Typography/Typography.d.ts +1 -1
  12. package/dist/theme/theme.hooks.d.ts +1 -1
  13. package/package.json +1 -1
package/dist/WebCore/IconButtonBase.d.ts CHANGED
@@ -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';
package/dist/esm/systems/WebCore/IconButtonBase/IconButton.variant-helpers.js CHANGED
@@ -1 +1 @@
1
- import{base as o}from"../../BrandCore/primitiveVariables.js";const e=o=>({backgroundColor:o.custom.palette.interaction.none,color:o.custom.palette.icon.primary}),t=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}}}}),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,e)=>({borderRadius:"default"===o?e.spacing(e.custom.radius.md):e.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,e as defaultStyle,c as elevated,s as getIconButtonRadius,i as getIconButtonSizing,n as getIconSizing,r as outlined,a as raised,t as toggle};
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};
package/dist/esm/systems/WebCore/IconButtonBase/IconButtonBase.js CHANGED
@@ -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)}}})),b=i((e,t)=>o(m,{ref:t,...e}));export{b as default};
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};
package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts CHANGED
@@ -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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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 _mui_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
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;
package/dist/systems/WebCore/IconButtonBase/IconButton.variant-helpers.d.ts CHANGED
@@ -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;
package/dist/systems/WebCore/IconButtonBase/IconButton.variant-helpers.js CHANGED
@@ -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}}}});
package/dist/systems/WebCore/IconButtonBase/IconButtonBase.d.ts CHANGED
@@ -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
 
package/dist/systems/WebCore/IconButtonBase/IconButtonBase.js CHANGED
@@ -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;
package/dist/systems/WebCore/IconButtonBase/types.d.ts CHANGED
@@ -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 };
package/dist/systems/WebCore/InputFieldBase/InputFieldBase.d.ts CHANGED
@@ -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.OutlinedTextFieldProps | _mui_material.FilledTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;
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 };
package/dist/systems/WebCore/Typography/Typography.d.ts CHANGED
@@ -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<HTMLHeadingElement | HTMLParagraphElement>>;
17
+ declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
18
18
 
19
19
  export { Typography as default };
20
20
  export type { TypographyProps };
package/dist/theme/theme.hooks.d.ts CHANGED
@@ -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" | "lg" | "md" | "xl";
7
+ breakpoint: "" | "sm" | "md" | "lg" | "xl";
8
8
  custom: CustomTheme;
9
9
  gridOverlayVisible: boolean;
10
10
  mode: PaletteMode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useloops/design-system",
3
- "version": "1.4.667",
3
+ "version": "1.4.668",
4
4
  "description": "The official React based Loops design system",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",