npm - @erpsquad/common - Versions diffs - 1.8.45 → 1.8.47 - Mend

@erpsquad/common 1.8.45 → 1.8.47

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 (1314) hide show

package/dist/views/template-editor/components/controllers/TextControls/index.js CHANGED Viewed

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../../../../node_modules/@mui/icons-material/FormatBold/index.js"),i=require("../../../../../node_modules/@mui/icons-material/FormatItalic/index.js"),a=require("../../../../../node_modules/@mui/icons-material/FormatUnderlined/index.js"),r=require("../../../../../node_modules/@mui/icons-material/ColorLens/index.js"),d=require("lodash"),n=require("../../../../../components/select/select/index.js"),o=require("../AlignmentControl/index.js"),u=require("../../../../../node_modules/@mui/material/Box/Box/index.js"),s=require("../../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),m=require("../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),c=require("../../../../../node_modules/@mui/material/styles/styled/index.js"),x=require("../../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),f=require("../../../../../node_modules/@mui/material/ToggleButton/ToggleButton/index.js"),p=require("../../../../../node_modules/@mui/material/TextField/TextField/index.js"),j=require("../../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.js"),h=require("../../../../../node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup/index.js"),g=require("../../../../../node_modules/@mui/material/ToggleButtonGroup/toggleButtonGroupClasses/index.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=/* @__PURE__ */b(l);const y=c.default(h.default)(({theme:e,item:l=4})=>({display:"grid",borderRadius:4,border:"1px solid #e3e3e3",width:"100%",gridTemplateColumns:`repeat(${l}, 1fr)`,[`& .${g.default.grouped}`]:{margin:e.spacing(.5),border:0,borderRadius:e.shape.borderRadius,[`&.${g.default.disabled}`]:{border:0}},[`& .${g.default.middleButton}, & .${g.default.lastButton}`]:{marginLeft:-1,borderLeft:"1px solid transparent"},[`& .${g.default.selected}`]:{backgroundColor:`${e.palette.theme.primary[800]} !important`,color:"#fff !important"}})),v=[10,12,14,16,20,24,28,32],q=[1,1.2,1.5,2],_=["Arial","Times New Roman","Roboto","Helvetica","Georgia","Courier New"];var z=C.default.memo(({attrs:c,updateAttrs:h})=>{const g=l.useMemo(()=>c.styles||{},[JSON.stringify(c.styles)]),b=l.useMemo(()=>{const e=[];return"bold"===g.fontWeight&&e.push("bold"),"italic"===g.fontStyle&&e.push("italic"),"underline"===g.textDecoration&&e.push("underline"),e},[g.fontWeight,g.fontStyle,g.textDecoration]),C=l.useCallback(e=>{h({styles:{...g,...e}})},[g,h]),z=l.useCallback(d.debounce(e=>{C({color:e})},300),[C]),S=l.useCallback(e=>{const l=b.includes(e);C({bold:{fontWeight:l?"normal":"bold"},italic:{fontStyle:l?"normal":"italic"},underline:{textDecoration:l?"none":"underline"}}[e])},[b,C]),k=l.useCallback((e,l)=>{null!==l&&C({textAlign:l})},[C]),B=l.useCallback(e=>{z(e.target.value)},[z]),T=l.useCallback(e=>C({fontFamily:e.target.value}),[C]),F=l.useCallback(e=>C({fontSize:Number(e.target.value)}),[C]),A=l.useCallback(e=>C({lineHeight:String(e.target.value)}),[C]);/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../../../../node_modules/@mui/icons-material/FormatBold/index.js"),i=require("../../../../../node_modules/@mui/icons-material/FormatItalic/index.js"),a=require("../../../../../node_modules/@mui/icons-material/FormatUnderlined/index.js"),r=require("../../../../../node_modules/@mui/icons-material/ColorLens/index.js"),n=require("lodash"),d=require("../../../../../components/select/select/index.js"),o=require("../AlignmentControl/index.js"),s=require("../../../../../node_modules/@mui/material/Box/Box/index.js"),u=require("../../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),m=require("../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),c=require("../../../../../node_modules/@mui/material/styles/styled/index.js"),x=require("../../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),f=require("../../../../../node_modules/@mui/material/ToggleButton/ToggleButton/index.js"),p=require("../../../../../node_modules/@mui/material/TextField/TextField/index.js"),j=require("../../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.js"),h=require("../../../../../node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup/index.js"),g=require("../../../../../node_modules/@mui/material/ToggleButtonGroup/toggleButtonGroupClasses/index.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=/* @__PURE__ */b(l);const y=c.default(h.default)(({theme:e,item:l=4})=>({display:"grid",borderRadius:4,border:"1px solid #e3e3e3",width:"100%",gridTemplateColumns:`repeat(${l}, 1fr)`,[`& .${g.default.grouped}`]:{margin:e.spacing(.5),border:0,borderRadius:e.shape.borderRadius,[`&.${g.default.disabled}`]:{border:0}},[`& .${g.default.middleButton}, & .${g.default.lastButton}`]:{marginLeft:-1,borderLeft:"1px solid transparent"},[`& .${g.default.selected}`]:{backgroundColor:`${e.palette.theme.primary[800]} !important`,color:"#fff !important"}})),v=[10,12,14,16,20,24,28,32],q=[1,1.2,1.5,2],S=["Arial","Times New Roman","Roboto","Helvetica","Georgia","Courier New"];var _=C.default.memo(({attrs:c,updateAttrs:h})=>{const g=l.useMemo(()=>c.styles||{},[JSON.stringify(c.styles)]),b=l.useMemo(()=>{const e=[];return"bold"===g.fontWeight&&e.push("bold"),"italic"===g.fontStyle&&e.push("italic"),"underline"===g.textDecoration&&e.push("underline"),e},[g.fontWeight,g.fontStyle,g.textDecoration]),C=l.useCallback(e=>{h({styles:{...g,...e}})},[g,h]),_=l.useCallback(n.debounce(e=>{C({color:e})},300),[C]),z=l.useCallback(e=>{const l=b.includes(e);C({bold:{fontWeight:l?"normal":"bold"},italic:{fontStyle:l?"normal":"italic"},underline:{textDecoration:l?"none":"underline"}}[e])},[b,C]),k=l.useCallback((e,l)=>{null!==l&&C({textAlign:l})},[C]),B=l.useCallback(e=>{_(e.target.value)},[_]),T=l.useCallback(e=>C({fontFamily:e.target.value}),[C]),F=l.useCallback(e=>C({fontSize:Number(e.target.value)}),[C]),A=l.useCallback(e=>C({lineHeight:String(e.target.value)}),[C]);/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(u.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(s.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(n.default,{value:g.fontFamily||"",onChange:T,displayEmpty:!0,label:"Select Font",children:_.map(l=>/* @__PURE__ */e.jsx(m.default,{value:l,children:l},l))})})}),
-/* @__PURE__ */e.jsxs(u.default,{sx:{mb:2,display:"flex",gap:1},children:[
-/* @__PURE__ */e.jsx(s.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(n.default,{value:g.fontSize||"",onChange:F,renderValue:e=>`${e}px`,label:"Size",displayEmpty:!0,children:v.map(l=>/* @__PURE__ */e.jsxs(m.default,{value:l,children:[l,"px"]},l))})}),
-/* @__PURE__ */e.jsx(s.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(n.default,{value:g.lineHeight||"",onChange:A,renderValue:e=>`${e}x`,label:"Line Height",displayEmpty:!0,children:q.map(l=>/* @__PURE__ */e.jsxs(m.default,{value:l,children:[l,"x"]},l))})})]}),
+/* @__PURE__ */e.jsx(s.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(u.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{value:g.fontFamily||"",onChange:T,displayEmpty:!0,label:"Select Font",children:S.map(l=>/* @__PURE__ */e.jsx(m.default,{value:l,children:l},l))})})}),
+/* @__PURE__ */e.jsxs(s.default,{sx:{mb:2,display:"flex",gap:1},children:[
+/* @__PURE__ */e.jsx(u.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{value:g.fontSize||"",onChange:F,renderValue:e=>`${e}px`,label:"Size",displayEmpty:!0,children:v.map(l=>/* @__PURE__ */e.jsxs(m.default,{value:l,children:[l,"px"]},l))})}),
+/* @__PURE__ */e.jsx(u.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{value:g.lineHeight||"",onChange:A,renderValue:e=>`${e}x`,label:"Line Height",displayEmpty:!0,children:q.map(l=>/* @__PURE__ */e.jsxs(m.default,{value:l,children:[l,"x"]},l))})})]}),
 /* @__PURE__ */e.jsx(o.default,{alignment:g.textAlign,onAlignmentChange:k}),
