@erpsquad/common 1.8.75 → 1.8.77

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

@@ -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

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+interface TextStyles {
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: string | number;
+    textAlign?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textDecoration?: string;
+    color?: string;
+}
+interface TextControlsProps {
+    attrs: {
+        styles?: TextStyles;
+        [key: string]: any;
+    };
+    updateAttrs: (attr: Record<string, any>) => void;
+}
+declare const _default: React.NamedExoticComponent<TextControlsProps>;
+export default _default;

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

@@ -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

@@ -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

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

@@ -0,0 +1,13 @@
+export interface BorderControlProps {
+    styles: Record<string, any>;
+    onChange: (key: string, value: any) => void;
+    isBordered: boolean;
+    disableWidth?: boolean;
+    disableStyle?: boolean;
+    disableColor?: boolean;
+    disableCollapse?: boolean;
+    disableRadius?: boolean;
+    initiateStyles?: (styles: Record<string, any>) => void;
+}
+declare const BorderControl: React.FC<BorderControlProps>;
+export default BorderControl;

package/dist/views/template-editor/components/controllers/index.d.ts

@@ -0,0 +1,18 @@
+export { default as AlignmentControl } from './AlignmentControl';
+export * from './AlignmentControl';
+export { default as BorderControl } from './border-control';
+export * from './border-control';
+export { default as ButtonControls } from './ButtonControls';
+export * from './ButtonControls';
+export { default as CodeControls } from './CodeControls';
+export * from './CodeControls';
+export { default as DividerControls } from './DividerControls';
+export * from './DividerControls';
+export { default as ImageControls } from './ImageControls';
+export * from './ImageControls';
+export { default as SignatureControls } from './SignatureControls';
+export * from './SignatureControls';
+export { default as TableControls } from './TableControls';
+export * from './TableControls';
+export { default as React } from './TextControls';
+export * from './TextControls';

package/dist/views/template-editor/components/index.d.ts

@@ -0,0 +1,13 @@
+export { default as EditorCanvas } from './EditorCanvas';
+export * from './EditorCanvas';
+export { default as EditorHeader } from './EditorHeader';
+export * from './EditorHeader';
+export { default as EditorSection } from './EditorSection';
+export * from './EditorSection';
+export { default as EditorSidebar } from './EditorSidebar';
+export * from './EditorSidebar';
+export { default as SectionFlowEditor } from './SectionFlowEditor';
+export * from './SectionFlowEditor';
+export { default as SectionFormatPanel } from './SectionFormatPanel';
+export * from './SectionFormatPanel';
+export * from './controllers';

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

@@ -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

@@ -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

