@useloops/design-system 1.4.565 → 1.4.567
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/esm/systems/WebCore/HtmlParser/HtmlParser.js +1 -1
- package/dist/esm/systems/WebCore/RichTextField/RichTextField.js +1 -1
- package/dist/esm/theme/theme.js +1 -1
- package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts +8 -8
- package/dist/systems/WebCore/HtmlParser/HtmlParser.js +1 -1
- package/dist/systems/WebCore/InputFieldBase/InputFieldBase.d.ts +1 -1
- package/dist/systems/WebCore/RichTextField/RichTextField.d.ts +9 -1
- package/dist/systems/WebCore/RichTextField/RichTextField.js +1 -1
- package/dist/systems/WebCore/Typography/Typography.d.ts +1 -1
- package/dist/theme/theme.hooks.d.ts +1 -1
- package/dist/theme/theme.js +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as r}from"react/jsx-runtime";import{Box as e}from"@mui/material";import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{Box as e}from"@mui/material";import i,{domToReact as n}from"html-react-parser";import t from"../Typography/Typography.js";const o=({children:o,typographyProps:l={variation:"lg",component:"p"}})=>{const p=(r=>{const e=r.replaceAll(/<p><\/p>/g,"<br />");return/<(p|div|h[1-6]|ul|ol|li|blockquote)[\s>]/i.test(e)?e:`<p>${e}</p>`})(o),a={replace(i){const o=i;if(o.attribs){if("p"===o.name)return r(t,{...l,children:n(o.children,a)});if("ul"===o.name)return r(e,{component:"ul",sx:{margin:0,pl:4},children:n(o.children,a)});if("ol"===o.name)return r(e,{component:"ol",sx:{margin:0,pl:4},children:n(o.children,a)});if("li"===o.name)return r(e,{component:"li",sx:{...l?.sx||{},fontSize:"inherit",lineHeight:"inherit"},children:n(o.children,a)})}}};return r(e,{sx:{overflowWrap:"break-word",whiteSpace:"pre-wrap"},children:i(p,a)})};export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useTheme as
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useTheme as i,Stack as o}from"@mui/material";import{Placeholder as r}from"@tiptap/extension-placeholder";import n from"@tiptap/extension-underline";import{StarterKit as l}from"@tiptap/starter-kit";import{MenuButtonBold as a,MenuButtonItalic as m,MenuButtonUnderline as d,MenuButtonBulletedList as p,MenuButtonOrderedList as s}from"mui-tiptap";import{useRef as c}from"react";import u from"./StyledRichTextEditor.js";const h=({onChange:h,value:f,internalChange:g,minWidth:x=100,minHeight:b=100,maxHeight:H,placeholder:L,options:k={}})=>{const C=c(null),R=i(),{bold:j=!0,italic:v=!0,underline:w=!0,bulletList:I=!1,orderedList:M=!1}=k;return t(u,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:b,minWidth:x,maxHeight:H}},ref:C,onUpdate:({editor:t})=>{h&&h(t.getHTML()),g&&g()},enableInputRules:!1,extensions:[l.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!j&&{},italic:!!v&&{},listItem:!(!I&&!M)&&{},bulletList:!!I&&{},orderedList:!!M&&{}}),r.configure({placeholder:L}),...w?[n]:[]],content:f,renderControls:()=>e(o,{gap:R.custom.margin.xs,direction:"row",children:[j&&t(a,{}),v&&t(m,{}),w&&t(d,{}),I&&t(p,{}),M&&t(s,{})]})})};export{h as default};
|
package/dist/esm/theme/theme.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createTheme as t}from"@mui/material";import{greenRamp as e,blueRamp as o,yellowRamp as a,peachRamp as
|
|
1
|
+
import{createTheme as t}from"@mui/material";import{greenRamp as e,blueRamp as o,yellowRamp as a,peachRamp as r,redRamp as n,purpleRamp as i,neutralRamp as s}from"../systems/BrandCore/colorRamps.js";import{purple as l,neutralAlpha as d,darkNeutralAlpha as p}from"../systems/BrandCore/primitiveColor.js";import{breakpoints as f,base as m,easing as u,boxShadow as c,elevationFilter as y,elevation as g,radius as h,padding as b,margin as w}from"../systems/BrandCore/primitiveVariables.js";import{semantic as $}from"../systems/BrandCore/semanticColor.js";import{fonts as v}from"../systems/BrandCore/typography.js";import{typographyVariants as k,typographyVariantMap as x}from"../systems/WebCore/utils/typography.util.js";const F="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/",C=(C,R,G)=>t({direction:G,custom:{palette:{black:"#000000",white:"#ffffff",neutral:s[C],neutralAlpha:"light"===C?d:p,purple:i[C],red:n[C],peach:r[C],yellow:a[C],blue:o[C],green:e[C],icon:$[C].icon,interaction:$[C].interaction,stroke:$[C].stroke,surface:$[C].surface,text:$[C].text,input:$[C].input,skeleton:$[C].skeleton,data:$[C].data,body:$[C].surface.default},margin:w,padding:b,radius:h,elevation:g,elevationFilter:y,boxShadow:c,easing:u,typography:x[R]},palette:{mode:C,primary:{main:l[500]}},spacing:m,shape:{borderRadius:m,hotspot:{default:12,active:24}},breakpoints:{values:f},typography:{fontFamily:`"${v.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:k(R),styleOverrides:{root:{color:$[C].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n @font-face {\n font-family: '${v.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.Domaine.default.weight};\n src: url(${F}${v.Domaine.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.Domaine.bold.weight};\n src: url(${F}${v.Domaine.bold.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.FoundersGrotesk.default.weight};\n src: url(${F}${v.FoundersGrotesk.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${v.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${v.FoundersGrotesk.bold.weight};\n src: url(${F}${v.FoundersGrotesk.bold.fileName}) format('woff2');\n }\n `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${f.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${f.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:v.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*m}px ${t.padding.md*m}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});export{C as customTheme};
|
|
@@ -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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
9
9
|
component?: React.ElementType;
|
|
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>, "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> & {
|
|
16
16
|
component?: React.ElementType;
|
|
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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
23
23
|
component?: React.ElementType;
|
|
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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
30
30
|
component?: React.ElementType;
|
|
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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
33
33
|
component?: React.ElementType;
|
|
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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
39
39
|
component?: React.ElementType;
|
|
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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
42
42
|
component?: React.ElementType;
|
|
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_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_material_OverridableComponent.CommonProps | keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
|
|
50
50
|
component?: React.ElementType;
|
|
51
51
|
} & {
|
|
52
52
|
showGraphLines?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("html-react-parser"),n=require("../Typography/Typography.js");function o(e){return e&&e.__esModule?e:{default:e}}var t=o(i);module.exports=({children:o,typographyProps:l={variation:"lg",component:"p"}})=>{const a=(e=>{const r=e.replaceAll(/<p><\/p>/g,"<br />");return/<(p|div|h[1-6]|ul|ol|li|blockquote)[\s>]/i.test(r)?r:`<p>${r}</p>`})(o),c={replace(o){const t=o;if(t.attribs){if("p"===t.name)return e.jsx(n,{...l,children:i.domToReact(t.children,c)});if("ul"===t.name)return e.jsx(r.Box,{component:"ul",sx:{margin:0,pl:4},children:i.domToReact(t.children,c)});if("ol"===t.name)return e.jsx(r.Box,{component:"ol",sx:{margin:0,pl:4},children:i.domToReact(t.children,c)});if("li"===t.name)return e.jsx(r.Box,{component:"li",sx:{...l?.sx||{},fontSize:"inherit",lineHeight:"inherit"},children:i.domToReact(t.children,c)})}}};return e.jsx(r.Box,{sx:{overflowWrap:"break-word",whiteSpace:"pre-wrap"},children:t.default(a,c)})};
|
|
@@ -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.OutlinedTextFieldProps | _mui_material.FilledTextFieldProps | _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,6 +1,13 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
2
|
import { InputFieldBaseProps } from '../InputFieldBase/InputFieldBase.js';
|
|
3
3
|
|
|
4
|
+
type RichTextFieldOptions = {
|
|
5
|
+
bold?: boolean;
|
|
6
|
+
italic?: boolean;
|
|
7
|
+
underline?: boolean;
|
|
8
|
+
bulletList?: boolean;
|
|
9
|
+
orderedList?: boolean;
|
|
10
|
+
};
|
|
4
11
|
type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
|
|
5
12
|
onChange?: (content: string) => void;
|
|
6
13
|
internalChange?: () => void;
|
|
@@ -8,8 +15,9 @@ type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
|
|
|
8
15
|
minWidth?: number;
|
|
9
16
|
maxHeight?: number;
|
|
10
17
|
value: string;
|
|
18
|
+
options?: RichTextFieldOptions;
|
|
11
19
|
};
|
|
12
20
|
declare const RichTextField: FunctionComponent<RichTextFieldProps>;
|
|
13
21
|
|
|
14
22
|
export { RichTextField as default };
|
|
15
|
-
export type { RichTextFieldProps };
|
|
23
|
+
export type { RichTextFieldOptions, RichTextFieldProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@tiptap/extension-placeholder"),i=require("@tiptap/extension-underline"),n=require("@tiptap/starter-kit"),o=require("mui-tiptap"),u=require("react"),l=require("./StyledRichTextEditor.js");function
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@tiptap/extension-placeholder"),i=require("@tiptap/extension-underline"),n=require("@tiptap/starter-kit"),o=require("mui-tiptap"),u=require("react"),l=require("./StyledRichTextEditor.js");function s(e){return e&&e.__esModule?e:{default:e}}var a=s(i);module.exports=({onChange:i,value:s,internalChange:d,minWidth:c=100,minHeight:h=100,maxHeight:x,placeholder:p,options:m={}})=>{const g=u.useRef(null),j=t.useTheme(),{bold:q=!0,italic:f=!0,underline:B=!0,bulletList:M=!1,orderedList:L=!1}=m;return e.jsx(l,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:h,minWidth:c,maxHeight:x}},ref:g,onUpdate:({editor:e})=>{i&&i(e.getHTML()),d&&d()},enableInputRules:!1,extensions:[n.StarterKit.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!q&&{},italic:!!f&&{},listItem:!(!M&&!L)&&{},bulletList:!!M&&{},orderedList:!!L&&{}}),r.Placeholder.configure({placeholder:p}),...B?[a.default]:[]],content:s,renderControls:()=>e.jsxs(t.Stack,{gap:j.custom.margin.xs,direction:"row",children:[q&&e.jsx(o.MenuButtonBold,{}),f&&e.jsx(o.MenuButtonItalic,{}),B&&e.jsx(o.MenuButtonUnderline,{}),M&&e.jsx(o.MenuButtonBulletedList,{}),L&&e.jsx(o.MenuButtonOrderedList,{})]})})};
|
|
@@ -12,7 +12,7 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
|
|
|
12
12
|
secondary?: boolean;
|
|
13
13
|
textColor?: string;
|
|
14
14
|
}
|
|
15
|
-
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<
|
|
15
|
+
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;
|
|
16
16
|
|
|
17
17
|
export { Typography as default };
|
|
18
18
|
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" | "lg" | "md" | "xl";
|
|
8
8
|
custom: CustomTheme;
|
|
9
9
|
gridOverlayVisible: boolean;
|
|
10
10
|
mode: PaletteMode;
|
package/dist/theme/theme.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("@mui/material"),e=require("../systems/BrandCore/colorRamps.js"),a=require("../systems/BrandCore/primitiveColor.js"),
|
|
1
|
+
"use strict";var t=require("@mui/material"),e=require("../systems/BrandCore/colorRamps.js"),a=require("../systems/BrandCore/primitiveColor.js"),o=require("../systems/BrandCore/primitiveVariables.js"),n=require("../systems/BrandCore/semanticColor.js"),r=require("../systems/BrandCore/typography.js"),i=require("../systems/WebCore/utils/typography.util.js");const s="https://useloops-public.s3.eu-west-2.amazonaws.com/public/fonts/";exports.customTheme=(l,p,d)=>t.createTheme({direction:d,custom:{palette:{black:"#000000",white:"#ffffff",neutral:e.neutralRamp[l],neutralAlpha:"light"===l?a.neutralAlpha:a.darkNeutralAlpha,purple:e.purpleRamp[l],red:e.redRamp[l],peach:e.peachRamp[l],yellow:e.yellowRamp[l],blue:e.blueRamp[l],green:e.greenRamp[l],icon:n.semantic[l].icon,interaction:n.semantic[l].interaction,stroke:n.semantic[l].stroke,surface:n.semantic[l].surface,text:n.semantic[l].text,input:n.semantic[l].input,skeleton:n.semantic[l].skeleton,data:n.semantic[l].data,body:n.semantic[l].surface.default},margin:o.margin,padding:o.padding,radius:o.radius,elevation:o.elevation,elevationFilter:o.elevationFilter,boxShadow:o.boxShadow,easing:o.easing,typography:i.typographyVariantMap[p]},palette:{mode:l,primary:{main:a.purple[500]}},spacing:o.base,shape:{borderRadius:o.base,hotspot:{default:12,active:24}},breakpoints:{values:o.breakpoints},typography:{fontFamily:`"${r.fonts.FoundersGrotesk.name}", "Helvetica", "sans-serif"`},components:{MuiTypography:{variants:i.typographyVariants(p),styleOverrides:{root:{color:n.semantic[l].text.primary,letterSpacing:0,lineHeight:"140%"}}},MuiCssBaseline:{styleOverrides:t=>`\n\t\t\t\t\tbody {\n\t\t\t\t\t\tbackground: ${t.custom.palette.body};\n\t\t\t\t\t\tmin-width: 320px;\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t}\n\t\t\t\t\tb {\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t}\n @font-face {\n font-family: '${r.fonts.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.Domaine.default.weight};\n src: url(${s}${r.fonts.Domaine.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.Domaine.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.Domaine.bold.weight};\n src: url(${s}${r.fonts.Domaine.bold.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.FoundersGrotesk.default.weight};\n src: url(${s}${r.fonts.FoundersGrotesk.default.fileName}) format('woff2');\n }\n @font-face {\n font-family: '${r.fonts.FoundersGrotesk.name}';\n font-style: normal;\n font-display: swap;\n font-weight: ${r.fonts.FoundersGrotesk.bold.weight};\n src: url(${s}${r.fonts.FoundersGrotesk.bold.fileName}) format('woff2');\n }\n `},MuiContainer:{defaultProps:{maxWidth:"xl",disableGutters:!0},styleOverrides:{root:{paddingLeft:16,paddingRight:16,[`@media (min-width: ${o.breakpoints.md}px)`]:{paddingLeft:24,paddingRight:24},[`@media (min-width: ${o.breakpoints.lg}px)`]:{paddingLeft:48,paddingRight:48}}}},MuiButtonBase:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiButton:{defaultProps:{disableTouchRipple:!0,disableRipple:!0}},MuiTooltip:{styleOverrides:{arrow:({theme:{custom:t}})=>({color:t.palette.surface.overlay}),tooltip:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.overlay,borderRadius:t.radius.md,color:t.palette.text.primary,backdropFilter:"blur(0)",filter:t.elevationFilter.overlay,fontFamily:r.fonts.FoundersGrotesk.name,fontSize:t.typography.body.sm,fontWeight:400,padding:`${t.padding.sm*o.base}px ${t.padding.md*o.base}px`})}},MuiAvatarGroup:{styleOverrides:{root:{flexDirection:"row"},avatar:({theme:{custom:t}})=>({border:`1px solid ${t.palette.stroke.default}`,marginLeft:0,marginRight:-8,":last-child":{marginLeft:"auto"}})}},MuiPaper:{styleOverrides:{root:({theme:{custom:t}})=>({backgroundColor:t.palette.surface.default})}}}});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useloops/design-system",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.567",
|
|
4
4
|
"description": "The official React based Loops design system",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -160,11 +160,11 @@
|
|
|
160
160
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
161
161
|
"@rollup/plugin-terser": "^0.4.4",
|
|
162
162
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
163
|
-
"@storybook/addon-docs": "^10.
|
|
164
|
-
"@storybook/addon-links": "^10.
|
|
165
|
-
"@storybook/addon-onboarding": "^10.
|
|
166
|
-
"@storybook/addon-themes": "^10.
|
|
167
|
-
"@storybook/react-vite": "^10.
|
|
163
|
+
"@storybook/addon-docs": "^10.1.4",
|
|
164
|
+
"@storybook/addon-links": "^10.1.4",
|
|
165
|
+
"@storybook/addon-onboarding": "^10.1.4",
|
|
166
|
+
"@storybook/addon-themes": "^10.1.4",
|
|
167
|
+
"@storybook/react-vite": "^10.1.4",
|
|
168
168
|
"@swc/core": "^1.10.18",
|
|
169
169
|
"@testing-library/react": "^16.3.0",
|
|
170
170
|
"@types/react": "^19.2.2",
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
"eslint": "^9.14.0",
|
|
179
179
|
"eslint-plugin-prettier": "^5.2.1",
|
|
180
180
|
"eslint-plugin-react": "^7.37.2",
|
|
181
|
-
"eslint-plugin-storybook": "^10.
|
|
181
|
+
"eslint-plugin-storybook": "^10.1.4",
|
|
182
182
|
"eslint-plugin-unused-imports": "^4.1.4",
|
|
183
183
|
"happy-dom": "^20.0.1",
|
|
184
184
|
"prettier": "^3.3.3",
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
197
197
|
"rollup-plugin-svg": "^2.0.0",
|
|
198
198
|
"rollup-preserve-directives": "^1.1.3",
|
|
199
|
-
"storybook": "^10.
|
|
199
|
+
"storybook": "^10.1.4",
|
|
200
200
|
"tsx": "^4.19.2",
|
|
201
201
|
"typescript": "^5.6.3",
|
|
202
202
|
"vite": "^7.1.10",
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
"@mui/lab": "^7.0.1-beta.18",
|
|
227
227
|
"@number-flow/react": "^0.5.10",
|
|
228
228
|
"@phrase/i18next-backend": "^1.2.0",
|
|
229
|
-
"@tiptap/extension-image": "^3.
|
|
229
|
+
"@tiptap/extension-image": "^3.12.1",
|
|
230
230
|
"@tiptap/extension-placeholder": "^3.7.0",
|
|
231
231
|
"@tiptap/extension-table": "^3.7.0",
|
|
232
232
|
"@tiptap/extension-underline": "^3.7.0",
|