-/* @__PURE__ */e.jsx(u.default,{sx:{display:"flex",flexWrap:"wrap",gap:1,mb:2},children:/* @__PURE__ */e.jsxs(y,{item:3,children:[
-/* @__PURE__ */e.jsx(x.default,{title:"Bold",children:/* @__PURE__ */e.jsx(f.default,{value:"bold",selected:b.includes("bold"),onClick:()=>S("bold"),"aria-label":"bold",size:"small",sx:{borderRadius:1},children:/* @__PURE__ */e.jsx(t.default,{fontSize:"small"})})}),
-/* @__PURE__ */e.jsx(x.default,{title:"Italic",children:/* @__PURE__ */e.jsx(f.default,{value:"italic",selected:b.includes("italic"),onClick:()=>S("italic"),"aria-label":"italic",size:"small",sx:{borderRadius:1},children:/* @__PURE__ */e.jsx(i.default,{fontSize:"small"})})}),
-/* @__PURE__ */e.jsx(x.default,{title:"Underline",children:/* @__PURE__ */e.jsx(f.default,{value:"underline",selected:b.includes("underline"),onClick:()=>S("underline"),"aria-label":"underline",size:"small",sx:{borderRadius:1},children:/* @__PURE__ */e.jsx(a.default,{fontSize:"small"})})})]})}),
-/* @__PURE__ */e.jsx(u.default,{sx:{mb:2,width:"100%"},children:/* @__PURE__ */e.jsx(p.default,{label:"Text Color",variant:"outlined",type:"color",value:g.color||"#000000",onChange:B,size:"small",fullWidth:!0,InputProps:{startAdornment:/* @__PURE__ */e.jsx(j.default,{position:"start",children:/* @__PURE__ */e.jsx(r.default,{fontSize:"small"})})}})})]})});exports.default=z;
+/* @__PURE__ */e.jsx(s.default,{sx:{display:"flex",flexWrap:"wrap",gap:1,mb:2},children:/* @__PURE__ */e.jsxs(y,{item:3,children:[
+/* @__PURE__ */e.jsx(x.default,{title:"Bold",children:/* @__PURE__ */e.jsx(f.default,{value:"bold",selected:b.includes("bold"),onClick:()=>z("bold"),"aria-label":"bold",size:"small",sx:{borderRadius:1},children:/* @__PURE__ */e.jsx(t.default,{fontSize:"small"})})}),
+/* @__PURE__ */e.jsx(x.default,{title:"Italic",children:/* @__PURE__ */e.jsx(f.default,{value:"italic",selected:b.includes("italic"),onClick:()=>z("italic"),"aria-label":"italic",size:"small",sx:{borderRadius:1},children:/* @__PURE__ */e.jsx(i.default,{fontSize:"small"})})}),
+/* @__PURE__ */e.jsx(x.default,{title:"Underline",children:/* @__PURE__ */e.jsx(f.default,{value:"underline",selected:b.includes("underline"),onClick:()=>z("underline"),"aria-label":"underline",size:"small",sx:{borderRadius:1},children:/* @__PURE__ */e.jsx(a.default,{fontSize:"small"})})})]})}),
+/* @__PURE__ */e.jsx(s.default,{sx:{mb:2,width:"100%"},children:/* @__PURE__ */e.jsx(p.default,{label:"Text Color",variant:"outlined",type:"color",value:g.color||"#000000",onChange:B,size:"small",fullWidth:!0,InputProps:{startAdornment:/* @__PURE__ */e.jsx(j.default,{position:"start",children:/* @__PURE__ */e.jsx(r.default,{fontSize:"small"})})}})})]})});exports.default=_;
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/controllers/TextControls/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/TextControls.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport {\r\n Box,\r\n TextField,\r\n ToggleButtonGroup,\r\n ToggleButton,\r\n InputAdornment,\r\n Tooltip,\r\n FormControl,\r\n MenuItem,\r\n styled,\r\n toggleButtonGroupClasses\r\n} from '@mui/material';\r\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\r\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\r\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport { debounce } from 'lodash';\r\nimport Select from '../../../../components/select/select';\r\nimport AlignmentControl from './AlignmentControl';\r\n\r\n// Styled component with better typing\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)<{ item?: number }>(\r\n ({ theme, item = 4 }) => ({\r\n display: 'grid',\r\n borderRadius: 4,\r\n border: `1px solid #e3e3e3`,\r\n width: '100%',\r\n gridTemplateColumns: `repeat(${item}, 1fr)`,\r\n [`& .${toggleButtonGroupClasses.grouped}`]: {\r\n margin: theme.spacing(0.5),\r\n border: 0,\r\n borderRadius: theme.shape.borderRadius,\r\n [`&.${toggleButtonGroupClasses.disabled}`]: {\r\n border: 0,\r\n },\r\n },\r\n [`& .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]:\r\n {\r\n marginLeft: -1,\r\n borderLeft: '1px solid transparent',\r\n },\r\n [`& .${toggleButtonGroupClasses.selected}`]: {\r\n backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n color: '#fff !important',\r\n },\r\n })\r\n);\r\n\r\n// Type definitions\r\ninterface TextStyles {\r\n fontFamily?: string;\r\n fontSize?: number;\r\n lineHeight?: string \| number;\r\n textAlign?: string;\r\n fontWeight?: string;\r\n fontStyle?: string;\r\n textDecoration?: string;\r\n color?: string;\r\n}\r\n\r\ninterface TextControlsProps {\r\n attrs: {\r\n styles?: TextStyles;\r\n [key: string]: any;\r\n };\r\n updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\ntype FormatType = 'bold' \| 'italic' \| 'underline';\r\n\r\n// Constants\r\nconst FONT_SIZES = [10, 12, 14, 16, 20, 24, 28, 32] as const;\r\nconst LINE_HEIGHTS = [1, 1.2, 1.5, 2] as const;\r\nconst FONT_FAMILIES = [\r\n 'Arial',\r\n 'Times New Roman', \r\n 'Roboto',\r\n 'Helvetica',\r\n 'Georgia',\r\n 'Courier New'\r\n] as const;\r\n\r\nconst DEBOUNCE_DELAY = 300;\r\n\r\nconst TextControls: React.FC<TextControlsProps> = ({ attrs, updateAttrs }) => {\r\n const styles = useMemo(() => attrs.styles \|\| {}, [JSON.stringify(attrs.styles)]);\r\n \r\n // Derive format options from current styles instead of separate state\r\n const formatOptions = useMemo(() => {\r\n const options: FormatType[] = [];\r\n if (styles.fontWeight === 'bold') options.push('bold');\r\n if (styles.fontStyle === 'italic') options.push('italic');\r\n if (styles.textDecoration === 'underline') options.push('underline');\r\n return options;\r\n }, [styles.fontWeight, styles.fontStyle, styles.textDecoration]);\r\n\r\n // Stable update function using useCallback\r\n const updateStyles = useCallback(\r\n (newStyles: Partial<TextStyles>) => {\r\n updateAttrs({ \r\n styles: { \r\n ...styles, \r\n ...newStyles \r\n } \r\n });\r\n },\r\n [styles, updateAttrs]\r\n );\r\n\r\n // Fixed debounced color update function\r\n const debouncedColorUpdate = useCallback(\r\n debounce((color: string) => {\r\n updateStyles({color});\r\n }, DEBOUNCE_DELAY),\r\n [updateStyles]\r\n );\r\n\r\n // Format toggle handler\r\n const toggleFormat = useCallback(\r\n (format: FormatType) => {\r\n const isCurrentlyApplied = formatOptions.includes(format);\r\n \r\n const formatStyleMap: Record<FormatType, Partial<TextStyles>> = {\r\n bold: { fontWeight: isCurrentlyApplied ? 'normal' : 'bold' },\r\n italic: { fontStyle: isCurrentlyApplied ? 'normal' : 'italic' },\r\n underline: { textDecoration: isCurrentlyApplied ? 'none' : 'underline' }\r\n };\r\n\r\n updateStyles(formatStyleMap[format]);\r\n },\r\n [formatOptions, updateStyles]\r\n );\r\n\r\n // Alignment change handler\r\n const handleAlignmentChange = useCallback(\r\n (event: React.MouseEvent<HTMLElement>, newAlignment: string \| null) => {\r\n if (newAlignment !== null) {\r\n updateStyles({ textAlign: newAlignment });\r\n }\r\n },\r\n [updateStyles]\r\n );\r\n\r\n // Color change handler\r\n const handleColorChange = useCallback(\r\n (event: React.ChangeEvent<HTMLInputElement>) => {\r\n debouncedColorUpdate(event.target.value);\r\n },\r\n [debouncedColorUpdate]\r\n );\r\n\r\n // Generic style change handlers\r\n const handleFontFamilyChange = useCallback(\r\n (event: any) => updateStyles({ fontFamily: event.target.value }),\r\n [updateStyles]\r\n );\r\n\r\n const handleFontSizeChange = useCallback(\r\n (event: any) => updateStyles({ fontSize: Number(event.target.value) }),\r\n [updateStyles]\r\n );\r\n\r\n const handleLineHeightChange = useCallback(\r\n (event: any) => updateStyles({ lineHeight: String(event.target.value) }),\r\n [updateStyles]\r\n );\r\n\r\n return (\r\n <>\r\n {/ Font Family Selection /}\r\n <Box sx={{ mb: 2 }}>\r\n <FormControl size=\"small\" fullWidth>\r\n <Select\r\n value={styles.fontFamily \|\| ''}\r\n onChange={handleFontFamilyChange}\r\n displayEmpty\r\n label=\"Select Font\"\r\n >\r\n {FONT_FAMILIES.map((family) => (\r\n <MenuItem key={family} value={family}>\r\n {family}\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n </Box>\r\n\r\n {/ Font Size and Line Height /}\r\n <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\r\n <FormControl size=\"small\" fullWidth>\r\n <Select\r\n value={styles.fontSize \|\| ''}\r\n onChange={handleFontSizeChange}\r\n renderValue={(v) => `${v}px`}\r\n label=\"Size\"\r\n displayEmpty\r\n >\r\n {FONT_SIZES.map((size) => (\r\n <MenuItem key={size} value={size}>\r\n {size}px\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n\r\n <FormControl size=\"small\" fullWidth>\r\n <Select\r\n value={styles.lineHeight \|\| ''}\r\n onChange={handleLineHeightChange}\r\n renderValue={(v) => `${v}x`}\r\n label=\"Line Height\"\r\n displayEmpty\r\n >\r\n {LINE_HEIGHTS.map((height) => (\r\n <MenuItem key={height} value={height}>\r\n {height}x\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n </Box>\r\n\r\n {/ Text Alignment /}\r\n <AlignmentControl \r\n alignment={styles.textAlign} \r\n onAlignmentChange={handleAlignmentChange} \r\n />\r\n\r\n {/ Format Options /}\r\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n <StyledToggleButtonGroup item={3}>\r\n <Tooltip title=\"Bold\">\r\n <ToggleButton\r\n value=\"bold\"\r\n selected={formatOptions.includes('bold')}\r\n onClick={() => toggleFormat('bold')}\r\n aria-label=\"bold\"\r\n size=\"small\"\r\n sx={{ borderRadius: 1 }}\r\n >\r\n <FormatBoldIcon fontSize=\"small\" />\r\n </ToggleButton>\r\n </Tooltip>\r\n\r\n <Tooltip title=\"Italic\">\r\n <ToggleButton\r\n value=\"italic\"\r\n selected={formatOptions.includes('italic')}\r\n onClick={() => toggleFormat('italic')}\r\n aria-label=\"italic\"\r\n size=\"small\"\r\n sx={{ borderRadius: 1 }}\r\n >\r\n <FormatItalicIcon fontSize=\"small\" />\r\n </ToggleButton>\r\n </Tooltip>\r\n\r\n <Tooltip title=\"Underline\">\r\n <ToggleButton\r\n value=\"underline\"\r\n selected={formatOptions.includes('underline')}\r\n onClick={() => toggleFormat('underline')}\r\n aria-label=\"underline\"\r\n size=\"small\"\r\n sx={{ borderRadius: 1 }}\r\n >\r\n <FormatUnderlinedIcon fontSize=\"small\" />\r\n </ToggleButton>\r\n </Tooltip>\r\n </StyledToggleButtonGroup>\r\n </Box>\r\n\r\n {/ Color Picker */}\r\n <Box sx={{ mb: 2, width: '100%' }}>\r\n <TextField\r\n label=\"Text Color\"\r\n variant=\"outlined\"\r\n type=\"color\"\r\n value={styles.color \|\| '#000000'}\r\n onChange={handleColorChange}\r\n size=\"small\"\r\n fullWidth\r\n InputProps={{\r\n startAdornment: (\r\n <InputAdornment position=\"start\">\r\n <ColorLensIcon fontSize=\"small\" />\r\n </InputAdornment>\r\n ),\r\n }}\r\n />\r\n </Box>\r\n </>\r\n );\r\n};\r\n\r\nexport default React.memo(TextControls);"],"names":["StyledToggleButtonGroup","styled","ToggleButtonGroup","theme","item","display","borderRadius","border","width","gridTemplateColumns","toggleButtonGroupClasses","grouped","margin","spacing","shape","disabled","middleButton","lastButton","marginLeft","borderLeft","selected","backgroundColor","palette","primary","color","FONT_SIZES","LINE_HEIGHTS","FONT_FAMILIES","TextControls$1","React","memo","attrs","updateAttrs","styles","useMemo","JSON","stringify","formatOptions","options","fontWeight","push","fontStyle","textDecoration","updateStyles","useCallback","newStyles","debouncedColorUpdate","debounce","toggleFormat","format","isCurrentlyApplied","includes","bold","italic","underline","handleAlignmentChange","event","newAlignment","textAlign","handleColorChange","target","value","handleFontFamilyChange","fontFamily","handleFontSizeChange","fontSize","Number","handleLineHeightChange","lineHeight","String","jsxs","Fragment","children","jsx","Box","sx","mb","FormControl","size","fullWidth","Select","onChange","displayEmpty","label","map","family","MenuItem","gap","renderValue","v","height","AlignmentControl","alignment","onAlignmentChange","flexWrap","Tooltip","title","ToggleButton","onClick","FormatBoldIcon","FormatItalicIcon","FormatUnderlinedIcon","TextField","variant","type","InputProps","startAdornment","InputAdornment","position","ColorLensIcon"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/TextControls.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport {\r\n Box,\r\n TextField,\r\n ToggleButtonGroup,\r\n ToggleButton,\r\n InputAdornment,\r\n Tooltip,\r\n FormControl,\r\n MenuItem,\r\n styled,\r\n toggleButtonGroupClasses\r\n} from '@mui/material';\r\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\r\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\r\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport { debounce } from 'lodash';\r\nimport Select from '../../../../components/select/select';\r\nimport AlignmentControl from './AlignmentControl';\r\n\r\n// Styled component with better typing\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)<{ item?: number }>(\r\n ({ theme, item = 4 }) => ({\r\n display: 'grid',\r\n borderRadius: 4,\r\n border: `1px solid #e3e3e3`,\r\n width: '100%',\r\n gridTemplateColumns: `repeat(${item}, 1fr)`,\r\n [`& .${toggleButtonGroupClasses.grouped}`]: {\r\n margin: theme.spacing(0.5),\r\n border: 0,\r\n borderRadius: theme.shape.borderRadius,\r\n [`&.${toggleButtonGroupClasses.disabled}`]: {\r\n border: 0,\r\n },\r\n },\r\n [`& .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]:\r\n {\r\n marginLeft: -1,\r\n borderLeft: '1px solid transparent',\r\n },\r\n [`& .${toggleButtonGroupClasses.selected}`]: {\r\n backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n color: '#fff !important',\r\n },\r\n })\r\n);\r\n\r\n// Type definitions\r\ninterface TextStyles {\r\n fontFamily?: string;\r\n fontSize?: number;\r\n lineHeight?: string \| number;\r\n textAlign?: string;\r\n fontWeight?: string;\r\n fontStyle?: string;\r\n textDecoration?: string;\r\n color?: string;\r\n}\r\n\r\ninterface TextControlsProps {\r\n attrs: {\r\n styles?: TextStyles;\r\n [key: string]: any;\r\n };\r\n updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\ntype FormatType = 'bold' \| 'italic' \| 'underline';\r\n\r\n// Constants\r\nconst FONT_SIZES = [10, 12, 14, 16, 20, 24, 28, 32] as const;\r\nconst LINE_HEIGHTS = [1, 1.2, 1.5, 2] as const;\r\nconst FONT_FAMILIES = [\r\n 'Arial',\r\n 'Times New Roman', \r\n 'Roboto',\r\n 'Helvetica',\r\n 'Georgia',\r\n 'Courier New'\r\n] as const;\r\n\r\nconst DEBOUNCE_DELAY = 300;\r\n\r\nconst TextControls: React.FC<TextControlsProps> = ({ attrs, updateAttrs }) => {\r\n const styles = useMemo(() => attrs.styles \|\| {}, [JSON.stringify(attrs.styles)]);\r\n \r\n // Derive format options from current styles instead of separate state\r\n const formatOptions = useMemo(() => {\r\n const options: FormatType[] = [];\r\n if (styles.fontWeight === 'bold') options.push('bold');\r\n if (styles.fontStyle === 'italic') options.push('italic');\r\n if (styles.textDecoration === 'underline') options.push('underline');\r\n return options;\r\n }, [styles.fontWeight, styles.fontStyle, styles.textDecoration]);\r\n\r\n // Stable update function using useCallback\r\n const updateStyles = useCallback(\r\n (newStyles: Partial<TextStyles>) => {\r\n updateAttrs({ \r\n styles: { \r\n ...styles, \r\n ...newStyles \r\n } \r\n });\r\n },\r\n [styles, updateAttrs]\r\n );\r\n\r\n // Fixed debounced color update function\r\n const debouncedColorUpdate = useCallback(\r\n debounce((color: string) => {\r\n updateStyles({color});\r\n }, DEBOUNCE_DELAY),\r\n [updateStyles]\r\n );\r\n\r\n // Format toggle handler\r\n const toggleFormat = useCallback(\r\n (format: FormatType) => {\r\n const isCurrentlyApplied = formatOptions.includes(format);\r\n \r\n const formatStyleMap: Record<FormatType, Partial<TextStyles>> = {\r\n bold: { fontWeight: isCurrentlyApplied ? 'normal' : 'bold' },\r\n italic: { fontStyle: isCurrentlyApplied ? 'normal' : 'italic' },\r\n underline: { textDecoration: isCurrentlyApplied ? 'none' : 'underline' }\r\n };\r\n\r\n updateStyles(formatStyleMap[format]);\r\n },\r\n [formatOptions, updateStyles]\r\n );\r\n\r\n // Alignment change handler\r\n const handleAlignmentChange = useCallback(\r\n (event: React.MouseEvent<HTMLElement>, newAlignment: string \| null) => {\r\n if (newAlignment !== null) {\r\n updateStyles({ textAlign: newAlignment });\r\n }\r\n },\r\n [updateStyles]\r\n );\r\n\r\n // Color change handler\r\n const handleColorChange = useCallback(\r\n (event: React.ChangeEvent<HTMLInputElement>) => {\r\n debouncedColorUpdate(event.target.value);\r\n },\r\n [debouncedColorUpdate]\r\n );\r\n\r\n // Generic style change handlers\r\n const handleFontFamilyChange = useCallback(\r\n (event: any) => updateStyles({ fontFamily: event.target.value }),\r\n [updateStyles]\r\n );\r\n\r\n const handleFontSizeChange = useCallback(\r\n (event: any) => updateStyles({ fontSize: Number(event.target.value) }),\r\n [updateStyles]\r\n );\r\n\r\n const handleLineHeightChange = useCallback(\r\n (event: any) => updateStyles({ lineHeight: String(event.target.value) }),\r\n [updateStyles]\r\n );\r\n\r\n return (\r\n <>\r\n {/ Font Family Selection /}\r\n <Box sx={{ mb: 2 }}>\r\n <FormControl size=\"small\" fullWidth>\r\n <Select\r\n value={styles.fontFamily \|\| ''}\r\n onChange={handleFontFamilyChange}\r\n displayEmpty\r\n label=\"Select Font\"\r\n >\r\n {FONT_FAMILIES.map((family) => (\r\n <MenuItem key={family} value={family}>\r\n {family}\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n </Box>\r\n\r\n {/ Font Size and Line Height /}\r\n <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\r\n <FormControl size=\"small\" fullWidth>\r\n <Select\r\n value={styles.fontSize \|\| ''}\r\n onChange={handleFontSizeChange}\r\n renderValue={(v) => `${v}px`}\r\n label=\"Size\"\r\n displayEmpty\r\n >\r\n {FONT_SIZES.map((size) => (\r\n <MenuItem key={size} value={size}>\r\n {size}px\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n\r\n <FormControl size=\"small\" fullWidth>\r\n <Select\r\n value={styles.lineHeight \|\| ''}\r\n onChange={handleLineHeightChange}\r\n renderValue={(v) => `${v}x`}\r\n label=\"Line Height\"\r\n displayEmpty\r\n >\r\n {LINE_HEIGHTS.map((height) => (\r\n <MenuItem key={height} value={height}>\r\n {height}x\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n </Box>\r\n\r\n {/ Text Alignment /}\r\n <AlignmentControl \r\n alignment={styles.textAlign} \r\n onAlignmentChange={handleAlignmentChange} \r\n />\r\n\r\n {/ Format Options /}\r\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n <StyledToggleButtonGroup item={3}>\r\n <Tooltip title=\"Bold\">\r\n <ToggleButton\r\n value=\"bold\"\r\n selected={formatOptions.includes('bold')}\r\n onClick={() => toggleFormat('bold')}\r\n aria-label=\"bold\"\r\n size=\"small\"\r\n sx={{ borderRadius: 1 }}\r\n >\r\n <FormatBoldIcon fontSize=\"small\" />\r\n </ToggleButton>\r\n </Tooltip>\r\n\r\n <Tooltip title=\"Italic\">\r\n <ToggleButton\r\n value=\"italic\"\r\n selected={formatOptions.includes('italic')}\r\n onClick={() => toggleFormat('italic')}\r\n aria-label=\"italic\"\r\n size=\"small\"\r\n sx={{ borderRadius: 1 }}\r\n >\r\n <FormatItalicIcon fontSize=\"small\" />\r\n </ToggleButton>\r\n </Tooltip>\r\n\r\n <Tooltip title=\"Underline\">\r\n <ToggleButton\r\n value=\"underline\"\r\n selected={formatOptions.includes('underline')}\r\n onClick={() => toggleFormat('underline')}\r\n aria-label=\"underline\"\r\n size=\"small\"\r\n sx={{ borderRadius: 1 }}\r\n >\r\n <FormatUnderlinedIcon fontSize=\"small\" />\r\n </ToggleButton>\r\n </Tooltip>\r\n </StyledToggleButtonGroup>\r\n </Box>\r\n\r\n {/ Color Picker */}\r\n <Box sx={{ mb: 2, width: '100%' }}>\r\n <TextField\r\n label=\"Text Color\"\r\n variant=\"outlined\"\r\n type=\"color\"\r\n value={styles.color \|\| '#000000'}\r\n onChange={handleColorChange}\r\n size=\"small\"\r\n fullWidth\r\n InputProps={{\r\n startAdornment: (\r\n <InputAdornment position=\"start\">\r\n <ColorLensIcon fontSize=\"small\" />\r\n </InputAdornment>\r\n ),\r\n }}\r\n />\r\n </Box>\r\n </>\r\n );\r\n};\r\n\r\nexport default React.memo(TextControls);"],"names":["StyledToggleButtonGroup","styled","ToggleButtonGroup","theme","item","display","borderRadius","border","width","gridTemplateColumns","toggleButtonGroupClasses","grouped","margin","spacing","shape","disabled","middleButton","lastButton","marginLeft","borderLeft","selected","backgroundColor","palette","primary","color","FONT_SIZES","LINE_HEIGHTS","FONT_FAMILIES","TextControls$1","React","memo","attrs","updateAttrs","styles","useMemo","JSON","stringify","formatOptions","options","fontWeight","push","fontStyle","textDecoration","updateStyles","useCallback","newStyles","debouncedColorUpdate","debounce","toggleFormat","format","isCurrentlyApplied","includes","bold","italic","underline","handleAlignmentChange","event","newAlignment","textAlign","handleColorChange","target","value","handleFontFamilyChange","fontFamily","handleFontSizeChange","fontSize","Number","handleLineHeightChange","lineHeight","String","jsxs","Fragment","children","jsx","Box","sx","mb","FormControl","size","fullWidth","Select","onChange","displayEmpty","label","map","family","MenuItem","gap","renderValue","v","height","AlignmentControl","alignment","onAlignmentChange","flexWrap","Tooltip","title","ToggleButton","onClick","FormatBoldIcon","FormatItalicIcon","FormatUnderlinedIcon","TextField","variant","type","InputProps","startAdornment","InputAdornment","position","ColorLensIcon"],"mappings":"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"}

