@erpsquad/common 1.8.40 → 1.8.41

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

@@ -1,13 +1,22 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React__default, { useMemo, useCallback } from "react";
-import { Box, FormControl, MenuItem, styled, Tooltip, ToggleButton, TextField, InputAdornment, ToggleButtonGroup, toggleButtonGroupClasses } from "@mui/material";
-import FormatBoldIcon from "@mui/icons-material/FormatBold";
-import FormatItalicIcon from "@mui/icons-material/FormatItalic";
-import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
-import ColorLensIcon from "@mui/icons-material/ColorLens";
+import default_1 from "../../../../../node_modules/@mui/icons-material/FormatBold/index.esm.js";
+import default_1$1 from "../../../../../node_modules/@mui/icons-material/FormatItalic/index.esm.js";
+import default_1$2 from "../../../../../node_modules/@mui/icons-material/FormatUnderlined/index.esm.js";
+import default_1$3 from "../../../../../node_modules/@mui/icons-material/ColorLens/index.esm.js";
 import { debounce } from "lodash";
 import Select from "../../../../../components/select/select/index.esm.js";
 import AlignmentControl from "../AlignmentControl/index.esm.js";
+import Box from "../../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import FormControl from "../../../../../node_modules/@mui/material/FormControl/FormControl/index.esm.js";
+import MenuItem from "../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import styled from "../../../../../node_modules/@mui/material/styles/styled/index.esm.js";
+import Tooltip from "../../../../../node_modules/@mui/material/Tooltip/Tooltip/index.esm.js";
+import ToggleButton from "../../../../../node_modules/@mui/material/ToggleButton/ToggleButton/index.esm.js";
+import TextField from "../../../../../node_modules/@mui/material/TextField/TextField/index.esm.js";
+import InputAdornment from "../../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
+import ToggleButtonGroup from "../../../../../node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup/index.esm.js";
+import toggleButtonGroupClasses from "../../../../../node_modules/@mui/material/ToggleButtonGroup/toggleButtonGroupClasses/index.esm.js";
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(
   ({ theme, item = 4 }) => ({
     display: "grid",
@@ -166,7 +175,7 @@ const TextControls = ({ attrs, updateAttrs }) => {
           "aria-label": "bold",
           size: "small",
           sx: { borderRadius: 1 },
-          children: /* @__PURE__ */ jsx(FormatBoldIcon, { fontSize: "small" })
+          children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" })
         }
       ) }),
       /* @__PURE__ */ jsx(Tooltip, { title: "Italic", children: /* @__PURE__ */ jsx(
@@ -178,7 +187,7 @@ const TextControls = ({ attrs, updateAttrs }) => {
           "aria-label": "italic",
           size: "small",
           sx: { borderRadius: 1 },
-          children: /* @__PURE__ */ jsx(FormatItalicIcon, { fontSize: "small" })
+          children: /* @__PURE__ */ jsx(default_1$1, { fontSize: "small" })
         }
       ) }),
       /* @__PURE__ */ jsx(Tooltip, { title: "Underline", children: /* @__PURE__ */ jsx(
@@ -190,7 +199,7 @@ const TextControls = ({ attrs, updateAttrs }) => {
           "aria-label": "underline",
           size: "small",
           sx: { borderRadius: 1 },
-          children: /* @__PURE__ */ jsx(FormatUnderlinedIcon, { fontSize: "small" })
+          children: /* @__PURE__ */ jsx(default_1$2, { fontSize: "small" })
         }
       ) })
     ] }) }),
@@ -205,7 +214,7 @@ const TextControls = ({ attrs, updateAttrs }) => {
         size: "small",
         fullWidth: true,
         InputProps: {
-          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(ColorLensIcon, { fontSize: "small" }) })
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(default_1$3, { fontSize: "small" }) })
         }
       }
     ) })

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

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

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

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