@@ -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 */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { lazy, Suspense } from 'react';\n\nimport Modal from '../../../components/modal/modal';\nimport Typography from '../../../components/typography/typography';\nimport Button from '../../../components/button/button';\nimport Select from '../../../components/select/select';\n\nimport {\n\tBox,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tIconButton,\n\tMenuItem\n} from '@mui/material';\nimport Close from '@mui/icons-material/Close';\n\nimport './edit-section-modal.scss';\nimport { IEmail } from '../utils/types';\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\nimport { SectionData } from '../types/editor';\n\ninterface EditSectionModalProps {\n\tisOpen: boolean;\n\tsetIsOpen: (value: boolean) => void;\n\tmodalProps: DialogProps;\n\tsection: SectionData;\n\tplaceholders: Record<string, any>[];\n\thandleSave: (e: any) => void;\n\thandleAddPlaceholder: (placeholder: string) => void;\n\thandleEditorReady: (placeholder: string) => void;\n}\n\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\n\tisOpen,\n\tsetIsOpen,\n\tmodalProps,\n\tsection,\n\tplaceholders,\n\thandleSave,\n\thandleAddPlaceholder,\n\thandleEditorReady,\n}) => {\n\n\tconst handleModalClose = () => {\n\t\tsetIsOpen(null);\n\t};\n\n\tconst handleContinue = (e) => {\n\t\thandleSave(e)\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\topen={isOpen}\n\t\t\tonClose={handleModalClose}\n\t\t\tmaxWidth='lg'\n\t\t\tmaxHeight='md'\n\t\t\tfullWidth\n\t\t\t{...modalProps}>\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\n\t\t\t\t\tEdit Content\n\t\t\t\t</Typography>\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tvalue=''\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: 'white',\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\tif (e.target.value) {\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\n\t\t\t\t\t\t\t\te.target.value = '';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{placeholders.map((option) => (\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Select>\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\n\t\t\t\t\t\t<Close fontSize='small' />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\n\t\t\t\t<Suspense>\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\n\t\t\t\t</Suspense>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\n\t\t\t\t<Box display='flex' gap={1.5}>\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\n\t\t\t\t</Box>\n\t\t\t</DialogActions>\n\t\t</Modal>\n\t);\n};\n\nexport default EditSectionModal;\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"}
+{"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 */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { lazy, Suspense } from 'react';\n\nimport Modal from '../../../components/modal/modal';\nimport Typography from '../../../components/typography/typography';\nimport Button from '../../../components/button/button';\nimport Select from '../../../components/select/select';\n\nimport {\n\tBox,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tIconButton,\n\tMenuItem\n} from '@mui/material';\nimport Close from '@mui/icons-material/Close';\n\nimport './edit-section-modal.scss';\nimport { IEmail } from '../utils/types';\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\nimport { SectionData } from '../types/editor';\n\ninterface EditSectionModalProps {\n\tisOpen: boolean;\n\tsetIsOpen: (value: boolean) => void;\n\tmodalProps: DialogProps;\n\tsection: SectionData;\n\tplaceholders: Record<string, any>[];\n\thandleSave: (e: any) => void;\n\thandleAddPlaceholder: (placeholder: string) => void;\n\thandleEditorReady: (placeholder: string) => void;\n}\n\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\n\tisOpen,\n\tsetIsOpen,\n\tmodalProps,\n\tsection,\n\tplaceholders,\n\thandleSave,\n\thandleAddPlaceholder,\n\thandleEditorReady,\n}) => {\n\n\tconst handleModalClose = () => {\n\t\tsetIsOpen(null);\n\t};\n\n\tconst handleContinue = (e) => {\n\t\thandleSave(e)\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\topen={isOpen}\n\t\t\tonClose={handleModalClose}\n\t\t\tmaxWidth='lg'\n\t\t\tmaxHeight='md'\n\t\t\tfullWidth\n\t\t\t{...modalProps}>\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\n\t\t\t\t\tEdit Content\n\t\t\t\t</Typography>\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tvalue=''\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: 'white',\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\tif (e.target.value) {\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\n\t\t\t\t\t\t\t\te.target.value = '';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{placeholders.map((option) => (\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Select>\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\n\t\t\t\t\t\t<Close fontSize='small' />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\n\t\t\t\t<Suspense>\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\n\t\t\t\t</Suspense>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\n\t\t\t\t<Box display='flex' gap={1.5}>\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\n\t\t\t\t</Box>\n\t\t\t</DialogActions>\n\t\t</Modal>\n\t);\n};\n\nexport default EditSectionModal;\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/edit-section-modal/edit-section-modal.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { DialogProps } from '@mui/material';
+import { SectionData } from '../types/editor';
+
+interface EditSectionModalProps {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+    modalProps: DialogProps;
+    section: SectionData;
+    placeholders: Record<string, any>[];
+    handleSave: (e: any) => void;
+    handleAddPlaceholder: (placeholder: string) => void;
+    handleEditorReady: (placeholder: string) => void;
+}
+declare const EditSectionModal: React.FC<EditSectionModalProps>;
+export default EditSectionModal;

package/dist/views/template-editor/edit-section-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EditSectionModal } from './edit-section-modal';
+export * from './edit-section-modal';

package/dist/views/template-editor/index.d.ts

@@ -0,0 +1,11 @@
+export * from './routes';
+export { default as Templates } from './templates';
+export * from './templates';
+export * from './add-template';
+export * from './company-selection-modal';
+export * from './components';
+export * from './edit-section-modal';
+export * from './template-modal';
+export * from './template-name-modal';
+export * from './types';
+export * from './utils';

package/dist/views/template-editor/routes.d.ts

@@ -0,0 +1,4 @@
+export declare const templateEditorRoutes: (modulePath: string, module: string) => {
+    path: string;
+    element: import("react/jsx-runtime").JSX.Element;
+}[];

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

@@ -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

@@ -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 */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\nimport { Trash } from '../../../components/icons';\nimport Typography from '../../../components/typography/typography';\n\nconst HtmlThumbnailPreview = ({ \n  template, \n  width = 300, \n  height = 200, \n  scale = 0.25,\n  showControls = false,\n  onClick = null,\n  selectedTemplateId = '',\n  isFetching = false,\n  onDelete,\n  minScale = 0.1,\n  maxScale = 1,\n  scaleStep = 1.2,\n  loadingDelay = 500,\n  refreshDelay = 300\n}) => {\n  const [isLoading, setIsLoading] = useState(isFetching || true);\n  const [currentScale, setCurrentScale] = useState(scale);\n  const [error, setError] = useState(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const containerRef = useRef(null);\n  const contentRef = useRef(null);\n  const loadingTimeoutRef = useRef(null);\n  const refreshTimeoutRef = useRef(null);\n\n  // Calculate dimensions based on scale\n  const scaledWidth = width / currentScale;\n  const scaledHeight = height / currentScale;\n\n  // Cleanup timeouts on unmount\n  useEffect(() => {\n    return () => {\n      if (loadingTimeoutRef.current) {\n        clearTimeout(loadingTimeoutRef.current);\n      }\n      if (refreshTimeoutRef.current) {\n        clearTimeout(refreshTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  // Handle initial loading\n  useEffect(() => {\n    if (loadingTimeoutRef.current) {\n      clearTimeout(loadingTimeoutRef.current);\n    }\n    \n    loadingTimeoutRef.current = setTimeout(() => {\n      setIsLoading(false);\n    }, loadingDelay);\n\n    return () => {\n      if (loadingTimeoutRef.current) {\n        clearTimeout(loadingTimeoutRef.current);\n      }\n    };\n  }, [template.contents, loadingDelay]);\n\n  // Handle external loading state\n  useEffect(() => {\n    setIsLoading(isFetching);\n  }, [isFetching]);\n\n  // Memoized event handlers\n  const handleZoomIn = useCallback(() => {\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\n  }, [scaleStep, maxScale]);\n\n  const handleZoomOut = useCallback(() => {\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\n  }, [scaleStep, minScale]);\n\n  const handleRefresh = useCallback(() => {\n    setIsLoading(true);\n    setError(null);\n    \n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n    }\n    \n    refreshTimeoutRef.current = setTimeout(() => {\n      setIsLoading(false);\n    }, refreshDelay);\n  }, [refreshDelay]);\n\n  const handleClick = useCallback(() => {\n    if (onClick && !isLoading) {\n      onClick(template);\n    }\n  }, [onClick, template, isLoading]);\n\n  const handleDelete = useCallback((e) => {\n    e.stopPropagation(); // Prevent triggering onClick\n    if (onDelete && !template?.is_default) {\n      onDelete(template);\n    }\n  }, [onDelete, template]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <Box \n        sx={{ \n          width, \n          height,\n          borderRadius: 1,\n          overflow: 'hidden',\n          border: '1px solid',\n          borderColor: 'divider'\n        }}\n      >\n        <Skeleton \n          variant=\"rectangular\" \n          width=\"100%\" \n          height=\"100%\" \n          animation=\"wave\"\n        />\n      </Box>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <Box \n        sx={{ \n          width, \n          height,\n          borderRadius: 1,\n          overflow: 'hidden',\n          border: '1px solid',\n          borderColor: 'error.main',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: 'error.light',\n          color: 'error.contrastText'\n        }}\n      >\n        Failed to load template\n      </Box>\n    );\n  }\n\n  const isSelected = selectedTemplateId === template._id;\n  const canZoomIn = currentScale < maxScale;\n  const canZoomOut = currentScale > minScale;\n  const canDelete = !template?.is_default;\n\n  return (\n    <Box \n      sx={{ position: 'relative', display: 'inline-block' }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {/* Main Container */}\n      <Box\n        ref={containerRef}\n        onClick={handleClick}\n        sx={(theme) => ({\n          width,\n          height,\n          border: '1px solid',\n          borderRadius: 1,\n          overflow: 'hidden',\n          position: 'relative',\n          cursor: onClick ? 'pointer' : 'default',\n          backgroundColor: '#fff',\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\n          transition: 'all 0.2s ease-in-out',\n          '&:hover': onClick ? {\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\n            transform: 'translateY(-1px)',\n          } : {},\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\n          borderWidth: isSelected ? 2 : 1,\n        })}\n      >\n        {/* Scaled Content Wrapper */}\n        <Box\n          sx={{\n            width: scaledWidth,\n            height: scaledHeight,\n            transform: `scale(${currentScale})`,\n            transformOrigin: 'top left',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            overflow: 'hidden',\n          }}\n        >\n          {/* HTML Content */}\n          <Box\n            ref={contentRef}\n            sx={{\n              width: '100%',\n              height: '100%',\n              userSelect: 'none',\n              pointerEvents: 'none',\n              pt: 2,\n              '& *': {\n                maxWidth: '100% !important',\n                boxSizing: 'border-box !important',\n              },\n              // Reset common problematic styles\n              '& body': {\n                margin: '0 !important',\n                padding: '0 !important',\n                overflow: 'hidden !important',\n              },\n              // Handle images\n              '& img': {\n                maxWidth: '100% !important',\n                height: 'auto !important',\n              },\n              // Handle tables\n              '& table': {\n                width: '100% !important',\n                tableLayout: 'fixed !important',\n              },\n              // Prevent absolute positioning issues\n              '& *[style*=\"position: absolute\"]': {\n                position: 'relative !important',\n              },\n              '& .email-container': {\n                width: '85% !important',\n              }\n            }}\n            dangerouslySetInnerHTML={{ __html: template.contents }}\n          />\n        </Box>\n\n        {/* Loading Overlay */}\n        {isLoading && (\n          <Box\n            sx={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              backgroundColor: 'rgba(255,255,255,0.8)',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              zIndex: 2,\n            }}\n          >\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\n          </Box>\n        )}\n\n        {/* Selection Indicator */}\n        {template?.is_default && (\n          <Box\n            sx={(theme) => ({\n              position: 'absolute',\n              top: 8,\n              left: 8,\n              width: 12,\n              height: 12,\n              borderRadius: '50%',\n              backgroundColor: theme.palette.theme?.primary[800],\n              zIndex: 3,\n            })}\n          />\n        )}\n      </Box>\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\n\n      {/* Hover Controls */}\n      {showControls && (\n        <Fade in={isHovered} timeout={200}>\n          <Box\n            sx={{\n              position: 'absolute',\n              top: -8,\n              right: -8,\n              display: 'flex',\n              gap: 0.5,\n              zIndex: 4,\n              backgroundColor: 'rgba(255,255,255,0.95)',\n              border: '1px solid',\n              borderColor: 'grey.300',\n              borderRadius: 2,\n              padding: 0.5,\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\n              backdropFilter: 'blur(4px)',\n            }}\n          >\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleZoomIn}\n                  disabled={!canZoomIn}\n                  sx={{\n                    backgroundColor: 'transparent',\n                    '&:hover': { \n                      backgroundColor: 'primary.light',\n                      color: 'primary.contrastText' \n                    },\n                    '&:disabled': {\n                      opacity: 0.5\n                    }\n                  }}\n                >\n                  <ZoomIn fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleZoomOut}\n                  disabled={!canZoomOut}\n                  sx={{\n                    backgroundColor: 'transparent',\n                    '&:hover': { \n                      backgroundColor: 'primary.light',\n                      color: 'primary.contrastText' \n                    },\n                    '&:disabled': {\n                      opacity: 0.5\n                    }\n                  }}\n                >\n                  <ZoomOut fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n\n            <Tooltip title=\"Refresh Preview\" arrow>\n              <IconButton\n                size=\"small\"\n                onClick={handleRefresh}\n                sx={{\n                  backgroundColor: 'transparent',\n                  '&:hover': { \n                    backgroundColor: 'primary.light',\n                    color: 'primary.contrastText' \n                  },\n                }}\n              >\n                <Refresh fontSize=\"small\" />\n              </IconButton>\n            </Tooltip>\n\n            {onDelete && (\n              <>\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n                <Tooltip \n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \n                  arrow\n                >\n                  <span>\n                    <IconButton\n                      size=\"small\"\n                      onClick={handleDelete}\n                      disabled={!canDelete}\n                      sx={{\n                        backgroundColor: 'transparent',\n                        '&:hover': !canDelete ? {} : { \n                          backgroundColor: 'error.light',\n                          color: 'error.contrastText' \n                        },\n                        '&:disabled': {\n                          opacity: 0.5\n                        }\n                      }}\n                    >\n                      <Trash fontSize=\"small\" />\n                    </IconButton>\n                  </span>\n                </Tooltip>\n              </>\n            )}\n          </Box>\n        </Fade>\n      )}\n    </Box>\n  );\n};\n\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}
+{"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 */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\nimport { Trash } from '../../../components/icons';\nimport Typography from '../../../components/typography/typography';\n\nconst HtmlThumbnailPreview = ({ \n  template, \n  width = 300, \n  height = 200, \n  scale = 0.25,\n  showControls = false,\n  onClick = null,\n  selectedTemplateId = '',\n  isFetching = false,\n  onDelete,\n  minScale = 0.1,\n  maxScale = 1,\n  scaleStep = 1.2,\n  loadingDelay = 500,\n  refreshDelay = 300\n}) => {\n  const [isLoading, setIsLoading] = useState(isFetching || true);\n  const [currentScale, setCurrentScale] = useState(scale);\n  const [error, setError] = useState(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const containerRef = useRef(null);\n  const contentRef = useRef(null);\n  const loadingTimeoutRef = useRef(null);\n  const refreshTimeoutRef = useRef(null);\n\n  // Calculate dimensions based on scale\n  const scaledWidth = width / currentScale;\n  const scaledHeight = height / currentScale;\n\n  // Cleanup timeouts on unmount\n  useEffect(() => {\n    return () => {\n      if (loadingTimeoutRef.current) {\n        clearTimeout(loadingTimeoutRef.current);\n      }\n      if (refreshTimeoutRef.current) {\n        clearTimeout(refreshTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  // Handle initial loading\n  useEffect(() => {\n    if (loadingTimeoutRef.current) {\n      clearTimeout(loadingTimeoutRef.current);\n    }\n    \n    loadingTimeoutRef.current = setTimeout(() => {\n      setIsLoading(false);\n    }, loadingDelay);\n\n    return () => {\n      if (loadingTimeoutRef.current) {\n        clearTimeout(loadingTimeoutRef.current);\n      }\n    };\n  }, [template.contents, loadingDelay]);\n\n  // Handle external loading state\n  useEffect(() => {\n    setIsLoading(isFetching);\n  }, [isFetching]);\n\n  // Memoized event handlers\n  const handleZoomIn = useCallback(() => {\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\n  }, [scaleStep, maxScale]);\n\n  const handleZoomOut = useCallback(() => {\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\n  }, [scaleStep, minScale]);\n\n  const handleRefresh = useCallback(() => {\n    setIsLoading(true);\n    setError(null);\n    \n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n    }\n    \n    refreshTimeoutRef.current = setTimeout(() => {\n      setIsLoading(false);\n    }, refreshDelay);\n  }, [refreshDelay]);\n\n  const handleClick = useCallback(() => {\n    if (onClick && !isLoading) {\n      onClick(template);\n    }\n  }, [onClick, template, isLoading]);\n\n  const handleDelete = useCallback((e) => {\n    e.stopPropagation(); // Prevent triggering onClick\n    if (onDelete && !template?.is_default) {\n      onDelete(template);\n    }\n  }, [onDelete, template]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <Box \n        sx={{ \n          width, \n          height,\n          borderRadius: 1,\n          overflow: 'hidden',\n          border: '1px solid',\n          borderColor: 'divider'\n        }}\n      >\n        <Skeleton \n          variant=\"rectangular\" \n          width=\"100%\" \n          height=\"100%\" \n          animation=\"wave\"\n        />\n      </Box>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <Box \n        sx={{ \n          width, \n          height,\n          borderRadius: 1,\n          overflow: 'hidden',\n          border: '1px solid',\n          borderColor: 'error.main',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: 'error.light',\n          color: 'error.contrastText'\n        }}\n      >\n        Failed to load template\n      </Box>\n    );\n  }\n\n  const isSelected = selectedTemplateId === template._id;\n  const canZoomIn = currentScale < maxScale;\n  const canZoomOut = currentScale > minScale;\n  const canDelete = !template?.is_default;\n\n  return (\n    <Box \n      sx={{ position: 'relative', display: 'inline-block' }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {/* Main Container */}\n      <Box\n        ref={containerRef}\n        onClick={handleClick}\n        sx={(theme) => ({\n          width,\n          height,\n          border: '1px solid',\n          borderRadius: 1,\n          overflow: 'hidden',\n          position: 'relative',\n          cursor: onClick ? 'pointer' : 'default',\n          backgroundColor: '#fff',\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\n          transition: 'all 0.2s ease-in-out',\n          '&:hover': onClick ? {\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\n            transform: 'translateY(-1px)',\n          } : {},\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\n          borderWidth: isSelected ? 2 : 1,\n        })}\n      >\n        {/* Scaled Content Wrapper */}\n        <Box\n          sx={{\n            width: scaledWidth,\n            height: scaledHeight,\n            transform: `scale(${currentScale})`,\n            transformOrigin: 'top left',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            overflow: 'hidden',\n          }}\n        >\n          {/* HTML Content */}\n          <Box\n            ref={contentRef}\n            sx={{\n              width: '100%',\n              height: '100%',\n              userSelect: 'none',\n              pointerEvents: 'none',\n              pt: 2,\n              '& *': {\n                maxWidth: '100% !important',\n                boxSizing: 'border-box !important',\n              },\n              // Reset common problematic styles\n              '& body': {\n                margin: '0 !important',\n                padding: '0 !important',\n                overflow: 'hidden !important',\n              },\n              // Handle images\n              '& img': {\n                maxWidth: '100% !important',\n                height: 'auto !important',\n              },\n              // Handle tables\n              '& table': {\n                width: '100% !important',\n                tableLayout: 'fixed !important',\n              },\n              // Prevent absolute positioning issues\n              '& *[style*=\"position: absolute\"]': {\n                position: 'relative !important',\n              },\n              '& .email-container': {\n                width: '85% !important',\n              }\n            }}\n            dangerouslySetInnerHTML={{ __html: template.contents }}\n          />\n        </Box>\n\n        {/* Loading Overlay */}\n        {isLoading && (\n          <Box\n            sx={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              backgroundColor: 'rgba(255,255,255,0.8)',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              zIndex: 2,\n            }}\n          >\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\n          </Box>\n        )}\n\n        {/* Selection Indicator */}\n        {template?.is_default && (\n          <Box\n            sx={(theme) => ({\n              position: 'absolute',\n              top: 8,\n              left: 8,\n              width: 12,\n              height: 12,\n              borderRadius: '50%',\n              backgroundColor: theme.palette.theme?.primary[800],\n              zIndex: 3,\n            })}\n          />\n        )}\n      </Box>\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\n\n      {/* Hover Controls */}\n      {showControls && (\n        <Fade in={isHovered} timeout={200}>\n          <Box\n            sx={{\n              position: 'absolute',\n              top: -8,\n              right: -8,\n              display: 'flex',\n              gap: 0.5,\n              zIndex: 4,\n              backgroundColor: 'rgba(255,255,255,0.95)',\n              border: '1px solid',\n              borderColor: 'grey.300',\n              borderRadius: 2,\n              padding: 0.5,\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\n              backdropFilter: 'blur(4px)',\n            }}\n          >\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleZoomIn}\n                  disabled={!canZoomIn}\n                  sx={{\n                    backgroundColor: 'transparent',\n                    '&:hover': { \n                      backgroundColor: 'primary.light',\n                      color: 'primary.contrastText' \n                    },\n                    '&:disabled': {\n                      opacity: 0.5\n                    }\n                  }}\n                >\n                  <ZoomIn fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleZoomOut}\n                  disabled={!canZoomOut}\n                  sx={{\n                    backgroundColor: 'transparent',\n                    '&:hover': { \n                      backgroundColor: 'primary.light',\n                      color: 'primary.contrastText' \n                    },\n                    '&:disabled': {\n                      opacity: 0.5\n                    }\n                  }}\n                >\n                  <ZoomOut fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n\n            <Tooltip title=\"Refresh Preview\" arrow>\n              <IconButton\n                size=\"small\"\n                onClick={handleRefresh}\n                sx={{\n                  backgroundColor: 'transparent',\n                  '&:hover': { \n                    backgroundColor: 'primary.light',\n                    color: 'primary.contrastText' \n                  },\n                }}\n              >\n                <Refresh fontSize=\"small\" />\n              </IconButton>\n            </Tooltip>\n\n            {onDelete && (\n              <>\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n                <Tooltip \n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \n                  arrow\n                >\n                  <span>\n                    <IconButton\n                      size=\"small\"\n                      onClick={handleDelete}\n                      disabled={!canDelete}\n                      sx={{\n                        backgroundColor: 'transparent',\n                        '&:hover': !canDelete ? {} : { \n                          backgroundColor: 'error.light',\n                          color: 'error.contrastText' \n                        },\n                        '&:disabled': {\n                          opacity: 0.5\n                        }\n                      }}\n                    >\n                      <Trash fontSize=\"small\" />\n                    </IconButton>\n                  </span>\n                </Tooltip>\n              </>\n            )}\n          </Box>\n        </Fade>\n      )}\n    </Box>\n  );\n};\n\nexport { HtmlThumbnailPreview };\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}