package/dist/views/template-editor/components/controllers/border-control/index.esm.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import ColorPickerInput from "../../../../../components/color-picker-input/color-picker-input/index.esm.js";
-import Select from "../../../../../components/select/select/index.esm.js";
+import { ColorPickerInput } from "../../../../../components/color-picker-input/color-picker-input/index.esm.js";
+import { Select } from "../../../../../components/select/select/index.esm.js";
 import { Typography } from "../../../../../components/typography/typography/index.esm.js";
-import formatText from "../../../../../utils/format-text/index.esm.js";
+import { formatText } from "../../../../../utils/format-text/index.esm.js";
 import { useEffect } from "react";
 import Grid from "../../../../../node_modules/@mui/material/Grid/Grid/index.esm.js";
 import FormControlLabel from "../../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";

package/dist/views/template-editor/components/controllers/border-control/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../../components/color-picker-input/color-picker-input/index.js"),t=require("../../../../../components/select/select/index.js"),l=require("../../../../../components/typography/typography/index.js"),a=require("../../../../../utils/format-text/index.js"),o=require("react"),d=require("../../../../../node_modules/@mui/material/Grid/Grid/index.js"),i=require("../../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),s=require("../../../../../node_modules/@mui/material/styles/styled/index.js"),n=require("../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),u=require("../../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),m=require("../../../../../node_modules/@mui/material/Slider/Slider/index.js"),h=require("../../../../../node_modules/@mui/material/Switch/Switch/index.js");const c=s.default(h.default)(({theme:e})=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%)",width:16,height:16},"&::before":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(e.palette.getContrastText(e.palette.primary.main))}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,left:12},"&::after":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(e.palette.getContrastText(e.palette.primary.main))}" d="M19,13H5V11H19V13Z" /></svg>')`,right:12}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2},"& .Mui-checked":{color:`${e.palette.theme.primary[800]} !important`},"& .Mui-checked+.MuiSwitch-track":{backgroundColor:`${e.palette.theme.primary[800]} !important`}})),p=["none","solid","dashed","dotted","double","groove","ridge","inset","outset"];exports.default=({styles:s,onChange:h,isBordered:x,disableWidth:g=!1,disableStyle:y=!1,disableColor:b=!1,disableCollapse:f=!1,disableRadius:j=!1,initiateStyles:C})=>(o.useEffect(()=>{C instanceof Function&&C(x?{border:1,borderStyle:"solid",borderColor:"#000000",borderCollapse:"collapse",borderRadius:0}:{border:0,borderStyle:"none",borderColor:"#000000",borderCollapse:"separate",borderRadius:0})},[x]),/* @__PURE__ */e.jsxs(d.default,{container:!0,spacing:2,children:[
-/* @__PURE__ */e.jsx(d.default,{item:!0,xs:12,children:/* @__PURE__ */e.jsx(i.default,{control:/* @__PURE__ */e.jsx(c,{checked:x,onChange:e=>h("is_bordered",e.target.checked)}),label:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Bordered Table"}),labelPlacement:"start",sx:{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"auto"}})}),x&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[!g&&/* @__PURE__ */e.jsx(d.default,{item:!0,xs:6,children:/* @__PURE__ */e.jsx(t.default,{value:s.border||1,onChange:e=>h("border",e.target.value),label:"Border Width",fullWidth:!0,size:"small",children:[1,2,3,4,5,6,7,8,9,10].map(r=>/* @__PURE__ */e.jsx(n.default,{value:r,children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:r})},r))})}),!y&&/* @__PURE__ */e.jsx(d.default,{item:!0,xs:6,children:/* @__PURE__ */e.jsx(u.default,{fullWidth:!0,size:"small",children:/* @__PURE__ */e.jsx(t.default,{value:s.borderStyle||"solid",onChange:e=>h("borderStyle",e.target.value),renderValue:e=>a.default(e),label:"Border Style",children:p.map(r=>/* @__PURE__ */e.jsx(n.default,{value:r,children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:a.default(r)})},r))})})}),!b&&/* @__PURE__ */e.jsxs(d.default,{item:!0,xs:6,children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../../components/color-picker-input/color-picker-input/index.js"),t=require("../../../../../components/select/select/index.js"),l=require("../../../../../components/typography/typography/index.js"),o=require("../../../../../utils/format-text/index.js"),a=require("react"),i=require("../../../../../node_modules/@mui/material/Grid/Grid/index.js"),d=require("../../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),s=require("../../../../../node_modules/@mui/material/styles/styled/index.js"),n=require("../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),u=require("../../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),m=require("../../../../../node_modules/@mui/material/Slider/Slider/index.js"),c=require("../../../../../node_modules/@mui/material/Switch/Switch/index.js");const h=s.default(c.default)(({theme:e})=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%)",width:16,height:16},"&::before":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(e.palette.getContrastText(e.palette.primary.main))}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,left:12},"&::after":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(e.palette.getContrastText(e.palette.primary.main))}" d="M19,13H5V11H19V13Z" /></svg>')`,right:12}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2},"& .Mui-checked":{color:`${e.palette.theme.primary[800]} !important`},"& .Mui-checked+.MuiSwitch-track":{backgroundColor:`${e.palette.theme.primary[800]} !important`}})),p=["none","solid","dashed","dotted","double","groove","ridge","inset","outset"];exports.default=({styles:s,onChange:c,isBordered:x,disableWidth:g=!1,disableStyle:y=!1,disableColor:b=!1,disableCollapse:f=!1,disableRadius:j=!1,initiateStyles:C})=>(a.useEffect(()=>{C instanceof Function&&C(x?{border:1,borderStyle:"solid",borderColor:"#000000",borderCollapse:"collapse",borderRadius:0}:{border:0,borderStyle:"none",borderColor:"#000000",borderCollapse:"separate",borderRadius:0})},[x]),/* @__PURE__ */e.jsxs(i.default,{container:!0,spacing:2,children:[
+/* @__PURE__ */e.jsx(i.default,{item:!0,xs:12,children:/* @__PURE__ */e.jsx(d.default,{control:/* @__PURE__ */e.jsx(h,{checked:x,onChange:e=>c("is_bordered",e.target.checked)}),label:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Bordered Table"}),labelPlacement:"start",sx:{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"auto"}})}),x&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[!g&&/* @__PURE__ */e.jsx(i.default,{item:!0,xs:6,children:/* @__PURE__ */e.jsx(t.Select,{value:s.border||1,onChange:e=>c("border",e.target.value),label:"Border Width",fullWidth:!0,size:"small",children:[1,2,3,4,5,6,7,8,9,10].map(r=>/* @__PURE__ */e.jsx(n.default,{value:r,children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:r})},r))})}),!y&&/* @__PURE__ */e.jsx(i.default,{item:!0,xs:6,children:/* @__PURE__ */e.jsx(u.default,{fullWidth:!0,size:"small",children:/* @__PURE__ */e.jsx(t.Select,{value:s.borderStyle||"solid",onChange:e=>c("borderStyle",e.target.value),renderValue:e=>o.formatText(e),label:"Border Style",children:p.map(r=>/* @__PURE__ */e.jsx(n.default,{value:r,children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:o.formatText(r)})},r))})})}),!b&&/* @__PURE__ */e.jsxs(i.default,{item:!0,xs:6,children:[
 /* @__PURE__ */e.jsx(l.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",mb:.5,children:"Border Color"}),
-/* @__PURE__ */e.jsx(r.default,{value:s.borderColor||"#e0e0e0",onChange:e=>h("borderColor",e),fullWidth:!0})]}),!f&&/* @__PURE__ */e.jsx(d.default,{item:!0,xs:6,children:/* @__PURE__ */e.jsx(u.default,{fullWidth:!0,size:"small",children:/* @__PURE__ */e.jsxs(t.default,{value:s.borderCollapse||"collapse",onChange:e=>h("borderCollapse",e.target.value),label:"Border Collapse",renderValue:e=>a.default(e),children:[
+/* @__PURE__ */e.jsx(r.ColorPickerInput,{value:s.borderColor||"#e0e0e0",onChange:e=>c("borderColor",e),fullWidth:!0})]}),!f&&/* @__PURE__ */e.jsx(i.default,{item:!0,xs:6,children:/* @__PURE__ */e.jsx(u.default,{fullWidth:!0,size:"small",children:/* @__PURE__ */e.jsxs(t.Select,{value:s.borderCollapse||"collapse",onChange:e=>c("borderCollapse",e.target.value),label:"Border Collapse",renderValue:e=>o.formatText(e),children:[
 /* @__PURE__ */e.jsx(n.default,{value:"collapse",children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:"Collapse"})}),
-/* @__PURE__ */e.jsx(n.default,{value:"separate",children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:"Separate"})})]})})}),!j&&/* @__PURE__ */e.jsxs(d.default,{item:!0,xs:12,children:[
+/* @__PURE__ */e.jsx(n.default,{value:"separate",children:/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.1000",children:"Separate"})})]})})}),!j&&/* @__PURE__ */e.jsxs(i.default,{item:!0,xs:12,children:[
 /* @__PURE__ */e.jsx(l.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",variant:"caption",children:"Border Radius"}),
-/* @__PURE__ */e.jsx(m.default,{value:"number"==typeof s.borderRadius?s.borderRadius:1,min:0,max:20,step:1,marks:!0,onChange:(e,r)=>h("borderRadius",r),valueLabelDisplay:"auto",sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]})]})]}));
+/* @__PURE__ */e.jsx(m.default,{value:"number"==typeof s.borderRadius?s.borderRadius:1,min:0,max:20,step:1,marks:!0,onChange:(e,r)=>c("borderRadius",r),valueLabelDisplay:"auto",sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]})]})]}));
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/controllers/border-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\r\n/ eslint-disable unused-imports/no-unused-vars /\r\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\r\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\r\nimport Select from \"../../../../components/select/select\";\r\nimport Typography from \"../../../../components/typography/typography\";\r\nimport formatText from \"../../../../utils/format-text\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Android12Switch = styled(Switch)(({ theme }) => ({\r\n padding: 8,\r\n '& .MuiSwitch-track': {\r\n borderRadius: 22 / 2,\r\n '&::before, &::after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n width: 16,\r\n height: 16,\r\n },\r\n '&::before': {\r\n backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n theme.palette.getContrastText(theme.palette.primary.main),\r\n )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\r\n left: 12,\r\n },\r\n '&::after': {\r\n backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n theme.palette.getContrastText(theme.palette.primary.main),\r\n )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\r\n right: 12,\r\n },\r\n },\r\n '& .MuiSwitch-thumb': {\r\n boxShadow: 'none',\r\n width: 16,\r\n height: 16,\r\n margin: 2,\r\n // color: theme.palette.theme.primary[800]\r\n },\r\n '& .Mui-checked': {\r\n color: `${theme.palette.theme.primary[800]} !important`,\r\n },\r\n '& .Mui-checked+.MuiSwitch-track': {\r\n backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n },\r\n}));\r\n\r\nexport interface BorderControlProps {\r\n styles: Record<string, any>,\r\n onChange: (key: string, value: any) => void\r\n isBordered: boolean;\r\n disableWidth?: boolean;\r\n disableStyle?: boolean;\r\n disableColor?: boolean;\r\n disableCollapse?: boolean;\r\n disableRadius?: boolean;\r\n initiateStyles?: (styles: Record<string, any>) => void;\r\n}\r\n\r\nconst borderStyles = [\r\n 'none',\r\n 'solid',\r\n 'dashed',\r\n 'dotted',\r\n 'double',\r\n 'groove',\r\n 'ridge',\r\n 'inset',\r\n 'outset'\r\n];\r\n\r\nconst BorderControl:React.FC<BorderControlProps> = ({\r\n styles,\r\n onChange,\r\n isBordered,\r\n disableWidth = false,\r\n disableStyle = false,\r\n disableColor = false,\r\n disableCollapse = false,\r\n disableRadius = false,\r\n initiateStyles\r\n}) => {\r\n\r\n useEffect(() => {\r\n if(initiateStyles instanceof Function) {\r\n if (!isBordered) {\r\n initiateStyles({\r\n 'border': 0,\r\n 'borderStyle':'none',\r\n 'borderColor':'#000000',\r\n 'borderCollapse':'separate',\r\n 'borderRadius':0,\r\n });\r\n } else{\r\n initiateStyles({\r\n 'border': 1,\r\n 'borderStyle':'solid',\r\n 'borderColor':'#000000',\r\n 'borderCollapse':'collapse',\r\n 'borderRadius':0,\r\n });\r\n }\r\n }\r\n }, [isBordered]);\r\n return (\r\n <Grid container spacing={2}>\r\n <Grid item xs={12}>\r\n <FormControlLabel\r\n control={\r\n <Android12Switch\r\n checked={isBordered}\r\n onChange={(e) => onChange('is_bordered', e.target.checked)}\r\n />\r\n }\r\n label={<Typography type='s5' weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\r\n labelPlacement=\"start\"\r\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\r\n />\r\n </Grid>\r\n \r\n {isBordered && (\r\n <>\r\n {/ Width /}\r\n {!disableWidth && (\r\n <Grid item xs={6}>\r\n <Select\r\n value={styles.border \|\| 1}\r\n onChange={(e) => onChange('border', e.target.value)}\r\n label=\"Border Width\"\r\n fullWidth\r\n size=\"small\"\r\n >\r\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\r\n <MenuItem key={wd} value={wd}>\r\n <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </Grid>\r\n )}\r\n \r\n {/ Style /}\r\n {!disableStyle && ( \r\n <Grid item xs={6}>\r\n <FormControl fullWidth size=\"small\">\r\n <Select\r\n value={styles.borderStyle \|\| 'solid'}\r\n onChange={(e) => onChange('borderStyle', e.target.value)}\r\n renderValue={(value) => formatText(value)}\r\n label=\"Border Style\"\r\n >\r\n {borderStyles.map((style) => (\r\n <MenuItem key={style} value={style}>\r\n <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n </Grid>\r\n )}\r\n \r\n {/ Color /}\r\n {!disableColor && ( \r\n <Grid item xs={6}>\r\n <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\r\n <ColorPickerInput\r\n value={styles.borderColor \|\| '#e0e0e0'}\r\n onChange={(color) => onChange('borderColor', color)}\r\n fullWidth\r\n />\r\n </Grid>\r\n )}\r\n\r\n {/ Collapse /}\r\n {!disableCollapse && ( \r\n <Grid item xs={6}>\r\n <FormControl fullWidth size=\"small\">\r\n <Select\r\n value={styles.borderCollapse \|\| 'collapse'}\r\n onChange={(e) => onChange('borderCollapse', e.target.value)}\r\n label=\"Border Collapse\"\r\n renderValue={(value) => formatText(value)}\r\n >\r\n <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\r\n <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\r\n </Select>\r\n </FormControl>\r\n </Grid>\r\n )}\r\n\r\n {/ Radius */}\r\n {!disableRadius && (\r\n <Grid item xs={12}>\r\n <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\r\n <Slider\r\n value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\r\n min={0}\r\n max={20}\r\n step={1}\r\n marks\r\n onChange={(_, value) => onChange('borderRadius', value)}\r\n valueLabelDisplay=\"auto\"\r\n sx={(theme) => ({\r\n '& .MuiSlider-rail': {\r\n color: theme.palette.theme.primary[500],\r\n },\r\n '& .MuiSlider-thumb': {\r\n color: theme.palette.theme.primary[800],\r\n },\r\n '& .MuiSlider-track': {\r\n color: theme.palette.theme.primary[600],\r\n },\r\n })}\r\n />\r\n </Grid>\r\n )}\r\n </>\r\n )}\r\n \r\n </Grid>\r\n );\r\n}\r\n \r\nexport default BorderControl;"],"names":["Android12Switch","styled","Switch","theme","padding","borderRadius","content","position","top","transform","width","height","backgroundImage","encodeURIComponent","palette","getContrastText","primary","main","left","right","boxShadow","margin","color","backgroundColor","borderStyles","styles","onChange","isBordered","disableWidth","disableStyle","disableColor","disableCollapse","disableRadius","initiateStyles","useEffect","Function","border","borderStyle","borderColor","borderCollapse","jsxs","Grid","container","spacing","children","jsx","item","xs","FormControlLabel","control","checked","e","target","label","Typography","type","weight","labelPlacement","sx","display","alignItems","justifyContent","Fragment","Select","value","fullWidth","size","map","wd","MenuItem","FormControl","renderValue","formatText","style","mb","ColorPickerInput","variant","Slider","min","max","step","marks","_","valueLabelDisplay"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\r\n/ eslint-disable unused-imports/no-unused-vars /\r\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\r\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\r\nimport Select from \"../../../../components/select/select\";\r\nimport Typography from \"../../../../components/typography/typography\";\r\nimport formatText from \"../../../../utils/format-text\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Android12Switch = styled(Switch)(({ theme }) => ({\r\n padding: 8,\r\n '& .MuiSwitch-track': {\r\n borderRadius: 22 / 2,\r\n '&::before, &::after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n width: 16,\r\n height: 16,\r\n },\r\n '&::before': {\r\n backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n theme.palette.getContrastText(theme.palette.primary.main),\r\n )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\r\n left: 12,\r\n },\r\n '&::after': {\r\n backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n theme.palette.getContrastText(theme.palette.primary.main),\r\n )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\r\n right: 12,\r\n },\r\n },\r\n '& .MuiSwitch-thumb': {\r\n boxShadow: 'none',\r\n width: 16,\r\n height: 16,\r\n margin: 2,\r\n // color: theme.palette.theme.primary[800]\r\n },\r\n '& .Mui-checked': {\r\n color: `${theme.palette.theme.primary[800]} !important`,\r\n },\r\n '& .Mui-checked+.MuiSwitch-track': {\r\n backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n },\r\n}));\r\n\r\nexport interface BorderControlProps {\r\n styles: Record<string, any>,\r\n onChange: (key: string, value: any) => void\r\n isBordered: boolean;\r\n disableWidth?: boolean;\r\n disableStyle?: boolean;\r\n disableColor?: boolean;\r\n disableCollapse?: boolean;\r\n disableRadius?: boolean;\r\n initiateStyles?: (styles: Record<string, any>) => void;\r\n}\r\n\r\nconst borderStyles = [\r\n 'none',\r\n 'solid',\r\n 'dashed',\r\n 'dotted',\r\n 'double',\r\n 'groove',\r\n 'ridge',\r\n 'inset',\r\n 'outset'\r\n];\r\n\r\nconst BorderControl:React.FC<BorderControlProps> = ({\r\n styles,\r\n onChange,\r\n isBordered,\r\n disableWidth = false,\r\n disableStyle = false,\r\n disableColor = false,\r\n disableCollapse = false,\r\n disableRadius = false,\r\n initiateStyles\r\n}) => {\r\n\r\n useEffect(() => {\r\n if(initiateStyles instanceof Function) {\r\n if (!isBordered) {\r\n initiateStyles({\r\n 'border': 0,\r\n 'borderStyle':'none',\r\n 'borderColor':'#000000',\r\n 'borderCollapse':'separate',\r\n 'borderRadius':0,\r\n });\r\n } else{\r\n initiateStyles({\r\n 'border': 1,\r\n 'borderStyle':'solid',\r\n 'borderColor':'#000000',\r\n 'borderCollapse':'collapse',\r\n 'borderRadius':0,\r\n });\r\n }\r\n }\r\n }, [isBordered]);\r\n return (\r\n <Grid container spacing={2}>\r\n <Grid item xs={12}>\r\n <FormControlLabel\r\n control={\r\n <Android12Switch\r\n checked={isBordered}\r\n onChange={(e) => onChange('is_bordered', e.target.checked)}\r\n />\r\n }\r\n label={<Typography type='s5' weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\r\n labelPlacement=\"start\"\r\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\r\n />\r\n </Grid>\r\n \r\n {isBordered && (\r\n <>\r\n {/ Width /}\r\n {!disableWidth && (\r\n <Grid item xs={6}>\r\n <Select\r\n value={styles.border \|\| 1}\r\n onChange={(e) => onChange('border', e.target.value)}\r\n label=\"Border Width\"\r\n fullWidth\r\n size=\"small\"\r\n >\r\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\r\n <MenuItem key={wd} value={wd}>\r\n <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </Grid>\r\n )}\r\n \r\n {/ Style /}\r\n {!disableStyle && ( \r\n <Grid item xs={6}>\r\n <FormControl fullWidth size=\"small\">\r\n <Select\r\n value={styles.borderStyle \|\| 'solid'}\r\n onChange={(e) => onChange('borderStyle', e.target.value)}\r\n renderValue={(value) => formatText(value)}\r\n label=\"Border Style\"\r\n >\r\n {borderStyles.map((style) => (\r\n <MenuItem key={style} value={style}>\r\n <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n </FormControl>\r\n </Grid>\r\n )}\r\n \r\n {/ Color /}\r\n {!disableColor && ( \r\n <Grid item xs={6}>\r\n <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\r\n <ColorPickerInput\r\n value={styles.borderColor \|\| '#e0e0e0'}\r\n onChange={(color) => onChange('borderColor', color)}\r\n fullWidth\r\n />\r\n </Grid>\r\n )}\r\n\r\n {/ Collapse /}\r\n {!disableCollapse && ( \r\n <Grid item xs={6}>\r\n <FormControl fullWidth size=\"small\">\r\n <Select\r\n value={styles.borderCollapse \|\| 'collapse'}\r\n onChange={(e) => onChange('borderCollapse', e.target.value)}\r\n label=\"Border Collapse\"\r\n renderValue={(value) => formatText(value)}\r\n >\r\n <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\r\n <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\r\n </Select>\r\n </FormControl>\r\n </Grid>\r\n )}\r\n\r\n {/ Radius */}\r\n {!disableRadius && (\r\n <Grid item xs={12}>\r\n <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\r\n <Slider\r\n value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\r\n min={0}\r\n max={20}\r\n step={1}\r\n marks\r\n onChange={(_, value) => onChange('borderRadius', value)}\r\n valueLabelDisplay=\"auto\"\r\n sx={(theme) => ({\r\n '& .MuiSlider-rail': {\r\n color: theme.palette.theme.primary[500],\r\n },\r\n '& .MuiSlider-thumb': {\r\n color: theme.palette.theme.primary[800],\r\n },\r\n '& .MuiSlider-track': {\r\n color: theme.palette.theme.primary[600],\r\n },\r\n })}\r\n />\r\n </Grid>\r\n )}\r\n </>\r\n )}\r\n \r\n </Grid>\r\n );\r\n}\r\n \r\nexport default BorderControl;"],"names":["Android12Switch","styled","Switch","theme","padding","borderRadius","content","position","top","transform","width","height","backgroundImage","encodeURIComponent","palette","getContrastText","primary","main","left","right","boxShadow","margin","color","backgroundColor","borderStyles","styles","onChange","isBordered","disableWidth","disableStyle","disableColor","disableCollapse","disableRadius","initiateStyles","useEffect","Function","border","borderStyle","borderColor","borderCollapse","jsxs","Grid","container","spacing","children","jsx","item","xs","FormControlLabel","control","checked","e","target","label","Typography","type","weight","labelPlacement","sx","display","alignItems","justifyContent","Fragment","Select","value","fullWidth","size","map","wd","MenuItem","FormControl","renderValue","formatText","style","mb","ColorPickerInput","variant","Slider","min","max","step","marks","_","valueLabelDisplay"],"mappings":"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"}

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.esm.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
-import Modal from "../../../../components/modal/modal/index.esm.js";
+import { Modal } from "../../../../components/modal/modal/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
-import Button from "../../../../components/button/button/index.esm.js";
-import Select from "../../../../components/select/select/index.esm.js";
+import { Button } from "../../../../components/button/button/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
 import default_1 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
 /* empty css                                   */
 import DialogTitle from "../../../../node_modules/@mui/material/DialogTitle/DialogTitle/index.esm.js";

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.js CHANGED Viewed

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),i=,/* empty css                                        */t=,/* empty css                                                  */o=,/* empty css                                          */n=,/* empty css                                          */a=;/* empty css                                                        */;/* empty css                                */var d=,/* empty css                                                                    */s=,/* empty css                                                    */r=,/* empty css                                                              */u=,/* empty css                                                                  */c=,/* empty css                                                                        */m=;/* empty css                                                                        */const x=l.lazy(()=>Promise.resolve().then(function(){return require("../../../../components/editor/custom-editor/index.js")}));exports.default=({isOpen:h,setIsOpen:p,modalProps:j,section:g,placeholders:f,handleSave:y,handleAddPlaceholder:q,handleEditorReady:v})=>{const C=()=>{p(null)};/* @__PURE__ */
-return e.jsxs(i.default,{open:h,onClose:C,maxWidth:"lg",maxHeight:"md",fullWidth:!0,...j,children:[
-/* @__PURE__ */e.jsxs(d.default,{className:"editSectionModal--DialogTitle",children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),l=,/* empty css                                        */t=,/* empty css                                                  */o=,/* empty css                                          */n=,/* empty css                                          */a=;/* empty css                                                        */;/* empty css                                */var s=,/* empty css                                                                    */d=,/* empty css                                                    */r=,/* empty css                                                              */u=,/* empty css                                                                  */c=,/* empty css                                                                        */m=;/* empty css                                                                        */const x=i.lazy(()=>Promise.resolve().then(function(){return require("../../../../components/editor/custom-editor/index.js")}));exports.default=({isOpen:h,setIsOpen:p,modalProps:j,section:g,placeholders:y,handleSave:f,handleAddPlaceholder:q,handleEditorReady:v})=>{const C=()=>{p(null)};/* @__PURE__ */
+return e.jsxs(l.Modal,{open:h,onClose:C,maxWidth:"lg",maxHeight:"md",fullWidth:!0,...j,children:[
+/* @__PURE__ */e.jsxs(s.default,{className:"editSectionModal--DialogTitle",children:[
 /* @__PURE__ */e.jsx(t.Typography,{type:"s3",color:"inherit",weight:"medium",children:"Edit Content"}),
-/* @__PURE__ */e.jsxs(s.default,{display:"flex",alignItems:"center",gap:1,position:"absolute",right:"1%",top:"4px",children:[
-/* @__PURE__ */e.jsx(n.default,{displayEmpty:!0,value:"",size:"small",renderValue:()=>"Add placeholder",fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&(q(e.target.value),e.target.value="")},children:f.map(l=>/* @__PURE__ */e.jsx(r.default,{value:l.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:l.label})},l.value))}),
+/* @__PURE__ */e.jsxs(d.default,{display:"flex",alignItems:"center",gap:1,position:"absolute",right:"1%",top:"4px",children:[
+/* @__PURE__ */e.jsx(n.Select,{displayEmpty:!0,value:"",size:"small",renderValue:()=>"Add placeholder",fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&(q(e.target.value),e.target.value="")},children:y.map(i=>/* @__PURE__ */e.jsx(r.default,{value:i.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:i.label})},i.value))}),
 /* @__PURE__ */e.jsx(u.default,{onClick:C,children:/* @__PURE__ */e.jsx(a.default,{fontSize:"small"})})]})]}),
-/* @__PURE__ */e.jsx(c.default,{className:"editSectionModal--DialogContents",children:/* @__PURE__ */e.jsx(l.Suspense,{children:/* @__PURE__ */e.jsx(x,{handleEditorReady:v,data:g.content})})}),
-/* @__PURE__ */e.jsx(m.default,{className:"editSectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(s.default,{display:"flex",gap:1.5,children:[
-/* @__PURE__ */e.jsx(o.default,{className:"editSectionModal--DialogAction--WhiteBtn",onClick:C,children:"Cancel"}),
-/* @__PURE__ */e.jsx(o.default,{onClick:e=>(e=>{y(e)})(e),children:"Save"})]})})]})};
+/* @__PURE__ */e.jsx(c.default,{className:"editSectionModal--DialogContents",children:/* @__PURE__ */e.jsx(i.Suspense,{children:/* @__PURE__ */e.jsx(x,{handleEditorReady:v,data:g.content})})}),
+/* @__PURE__ */e.jsx(m.default,{className:"editSectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(d.default,{display:"flex",gap:1.5,children:[
+/* @__PURE__ */e.jsx(o.Button,{className:"editSectionModal--DialogAction--WhiteBtn",onClick:C,children:"Cancel"}),
+/* @__PURE__ */e.jsx(o.Button,{onClick:e=>(e=>{f(e)})(e),children:"Save"})]})})]})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\r\n/ eslint-disable react-hooks/exhaustive-deps /\r\n/ eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["CustomEditor","lazy","Promise","resolve","then","require","isOpen","setIsOpen","modalProps","section","placeholders","handleSave","handleAddPlaceholder","handleEditorReady","handleModalClose","jsxs","Modal","open","onClose","maxWidth","maxHeight","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","Box","display","alignItems","gap","position","right","top","Select","displayEmpty","value","size","renderValue","sx","bgcolor","borderRadius","py","onChange","e","target","map","option","MenuItem","label","IconButton","onClick","Close","fontSize","DialogContent","Suspense","data","content","DialogActions","Button","handleContinue"],"mappings":"s9BAuBA,MAAMA,EAAeC,EAAAA,KAAK,IAAMC,QAAAC,UAAAC,KAAA,WAAA,OAAAC,QAAO,2EAcmB,EACzDC,SACAC,YACAC,aACAC,UACAC,eACAC,aACAC,uBACAC,wBAGA,MAAMC,EAAmB,KACxBP,EAAU;AAOX,OACCQ,EAAAA,KAACC,EAAAA,~~QAAA~~,CACAC,KAAMX,EACNY,QAASJ,EACTK,SAAS,KACTC,UAAU,KACVC,WAAS,KACLb,EACJc,SAAA;iBAAAP,KAACQ,EAAAA,QAAA,CAAYC,UAAU,gCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDP,KAACe,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,WAAY,SAAUC,IAAK,EAAGC,SAAS,WAAWC,MAAM,KAAKC,IAAI,MACpFd,SAAA;eAAAG,EAAAA,IAACY,EAAAA,~~QAAA~~,CACAC,cAAY,EACZC,MAAM,GACNC,KAAK,QACLC,YAAa,IAAM,kBACnBpB,WAAS,EACTqB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOT,QACZ3B,EAAqBmC,EAAEC,OAAOT,OAC9BQ,EAAEC,OAAOT,MAAQ,KAGlBjB,SAAAZ,EAAauC,IAAKC,wBACjBC,EAAAA,QAAA,CAA4BZ,MAAOW,EAAOX,MAC1CjB,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAA4B,EAAOE,SAD7CF,EAAOX;iBAKxBd,IAAC4B,EAAAA,SAAWC,QAASxC,EACpBQ,8BAACiC,UAAA,CAAMC,SAAS;eAInB/B,EAAAA,IAACgC,EAAAA,QAAA,CAAcjC,UAAU,mCACxBF,wBAAAG,EAAAA,IAACiC,EAAAA,SAAA,CACApC,wBAAAG,EAAAA,IAACzB,EAAA,CAAaa,oBAAsC8C,KAAMlD,EAAQmD;iBAGpEnC,IAACoC,EAAAA,SAAcrC,UAAU,iCACxBF,+BAACQ,EAAAA,QAAA,CAAIC,QAAQ,OAAOE,IAAK,IACxBX,SAAA;eAAAG,MAACqC,EAAAA,~~QAAA~~,CAAOtC,UAAU,2CAA2C8B,QAASxC,EAAkBQ,SAAA;eACxFG,MAACqC,EAAAA,~~SAAOR~~,QAAUP,GArDC,CAACA,IACvBpC,EAAWoC,IAoDgBgB,CAAehB,GAAIzB,SAAA"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\r\n/ eslint-disable react-hooks/exhaustive-deps /\r\n/ eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["CustomEditor","lazy","Promise","resolve","then","require","isOpen","setIsOpen","modalProps","section","placeholders","handleSave","handleAddPlaceholder","handleEditorReady","handleModalClose","jsxs","Modal","open","onClose","maxWidth","maxHeight","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","Box","display","alignItems","gap","position","right","top","Select","displayEmpty","value","size","renderValue","sx","bgcolor","borderRadius","py","onChange","e","target","map","option","MenuItem","label","IconButton","onClick","Close","fontSize","DialogContent","Suspense","data","content","DialogActions","Button","handleContinue"],"mappings":"s9BAuBA,MAAMA,EAAeC,EAAAA,KAAK,IAAMC,QAAAC,UAAAC,KAAA,WAAA,OAAAC,QAAO,2EAcmB,EACzDC,SACAC,YACAC,aACAC,UACAC,eACAC,aACAC,uBACAC,wBAGA,MAAMC,EAAmB,KACxBP,EAAU;AAOX,OACCQ,EAAAA,KAACC,EAAAA,MAAA,CACAC,KAAMX,EACNY,QAASJ,EACTK,SAAS,KACTC,UAAU,KACVC,WAAS,KACLb,EACJc,SAAA;iBAAAP,KAACQ,EAAAA,QAAA,CAAYC,UAAU,gCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDP,KAACe,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,WAAY,SAAUC,IAAK,EAAGC,SAAS,WAAWC,MAAM,KAAKC,IAAI,MACpFd,SAAA;eAAAG,EAAAA,IAACY,EAAAA,OAAA,CACAC,cAAY,EACZC,MAAM,GACNC,KAAK,QACLC,YAAa,IAAM,kBACnBpB,WAAS,EACTqB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOT,QACZ3B,EAAqBmC,EAAEC,OAAOT,OAC9BQ,EAAEC,OAAOT,MAAQ,KAGlBjB,SAAAZ,EAAauC,IAAKC,wBACjBC,EAAAA,QAAA,CAA4BZ,MAAOW,EAAOX,MAC1CjB,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAA4B,EAAOE,SAD7CF,EAAOX;iBAKxBd,IAAC4B,EAAAA,SAAWC,QAASxC,EACpBQ,8BAACiC,UAAA,CAAMC,SAAS;eAInB/B,EAAAA,IAACgC,EAAAA,QAAA,CAAcjC,UAAU,mCACxBF,wBAAAG,EAAAA,IAACiC,EAAAA,SAAA,CACApC,wBAAAG,EAAAA,IAACzB,EAAA,CAAaa,oBAAsC8C,KAAMlD,EAAQmD;iBAGpEnC,IAACoC,EAAAA,SAAcrC,UAAU,iCACxBF,+BAACQ,EAAAA,QAAA,CAAIC,QAAQ,OAAOE,IAAK,IACxBX,SAAA;eAAAG,MAACqC,EAAAA,OAAA,CAAOtC,UAAU,2CAA2C8B,QAASxC,EAAkBQ,SAAA;eACxFG,MAACqC,EAAAA,QAAOR,QAAUP,GArDC,CAACA,IACvBpC,EAAWoC,IAoDgBgB,CAAehB,GAAIzB,SAAA"}

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.esm.js CHANGED Viewed