@@ -1,10 +1,16 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Grid, FormControlLabel, styled, MenuItem, FormControl, Slider, Switch } from "@mui/material";
 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 { 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";
+import styled from "../../../../../node_modules/@mui/material/styles/styled/index.esm.js";
+import MenuItem from "../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import FormControl from "../../../../../node_modules/@mui/material/FormControl/FormControl/index.esm.js";
+import Slider from "../../../../../node_modules/@mui/material/Slider/Slider/index.esm.js";
+import Switch from "../../../../../node_modules/@mui/material/Switch/Switch/index.esm.js";
 const Android12Switch = styled(Switch)(({ theme }) => ({
   padding: 8,
   "& .MuiSwitch-track": {

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\r\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\r\nimport Select from \"../../../../components/select/select\";\r\nimport Typography from \"../../../../components/typography/typography\";\r\nimport formatText from \"../../../../utils/format-text\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Android12Switch = styled(Switch)(({ theme }) => ({\r\n  padding: 8,\r\n  '& .MuiSwitch-track': {\r\n    borderRadius: 22 / 2,\r\n    '&::before, &::after': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)',\r\n      width: 16,\r\n      height: 16,\r\n    },\r\n    '&::before': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\r\n      left: 12,\r\n    },\r\n    '&::after': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\r\n      right: 12,\r\n    },\r\n  },\r\n  '& .MuiSwitch-thumb': {\r\n    boxShadow: 'none',\r\n    width: 16,\r\n    height: 16,\r\n    margin: 2,\r\n    // color: theme.palette.theme.primary[800]\r\n  },\r\n  '& .Mui-checked': {\r\n    color: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n  '& .Mui-checked+.MuiSwitch-track': {\r\n    backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n}));\r\n\r\nexport interface BorderControlProps {\r\n  styles: Record<string, any>,\r\n  onChange: (key: string, value: any) => void\r\n  isBordered: boolean;\r\n  disableWidth?: boolean;\r\n  disableStyle?: boolean;\r\n  disableColor?: boolean;\r\n  disableCollapse?: boolean;\r\n  disableRadius?: boolean;\r\n  initiateStyles?: (styles: Record<string, any>) => void;\r\n}\r\n\r\nconst borderStyles = [\r\n  'none',\r\n  'solid',\r\n  'dashed',\r\n  'dotted',\r\n  'double',\r\n  'groove',\r\n  'ridge',\r\n  'inset',\r\n  'outset'\r\n];\r\n\r\nconst BorderControl:React.FC<BorderControlProps> = ({\r\n  styles,\r\n  onChange,\r\n  isBordered,\r\n  disableWidth = false,\r\n  disableStyle = false,\r\n  disableColor = false,\r\n  disableCollapse = false,\r\n  disableRadius = false,\r\n  initiateStyles\r\n}) => {\r\n\r\n  useEffect(() => {\r\n    if(initiateStyles instanceof Function) {\r\n        if (!isBordered) {\r\n          initiateStyles({\r\n            'border': 0,\r\n            'borderStyle':'none',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'separate',\r\n            'borderRadius':0,\r\n          });\r\n        } else{\r\n          initiateStyles({\r\n            'border': 1,\r\n            'borderStyle':'solid',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'collapse',\r\n            'borderRadius':0,\r\n          });\r\n        }\r\n    }\r\n  }, [isBordered]);\r\n  return (\r\n    <Grid container spacing={2}>\r\n      <Grid item xs={12}>\r\n        <FormControlLabel\r\n          control={\r\n            <Android12Switch\r\n              checked={isBordered}\r\n              onChange={(e) => onChange('is_bordered', e.target.checked)}\r\n            />\r\n          }\r\n          label={<Typography type='s5'  weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\r\n          labelPlacement=\"start\"\r\n          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\r\n        />\r\n      </Grid>\r\n      \r\n      {isBordered && (\r\n        <>\r\n        {/* Width */}\r\n        {!disableWidth && (\r\n          <Grid item xs={6}>\r\n            <Select\r\n                value={styles.border || 1}\r\n                onChange={(e) => onChange('border', e.target.value)}\r\n                label=\"Border Width\"\r\n                fullWidth\r\n                size=\"small\"\r\n              >\r\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\r\n                  <MenuItem key={wd} value={wd}>\r\n                    <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\r\n                  </MenuItem>\r\n                ))}\r\n              </Select>\r\n          </Grid>\r\n        )}\r\n          \r\n          {/* Style */}\r\n          {!disableStyle && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderStyle || 'solid'}\r\n                  onChange={(e) => onChange('borderStyle', e.target.value)}\r\n                  renderValue={(value) => formatText(value)}\r\n                  label=\"Border Style\"\r\n                >\r\n                  {borderStyles.map((style) => (\r\n                    <MenuItem key={style} value={style}>\r\n                      <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\r\n                    </MenuItem>\r\n                  ))}\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n          \r\n          {/* Color */}\r\n          {!disableColor && (  \r\n            <Grid item xs={6}>\r\n              <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\r\n              <ColorPickerInput\r\n                value={styles.borderColor || '#e0e0e0'}\r\n                onChange={(color) => onChange('borderColor', color)}\r\n                fullWidth\r\n              />\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Collapse */}\r\n          {!disableCollapse && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderCollapse || 'collapse'}\r\n                  onChange={(e) => onChange('borderCollapse', e.target.value)}\r\n                  label=\"Border Collapse\"\r\n                  renderValue={(value) => formatText(value)}\r\n                >\r\n                  <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\r\n                  <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Radius */}\r\n          {!disableRadius && (\r\n            <Grid item xs={12}>\r\n            <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\r\n            <Slider\r\n              value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\r\n              min={0}\r\n              max={20}\r\n              step={1}\r\n              marks\r\n              onChange={(_, value) => onChange('borderRadius', value)}\r\n              valueLabelDisplay=\"auto\"\r\n              sx={(theme) => ({\r\n                '& .MuiSlider-rail': {\r\n                  color: theme.palette.theme.primary[500],\r\n                },\r\n                '& .MuiSlider-thumb': {\r\n                  color: theme.palette.theme.primary[800],\r\n                },\r\n                '& .MuiSlider-track': {\r\n                  color: theme.palette.theme.primary[600],\r\n                },\r\n              })}\r\n            />\r\n          </Grid>\r\n          )}\r\n        </>\r\n      )}\r\n      \r\n    </Grid>\r\n  );\r\n}\r\n \r\nexport default BorderControl;"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\r\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\r\nimport Select from \"../../../../components/select/select\";\r\nimport Typography from \"../../../../components/typography/typography\";\r\nimport formatText from \"../../../../utils/format-text\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Android12Switch = styled(Switch)(({ theme }) => ({\r\n  padding: 8,\r\n  '& .MuiSwitch-track': {\r\n    borderRadius: 22 / 2,\r\n    '&::before, &::after': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)',\r\n      width: 16,\r\n      height: 16,\r\n    },\r\n    '&::before': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\r\n      left: 12,\r\n    },\r\n    '&::after': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\r\n      right: 12,\r\n    },\r\n  },\r\n  '& .MuiSwitch-thumb': {\r\n    boxShadow: 'none',\r\n    width: 16,\r\n    height: 16,\r\n    margin: 2,\r\n    // color: theme.palette.theme.primary[800]\r\n  },\r\n  '& .Mui-checked': {\r\n    color: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n  '& .Mui-checked+.MuiSwitch-track': {\r\n    backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n}));\r\n\r\nexport interface BorderControlProps {\r\n  styles: Record<string, any>,\r\n  onChange: (key: string, value: any) => void\r\n  isBordered: boolean;\r\n  disableWidth?: boolean;\r\n  disableStyle?: boolean;\r\n  disableColor?: boolean;\r\n  disableCollapse?: boolean;\r\n  disableRadius?: boolean;\r\n  initiateStyles?: (styles: Record<string, any>) => void;\r\n}\r\n\r\nconst borderStyles = [\r\n  'none',\r\n  'solid',\r\n  'dashed',\r\n  'dotted',\r\n  'double',\r\n  'groove',\r\n  'ridge',\r\n  'inset',\r\n  'outset'\r\n];\r\n\r\nconst BorderControl:React.FC<BorderControlProps> = ({\r\n  styles,\r\n  onChange,\r\n  isBordered,\r\n  disableWidth = false,\r\n  disableStyle = false,\r\n  disableColor = false,\r\n  disableCollapse = false,\r\n  disableRadius = false,\r\n  initiateStyles\r\n}) => {\r\n\r\n  useEffect(() => {\r\n    if(initiateStyles instanceof Function) {\r\n        if (!isBordered) {\r\n          initiateStyles({\r\n            'border': 0,\r\n            'borderStyle':'none',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'separate',\r\n            'borderRadius':0,\r\n          });\r\n        } else{\r\n          initiateStyles({\r\n            'border': 1,\r\n            'borderStyle':'solid',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'collapse',\r\n            'borderRadius':0,\r\n          });\r\n        }\r\n    }\r\n  }, [isBordered]);\r\n  return (\r\n    <Grid container spacing={2}>\r\n      <Grid item xs={12}>\r\n        <FormControlLabel\r\n          control={\r\n            <Android12Switch\r\n              checked={isBordered}\r\n              onChange={(e) => onChange('is_bordered', e.target.checked)}\r\n            />\r\n          }\r\n          label={<Typography type='s5'  weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\r\n          labelPlacement=\"start\"\r\n          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\r\n        />\r\n      </Grid>\r\n      \r\n      {isBordered && (\r\n        <>\r\n        {/* Width */}\r\n        {!disableWidth && (\r\n          <Grid item xs={6}>\r\n            <Select\r\n                value={styles.border || 1}\r\n                onChange={(e) => onChange('border', e.target.value)}\r\n                label=\"Border Width\"\r\n                fullWidth\r\n                size=\"small\"\r\n              >\r\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\r\n                  <MenuItem key={wd} value={wd}>\r\n                    <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\r\n                  </MenuItem>\r\n                ))}\r\n              </Select>\r\n          </Grid>\r\n        )}\r\n          \r\n          {/* Style */}\r\n          {!disableStyle && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderStyle || 'solid'}\r\n                  onChange={(e) => onChange('borderStyle', e.target.value)}\r\n                  renderValue={(value) => formatText(value)}\r\n                  label=\"Border Style\"\r\n                >\r\n                  {borderStyles.map((style) => (\r\n                    <MenuItem key={style} value={style}>\r\n                      <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\r\n                    </MenuItem>\r\n                  ))}\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n          \r\n          {/* Color */}\r\n          {!disableColor && (  \r\n            <Grid item xs={6}>\r\n              <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\r\n              <ColorPickerInput\r\n                value={styles.borderColor || '#e0e0e0'}\r\n                onChange={(color) => onChange('borderColor', color)}\r\n                fullWidth\r\n              />\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Collapse */}\r\n          {!disableCollapse && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderCollapse || 'collapse'}\r\n                  onChange={(e) => onChange('borderCollapse', e.target.value)}\r\n                  label=\"Border Collapse\"\r\n                  renderValue={(value) => formatText(value)}\r\n                >\r\n                  <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\r\n                  <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Radius */}\r\n          {!disableRadius && (\r\n            <Grid item xs={12}>\r\n            <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\r\n            <Slider\r\n              value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\r\n              min={0}\r\n              max={20}\r\n              step={1}\r\n              marks\r\n              onChange={(_, value) => onChange('borderRadius', value)}\r\n              valueLabelDisplay=\"auto\"\r\n              sx={(theme) => ({\r\n                '& .MuiSlider-rail': {\r\n                  color: theme.palette.theme.primary[500],\r\n                },\r\n                '& .MuiSlider-thumb': {\r\n                  color: theme.palette.theme.primary[800],\r\n                },\r\n                '& .MuiSlider-track': {\r\n                  color: theme.palette.theme.primary[600],\r\n                },\r\n              })}\r\n            />\r\n          </Grid>\r\n          )}\r\n        </>\r\n      )}\r\n      \r\n    </Grid>\r\n  );\r\n}\r\n \r\nexport default BorderControl;"],"names":[],"mappings":";;;;;;;;;;;;;AASA,MAAM,kBAAkB,OAAO,MAAM,EAAE,CAAC,EAAE,aAAa;AAAA,EACrD,SAAS;AAAA,EACT,sBAAsB;AAAA,IACpB,cAAc,KAAK;AAAA,IACnB,uBAAuB;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV,aAAa;AAAA,MACX,iBAAiB,+HAA+H;AAAA,QAC9I,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAAA,CACzD;AAAA,MACD,MAAM;AAAA,IAAA;AAAA,IAER,YAAY;AAAA,MACV,iBAAiB,+HAA+H;AAAA,QAC9I,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,QAAQ,IAAI;AAAA,MAAA,CACzD;AAAA,MACD,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,sBAAsB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA;AAAA,EAAA;AAAA,EAGV,kBAAkB;AAAA,IAChB,OAAO,GAAG,MAAM,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAAA,EAAA;AAAA,EAE5C,mCAAmC;AAAA,IACjC,iBAAiB,GAAG,MAAM,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAAA,EAAA;AAExD,EAAE;AAcF,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,gBAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB;AACF,MAAM;AAEJ,YAAU,MAAM;AACd,QAAG,0BAA0B,UAAU;AACnC,UAAI,CAAC,YAAY;AACf,uBAAe;AAAA,UACb,UAAU;AAAA,UACV,eAAc;AAAA,UACd,eAAc;AAAA,UACd,kBAAiB;AAAA,UACjB,gBAAe;AAAA,QAAA,CAChB;AAAA,MACH,OAAM;AACJ,uBAAe;AAAA,UACb,UAAU;AAAA,UACV,eAAc;AAAA,UACd,eAAc;AAAA,UACd,kBAAiB;AAAA,UACjB,gBAAe;AAAA,QAAA,CAChB;AAAA,MACH;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AACf,SACE,qBAAC,MAAA,EAAK,WAAS,MAAC,SAAS,GACvB,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,MAAI,MAAC,IAAI,IACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,CAAC,MAAM,SAAS,eAAe,EAAE,OAAO,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7D,2BAAQ,YAAA,EAAW,MAAK,MAAM,QAAO,UAAS,OAAM,uBAAsB,UAAA,iBAAA,CAAc;AAAA,QACxF,gBAAe;AAAA,QACf,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,QAAQ,OAAA;AAAA,MAAM;AAAA,IAAA,GAEhG;AAAA,IAEC,cACC,qBAAA,UAAA,EAEC,UAAA;AAAA,MAAA,CAAC,gBACA,oBAAC,MAAA,EAAK,MAAI,MAAC,IAAI,GACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,OAAO,OAAO,UAAU;AAAA,UACxB,UAAU,CAAC,MAAM,SAAS,UAAU,EAAE,OAAO,KAAK;AAAA,UAClD,OAAM;AAAA,UACN,WAAS;AAAA,UACT,MAAK;AAAA,UAEJ,UAAA,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,EAAE,IAAI,CAAC,OACpC,oBAAC,UAAA,EAAkB,OAAO,IACxB,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,GAAA,CAAG,EAAA,GAD1C,EAEf,CACD;AAAA,QAAA;AAAA,MAAA,GAEP;AAAA,MAIC,CAAC,gBACA,oBAAC,MAAA,EAAK,MAAI,MAAC,IAAI,GACb,UAAA,oBAAC,aAAA,EAAY,WAAS,MAAC,MAAK,SAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO,eAAe;AAAA,UAC7B,UAAU,CAAC,MAAM,SAAS,eAAe,EAAE,OAAO,KAAK;AAAA,UACvD,aAAa,CAAC,UAAU,WAAW,KAAK;AAAA,UACxC,OAAM;AAAA,UAEL,uBAAa,IAAI,CAAC,UACjB,oBAAC,UAAA,EAAqB,OAAO,OAC3B,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,WAAW,KAAK,EAAA,CAAE,EAAA,GADzD,KAEf,CACD;AAAA,QAAA;AAAA,MAAA,GAEL,EAAA,CACF;AAAA,MAID,CAAC,gBACA,qBAAC,QAAK,MAAI,MAAC,IAAI,GACb,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAAS,OAAM,uBAAsB,IAAI,KAAK,UAAA,eAAA,CAAY;AAAA,QACvF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,OAAO,eAAe;AAAA,YAC7B,UAAU,CAAC,UAAU,SAAS,eAAe,KAAK;AAAA,YAClD,WAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACX,GACF;AAAA,MAID,CAAC,mBACA,oBAAC,MAAA,EAAK,MAAI,MAAC,IAAI,GACb,UAAA,oBAAC,aAAA,EAAY,WAAS,MAAC,MAAK,SAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO,kBAAkB;AAAA,UAChC,UAAU,CAAC,MAAM,SAAS,kBAAkB,EAAE,OAAO,KAAK;AAAA,UAC1D,OAAM;AAAA,UACN,aAAa,CAAC,UAAU,WAAW,KAAK;AAAA,UAExC,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAS,OAAM,YAAW,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,wBAAuB,UAAA,WAAA,CAAQ,GAAa;AAAA,YACnG,oBAAC,UAAA,EAAS,OAAM,YAAW,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,wBAAuB,UAAA,WAAA,CAAQ,EAAA,CAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEvG,EAAA,CACF;AAAA,MAID,CAAC,iBACA,qBAAC,QAAK,MAAI,MAAC,IAAI,IACf,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAAS,OAAM,uBAAsB,SAAQ,WAAU,UAAA,gBAAA,CAAa;AAAA,QACjG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,OAAO,OAAO,iBAAiB,WAAW,OAAO,eAAe;AAAA,YACvE,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAK;AAAA,YACL,UAAU,CAAC,GAAG,UAAU,SAAS,gBAAgB,KAAK;AAAA,YACtD,mBAAkB;AAAA,YAClB,IAAI,CAAC,WAAW;AAAA,cACd,qBAAqB;AAAA,gBACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,cAAA;AAAA,cAExC,sBAAsB;AAAA,gBACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,cAAA;AAAA,cAExC,sBAAsB;AAAA,gBACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,cAAA;AAAA,YACxC;AAAA,UACF;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA,EAAA,CAEF;AAAA,EAAA,GAGJ;AAEJ;"}

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

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

@@ -4,9 +4,14 @@ 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 { DialogTitle, Box, MenuItem, IconButton, DialogContent, DialogActions } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+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";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import DialogContent from "../../../../node_modules/@mui/material/DialogContent/DialogContent/index.esm.js";
+import DialogActions from "../../../../node_modules/@mui/material/DialogActions/DialogActions/index.esm.js";
 const CustomEditor = lazy(() => import("../../../../components/editor/custom-editor/index.esm.js"));
 const EditSectionModal = ({
   isOpen,
@@ -59,7 +64,7 @@ const EditSectionModal = ({
                 children: placeholders.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.1000", children: option.label }) }, option.value))
               }
             ),
-            /* @__PURE__ */ jsx(IconButton, { onClick: handleModalClose, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
+            /* @__PURE__ */ jsx(IconButton, { onClick: handleModalClose, children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" }) })
           ] })
         ] }),
         /* @__PURE__ */ jsx(DialogContent, { className: "editSectionModal--DialogContents", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(CustomEditor, { handleEditorReady, data: section.content }) }) }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["Close"],"mappings":";;;;;;;;;AAuBA,MAAM,eAAe,KAAK,MAAM,OAAO,0DAA0C,CAAC;AAclF,MAAM,mBAAoD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAM;AAEL,QAAM,mBAAmB,MAAM;AAC9B,cAAU,IAAI;AAAA,EACf;AAEA,QAAM,iBAAiB,CAAC,MAAM;AAC7B,eAAW,CAAC;AAAA,EACb;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAU;AAAA,MACV,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,UAAA;AAAA,QAAA,qBAAC,aAAA,EAAY,WAAU,iCACtB,UAAA;AAAA,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,WAAU,QAAO,UAAS,UAAA,eAAA,CAEtD;AAAA,UACA,qBAAC,KAAA,EAAI,SAAQ,QAAO,YAAY,UAAU,KAAK,GAAG,UAAS,YAAW,OAAM,MAAK,KAAI,OACpF,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,cAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,aAAa,MAAM;AAAA,gBACnB,WAAS;AAAA,gBACT,IAAI;AAAA,kBACH,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,uBAAuB,EAAE,IAAI,KAAA;AAAA,gBAAK;AAAA,gBAEnC,UAAU,CAAC,MAAM;AAChB,sBAAI,EAAE,OAAO,OAAO;AACnB,yCAAqB,EAAE,OAAO,KAAe;AAC7C,sBAAE,OAAO,QAAQ;AAAA,kBAClB;AAAA,gBACD;AAAA,gBACC,UAAA,aAAa,IAAI,CAAC,+BACjB,UAAA,EAA4B,OAAO,OAAO,OAC1C,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADnD,OAAO,KAEtB,CACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,oBAAC,cAAW,SAAS,kBACpB,8BAACA,WAAA,EAAM,UAAS,SAAQ,EAAA,CACzB;AAAA,UAAA,EAAA,CACD;AAAA,QAAA,GACD;AAAA,QACA,oBAAC,eAAA,EAAc,WAAU,oCACxB,UAAA,oBAAC,UAAA,EACA,UAAA,oBAAC,cAAA,EAAa,mBAAsC,MAAM,QAAQ,QAAA,CAAQ,GAC3E,GACD;AAAA,QACA,oBAAC,iBAAc,WAAU,kCACxB,+BAAC,KAAA,EAAI,SAAQ,QAAO,KAAK,KACxB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,4CAA2C,SAAS,kBAAkB,UAAA,UAAM;AAAA,UAC9F,oBAAC,UAAO,SAAS,CAAC,MAAM,eAAe,CAAC,GAAG,UAAA,OAAA,CAAI;AAAA,QAAA,EAAA,CAChD,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["Close"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,eAAe,KAAK,MAAM,OAAO,0DAA0C,CAAC;AAclF,MAAM,mBAAoD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAM;AAEL,QAAM,mBAAmB,MAAM;AAC9B,cAAU,IAAI;AAAA,EACf;AAEA,QAAM,iBAAiB,CAAC,MAAM;AAC7B,eAAW,CAAC;AAAA,EACb;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAU;AAAA,MACV,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,UAAA;AAAA,QAAA,qBAAC,aAAA,EAAY,WAAU,iCACtB,UAAA;AAAA,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,WAAU,QAAO,UAAS,UAAA,eAAA,CAEtD;AAAA,UACA,qBAAC,KAAA,EAAI,SAAQ,QAAO,YAAY,UAAU,KAAK,GAAG,UAAS,YAAW,OAAM,MAAK,KAAI,OACpF,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,cAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,aAAa,MAAM;AAAA,gBACnB,WAAS;AAAA,gBACT,IAAI;AAAA,kBACH,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,uBAAuB,EAAE,IAAI,KAAA;AAAA,gBAAK;AAAA,gBAEnC,UAAU,CAAC,MAAM;AAChB,sBAAI,EAAE,OAAO,OAAO;AACnB,yCAAqB,EAAE,OAAO,KAAe;AAC7C,sBAAE,OAAO,QAAQ;AAAA,kBAClB;AAAA,gBACD;AAAA,gBACC,UAAA,aAAa,IAAI,CAAC,+BACjB,UAAA,EAA4B,OAAO,OAAO,OAC1C,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADnD,OAAO,KAEtB,CACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,oBAAC,cAAW,SAAS,kBACpB,8BAACA,WAAA,EAAM,UAAS,SAAQ,EAAA,CACzB;AAAA,UAAA,EAAA,CACD;AAAA,QAAA,GACD;AAAA,QACA,oBAAC,eAAA,EAAc,WAAU,oCACxB,UAAA,oBAAC,UAAA,EACA,UAAA,oBAAC,cAAA,EAAa,mBAAsC,MAAM,QAAQ,QAAA,CAAQ,GAC3E,GACD;AAAA,QACA,oBAAC,iBAAc,WAAU,kCACxB,+BAAC,KAAA,EAAI,SAAQ,QAAO,KAAK,KACxB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,4CAA2C,SAAS,kBAAkB,UAAA,UAAM;AAAA,UAC9F,oBAAC,UAAO,SAAS,CAAC,MAAM,eAAe,CAAC,GAAG,UAAA,OAAA,CAAI;AAAA,QAAA,EAAA,CAChD,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}