@@ -383,6 +383,7 @@ const HtmlThumbnailPreview = ({
   );
 };
 export {
+  HtmlThumbnailPreview,
   HtmlThumbnailPreview as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars /\r\n/ eslint-disable unused-imports/no-unused-vars /\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n template, \r\n width = 300, \r\n height = 200, \r\n scale = 0.25,\r\n showControls = false,\r\n onClick = null,\r\n selectedTemplateId = '',\r\n isFetching = false,\r\n onDelete,\r\n minScale = 0.1,\r\n maxScale = 1,\r\n scaleStep = 1.2,\r\n loadingDelay = 500,\r\n refreshDelay = 300\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(isFetching \|\| true);\r\n const [currentScale, setCurrentScale] = useState(scale);\r\n const [error, setError] = useState(null);\r\n const [isHovered, setIsHovered] = useState(false);\r\n const containerRef = useRef(null);\r\n const contentRef = useRef(null);\r\n const loadingTimeoutRef = useRef(null);\r\n const refreshTimeoutRef = useRef(null);\r\n\r\n // Calculate dimensions based on scale\r\n const scaledWidth = width / currentScale;\r\n const scaledHeight = height / currentScale;\r\n\r\n // Cleanup timeouts on unmount\r\n useEffect(() => {\r\n return () => {\r\n if (loadingTimeoutRef.current) {\r\n clearTimeout(loadingTimeoutRef.current);\r\n }\r\n if (refreshTimeoutRef.current) {\r\n clearTimeout(refreshTimeoutRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n // Handle initial loading\r\n useEffect(() => {\r\n if (loadingTimeoutRef.current) {\r\n clearTimeout(loadingTimeoutRef.current);\r\n }\r\n \r\n loadingTimeoutRef.current = setTimeout(() => {\r\n setIsLoading(false);\r\n }, loadingDelay);\r\n\r\n return () => {\r\n if (loadingTimeoutRef.current) {\r\n clearTimeout(loadingTimeoutRef.current);\r\n }\r\n };\r\n }, [template.contents, loadingDelay]);\r\n\r\n // Handle external loading state\r\n useEffect(() => {\r\n setIsLoading(isFetching);\r\n }, [isFetching]);\r\n\r\n // Memoized event handlers\r\n const handleZoomIn = useCallback(() => {\r\n setCurrentScale(prev => Math.min(prev scaleStep, maxScale));\r\n }, [scaleStep, maxScale]);\r\n\r\n const handleZoomOut = useCallback(() => {\r\n setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n }, [scaleStep, minScale]);\r\n\r\n const handleRefresh = useCallback(() => {\r\n setIsLoading(true);\r\n setError(null);\r\n \r\n if (refreshTimeoutRef.current) {\r\n clearTimeout(refreshTimeoutRef.current);\r\n }\r\n \r\n refreshTimeoutRef.current = setTimeout(() => {\r\n setIsLoading(false);\r\n }, refreshDelay);\r\n }, [refreshDelay]);\r\n\r\n const handleClick = useCallback(() => {\r\n if (onClick && !isLoading) {\r\n onClick(template);\r\n }\r\n }, [onClick, template, isLoading]);\r\n\r\n const handleDelete = useCallback((e) => {\r\n e.stopPropagation(); // Prevent triggering onClick\r\n if (onDelete && !template?.is_default) {\r\n onDelete(template);\r\n }\r\n }, [onDelete, template]);\r\n\r\n const handleMouseEnter = useCallback(() => {\r\n setIsHovered(true);\r\n }, []);\r\n\r\n const handleMouseLeave = useCallback(() => {\r\n setIsHovered(false);\r\n }, []);\r\n\r\n // Loading state\r\n if (isLoading) {\r\n return (\r\n <Box \r\n sx={{ \r\n width, \r\n height,\r\n borderRadius: 1,\r\n overflow: 'hidden',\r\n border: '1px solid',\r\n borderColor: 'divider'\r\n }}\r\n >\r\n <Skeleton \r\n variant=\"rectangular\" \r\n width=\"100%\" \r\n height=\"100%\" \r\n animation=\"wave\"\r\n />\r\n </Box>\r\n );\r\n }\r\n\r\n // Error state\r\n if (error) {\r\n return (\r\n <Box \r\n sx={{ \r\n width, \r\n height,\r\n borderRadius: 1,\r\n overflow: 'hidden',\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor: 'error.light',\r\n color: 'error.contrastText'\r\n }}\r\n >\r\n Failed to load template\r\n </Box>\r\n );\r\n }\r\n\r\n const isSelected = selectedTemplateId === template._id;\r\n const canZoomIn = currentScale < maxScale;\r\n const canZoomOut = currentScale > minScale;\r\n const canDelete = !template?.is_default;\r\n\r\n return (\r\n <Box \r\n sx={{ position: 'relative', display: 'inline-block' }}\r\n onMouseEnter={handleMouseEnter}\r\n onMouseLeave={handleMouseLeave}\r\n >\r\n {/* Main Container /}\r\n <Box\r\n ref={containerRef}\r\n onClick={handleClick}\r\n sx={(theme) => ({\r\n width,\r\n height,\r\n border: '1px solid',\r\n borderRadius: 1,\r\n overflow: 'hidden',\r\n position: 'relative',\r\n cursor: onClick ? 'pointer' : 'default',\r\n backgroundColor: '#fff',\r\n // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n transition: 'all 0.2s ease-in-out',\r\n '&:hover': onClick ? {\r\n boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n transform: 'translateY(-1px)',\r\n } : {},\r\n borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n borderWidth: isSelected ? 2 : 1,\r\n })}\r\n >\r\n {/ Scaled Content Wrapper /}\r\n <Box\r\n sx={{\r\n width: scaledWidth,\r\n height: scaledHeight,\r\n transform: `scale(${currentScale})`,\r\n transformOrigin: 'top left',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n overflow: 'hidden',\r\n }}\r\n >\r\n {/ HTML Content /}\r\n <Box\r\n ref={contentRef}\r\n sx={{\r\n width: '100%',\r\n height: '100%',\r\n userSelect: 'none',\r\n pointerEvents: 'none',\r\n pt: 2,\r\n '& ': {\r\n maxWidth: '100% !important',\r\n boxSizing: 'border-box !important',\r\n },\r\n // Reset common problematic styles\r\n '& body': {\r\n margin: '0 !important',\r\n padding: '0 !important',\r\n overflow: 'hidden !important',\r\n },\r\n // Handle images\r\n '& img': {\r\n maxWidth: '100% !important',\r\n height: 'auto !important',\r\n },\r\n // Handle tables\r\n '& table': {\r\n width: '100% !important',\r\n tableLayout: 'fixed !important',\r\n },\r\n // Prevent absolute positioning issues\r\n '& [style=\"position: absolute\"]': {\r\n position: 'relative !important',\r\n },\r\n '& .email-container': {\r\n width: '85% !important',\r\n }\r\n }}\r\n dangerouslySetInnerHTML={{ __html: template.contents }}\r\n />\r\n </Box>\r\n\r\n {/* Loading Overlay /}\r\n {isLoading && (\r\n <Box\r\n sx={{\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n backgroundColor: 'rgba(255,255,255,0.8)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n zIndex: 2,\r\n }}\r\n >\r\n <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n </Box>\r\n )}\r\n\r\n {/ Selection Indicator /}\r\n {template?.is_default && (\r\n <Box\r\n sx={(theme) => ({\r\n position: 'absolute',\r\n top: 8,\r\n left: 8,\r\n width: 12,\r\n height: 12,\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.theme?.primary[800],\r\n zIndex: 3,\r\n })}\r\n />\r\n )}\r\n </Box>\r\n {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n {/ Hover Controls /}\r\n {showControls && (\r\n <Fade in={isHovered} timeout={200}>\r\n <Box\r\n sx={{\r\n position: 'absolute',\r\n top: -8,\r\n right: -8,\r\n display: 'flex',\r\n gap: 0.5,\r\n zIndex: 4,\r\n backgroundColor: 'rgba(255,255,255,0.95)',\r\n border: '1px solid',\r\n borderColor: 'grey.300',\r\n borderRadius: 2,\r\n padding: 0.5,\r\n boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n backdropFilter: 'blur(4px)',\r\n }}\r\n >\r\n <Tooltip title={`Zoom In (${Math.round(currentScale 100)}%)`} arrow>\r\n <span>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleZoomIn}\r\n disabled={!canZoomIn}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': { \r\n backgroundColor: 'primary.light',\r\n color: 'primary.contrastText' \r\n },\r\n '&:disabled': {\r\n opacity: 0.5\r\n }\r\n }}\r\n >\r\n <ZoomIn fontSize=\"small\" />\r\n </IconButton>\r\n </span>\r\n </Tooltip>\r\n\r\n <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n <span>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleZoomOut}\r\n disabled={!canZoomOut}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': { \r\n backgroundColor: 'primary.light',\r\n color: 'primary.contrastText' \r\n },\r\n '&:disabled': {\r\n opacity: 0.5\r\n }\r\n }}\r\n >\r\n <ZoomOut fontSize=\"small\" />\r\n </IconButton>\r\n </span>\r\n </Tooltip>\r\n\r\n <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n <Tooltip title=\"Refresh Preview\" arrow>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleRefresh}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': { \r\n backgroundColor: 'primary.light',\r\n color: 'primary.contrastText' \r\n },\r\n }}\r\n >\r\n <Refresh fontSize=\"small\" />\r\n </IconButton>\r\n </Tooltip>\r\n\r\n {onDelete && (\r\n <>\r\n <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n <Tooltip \r\n title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n arrow\r\n >\r\n <span>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleDelete}\r\n disabled={!canDelete}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': !canDelete ? {} : { \r\n backgroundColor: 'error.light',\r\n color: 'error.contrastText' \r\n },\r\n '&:disabled': {\r\n opacity: 0.5\r\n }\r\n }}\r\n >\r\n <Trash fontSize=\"small\" />\r\n </IconButton>\r\n </span>\r\n </Tooltip>\r\n </>\r\n )}\r\n </Box>\r\n </Fade>\r\n )}\r\n </Box>\r\n );\r\n};\r\n\r\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars /\r\n/ eslint-disable unused-imports/no-unused-vars /\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n template, \r\n width = 300, \r\n height = 200, \r\n scale = 0.25,\r\n showControls = false,\r\n onClick = null,\r\n selectedTemplateId = '',\r\n isFetching = false,\r\n onDelete,\r\n minScale = 0.1,\r\n maxScale = 1,\r\n scaleStep = 1.2,\r\n loadingDelay = 500,\r\n refreshDelay = 300\r\n}) => {\r\n const [isLoading, setIsLoading] = useState(isFetching \|\| true);\r\n const [currentScale, setCurrentScale] = useState(scale);\r\n const [error, setError] = useState(null);\r\n const [isHovered, setIsHovered] = useState(false);\r\n const containerRef = useRef(null);\r\n const contentRef = useRef(null);\r\n const loadingTimeoutRef = useRef(null);\r\n const refreshTimeoutRef = useRef(null);\r\n\r\n // Calculate dimensions based on scale\r\n const scaledWidth = width / currentScale;\r\n const scaledHeight = height / currentScale;\r\n\r\n // Cleanup timeouts on unmount\r\n useEffect(() => {\r\n return () => {\r\n if (loadingTimeoutRef.current) {\r\n clearTimeout(loadingTimeoutRef.current);\r\n }\r\n if (refreshTimeoutRef.current) {\r\n clearTimeout(refreshTimeoutRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n // Handle initial loading\r\n useEffect(() => {\r\n if (loadingTimeoutRef.current) {\r\n clearTimeout(loadingTimeoutRef.current);\r\n }\r\n \r\n loadingTimeoutRef.current = setTimeout(() => {\r\n setIsLoading(false);\r\n }, loadingDelay);\r\n\r\n return () => {\r\n if (loadingTimeoutRef.current) {\r\n clearTimeout(loadingTimeoutRef.current);\r\n }\r\n };\r\n }, [template.contents, loadingDelay]);\r\n\r\n // Handle external loading state\r\n useEffect(() => {\r\n setIsLoading(isFetching);\r\n }, [isFetching]);\r\n\r\n // Memoized event handlers\r\n const handleZoomIn = useCallback(() => {\r\n setCurrentScale(prev => Math.min(prev scaleStep, maxScale));\r\n }, [scaleStep, maxScale]);\r\n\r\n const handleZoomOut = useCallback(() => {\r\n setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n }, [scaleStep, minScale]);\r\n\r\n const handleRefresh = useCallback(() => {\r\n setIsLoading(true);\r\n setError(null);\r\n \r\n if (refreshTimeoutRef.current) {\r\n clearTimeout(refreshTimeoutRef.current);\r\n }\r\n \r\n refreshTimeoutRef.current = setTimeout(() => {\r\n setIsLoading(false);\r\n }, refreshDelay);\r\n }, [refreshDelay]);\r\n\r\n const handleClick = useCallback(() => {\r\n if (onClick && !isLoading) {\r\n onClick(template);\r\n }\r\n }, [onClick, template, isLoading]);\r\n\r\n const handleDelete = useCallback((e) => {\r\n e.stopPropagation(); // Prevent triggering onClick\r\n if (onDelete && !template?.is_default) {\r\n onDelete(template);\r\n }\r\n }, [onDelete, template]);\r\n\r\n const handleMouseEnter = useCallback(() => {\r\n setIsHovered(true);\r\n }, []);\r\n\r\n const handleMouseLeave = useCallback(() => {\r\n setIsHovered(false);\r\n }, []);\r\n\r\n // Loading state\r\n if (isLoading) {\r\n return (\r\n <Box \r\n sx={{ \r\n width, \r\n height,\r\n borderRadius: 1,\r\n overflow: 'hidden',\r\n border: '1px solid',\r\n borderColor: 'divider'\r\n }}\r\n >\r\n <Skeleton \r\n variant=\"rectangular\" \r\n width=\"100%\" \r\n height=\"100%\" \r\n animation=\"wave\"\r\n />\r\n </Box>\r\n );\r\n }\r\n\r\n // Error state\r\n if (error) {\r\n return (\r\n <Box \r\n sx={{ \r\n width, \r\n height,\r\n borderRadius: 1,\r\n overflow: 'hidden',\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor: 'error.light',\r\n color: 'error.contrastText'\r\n }}\r\n >\r\n Failed to load template\r\n </Box>\r\n );\r\n }\r\n\r\n const isSelected = selectedTemplateId === template._id;\r\n const canZoomIn = currentScale < maxScale;\r\n const canZoomOut = currentScale > minScale;\r\n const canDelete = !template?.is_default;\r\n\r\n return (\r\n <Box \r\n sx={{ position: 'relative', display: 'inline-block' }}\r\n onMouseEnter={handleMouseEnter}\r\n onMouseLeave={handleMouseLeave}\r\n >\r\n {/* Main Container /}\r\n <Box\r\n ref={containerRef}\r\n onClick={handleClick}\r\n sx={(theme) => ({\r\n width,\r\n height,\r\n border: '1px solid',\r\n borderRadius: 1,\r\n overflow: 'hidden',\r\n position: 'relative',\r\n cursor: onClick ? 'pointer' : 'default',\r\n backgroundColor: '#fff',\r\n // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n transition: 'all 0.2s ease-in-out',\r\n '&:hover': onClick ? {\r\n boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n transform: 'translateY(-1px)',\r\n } : {},\r\n borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n borderWidth: isSelected ? 2 : 1,\r\n })}\r\n >\r\n {/ Scaled Content Wrapper /}\r\n <Box\r\n sx={{\r\n width: scaledWidth,\r\n height: scaledHeight,\r\n transform: `scale(${currentScale})`,\r\n transformOrigin: 'top left',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n overflow: 'hidden',\r\n }}\r\n >\r\n {/ HTML Content /}\r\n <Box\r\n ref={contentRef}\r\n sx={{\r\n width: '100%',\r\n height: '100%',\r\n userSelect: 'none',\r\n pointerEvents: 'none',\r\n pt: 2,\r\n '& ': {\r\n maxWidth: '100% !important',\r\n boxSizing: 'border-box !important',\r\n },\r\n // Reset common problematic styles\r\n '& body': {\r\n margin: '0 !important',\r\n padding: '0 !important',\r\n overflow: 'hidden !important',\r\n },\r\n // Handle images\r\n '& img': {\r\n maxWidth: '100% !important',\r\n height: 'auto !important',\r\n },\r\n // Handle tables\r\n '& table': {\r\n width: '100% !important',\r\n tableLayout: 'fixed !important',\r\n },\r\n // Prevent absolute positioning issues\r\n '& [style=\"position: absolute\"]': {\r\n position: 'relative !important',\r\n },\r\n '& .email-container': {\r\n width: '85% !important',\r\n }\r\n }}\r\n dangerouslySetInnerHTML={{ __html: template.contents }}\r\n />\r\n </Box>\r\n\r\n {/* Loading Overlay /}\r\n {isLoading && (\r\n <Box\r\n sx={{\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n backgroundColor: 'rgba(255,255,255,0.8)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n zIndex: 2,\r\n }}\r\n >\r\n <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n </Box>\r\n )}\r\n\r\n {/ Selection Indicator /}\r\n {template?.is_default && (\r\n <Box\r\n sx={(theme) => ({\r\n position: 'absolute',\r\n top: 8,\r\n left: 8,\r\n width: 12,\r\n height: 12,\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.theme?.primary[800],\r\n zIndex: 3,\r\n })}\r\n />\r\n )}\r\n </Box>\r\n {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n {/ Hover Controls /}\r\n {showControls && (\r\n <Fade in={isHovered} timeout={200}>\r\n <Box\r\n sx={{\r\n position: 'absolute',\r\n top: -8,\r\n right: -8,\r\n display: 'flex',\r\n gap: 0.5,\r\n zIndex: 4,\r\n backgroundColor: 'rgba(255,255,255,0.95)',\r\n border: '1px solid',\r\n borderColor: 'grey.300',\r\n borderRadius: 2,\r\n padding: 0.5,\r\n boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n backdropFilter: 'blur(4px)',\r\n }}\r\n >\r\n <Tooltip title={`Zoom In (${Math.round(currentScale 100)}%)`} arrow>\r\n <span>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleZoomIn}\r\n disabled={!canZoomIn}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': { \r\n backgroundColor: 'primary.light',\r\n color: 'primary.contrastText' \r\n },\r\n '&:disabled': {\r\n opacity: 0.5\r\n }\r\n }}\r\n >\r\n <ZoomIn fontSize=\"small\" />\r\n </IconButton>\r\n </span>\r\n </Tooltip>\r\n\r\n <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n <span>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleZoomOut}\r\n disabled={!canZoomOut}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': { \r\n backgroundColor: 'primary.light',\r\n color: 'primary.contrastText' \r\n },\r\n '&:disabled': {\r\n opacity: 0.5\r\n }\r\n }}\r\n >\r\n <ZoomOut fontSize=\"small\" />\r\n </IconButton>\r\n </span>\r\n </Tooltip>\r\n\r\n <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n <Tooltip title=\"Refresh Preview\" arrow>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleRefresh}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': { \r\n backgroundColor: 'primary.light',\r\n color: 'primary.contrastText' \r\n },\r\n }}\r\n >\r\n <Refresh fontSize=\"small\" />\r\n </IconButton>\r\n </Tooltip>\r\n\r\n {onDelete && (\r\n <>\r\n <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n <Tooltip \r\n title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n arrow\r\n >\r\n <span>\r\n <IconButton\r\n size=\"small\"\r\n onClick={handleDelete}\r\n disabled={!canDelete}\r\n sx={{\r\n backgroundColor: 'transparent',\r\n '&:hover': !canDelete ? {} : { \r\n backgroundColor: 'error.light',\r\n color: 'error.contrastText' \r\n },\r\n '&:disabled': {\r\n opacity: 0.5\r\n }\r\n }}\r\n >\r\n <Trash fontSize=\"small\" />\r\n </IconButton>\r\n </span>\r\n </Tooltip>\r\n </>\r\n )}\r\n </Box>\r\n </Fade>\r\n )}\r\n </Box>\r\n );\r\n};\r\n\r\nexport { HtmlThumbnailPreview };\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":";;;;;;;;;;;;;AAQA,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AACjB,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,cAAc,IAAI;AAC7D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,oBAAoB,OAAO,IAAI;AAGrC,QAAM,cAAc,QAAQ;AAC5B,QAAM,eAAe,SAAS;AAG9B,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,qBAAa,kBAAkB,OAAO;AAAA,MACxC;AACA,UAAI,kBAAkB,SAAS;AAC7B,qBAAa,kBAAkB,OAAO;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,mBAAa,kBAAkB,OAAO;AAAA,IACxC;AAEA,sBAAkB,UAAU,WAAW,MAAM;AAC3C,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY;AAEf,WAAO,MAAM;AACX,UAAI,kBAAkB,SAAS;AAC7B,qBAAa,kBAAkB,OAAO;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,UAAU,YAAY,CAAC;AAGpC,YAAU,MAAM;AACd,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,eAAe,YAAY,MAAM;AACrC,oBAAgB,UAAQ,KAAK,IAAI,OAAO,WAAW,QAAQ,CAAC;AAAA,EAC9D,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,UAAQ,KAAK,IAAI,OAAO,WAAW,QAAQ,CAAC;AAAA,EAC9D,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,QAAM,gBAAgB,YAAY,MAAM;AACtC,iBAAa,IAAI;AACjB,aAAS,IAAI;AAEb,QAAI,kBAAkB,SAAS;AAC7B,mBAAa,kBAAkB,OAAO;AAAA,IACxC;AAEA,sBAAkB,UAAU,WAAW,MAAM;AAC3C,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY;AAAA,EACjB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,WAAW,CAAC,WAAW;AACzB,cAAQ,QAAQ;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,SAAS,UAAU,SAAS,CAAC;AAEjC,QAAM,eAAe,YAAY,CAAC,MAAM;AACtC,MAAE,gBAAA;AACF,QAAI,YAAY,EAAC,qCAAU,aAAY;AACrC,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,mBAAmB,YAAY,MAAM;AACzC,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAA,CAAE;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAGL,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,aAAa;AAAA,QAAA;AAAA,QAGf,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAGN;AAGA,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,iBAAiB;AAAA,UACjB,OAAO;AAAA,QAAA;AAAA,QAEV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIL;AAEA,QAAM,aAAa,uBAAuB,SAAS;AACnD,QAAM,YAAY,eAAe;AACjC,QAAM,aAAa,eAAe;AAClC,QAAM,YAAY,EAAC,qCAAU;AAE7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,EAAE,UAAU,YAAY,SAAS,eAAA;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,MAGd,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YACT,IAAI,CAAC,WAAW;AAAA,cACd;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,UAAU;AAAA,cACV,UAAU;AAAA,cACV,QAAQ,UAAU,YAAY;AAAA,cAC9B,iBAAiB;AAAA;AAAA,cAEjB,YAAY;AAAA,cACZ,WAAW,UAAU;AAAA,gBACnB,WAAW;AAAA,gBACX,WAAW;AAAA,cAAA,IACT,CAAA;AAAA,cACJ,aAAa,aAAa,MAAM,QAAQ,MAAM,QAAQ,GAAG,IAAI;AAAA,cAC7D,aAAa,aAAa,IAAI;AAAA,YAAA;AAAA,YAIhC,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,WAAW,SAAS,YAAY;AAAA,oBAChC,iBAAiB;AAAA,oBACjB,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM;AAAA,oBACN,UAAU;AAAA,kBAAA;AAAA,kBAIZ,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAK;AAAA,sBACL,IAAI;AAAA,wBACF,OAAO;AAAA,wBACP,QAAQ;AAAA,wBACR,YAAY;AAAA,wBACZ,eAAe;AAAA,wBACf,IAAI;AAAA,wBACJ,OAAO;AAAA,0BACL,UAAU;AAAA,0BACV,WAAW;AAAA,wBAAA;AAAA;AAAA,wBAGb,UAAU;AAAA,0BACR,QAAQ;AAAA,0BACR,SAAS;AAAA,0BACT,UAAU;AAAA,wBAAA;AAAA;AAAA,wBAGZ,SAAS;AAAA,0BACP,UAAU;AAAA,0BACV,QAAQ;AAAA,wBAAA;AAAA;AAAA,wBAGV,WAAW;AAAA,0BACT,OAAO;AAAA,0BACP,aAAa;AAAA,wBAAA;AAAA;AAAA,wBAGf,oCAAoC;AAAA,0BAClC,UAAU;AAAA,wBAAA;AAAA,wBAEZ,sBAAsB;AAAA,0BACpB,OAAO;AAAA,wBAAA;AAAA,sBACT;AAAA,sBAEF,yBAAyB,EAAE,QAAQ,SAAS,SAAA;AAAA,oBAAS;AAAA,kBAAA;AAAA,gBACvD;AAAA,cAAA;AAAA,cAID,aACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM;AAAA,oBACN,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,iBAAiB;AAAA,oBACjB,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,QAAQ;AAAA,kBAAA;AAAA,kBAGV,8BAAC,UAAA,EAAS,SAAQ,eAAc,OAAM,OAAM,QAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,eAK5D,qCAAU,eACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI,CAAC,UAAA;;AAAW;AAAA,sBACd,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,cAAc;AAAA,sBACd,kBAAiB,WAAM,QAAQ,UAAd,mBAAqB,QAAQ;AAAA,sBAC9C,QAAQ;AAAA,oBAAA;AAAA;AAAA,gBACV;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,SAGH,qCAAU,SAAQ,oBAAC,cAAW,MAAK,MAAK,QAAO,UAAS,OAAM,wBAAuB,OAAM,UAAS,IAAI,EAAC,OAAO,IAAG,IAAA,GAAO,+CAAU,MAAK;AAAA,QAGzI,gBACC,oBAAC,MAAA,EAAK,IAAI,WAAW,SAAS,KAC5B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO;AAAA,cACP,SAAS;AAAA,cACT,KAAK;AAAA,cACL,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,cAAc;AAAA,cACd,SAAS;AAAA,cACT,WAAW;AAAA,cACX,gBAAgB;AAAA,YAAA;AAAA,YAGlB,UAAA;AAAA,cAAA,oBAAC,SAAA,EAAQ,OAAO,YAAY,KAAK,MAAM,eAAe,GAAG,CAAC,MAAM,OAAK,MACnE,UAAA,oBAAC,QAAA,EACC,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,UAAU,CAAC;AAAA,kBACX,IAAI;AAAA,oBACF,iBAAiB;AAAA,oBACjB,WAAW;AAAA,sBACT,iBAAiB;AAAA,sBACjB,OAAO;AAAA,oBAAA;AAAA,oBAET,cAAc;AAAA,sBACZ,SAAS;AAAA,oBAAA;AAAA,kBACX;AAAA,kBAGF,UAAA,oBAAC,QAAA,EAAO,UAAS,QAAA,CAAQ;AAAA,gBAAA;AAAA,cAAA,GAE7B,EAAA,CACF;AAAA,kCAEC,SAAA,EAAQ,aAAY,YAAW,SAAQ,UAAS,UAAQ,MAAC;AAAA,cAE1D,oBAAC,SAAA,EAAQ,OAAO,aAAa,KAAK,MAAM,eAAe,GAAG,CAAC,MAAM,OAAK,MACpE,8BAAC,QAAA,EACC,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,UAAU,CAAC;AAAA,kBACX,IAAI;AAAA,oBACF,iBAAiB;AAAA,oBACjB,WAAW;AAAA,sBACT,iBAAiB;AAAA,sBACjB,OAAO;AAAA,oBAAA;AAAA,oBAET,cAAc;AAAA,sBACZ,SAAS;AAAA,oBAAA;AAAA,kBACX;AAAA,kBAGF,UAAA,oBAAC,SAAA,EAAQ,UAAS,QAAA,CAAQ;AAAA,gBAAA;AAAA,cAAA,GAE9B,EAAA,CACF;AAAA,kCAEC,SAAA,EAAQ,aAAY,YAAW,SAAQ,UAAS,UAAQ,MAAC;AAAA,cAE1D,oBAAC,SAAA,EAAQ,OAAM,mBAAkB,OAAK,MACpC,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,IAAI;AAAA,oBACF,iBAAiB;AAAA,oBACjB,WAAW;AAAA,sBACT,iBAAiB;AAAA,sBACjB,OAAO;AAAA,oBAAA;AAAA,kBACT;AAAA,kBAGF,UAAA,oBAAC,SAAA,EAAQ,UAAS,QAAA,CAAQ;AAAA,gBAAA;AAAA,cAAA,GAE9B;AAAA,cAEC,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,gBAAA,oBAAC,WAAQ,aAAY,YAAW,SAAQ,UAAS,UAAQ,MAAC;AAAA,gBAC1D;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,YAAY,oBAAoB;AAAA,oBACvC,OAAK;AAAA,oBAEL,8BAAC,QAAA,EACC,UAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,SAAS;AAAA,wBACT,UAAU,CAAC;AAAA,wBACX,IAAI;AAAA,0BACF,iBAAiB;AAAA,0BACjB,WAAW,CAAC,YAAY,KAAK;AAAA,4BAC3B,iBAAiB;AAAA,4BACjB,OAAO;AAAA,0BAAA;AAAA,0BAET,cAAc;AAAA,4BACZ,SAAS;AAAA,0BAAA;AAAA,wBACX;AAAA,wBAGF,UAAA,oBAAC,OAAA,EAAM,UAAS,QAAA,CAAQ;AAAA,sBAAA;AAAA,oBAAA,EAC1B,CACF;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EAEJ,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.js CHANGED Viewed

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../components/typography/typography/index.js"),o=require("../../../../node_modules/@mui/material/Box/Box/index.js"),i=require("../../../../node_modules/@mui/material/Skeleton/Skeleton/index.js"),l=require("../../../../node_modules/@mui/material/Fade/Fade/index.js"),a=require("../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),n=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),d=require("../../../../node_modules/@mui/icons-material/esm/ZoomIn/index.js"),s=require("../../../../node_modules/@mui/material/Divider/Divider/index.js"),u=require("../../../../node_modules/@mui/icons-material/esm/ZoomOut/index.js"),c=require("../../../../node_modules/@mui/icons-material/esm/Refresh/index.js"),m=require("../../../../components/icons/trash/index.js");exports.default=({template:x,width:h=300,height:p=200,scale:f=.25,showControls:b=!1,onClick:g=null,selectedTemplateId:j="",isFetching:v=!1,onDelete:y,minScale:C=.1,maxScale:k=1,scaleStep:w=1.2,loadingDelay:T=500,refreshDelay:S=300})=>{const[_,I]=t.useState(v||!0),[q,z]=t.useState(f),[R,M]=t.useState(null),[D,F]=t.useState(!1),E=t.useRef(null),B=t.useRef(null),O=t.useRef(null),Z=t.useRef(null),L=h/q,P=p/q;t.useEffect(()=>()=>{O.current&&clearTimeout(O.current),Z.current&&clearTimeout(Z.current)},[]),t.useEffect(()=>(O.current&&clearTimeout(O.current),O.current=setTimeout(()=>{I(!1)},T),()=>{O.current&&clearTimeout(O.current)}),[x.contents,T]),t.useEffect(()=>{I(v)},[v]);const W=t.useCallback(()=>{z(e=>Math.min(e*w,k))},[w,k]),$=t.useCallback(()=>{z(e=>Math.max(e/w,C))},[w,C]),H=t.useCallback(()=>{I(!0),M(null),Z.current&&clearTimeout(Z.current),Z.current=setTimeout(()=>{I(!1)},S)},[S]),Y=t.useCallback(()=>{g&&!_&&g(x)},[g,x,_]),A=t.useCallback(e=>{e.stopPropagation(),y&&!(null==x?void 0:x.is_default)&&y(x)},[y,x]),G=t.useCallback(()=>{F(!0)},[]),J=t.useCallback(()=>{F(!1)},[]);if(_)/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../components/typography/typography/index.js"),o=require("../../../../node_modules/@mui/material/Box/Box/index.js"),i=require("../../../../node_modules/@mui/material/Skeleton/Skeleton/index.js"),l=require("../../../../node_modules/@mui/material/Fade/Fade/index.js"),a=require("../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),n=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),d=require("../../../../node_modules/@mui/icons-material/esm/ZoomIn/index.js"),s=require("../../../../node_modules/@mui/material/Divider/Divider/index.js"),u=require("../../../../node_modules/@mui/icons-material/esm/ZoomOut/index.js"),c=require("../../../../node_modules/@mui/icons-material/esm/Refresh/index.js"),m=require("../../../../components/icons/trash/index.js");const x=({template:x,width:h=300,height:p=200,scale:f=.25,showControls:b=!1,onClick:g=null,selectedTemplateId:j="",isFetching:v=!1,onDelete:y,minScale:C=.1,maxScale:k=1,scaleStep:w=1.2,loadingDelay:T=500,refreshDelay:S=300})=>{const[_,I]=t.useState(v||!0),[q,z]=t.useState(f),[R,M]=t.useState(null),[D,F]=t.useState(!1),E=t.useRef(null),B=t.useRef(null),O=t.useRef(null),P=t.useRef(null),Z=h/q,L=p/q;t.useEffect(()=>()=>{O.current&&clearTimeout(O.current),P.current&&clearTimeout(P.current)},[]),t.useEffect(()=>(O.current&&clearTimeout(O.current),O.current=setTimeout(()=>{I(!1)},T),()=>{O.current&&clearTimeout(O.current)}),[x.contents,T]),t.useEffect(()=>{I(v)},[v]);const W=t.useCallback(()=>{z(e=>Math.min(e*w,k))},[w,k]),$=t.useCallback(()=>{z(e=>Math.max(e/w,C))},[w,C]),H=t.useCallback(()=>{I(!0),M(null),P.current&&clearTimeout(P.current),P.current=setTimeout(()=>{I(!1)},S)},[S]),Y=t.useCallback(()=>{g&&!_&&g(x)},[g,x,_]),A=t.useCallback(e=>{e.stopPropagation(),y&&!(null==x?void 0:x.is_default)&&y(x)},[y,x]),G=t.useCallback(()=>{F(!0)},[]),J=t.useCallback(()=>{F(!1)},[]);if(_)/* @__PURE__ */
 return e.jsx(o.default,{sx:{width:h,height:p,borderRadius:1,overflow:"hidden",border:"1px solid",borderColor:"divider"},children:/* @__PURE__ */e.jsx(i.default,{variant:"rectangular",width:"100%",height:"100%",animation:"wave"})});if(R)/* @__PURE__ */
 return e.jsx(o.default,{sx:{width:h,height:p,borderRadius:1,overflow:"hidden",border:"1px solid",borderColor:"error.main",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"error.light",color:"error.contrastText"},children:"Failed to load template"});const K=j===x._id,N=q<k,Q=q>C,U=!(null==x?void 0:x.is_default);/* @__PURE__ */
 return e.jsxs(o.default,{sx:{position:"relative",display:"inline-block"},onMouseEnter:G,onMouseLeave:J,children:[
 /* @__PURE__ */e.jsxs(o.default,{ref:E,onClick:Y,sx:e=>({width:h,height:p,border:"1px solid",borderRadius:1,overflow:"hidden",position:"relative",cursor:g?"pointer":"default",backgroundColor:"#fff",transition:"all 0.2s ease-in-out","&:hover":g?{boxShadow:"0 4px 16px rgba(0,0,0,0.15)",transform:"translateY(-1px)"}:{},borderColor:K?e.palette.theme.primary[800]:"grey.300",borderWidth:K?2:1}),children:[
-/* @__PURE__ */e.jsx(o.default,{sx:{width:L,height:P,transform:`scale(${q})`,transformOrigin:"top left",position:"absolute",top:0,left:0,overflow:"hidden"},children:/* @__PURE__ */e.jsx(o.default,{ref:B,sx:{width:"100%",height:"100%",userSelect:"none",pointerEvents:"none",pt:2,"& *":{maxWidth:"100% !important",boxSizing:"border-box !important"},"& body":{margin:"0 !important",padding:"0 !important",overflow:"hidden !important"},"& img":{maxWidth:"100% !important",height:"auto !important"},"& table":{width:"100% !important",tableLayout:"fixed !important"},'& *[style*="position: absolute"]':{position:"relative !important"},"& .email-container":{width:"85% !important"}},dangerouslySetInnerHTML:{__html:x.contents}})}),_&&/* @__PURE__ */e.jsx(o.default,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255,255,255,0.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:2},children:/* @__PURE__ */e.jsx(i.default,{variant:"rectangular",width:"90%",height:"90%"})}),(null==x?void 0:x.is_default)&&/* @__PURE__ */e.jsx(o.default,{sx:e=>{var t;return{position:"absolute",top:8,left:8,width:12,height:12,borderRadius:"50%",backgroundColor:null==(t=e.palette.theme)?void 0:t.primary[800],zIndex:3}}})]}),(null==x?void 0:x.name)&&/* @__PURE__ */e.jsx(r.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",align:"center",sx:{width:h,mt:.5},children:null==x?void 0:x.name}),b&&/* @__PURE__ */e.jsx(l.default,{in:D,timeout:200,children:/* @__PURE__ */e.jsxs(o.default,{sx:{position:"absolute",top:-8,right:-8,display:"flex",gap:.5,zIndex:4,backgroundColor:"rgba(255,255,255,0.95)",border:"1px solid",borderColor:"grey.300",borderRadius:2,padding:.5,boxShadow:"0 4px 12px rgba(0,0,0,0.15)",backdropFilter:"blur(4px)"},children:[
+/* @__PURE__ */e.jsx(o.default,{sx:{width:Z,height:L,transform:`scale(${q})`,transformOrigin:"top left",position:"absolute",top:0,left:0,overflow:"hidden"},children:/* @__PURE__ */e.jsx(o.default,{ref:B,sx:{width:"100%",height:"100%",userSelect:"none",pointerEvents:"none",pt:2,"& *":{maxWidth:"100% !important",boxSizing:"border-box !important"},"& body":{margin:"0 !important",padding:"0 !important",overflow:"hidden !important"},"& img":{maxWidth:"100% !important",height:"auto !important"},"& table":{width:"100% !important",tableLayout:"fixed !important"},'& *[style*="position: absolute"]':{position:"relative !important"},"& .email-container":{width:"85% !important"}},dangerouslySetInnerHTML:{__html:x.contents}})}),_&&/* @__PURE__ */e.jsx(o.default,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255,255,255,0.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:2},children:/* @__PURE__ */e.jsx(i.default,{variant:"rectangular",width:"90%",height:"90%"})}),(null==x?void 0:x.is_default)&&/* @__PURE__ */e.jsx(o.default,{sx:e=>{var t;return{position:"absolute",top:8,left:8,width:12,height:12,borderRadius:"50%",backgroundColor:null==(t=e.palette.theme)?void 0:t.primary[800],zIndex:3}}})]}),(null==x?void 0:x.name)&&/* @__PURE__ */e.jsx(r.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",align:"center",sx:{width:h,mt:.5},children:null==x?void 0:x.name}),b&&/* @__PURE__ */e.jsx(l.default,{in:D,timeout:200,children:/* @__PURE__ */e.jsxs(o.default,{sx:{position:"absolute",top:-8,right:-8,display:"flex",gap:.5,zIndex:4,backgroundColor:"rgba(255,255,255,0.95)",border:"1px solid",borderColor:"grey.300",borderRadius:2,padding:.5,boxShadow:"0 4px 12px rgba(0,0,0,0.15)",backdropFilter:"blur(4px)"},children:[
 /* @__PURE__ */e.jsx(a.default,{title:`Zoom In (${Math.round(100*q)}%)`,arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:W,disabled:!N,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(d.default,{fontSize:"small"})})})}),
 /* @__PURE__ */e.jsx(s.default,{orientation:"vertical",variant:"middle",flexItem:!0}),
 /* @__PURE__ */e.jsx(a.default,{title:`Zoom Out (${Math.round(100*q)}%)`,arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:$,disabled:!Q,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(u.default,{fontSize:"small"})})})}),
 /* @__PURE__ */e.jsx(s.default,{orientation:"vertical",variant:"middle",flexItem:!0}),
 /* @__PURE__ */e.jsx(a.default,{title:"Refresh Preview",arrow:!0,children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:H,sx:{backgroundColor:"transparent","&:hover":{backgroundColor:"primary.light",color:"primary.contrastText"}},children:/* @__PURE__ */e.jsx(c.default,{fontSize:"small"})})}),y&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
 /* @__PURE__ */e.jsx(s.default,{orientation:"vertical",variant:"middle",flexItem:!0}),
-/* @__PURE__ */e.jsx(a.default,{title:U?"Delete Template":"Cannot delete default template",arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:A,disabled:!U,sx:{backgroundColor:"transparent","&:hover":U?{backgroundColor:"error.light",color:"error.contrastText"}:{},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(m.Trash,{fontSize:"small"})})})})]})]})})]})};
+/* @__PURE__ */e.jsx(a.default,{title:U?"Delete Template":"Cannot delete default template",arrow:!0,children:/* @__PURE__ */e.jsx("span",{children:/* @__PURE__ */e.jsx(n.default,{size:"small",onClick:A,disabled:!U,sx:{backgroundColor:"transparent","&:hover":U?{backgroundColor:"error.light",color:"error.contrastText"}:{},"&:disabled":{opacity:.5}},children:/* @__PURE__ */e.jsx(m.Trash,{fontSize:"small"})})})})]})]})})]})};exports.HtmlThumbnailPreview=x,exports.default=x;
 //# sourceMappingURL=index.js.map