@erpsquad/common 1.8.81 → 1.8.82

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/ButtonControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  FormControl,\r\n  MenuItem,\r\n  Slider,\r\n} from '@mui/material';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport TextField from '../../../../components/text-field/text-field';\r\nimport AlignmentControl from './AlignmentControl';\r\nimport Select from '../../../../components/select/select';\r\nimport ColorPickerInput from '../../../../components/color-picker-input/color-picker-input';\r\n\r\ninterface ButtonControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst borderOptions = [\r\n  {label: 'None', value: 'none'},\r\n  {value: '1px solid #e0e0e0', label: 'Solid'},\r\n  {value: '1px dashed #e0e0e0', label: 'Dashed'},\r\n  {value: '1px dotted #e0e0e0', label: 'Dotted'},\r\n]\r\n\r\nconst ButtonControls: React.FC<ButtonControlsProps> = ({\r\n  attrs,\r\n  updateAttrs\r\n}) => {\r\n\r\n  const { text, styles } = attrs\r\n  const handleAlignmentChange = (\r\n    event: React.MouseEvent<HTMLElement>,\r\n    newAlignment: string | null,\r\n  ) => {\r\n    if(newAlignment) {\r\n        let margin = '0';\r\n        switch (newAlignment) {\r\n    \r\n          case 'justify':\r\n            margin = '0 auto';\r\n            break;\r\n          case 'right':\r\n            margin = '0 0 0 auto';\r\n            break;\r\n          case 'center':\r\n            margin = '0 auto';\r\n            break;\r\n          case 'left':\r\n            margin = 'auto 0 0 0';\r\n            break;\r\n          default:\r\n            margin = '0 auto';\r\n            break;\r\n        }\r\n        updateAttrs({ styles : { margin } });\r\n    }\r\n  };\r\n\r\n  const getAlignment = () => {\r\n    if (styles?.margin === '0 auto') {\r\n      return 'center';\r\n    } else if (styles?.margin === '0 0 0 auto') {\r\n      return 'right';\r\n    } else if (styles?.margin === 'auto 0 0 0') {\r\n      return 'left';\r\n    } else {\r\n      return 'justify';\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n        <TextField\r\n          label=\"Button Text\"\r\n          fullWidth\r\n          value={text}\r\n          onChange={(e) => updateAttrs({ text: e.target.value })}\r\n          size=\"small\"\r\n          sx={{ mb: 2 }}\r\n        />\r\n        <Box sx={{ mb: 2 }}>\r\n          <ColorPickerInput\r\n            value={styles?.backgroundColor || '#333333'}\r\n            onChange={(color) => updateAttrs({ styles :{ backgroundColor: color }})}\r\n            label='Background Color'\r\n          />\r\n        </Box>\r\n        <Box sx={{ mb: 2 }}>\r\n          <ColorPickerInput\r\n            value={styles?.color || '#333333'}\r\n            onChange={(color) => updateAttrs({ styles :{ color: color }})}\r\n            label='Text Color'\r\n            // sx={{ maxWidth: 150 }}\r\n          />\r\n        </Box>\r\n        <FormControl fullWidth size=\"small\" sx={{ mb: 2 }}>\r\n          <Select\r\n            value={styles?.border}\r\n            renderValue={(value) =>  borderOptions.find((option) => option.value === value)?.label || 'None'}\r\n            onChange={(e) => updateAttrs({ styles :{ border :e.target.value }})}\r\n            label='Border'\r\n          >\r\n            <MenuItem value=\"none\">None</MenuItem>\r\n            <MenuItem value=\"1px solid #e0e0e0\">Solid</MenuItem>\r\n            <MenuItem value=\"1px dashed #e0e0e0\">Dashed</MenuItem>\r\n          </Select>\r\n        </FormControl>\r\n        <Box sx={{ mb: 2 }}>\r\n          <Typography type=\"s3\" color='theme.neutral.800'>\r\n            Border Radius\r\n          </Typography>\r\n          <Slider\r\n            value={styles?.borderRadius}\r\n            onChange={(_, value) => updateAttrs({ styles :{ borderRadius: value as number }})}\r\n            min={0}\r\n            max={20}\r\n            step={1}\r\n            valueLabelDisplay=\"auto\"\r\n            size=\"small\"\r\n            marks\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        </Box>\r\n        <Box sx={{ mb: 2 }}>\r\n          <Typography type=\"s3\" color='theme.neutral.800'>\r\n            Font Size\r\n          </Typography>\r\n          <Slider\r\n            value={styles?.fontSize}\r\n            onChange={(_, value) => updateAttrs({ styles :{ fontSize: value as number }})}\r\n            min={10}\r\n            max={20}\r\n            step={1}\r\n            valueLabelDisplay=\"auto\"\r\n            size=\"small\"\r\n            marks\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        </Box>\r\n        <AlignmentControl alignment={getAlignment()} onAlignmentChange={handleAlignmentChange}/>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ButtonControls;"],"names":["borderOptions","label","value","attrs","updateAttrs","text","styles","jsxs","Fragment","children","jsx","TextField","fullWidth","onChange","e","target","size","sx","mb","Box","ColorPickerInput","backgroundColor","color","FormControl","Select","border","renderValue","_a","find","option","MenuItem","Typography","type","Slider","borderRadius","_","min","max","step","valueLabelDisplay","marks","theme","palette","primary","fontSize","AlignmentControl","alignment","margin","onAlignmentChange","event","newAlignment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/ButtonControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  FormControl,\n  MenuItem,\n  Slider,\n} from '@mui/material';\nimport Typography from '../../../../components/typography/typography';\nimport TextField from '../../../../components/text-field/text-field';\nimport AlignmentControl from './AlignmentControl';\nimport Select from '../../../../components/select/select';\nimport ColorPickerInput from '../../../../components/color-picker-input/color-picker-input';\n\ninterface ButtonControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst borderOptions = [\n  {label: 'None', value: 'none'},\n  {value: '1px solid #e0e0e0', label: 'Solid'},\n  {value: '1px dashed #e0e0e0', label: 'Dashed'},\n  {value: '1px dotted #e0e0e0', label: 'Dotted'},\n]\n\nconst ButtonControls: React.FC<ButtonControlsProps> = ({\n  attrs,\n  updateAttrs\n}) => {\n\n  const { text, styles } = attrs\n  const handleAlignmentChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAlignment: string | null,\n  ) => {\n    if(newAlignment) {\n        let margin = '0';\n        switch (newAlignment) {\n    \n          case 'justify':\n            margin = '0 auto';\n            break;\n          case 'right':\n            margin = '0 0 0 auto';\n            break;\n          case 'center':\n            margin = '0 auto';\n            break;\n          case 'left':\n            margin = 'auto 0 0 0';\n            break;\n          default:\n            margin = '0 auto';\n            break;\n        }\n        updateAttrs({ styles : { margin } });\n    }\n  };\n\n  const getAlignment = () => {\n    if (styles?.margin === '0 auto') {\n      return 'center';\n    } else if (styles?.margin === '0 0 0 auto') {\n      return 'right';\n    } else if (styles?.margin === 'auto 0 0 0') {\n      return 'left';\n    } else {\n      return 'justify';\n    }\n  };\n\n  return (\n    <>\n        <TextField\n          label=\"Button Text\"\n          fullWidth\n          value={text}\n          onChange={(e) => updateAttrs({ text: e.target.value })}\n          size=\"small\"\n          sx={{ mb: 2 }}\n        />\n        <Box sx={{ mb: 2 }}>\n          <ColorPickerInput\n            value={styles?.backgroundColor || '#333333'}\n            onChange={(color) => updateAttrs({ styles :{ backgroundColor: color }})}\n            label='Background Color'\n          />\n        </Box>\n        <Box sx={{ mb: 2 }}>\n          <ColorPickerInput\n            value={styles?.color || '#333333'}\n            onChange={(color) => updateAttrs({ styles :{ color: color }})}\n            label='Text Color'\n            // sx={{ maxWidth: 150 }}\n          />\n        </Box>\n        <FormControl fullWidth size=\"small\" sx={{ mb: 2 }}>\n          <Select\n            value={styles?.border}\n            renderValue={(value) =>  borderOptions.find((option) => option.value === value)?.label || 'None'}\n            onChange={(e) => updateAttrs({ styles :{ border :e.target.value }})}\n            label='Border'\n          >\n            <MenuItem value=\"none\">None</MenuItem>\n            <MenuItem value=\"1px solid #e0e0e0\">Solid</MenuItem>\n            <MenuItem value=\"1px dashed #e0e0e0\">Dashed</MenuItem>\n          </Select>\n        </FormControl>\n        <Box sx={{ mb: 2 }}>\n          <Typography type=\"s3\" color='theme.neutral.800'>\n            Border Radius\n          </Typography>\n          <Slider\n            value={styles?.borderRadius}\n            onChange={(_, value) => updateAttrs({ styles :{ borderRadius: value as number }})}\n            min={0}\n            max={20}\n            step={1}\n            valueLabelDisplay=\"auto\"\n            size=\"small\"\n            marks\n            sx={(theme) => ({\n              '& .MuiSlider-rail': {\n                color: theme.palette.theme.primary[500],\n              },\n              '& .MuiSlider-thumb': {\n                color: theme.palette.theme.primary[800],\n              },\n              '& .MuiSlider-track': {\n                color: theme.palette.theme.primary[600],\n              },\n            })}\n          />\n        </Box>\n        <Box sx={{ mb: 2 }}>\n          <Typography type=\"s3\" color='theme.neutral.800'>\n            Font Size\n          </Typography>\n          <Slider\n            value={styles?.fontSize}\n            onChange={(_, value) => updateAttrs({ styles :{ fontSize: value as number }})}\n            min={10}\n            max={20}\n            step={1}\n            valueLabelDisplay=\"auto\"\n            size=\"small\"\n            marks\n            sx={(theme) => ({\n              '& .MuiSlider-rail': {\n                color: theme.palette.theme.primary[500],\n              },\n              '& .MuiSlider-thumb': {\n                color: theme.palette.theme.primary[800],\n              },\n              '& .MuiSlider-track': {\n                color: theme.palette.theme.primary[600],\n              },\n            })}\n          />\n        </Box>\n        <AlignmentControl alignment={getAlignment()} onAlignmentChange={handleAlignmentChange}/>\n    </>\n  );\n};\n\nexport default ButtonControls;"],"names":["borderOptions","label","value","attrs","updateAttrs","text","styles","jsxs","Fragment","children","jsx","TextField","fullWidth","onChange","e","target","size","sx","mb","Box","ColorPickerInput","backgroundColor","color","FormControl","Select","border","renderValue","_a","find","option","MenuItem","Typography","type","Slider","borderRadius","_","min","max","step","valueLabelDisplay","marks","theme","palette","primary","fontSize","AlignmentControl","alignment","margin","onAlignmentChange","event","newAlignment"],"mappings":"ivBAmBA,MAAMA,EAAgB,CACpB,CAACC,MAAO,OAAQC,MAAO,QACvB,CAACA,MAAO,oBAAqBD,MAAO,SACpC,CAACC,MAAO,qBAAsBD,MAAO,UACrC,CAACC,MAAO,qBAAsBD,MAAO,2BAGe,EACpDE,QACAC,kBAGA,MAAMC,KAAEA,EAAAC,OAAMA,GAAWH;AAyCzB,OACEI,EAAAA,KAAAC,WAAA,CACIC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,UAAA,CACCV,MAAM,cACNW,WAAS,EACTV,MAAOG,EACPQ,SAAWC,GAAMV,EAAY,CAAEC,KAAMS,EAAEC,OAAOb,QAC9Cc,KAAK,QACLC,GAAI,CAAEC,GAAI;qBAEXC,EAAAA,QAAA,CAAIF,GAAI,CAAEC,GAAI,GACbT,wBAAAC,EAAAA,IAACU,EAAAA,iBAAA,CACClB,aAAOI,WAAQe,kBAAmB,UAClCR,SAAWS,GAAUlB,EAAY,CAAEE,OAAQ,CAAEe,gBAAiBC,KAC9DrB,MAAM;qBAGTkB,EAAAA,QAAA,CAAIF,GAAI,CAAEC,GAAI,GACbT,wBAAAC,EAAAA,IAACU,EAAAA,iBAAA,CACClB,aAAOI,WAAQgB,QAAS,UACxBT,SAAWS,GAAUlB,EAAY,CAAEE,OAAQ,CAAEgB,WAC7CrB,MAAM;eAIVS,EAAAA,IAACa,EAAAA,QAAA,CAAYX,WAAS,EAACI,KAAK,QAAQC,GAAI,CAAEC,GAAI,GAC5CT,wBAAAF,EAAAA,KAACiB,EAAAA,OAAA,CACCtB,MAAO,MAAAI,OAAA,EAAAA,EAAQmB,OACfC,YAAcxB,UAAW,OAAA,OAAAyB,EAAA3B,EAAc4B,KAAMC,GAAWA,EAAO3B,QAAUA,aAAQD,QAAS,QAC1FY,SAAWC,GAAMV,EAAY,CAAEE,OAAQ,CAAEmB,OAAQX,EAAEC,OAAOb,SAC1DD,MAAM,SAENQ,SAAA;eAAAC,EAAAA,IAACoB,EAAAA,QAAA,CAAS5B,MAAM,OAAOO,SAAA;eACvBC,EAAAA,IAACoB,EAAAA,QAAA,CAAS5B,MAAM,oBAAoBO,SAAA;eACpCC,EAAAA,IAACoB,EAAAA,QAAA,CAAS5B,MAAM,qBAAqBO,SAAA;sBAGxCU,EAAAA,QAAA,CAAIF,GAAI,CAAEC,GAAI,GACbT,SAAA;eAAAC,MAACqB,EAAAA,WAAA,CAAWC,KAAK,KAAKV,MAAM,oBAAoBb,SAAA;eAGhDC,EAAAA,IAACuB,EAAAA,QAAA,CACC/B,MAAO,MAAAI,OAAA,EAAAA,EAAQ4B,aACfrB,SAAU,CAACsB,EAAGjC,IAAUE,EAAY,CAAEE,OAAQ,CAAE4B,aAAchC,KAC9DkC,IAAK,EACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBvB,KAAK,QACLwB,OAAK,EACLvB,GAAKwB,IAAA,CACH,oBAAqB,CACnBnB,MAAOmB,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBrB,MAAOmB,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBrB,MAAOmB,EAAMC,QAAQD,MAAME,QAAQ;sBAK1CxB,EAAAA,QAAA,CAAIF,GAAI,CAAEC,GAAI,GACbT,SAAA;eAAAC,MAACqB,EAAAA,WAAA,CAAWC,KAAK,KAAKV,MAAM,oBAAoBb,SAAA;eAGhDC,EAAAA,IAACuB,EAAAA,QAAA,CACC/B,MAAO,MAAAI,OAAA,EAAAA,EAAQsC,SACf/B,SAAU,CAACsB,EAAGjC,IAAUE,EAAY,CAAEE,OAAQ,CAAEsC,SAAU1C,KAC1DkC,IAAK,GACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBvB,KAAK,QACLwB,OAAK,EACLvB,GAAKwB,IAAA,CACH,oBAAqB,CACnBnB,MAAOmB,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBrB,MAAOmB,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBrB,MAAOmB,EAAMC,QAAQD,MAAME,QAAQ;qBAK1CE,EAAAA,QAAA,CAAiBC,UApGC,YAAnB,MAAAxC,OAAA,EAAAA,EAAQyC,QACH,SACqB,gBAAnB,MAAAzC,OAAA,EAAAA,EAAQyC,QACV,QACqB,gBAAnB,MAAAzC,OAAA,EAAAA,EAAQyC,QACV,OAEA,UA6FwCC,kBAjIrB,CAC5BC,EACAC,KAEA,GAAGA,EAAc,CACb,IAAIH,EAAS,IACb,OAAQG,GAEN,IAAK,UAML,IAAK,SAML,QACEH,EAAS,SACT,MAXF,IAAK,QACHA,EAAS,aACT,MAIF,IAAK,OACHA,EAAS,aAMb3C,EAAY,CAAEE,OAAS,CAAEyC,WAC7B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/CodeControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport { Box, Slider} from '@mui/material';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport AlignmentControl from './AlignmentControl';\r\n\r\ninterface CodeControlsProps {\r\n  // type: 'qr-code' | 'bar-code';\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst CodeControls: React.FC<CodeControlsProps> = ({\r\n  // type,\r\n  attrs,\r\n  updateAttrs,\r\n}) => {\r\n  const { styles } = attrs\r\n\r\n  const updateStyles = (styles: Record<string, any>) => {\r\n    updateAttrs({ styles });\r\n  }\r\n\r\n  const handleAlignmentChange = (\r\n    event: React.MouseEvent<HTMLElement>,\r\n    newAlignment: string | null,\r\n  ) => {\r\n    if (newAlignment !== null) {\r\n      updateStyles({ textAlign: newAlignment });\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Box sx={{ mb: 2 }}>\r\n        <Typography type=\"s3\" color='theme.neutral.800'>\r\n          Size (px)\r\n        </Typography>\r\n        <Slider\r\n          value={styles.fontSize}\r\n          onChange={(_, value) =>  updateStyles({ fontSize: value as number })}\r\n          min={10}\r\n          max={25}\r\n          step={5}\r\n          valueLabelDisplay=\"auto\"\r\n          size=\"small\"\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      </Box>\r\n      <AlignmentControl alignment={styles?.textAlign} onAlignmentChange={handleAlignmentChange} displayLabel/>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default CodeControls;"],"names":["styles"],"mappings":";;;;;AAYA,MAAM,eAA4C,CAAC;AAAA;AAAA,EAEjD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW;AAEnB,QAAM,eAAe,CAACA,YAAgC;AACpD,gBAAY,EAAE,QAAAA,SAAQ;AAAA,EACxB;AAEA,QAAM,wBAAwB,CAC5B,OACA,iBACG;AACH,QAAI,iBAAiB,MAAM;AACzB,mBAAa,EAAE,WAAW,cAAc;AAAA,IAC1C;AAAA,EACF;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,qBAAoB,UAAA,aAEhD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO;AAAA,UACd,UAAU,CAAC,GAAG,UAAW,aAAa,EAAE,UAAU,OAAiB;AAAA,UACnE,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,IAAI,CAAC,WAAW;AAAA,YACd,qBAAqB;AAAA,cACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,UACxC;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,wBACC,kBAAA,EAAiB,WAAW,iCAAQ,WAAW,mBAAmB,uBAAuB,cAAY,KAAA,CAAA;AAAA,EAAA,GACxG;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/CodeControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport { Box, Slider} from '@mui/material';\nimport Typography from '../../../../components/typography/typography';\nimport AlignmentControl from './AlignmentControl';\n\ninterface CodeControlsProps {\n  // type: 'qr-code' | 'bar-code';\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst CodeControls: React.FC<CodeControlsProps> = ({\n  // type,\n  attrs,\n  updateAttrs,\n}) => {\n  const { styles } = attrs\n\n  const updateStyles = (styles: Record<string, any>) => {\n    updateAttrs({ styles });\n  }\n\n  const handleAlignmentChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAlignment: string | null,\n  ) => {\n    if (newAlignment !== null) {\n      updateStyles({ textAlign: newAlignment });\n    }\n  };\n\n  return (\n    <>\n      <Box sx={{ mb: 2 }}>\n        <Typography type=\"s3\" color='theme.neutral.800'>\n          Size (px)\n        </Typography>\n        <Slider\n          value={styles.fontSize}\n          onChange={(_, value) =>  updateStyles({ fontSize: value as number })}\n          min={10}\n          max={25}\n          step={5}\n          valueLabelDisplay=\"auto\"\n          size=\"small\"\n          sx={(theme) => ({\n            '& .MuiSlider-rail': {\n              color: theme.palette.theme.primary[500],\n            },\n            '& .MuiSlider-thumb': {\n              color: theme.palette.theme.primary[800],\n            },\n            '& .MuiSlider-track': {\n              color: theme.palette.theme.primary[600],\n            },\n          })}\n        />\n      </Box>\n      <AlignmentControl alignment={styles?.textAlign} onAlignmentChange={handleAlignmentChange} displayLabel/>\n    </>\n  );\n};\n\nexport default CodeControls;"],"names":["styles"],"mappings":";;;;;AAYA,MAAM,eAA4C,CAAC;AAAA;AAAA,EAEjD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW;AAEnB,QAAM,eAAe,CAACA,YAAgC;AACpD,gBAAY,EAAE,QAAAA,SAAQ;AAAA,EACxB;AAEA,QAAM,wBAAwB,CAC5B,OACA,iBACG;AACH,QAAI,iBAAiB,MAAM;AACzB,mBAAa,EAAE,WAAW,cAAc;AAAA,IAC1C;AAAA,EACF;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,qBAAoB,UAAA,aAEhD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO;AAAA,UACd,UAAU,CAAC,GAAG,UAAW,aAAa,EAAE,UAAU,OAAiB;AAAA,UACnE,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,IAAI,CAAC,WAAW;AAAA,YACd,qBAAqB;AAAA,cACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,UACxC;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,wBACC,kBAAA,EAAiB,WAAW,iCAAQ,WAAW,mBAAmB,uBAAuB,cAAY,KAAA,CAAA;AAAA,EAAA,GACxG;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/CodeControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport { Box, Slider} from '@mui/material';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport AlignmentControl from './AlignmentControl';\r\n\r\ninterface CodeControlsProps {\r\n  // type: 'qr-code' | 'bar-code';\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst CodeControls: React.FC<CodeControlsProps> = ({\r\n  // type,\r\n  attrs,\r\n  updateAttrs,\r\n}) => {\r\n  const { styles } = attrs\r\n\r\n  const updateStyles = (styles: Record<string, any>) => {\r\n    updateAttrs({ styles });\r\n  }\r\n\r\n  const handleAlignmentChange = (\r\n    event: React.MouseEvent<HTMLElement>,\r\n    newAlignment: string | null,\r\n  ) => {\r\n    if (newAlignment !== null) {\r\n      updateStyles({ textAlign: newAlignment });\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Box sx={{ mb: 2 }}>\r\n        <Typography type=\"s3\" color='theme.neutral.800'>\r\n          Size (px)\r\n        </Typography>\r\n        <Slider\r\n          value={styles.fontSize}\r\n          onChange={(_, value) =>  updateStyles({ fontSize: value as number })}\r\n          min={10}\r\n          max={25}\r\n          step={5}\r\n          valueLabelDisplay=\"auto\"\r\n          size=\"small\"\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      </Box>\r\n      <AlignmentControl alignment={styles?.textAlign} onAlignmentChange={handleAlignmentChange} displayLabel/>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default CodeControls;"],"names":["attrs","updateAttrs","styles","updateStyles","jsxs","Fragment","children","Box","sx","mb","jsx","Typography","type","color","Slider","value","fontSize","onChange","_","min","max","step","valueLabelDisplay","size","theme","palette","primary","AlignmentControl","alignment","textAlign","onAlignmentChange","event","newAlignment","displayLabel"],"mappings":"6XAYkD,EAEhDA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF,EAEbG,EAAgBD,IACpBD,EAAY,CAAEC,OAAAA;AAYhB,OACEE,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAF,EAAAA,KAACG,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,SAAA;eAAAI,MAACC,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,oBAAoBP,SAAA;eAGhDI,EAAAA,IAACI,EAAAA,QAAA,CACCC,MAAOb,EAAOc,SACdC,SAAU,CAACC,EAAGH,IAAWZ,EAAa,CAAEa,SAAUD,IAClDI,IAAK,GACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBC,KAAK,QACLf,GAAKgB,IAAA,CACH,oBAAqB,CACnBX,MAAOW,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBb,MAAOW,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBb,MAAOW,EAAMC,QAAQD,MAAME,QAAQ;qBAK1CC,EAAAA,QAAA,CAAiBC,UAAW,MAAA1B,OAAA,EAAAA,EAAQ2B,UAAWC,kBApCtB,CAC5BC,EACAC,KAEqB,OAAjBA,GACF7B,EAAa,CAAE0B,UAAWG,KA+BgEC,cAAY"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/CodeControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport { Box, Slider} from '@mui/material';\nimport Typography from '../../../../components/typography/typography';\nimport AlignmentControl from './AlignmentControl';\n\ninterface CodeControlsProps {\n  // type: 'qr-code' | 'bar-code';\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst CodeControls: React.FC<CodeControlsProps> = ({\n  // type,\n  attrs,\n  updateAttrs,\n}) => {\n  const { styles } = attrs\n\n  const updateStyles = (styles: Record<string, any>) => {\n    updateAttrs({ styles });\n  }\n\n  const handleAlignmentChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAlignment: string | null,\n  ) => {\n    if (newAlignment !== null) {\n      updateStyles({ textAlign: newAlignment });\n    }\n  };\n\n  return (\n    <>\n      <Box sx={{ mb: 2 }}>\n        <Typography type=\"s3\" color='theme.neutral.800'>\n          Size (px)\n        </Typography>\n        <Slider\n          value={styles.fontSize}\n          onChange={(_, value) =>  updateStyles({ fontSize: value as number })}\n          min={10}\n          max={25}\n          step={5}\n          valueLabelDisplay=\"auto\"\n          size=\"small\"\n          sx={(theme) => ({\n            '& .MuiSlider-rail': {\n              color: theme.palette.theme.primary[500],\n            },\n            '& .MuiSlider-thumb': {\n              color: theme.palette.theme.primary[800],\n            },\n            '& .MuiSlider-track': {\n              color: theme.palette.theme.primary[600],\n            },\n          })}\n        />\n      </Box>\n      <AlignmentControl alignment={styles?.textAlign} onAlignmentChange={handleAlignmentChange} displayLabel/>\n    </>\n  );\n};\n\nexport default CodeControls;"],"names":["attrs","updateAttrs","styles","updateStyles","jsxs","Fragment","children","Box","sx","mb","jsx","Typography","type","color","Slider","value","fontSize","onChange","_","min","max","step","valueLabelDisplay","size","theme","palette","primary","AlignmentControl","alignment","textAlign","onAlignmentChange","event","newAlignment","displayLabel"],"mappings":"6XAYkD,EAEhDA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF,EAEbG,EAAgBD,IACpBD,EAAY,CAAEC,OAAAA;AAYhB,OACEE,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAF,EAAAA,KAACG,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,SAAA;eAAAI,MAACC,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,oBAAoBP,SAAA;eAGhDI,EAAAA,IAACI,EAAAA,QAAA,CACCC,MAAOb,EAAOc,SACdC,SAAU,CAACC,EAAGH,IAAWZ,EAAa,CAAEa,SAAUD,IAClDI,IAAK,GACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBC,KAAK,QACLf,GAAKgB,IAAA,CACH,oBAAqB,CACnBX,MAAOW,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBb,MAAOW,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBb,MAAOW,EAAMC,QAAQD,MAAME,QAAQ;qBAK1CC,EAAAA,QAAA,CAAiBC,UAAW,MAAA1B,OAAA,EAAAA,EAAQ2B,UAAWC,kBApCtB,CAC5BC,EACAC,KAEqB,OAAjBA,GACF7B,EAAa,CAAE0B,UAAWG,KA+BgEC,cAAY"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/DividerControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  FormControl,\r\n  MenuItem,\r\n  Slider,\r\n  InputAdornment,\r\n} from '@mui/material';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport TextField from '../../../../components/text-field/text-field';\r\nimport Select from '../../../../components/select/select';\r\nimport formatText from '../../../../utils/format-text';\r\n\r\ninterface DividerControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst DividerControls: React.FC<DividerControlsProps> = ({\r\n  attrs,\r\n  updateAttrs,\r\n}) => {\r\n  const { styles } = attrs\r\n  return (\r\n    <>\r\n      <FormControl fullWidth size=\"small\" sx={{ mb: 2 }}>\r\n        <Select\r\n          label='Style'\r\n          value={styles?.borderStyle}\r\n          onChange={(e) => updateAttrs({ styles: { borderStyle: e.target.value } })}\r\n          renderValue={(value) =>  formatText(value)}\r\n        >\r\n          <MenuItem value=\"solid\">Solid</MenuItem>\r\n          <MenuItem value=\"dashed\">Dashed</MenuItem>\r\n          <MenuItem value=\"dotted\">Dotted</MenuItem>\r\n        </Select>\r\n      </FormControl>\r\n      <Box sx={{ mb: 1 }}>\r\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\r\n          Thickness (px)\r\n        </Typography>\r\n        <Slider\r\n          value={styles?.borderWidth}\r\n          onChange={(_, value) => updateAttrs({ styles: { borderWidth: value as number }})}\r\n          min={1}\r\n          max={10}\r\n          step={1}\r\n          valueLabelDisplay=\"auto\"\r\n          size=\"small\"\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      </Box>\r\n      <Box sx={{ mb: 2 }}>\r\n        <TextField\r\n          label=\"Divider Color\"\r\n          type=\"color\"\r\n          value={styles?.borderColor}\r\n          onChange={(e) => updateAttrs({ styles: {  borderColor: e.target.value }})}\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 DividerControls;"],"names":["ColorLensIcon"],"mappings":";;;;;;;;;;;AAoBA,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW;AACnB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,aAAA,EAAY,WAAS,MAAC,MAAK,SAAQ,IAAI,EAAE,IAAI,EAAA,GAC5C,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,iCAAQ;AAAA,QACf,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,MAAA,GAAS;AAAA,QACxE,aAAa,CAAC,UAAW,WAAW,KAAK;AAAA,QAEzC,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAS,OAAM,SAAQ,UAAA,SAAK;AAAA,UAC7B,oBAAC,UAAA,EAAS,OAAM,UAAS,UAAA,UAAM;AAAA,UAC/B,oBAAC,UAAA,EAAS,OAAM,UAAS,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnC;AAAA,yBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,uBAAsB,QAAO,UAAS,UAAA,iBAAA,CAElE;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,iCAAQ;AAAA,UACf,UAAU,CAAC,GAAG,UAAU,YAAY,EAAE,QAAQ,EAAE,aAAa,MAAA,GAAkB;AAAA,UAC/E,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,IAAI,CAAC,WAAW;AAAA,YACd,qBAAqB;AAAA,cACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,UACxC;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,wBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,iCAAQ;AAAA,QACf,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAG,aAAa,EAAE,OAAO,MAAA,GAAQ;AAAA,QACxE,MAAK;AAAA,QACL,WAAS;AAAA,QACT,YAAY;AAAA,UACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACA,WAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/DividerControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  FormControl,\n  MenuItem,\n  Slider,\n  InputAdornment,\n} from '@mui/material';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport Typography from '../../../../components/typography/typography';\nimport TextField from '../../../../components/text-field/text-field';\nimport Select from '../../../../components/select/select';\nimport formatText from '../../../../utils/format-text';\n\ninterface DividerControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst DividerControls: React.FC<DividerControlsProps> = ({\n  attrs,\n  updateAttrs,\n}) => {\n  const { styles } = attrs\n  return (\n    <>\n      <FormControl fullWidth size=\"small\" sx={{ mb: 2 }}>\n        <Select\n          label='Style'\n          value={styles?.borderStyle}\n          onChange={(e) => updateAttrs({ styles: { borderStyle: e.target.value } })}\n          renderValue={(value) =>  formatText(value)}\n        >\n          <MenuItem value=\"solid\">Solid</MenuItem>\n          <MenuItem value=\"dashed\">Dashed</MenuItem>\n          <MenuItem value=\"dotted\">Dotted</MenuItem>\n        </Select>\n      </FormControl>\n      <Box sx={{ mb: 1 }}>\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\n          Thickness (px)\n        </Typography>\n        <Slider\n          value={styles?.borderWidth}\n          onChange={(_, value) => updateAttrs({ styles: { borderWidth: value as number }})}\n          min={1}\n          max={10}\n          step={1}\n          valueLabelDisplay=\"auto\"\n          size=\"small\"\n          sx={(theme) => ({\n            '& .MuiSlider-rail': {\n              color: theme.palette.theme.primary[500],\n            },\n            '& .MuiSlider-thumb': {\n              color: theme.palette.theme.primary[800],\n            },\n            '& .MuiSlider-track': {\n              color: theme.palette.theme.primary[600],\n            },\n          })}\n        />\n      </Box>\n      <Box sx={{ mb: 2 }}>\n        <TextField\n          label=\"Divider Color\"\n          type=\"color\"\n          value={styles?.borderColor}\n          onChange={(e) => updateAttrs({ styles: {  borderColor: e.target.value }})}\n          size=\"small\"\n          fullWidth\n          InputProps={{\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <ColorLensIcon fontSize=\"small\" />\n              </InputAdornment>\n            ),\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport default DividerControls;"],"names":["ColorLensIcon"],"mappings":";;;;;;;;;;;AAoBA,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW;AACnB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,aAAA,EAAY,WAAS,MAAC,MAAK,SAAQ,IAAI,EAAE,IAAI,EAAA,GAC5C,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,iCAAQ;AAAA,QACf,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,MAAA,GAAS;AAAA,QACxE,aAAa,CAAC,UAAW,WAAW,KAAK;AAAA,QAEzC,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAS,OAAM,SAAQ,UAAA,SAAK;AAAA,UAC7B,oBAAC,UAAA,EAAS,OAAM,UAAS,UAAA,UAAM;AAAA,UAC/B,oBAAC,UAAA,EAAS,OAAM,UAAS,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnC;AAAA,yBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,uBAAsB,QAAO,UAAS,UAAA,iBAAA,CAElE;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,iCAAQ;AAAA,UACf,UAAU,CAAC,GAAG,UAAU,YAAY,EAAE,QAAQ,EAAE,aAAa,MAAA,GAAkB;AAAA,UAC/E,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,IAAI,CAAC,WAAW;AAAA,YACd,qBAAqB;AAAA,cACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,UACxC;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,wBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,iCAAQ;AAAA,QACf,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAG,aAAa,EAAE,OAAO,MAAA,GAAQ;AAAA,QACxE,MAAK;AAAA,QACL,WAAS;AAAA,QACT,YAAY;AAAA,UACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACA,WAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/DividerControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  FormControl,\r\n  MenuItem,\r\n  Slider,\r\n  InputAdornment,\r\n} from '@mui/material';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport TextField from '../../../../components/text-field/text-field';\r\nimport Select from '../../../../components/select/select';\r\nimport formatText from '../../../../utils/format-text';\r\n\r\ninterface DividerControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst DividerControls: React.FC<DividerControlsProps> = ({\r\n  attrs,\r\n  updateAttrs,\r\n}) => {\r\n  const { styles } = attrs\r\n  return (\r\n    <>\r\n      <FormControl fullWidth size=\"small\" sx={{ mb: 2 }}>\r\n        <Select\r\n          label='Style'\r\n          value={styles?.borderStyle}\r\n          onChange={(e) => updateAttrs({ styles: { borderStyle: e.target.value } })}\r\n          renderValue={(value) =>  formatText(value)}\r\n        >\r\n          <MenuItem value=\"solid\">Solid</MenuItem>\r\n          <MenuItem value=\"dashed\">Dashed</MenuItem>\r\n          <MenuItem value=\"dotted\">Dotted</MenuItem>\r\n        </Select>\r\n      </FormControl>\r\n      <Box sx={{ mb: 1 }}>\r\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\r\n          Thickness (px)\r\n        </Typography>\r\n        <Slider\r\n          value={styles?.borderWidth}\r\n          onChange={(_, value) => updateAttrs({ styles: { borderWidth: value as number }})}\r\n          min={1}\r\n          max={10}\r\n          step={1}\r\n          valueLabelDisplay=\"auto\"\r\n          size=\"small\"\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      </Box>\r\n      <Box sx={{ mb: 2 }}>\r\n        <TextField\r\n          label=\"Divider Color\"\r\n          type=\"color\"\r\n          value={styles?.borderColor}\r\n          onChange={(e) => updateAttrs({ styles: {  borderColor: e.target.value }})}\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 DividerControls;"],"names":["attrs","updateAttrs","styles","jsxs","Fragment","children","jsx","FormControl","fullWidth","size","sx","mb","Select","label","value","borderStyle","onChange","e","target","renderValue","formatText","MenuItem","Box","Typography","type","color","weight","Slider","borderWidth","_","min","max","step","valueLabelDisplay","theme","palette","primary","TextField","borderColor","InputProps","startAdornment","InputAdornment","position","ColorLensIcon","fontSize"],"mappings":"s2BAoBwD,EACtDA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF;AACnB,OACEG,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CAAYC,WAAS,EAACC,KAAK,QAAQC,GAAI,CAAEC,GAAI,GAC5CN,wBAAAF,EAAAA,KAACS,EAAAA,OAAA,CACCC,MAAM,QACNC,MAAO,MAAAZ,OAAA,EAAAA,EAAQa,YACfC,SAAWC,GAAMhB,EAAY,CAAEC,OAAQ,CAAEa,YAAaE,EAAEC,OAAOJ,SAC/DK,YAAcL,GAAWM,EAAAA,WAAWN,GAEpCT,SAAA;eAAAC,EAAAA,IAACe,EAAAA,QAAA,CAASP,MAAM,QAAQT,SAAA;eACxBC,EAAAA,IAACe,EAAAA,QAAA,CAASP,MAAM,SAAST,SAAA;eACzBC,EAAAA,IAACe,EAAAA,QAAA,CAASP,MAAM,SAAST,SAAA;sBAG5BiB,EAAAA,QAAA,CAAIZ,GAAI,CAAEC,GAAI,GACbN,SAAA;eAAAC,EAAAA,IAACiB,EAAAA,YAAWC,KAAK,KAAKC,MAAM,sBAAsBC,OAAO,SAASrB,SAAA;eAGlEC,EAAAA,IAACqB,EAAAA,QAAA,CACCb,MAAO,MAAAZ,OAAA,EAAAA,EAAQ0B,YACfZ,SAAU,CAACa,EAAGf,IAAUb,EAAY,CAAEC,OAAQ,CAAE0B,YAAad,KAC7DgB,IAAK,EACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBxB,KAAK,QACLC,GAAKwB,IAAA,CACH,oBAAqB,CACnBT,MAAOS,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBX,MAAOS,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBX,MAAOS,EAAMC,QAAQD,MAAME,QAAQ;qBAK1Cd,EAAAA,QAAA,CAAIZ,GAAI,CAAEC,GAAI,GACbN,wBAAAC,EAAAA,IAAC+B,EAAAA,UAAA,CACCxB,MAAM,gBACNW,KAAK,QACLV,MAAO,MAAAZ,OAAA,EAAAA,EAAQoC,YACftB,SAAWC,GAAMhB,EAAY,CAAEC,OAAQ,CAAGoC,YAAarB,EAAEC,OAAOJ,SAChEL,KAAK,QACLD,WAAS,EACT+B,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvBrC,wBAAAC,EAAAA,IAACqC,EAAAA,QAAA,CAAcC,SAAS"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/DividerControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  FormControl,\n  MenuItem,\n  Slider,\n  InputAdornment,\n} from '@mui/material';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport Typography from '../../../../components/typography/typography';\nimport TextField from '../../../../components/text-field/text-field';\nimport Select from '../../../../components/select/select';\nimport formatText from '../../../../utils/format-text';\n\ninterface DividerControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst DividerControls: React.FC<DividerControlsProps> = ({\n  attrs,\n  updateAttrs,\n}) => {\n  const { styles } = attrs\n  return (\n    <>\n      <FormControl fullWidth size=\"small\" sx={{ mb: 2 }}>\n        <Select\n          label='Style'\n          value={styles?.borderStyle}\n          onChange={(e) => updateAttrs({ styles: { borderStyle: e.target.value } })}\n          renderValue={(value) =>  formatText(value)}\n        >\n          <MenuItem value=\"solid\">Solid</MenuItem>\n          <MenuItem value=\"dashed\">Dashed</MenuItem>\n          <MenuItem value=\"dotted\">Dotted</MenuItem>\n        </Select>\n      </FormControl>\n      <Box sx={{ mb: 1 }}>\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\n          Thickness (px)\n        </Typography>\n        <Slider\n          value={styles?.borderWidth}\n          onChange={(_, value) => updateAttrs({ styles: { borderWidth: value as number }})}\n          min={1}\n          max={10}\n          step={1}\n          valueLabelDisplay=\"auto\"\n          size=\"small\"\n          sx={(theme) => ({\n            '& .MuiSlider-rail': {\n              color: theme.palette.theme.primary[500],\n            },\n            '& .MuiSlider-thumb': {\n              color: theme.palette.theme.primary[800],\n            },\n            '& .MuiSlider-track': {\n              color: theme.palette.theme.primary[600],\n            },\n          })}\n        />\n      </Box>\n      <Box sx={{ mb: 2 }}>\n        <TextField\n          label=\"Divider Color\"\n          type=\"color\"\n          value={styles?.borderColor}\n          onChange={(e) => updateAttrs({ styles: {  borderColor: e.target.value }})}\n          size=\"small\"\n          fullWidth\n          InputProps={{\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <ColorLensIcon fontSize=\"small\" />\n              </InputAdornment>\n            ),\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport default DividerControls;"],"names":["attrs","updateAttrs","styles","jsxs","Fragment","children","jsx","FormControl","fullWidth","size","sx","mb","Select","label","value","borderStyle","onChange","e","target","renderValue","formatText","MenuItem","Box","Typography","type","color","weight","Slider","borderWidth","_","min","max","step","valueLabelDisplay","theme","palette","primary","TextField","borderColor","InputProps","startAdornment","InputAdornment","position","ColorLensIcon","fontSize"],"mappings":"s2BAoBwD,EACtDA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF;AACnB,OACEG,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CAAYC,WAAS,EAACC,KAAK,QAAQC,GAAI,CAAEC,GAAI,GAC5CN,wBAAAF,EAAAA,KAACS,EAAAA,OAAA,CACCC,MAAM,QACNC,MAAO,MAAAZ,OAAA,EAAAA,EAAQa,YACfC,SAAWC,GAAMhB,EAAY,CAAEC,OAAQ,CAAEa,YAAaE,EAAEC,OAAOJ,SAC/DK,YAAcL,GAAWM,EAAAA,WAAWN,GAEpCT,SAAA;eAAAC,EAAAA,IAACe,EAAAA,QAAA,CAASP,MAAM,QAAQT,SAAA;eACxBC,EAAAA,IAACe,EAAAA,QAAA,CAASP,MAAM,SAAST,SAAA;eACzBC,EAAAA,IAACe,EAAAA,QAAA,CAASP,MAAM,SAAST,SAAA;sBAG5BiB,EAAAA,QAAA,CAAIZ,GAAI,CAAEC,GAAI,GACbN,SAAA;eAAAC,EAAAA,IAACiB,EAAAA,YAAWC,KAAK,KAAKC,MAAM,sBAAsBC,OAAO,SAASrB,SAAA;eAGlEC,EAAAA,IAACqB,EAAAA,QAAA,CACCb,MAAO,MAAAZ,OAAA,EAAAA,EAAQ0B,YACfZ,SAAU,CAACa,EAAGf,IAAUb,EAAY,CAAEC,OAAQ,CAAE0B,YAAad,KAC7DgB,IAAK,EACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBxB,KAAK,QACLC,GAAKwB,IAAA,CACH,oBAAqB,CACnBT,MAAOS,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBX,MAAOS,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBX,MAAOS,EAAMC,QAAQD,MAAME,QAAQ;qBAK1Cd,EAAAA,QAAA,CAAIZ,GAAI,CAAEC,GAAI,GACbN,wBAAAC,EAAAA,IAAC+B,EAAAA,UAAA,CACCxB,MAAM,gBACNW,KAAK,QACLV,MAAO,MAAAZ,OAAA,EAAAA,EAAQoC,YACftB,SAAWC,GAAMhB,EAAY,CAAEC,OAAQ,CAAGoC,YAAarB,EAAEC,OAAOJ,SAChEL,KAAK,QACLD,WAAS,EACT+B,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvBrC,wBAAAC,EAAAA,IAACqC,EAAAA,QAAA,CAAcC,SAAS"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/ImageControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  FormControl,\r\n  // Select,\r\n  MenuItem,\r\n  styled,\r\n  Switch,\r\n  Grid,\r\n  FormControlLabel\r\n} from '@mui/material';\r\nimport TextField from '../../../../components/text-field/text-field';\r\nimport Select from '../../../../components/select/select';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport AlignmentControl from './AlignmentControl';\r\nimport BorderControl from './border-control';\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]\r\n  },\r\n  '& .Mui-checked+.MuiSwitch-track': {\r\n    backgroundColor: `${theme.palette.theme.primary[700]}`,\r\n  },\r\n}));\r\n\r\ninterface ImageControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst ImageControls: React.FC<ImageControlsProps> = ({\r\n  attrs,\r\n  updateAttrs\r\n}) => {\r\n  const { src, alt, styles } = attrs || {}\r\n\r\n  const handleAlignmentChange = (\r\n    event: React.MouseEvent<HTMLElement>,\r\n    newAlignment: string | null,\r\n  ) => {\r\n    if(newAlignment) {\r\n        let margin = '0';\r\n        switch (newAlignment) {\r\n          case 'justify':\r\n            margin = '0 auto';\r\n            break;\r\n          case 'right':\r\n            margin = '0 0 0 auto';\r\n            break;\r\n          case 'center':\r\n            margin = '0 auto';\r\n            break;\r\n          case 'left':\r\n            margin = 'auto 0 0 0';\r\n            break;\r\n          default:\r\n            margin = '0 auto';\r\n            break;\r\n        }\r\n        updateAttrs({ styles : { margin, alignment: newAlignment } });\r\n\r\n    }\r\n  };\r\n\r\n  const getAlignment = () => {\r\n    if (styles?.margin === '0 auto' || styles?.alignment === 'center') {\r\n      return 'center';\r\n    } else if (styles?.margin === '0 0 0 auto' || styles?.alignment === 'right') {\r\n      return 'right';\r\n    } else if (styles?.margin === 'auto 0 0 0' || styles?.alignment === 'left') {\r\n      return 'left';\r\n    } else {\r\n      return 'justify';\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n          {/* Image URL */}\r\n          <TextField\r\n            label=\"Image URL\"\r\n            fullWidth\r\n            value={src}\r\n            onChange={(e) => updateAttrs({ src: e.target.value })}\r\n            size=\"small\"\r\n            sx={{ mb: 2 }}\r\n          />\r\n\r\n          {/* Alt Text */}\r\n          <TextField\r\n            label=\"Alt Text\"\r\n            fullWidth\r\n            value={alt}\r\n            onChange={(e) => updateAttrs({ alt: e.target.value })}\r\n            size=\"small\"\r\n            sx={{ mb: 2 }}\r\n          />\r\n          <FormControlLabel\r\n            control={<Android12Switch defaultChecked checked={Boolean(styles?.fullWidth)}/>}\r\n            label={<Typography type=\"s5\" color=\"theme.secondary.800\" weight='medium'>Full Width</Typography>}\r\n            labelPlacement=\"start\"\r\n            value={Boolean(styles?.fullWidth)}\r\n            onClick={(e) => {\r\n              const checked = e.target.checked\r\n              updateAttrs({ styles: { fullWidth: checked, width: checked ? 100 : 150, height: checked ? 'auto' : 150 }})\r\n            }}\r\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto', mb:2 }}\r\n          />\r\n\r\n          {/* Width Input */}\r\n          <Grid container spacing={2}>\r\n            <Grid item xs={6}>\r\n              <TextField\r\n                label=\"Width (px)\"\r\n                type=\"number\"\r\n                fullWidth\r\n                value={styles?.fullWidth ? '' : styles?.width}\r\n                onChange={(e) =>\r\n                  updateAttrs({ styles: { width: Number(e.target.value) }})\r\n                }\r\n                size=\"small\"\r\n                sx={{ mb: 2 }}\r\n                inputProps={{ min: 1 }}\r\n                disabled={styles?.fullWidth}\r\n              />\r\n            </Grid>\r\n            <Grid item xs={6}>\r\n              {/* Height Input */}\r\n              <TextField\r\n                label=\"Height (px)\"\r\n                type=\"number\"\r\n                fullWidth\r\n                value={styles?.fullWidth ? '' : styles?.height}\r\n                onChange={(e) =>\r\n                  updateAttrs({ styles: { height: Number(e.target.value) }})\r\n                }\r\n                size=\"small\"\r\n                sx={{ mb: 2 }}\r\n                inputProps={{ min: 1 }}\r\n                disabled={styles?.fullWidth}\r\n              />\r\n\r\n            </Grid>\r\n\r\n          </Grid>\r\n\r\n\r\n          {/* Object Fit Dropdown */}\r\n          <Box sx={{ mb: 2 }}>\r\n            <FormControl size=\"small\" fullWidth>\r\n              <Select\r\n                label='Object Fit'\r\n                value={styles?.objectFit}\r\n                onChange={(e) =>\r\n                  updateAttrs({ styles: { objectFit: e.target.value }})\r\n                }\r\n                displayEmpty\r\n              >\r\n                <MenuItem value=\"contain\">Contain</MenuItem>\r\n                <MenuItem value=\"cover\">Cover</MenuItem>\r\n                <MenuItem value=\"fill\">Fill</MenuItem>\r\n                <MenuItem value=\"none\">None</MenuItem>\r\n                <MenuItem value=\"scale-down\">Scale Down</MenuItem>\r\n              </Select>\r\n            </FormControl>\r\n          </Box>\r\n\r\n          {/* Alignment Toggle Buttons */}\r\n          <AlignmentControl\r\n            alignment={getAlignment()}\r\n            onAlignmentChange={handleAlignmentChange}\r\n            displayLabel\r\n          />\r\n\r\n          <BorderControl\r\n            styles={styles}\r\n            onChange={(key, value) => updateAttrs({ styles: { [key]: value } })}\r\n            isBordered={styles?.is_bordered}\r\n            disableCollapse\r\n            initiateStyles={(styles) => updateAttrs({ styles })}\r\n          />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ImageControls;"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/ImageControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  FormControl,\n  // Select,\n  MenuItem,\n  styled,\n  Switch,\n  Grid,\n  FormControlLabel\n} from '@mui/material';\nimport TextField from '../../../../components/text-field/text-field';\nimport Select from '../../../../components/select/select';\nimport Typography from '../../../../components/typography/typography';\nimport AlignmentControl from './AlignmentControl';\nimport BorderControl from './border-control';\n\nconst Android12Switch = styled(Switch)(({ theme }) => ({\n  padding: 8,\n  '& .MuiSwitch-track': {\n    borderRadius: 22 / 2,\n    '&::before, &::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      transform: 'translateY(-50%)',\n      width: 16,\n      height: 16,\n    },\n    '&::before': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\n      left: 12,\n    },\n    '&::after': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\n      right: 12,\n    },\n  },\n  '& .MuiSwitch-thumb': {\n    boxShadow: 'none',\n    width: 16,\n    height: 16,\n    margin: 2,\n    // color: theme.palette.theme.primary[800]\n  },\n  '& .Mui-checked': {\n    color: theme.palette.theme.primary[800]\n  },\n  '& .Mui-checked+.MuiSwitch-track': {\n    backgroundColor: `${theme.palette.theme.primary[700]}`,\n  },\n}));\n\ninterface ImageControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst ImageControls: React.FC<ImageControlsProps> = ({\n  attrs,\n  updateAttrs\n}) => {\n  const { src, alt, styles } = attrs || {}\n\n  const handleAlignmentChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAlignment: string | null,\n  ) => {\n    if(newAlignment) {\n        let margin = '0';\n        switch (newAlignment) {\n          case 'justify':\n            margin = '0 auto';\n            break;\n          case 'right':\n            margin = '0 0 0 auto';\n            break;\n          case 'center':\n            margin = '0 auto';\n            break;\n          case 'left':\n            margin = 'auto 0 0 0';\n            break;\n          default:\n            margin = '0 auto';\n            break;\n        }\n        updateAttrs({ styles : { margin, alignment: newAlignment } });\n\n    }\n  };\n\n  const getAlignment = () => {\n    if (styles?.margin === '0 auto' || styles?.alignment === 'center') {\n      return 'center';\n    } else if (styles?.margin === '0 0 0 auto' || styles?.alignment === 'right') {\n      return 'right';\n    } else if (styles?.margin === 'auto 0 0 0' || styles?.alignment === 'left') {\n      return 'left';\n    } else {\n      return 'justify';\n    }\n  };\n\n  return (\n    <>\n          {/* Image URL */}\n          <TextField\n            label=\"Image URL\"\n            fullWidth\n            value={src}\n            onChange={(e) => updateAttrs({ src: e.target.value })}\n            size=\"small\"\n            sx={{ mb: 2 }}\n          />\n\n          {/* Alt Text */}\n          <TextField\n            label=\"Alt Text\"\n            fullWidth\n            value={alt}\n            onChange={(e) => updateAttrs({ alt: e.target.value })}\n            size=\"small\"\n            sx={{ mb: 2 }}\n          />\n          <FormControlLabel\n            control={<Android12Switch defaultChecked checked={Boolean(styles?.fullWidth)}/>}\n            label={<Typography type=\"s5\" color=\"theme.secondary.800\" weight='medium'>Full Width</Typography>}\n            labelPlacement=\"start\"\n            value={Boolean(styles?.fullWidth)}\n            onClick={(e) => {\n              const checked = e.target.checked\n              updateAttrs({ styles: { fullWidth: checked, width: checked ? 100 : 150, height: checked ? 'auto' : 150 }})\n            }}\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto', mb:2 }}\n          />\n\n          {/* Width Input */}\n          <Grid container spacing={2}>\n            <Grid item xs={6}>\n              <TextField\n                label=\"Width (px)\"\n                type=\"number\"\n                fullWidth\n                value={styles?.fullWidth ? '' : styles?.width}\n                onChange={(e) =>\n                  updateAttrs({ styles: { width: Number(e.target.value) }})\n                }\n                size=\"small\"\n                sx={{ mb: 2 }}\n                inputProps={{ min: 1 }}\n                disabled={styles?.fullWidth}\n              />\n            </Grid>\n            <Grid item xs={6}>\n              {/* Height Input */}\n              <TextField\n                label=\"Height (px)\"\n                type=\"number\"\n                fullWidth\n                value={styles?.fullWidth ? '' : styles?.height}\n                onChange={(e) =>\n                  updateAttrs({ styles: { height: Number(e.target.value) }})\n                }\n                size=\"small\"\n                sx={{ mb: 2 }}\n                inputProps={{ min: 1 }}\n                disabled={styles?.fullWidth}\n              />\n\n            </Grid>\n\n          </Grid>\n\n\n          {/* Object Fit Dropdown */}\n          <Box sx={{ mb: 2 }}>\n            <FormControl size=\"small\" fullWidth>\n              <Select\n                label='Object Fit'\n                value={styles?.objectFit}\n                onChange={(e) =>\n                  updateAttrs({ styles: { objectFit: e.target.value }})\n                }\n                displayEmpty\n              >\n                <MenuItem value=\"contain\">Contain</MenuItem>\n                <MenuItem value=\"cover\">Cover</MenuItem>\n                <MenuItem value=\"fill\">Fill</MenuItem>\n                <MenuItem value=\"none\">None</MenuItem>\n                <MenuItem value=\"scale-down\">Scale Down</MenuItem>\n              </Select>\n            </FormControl>\n          </Box>\n\n          {/* Alignment Toggle Buttons */}\n          <AlignmentControl\n            alignment={getAlignment()}\n            onAlignmentChange={handleAlignmentChange}\n            displayLabel\n          />\n\n          <BorderControl\n            styles={styles}\n            onChange={(key, value) => updateAttrs({ styles: { [key]: value } })}\n            isBordered={styles?.is_bordered}\n            disableCollapse\n            initiateStyles={(styles) => updateAttrs({ styles })}\n          />\n    </>\n  );\n};\n\nexport default ImageControls;"],"names":["styles"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/ImageControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  FormControl,\r\n  // Select,\r\n  MenuItem,\r\n  styled,\r\n  Switch,\r\n  Grid,\r\n  FormControlLabel\r\n} from '@mui/material';\r\nimport TextField from '../../../../components/text-field/text-field';\r\nimport Select from '../../../../components/select/select';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport AlignmentControl from './AlignmentControl';\r\nimport BorderControl from './border-control';\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]\r\n  },\r\n  '& .Mui-checked+.MuiSwitch-track': {\r\n    backgroundColor: `${theme.palette.theme.primary[700]}`,\r\n  },\r\n}));\r\n\r\ninterface ImageControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst ImageControls: React.FC<ImageControlsProps> = ({\r\n  attrs,\r\n  updateAttrs\r\n}) => {\r\n  const { src, alt, styles } = attrs || {}\r\n\r\n  const handleAlignmentChange = (\r\n    event: React.MouseEvent<HTMLElement>,\r\n    newAlignment: string | null,\r\n  ) => {\r\n    if(newAlignment) {\r\n        let margin = '0';\r\n        switch (newAlignment) {\r\n          case 'justify':\r\n            margin = '0 auto';\r\n            break;\r\n          case 'right':\r\n            margin = '0 0 0 auto';\r\n            break;\r\n          case 'center':\r\n            margin = '0 auto';\r\n            break;\r\n          case 'left':\r\n            margin = 'auto 0 0 0';\r\n            break;\r\n          default:\r\n            margin = '0 auto';\r\n            break;\r\n        }\r\n        updateAttrs({ styles : { margin, alignment: newAlignment } });\r\n\r\n    }\r\n  };\r\n\r\n  const getAlignment = () => {\r\n    if (styles?.margin === '0 auto' || styles?.alignment === 'center') {\r\n      return 'center';\r\n    } else if (styles?.margin === '0 0 0 auto' || styles?.alignment === 'right') {\r\n      return 'right';\r\n    } else if (styles?.margin === 'auto 0 0 0' || styles?.alignment === 'left') {\r\n      return 'left';\r\n    } else {\r\n      return 'justify';\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n          {/* Image URL */}\r\n          <TextField\r\n            label=\"Image URL\"\r\n            fullWidth\r\n            value={src}\r\n            onChange={(e) => updateAttrs({ src: e.target.value })}\r\n            size=\"small\"\r\n            sx={{ mb: 2 }}\r\n          />\r\n\r\n          {/* Alt Text */}\r\n          <TextField\r\n            label=\"Alt Text\"\r\n            fullWidth\r\n            value={alt}\r\n            onChange={(e) => updateAttrs({ alt: e.target.value })}\r\n            size=\"small\"\r\n            sx={{ mb: 2 }}\r\n          />\r\n          <FormControlLabel\r\n            control={<Android12Switch defaultChecked checked={Boolean(styles?.fullWidth)}/>}\r\n            label={<Typography type=\"s5\" color=\"theme.secondary.800\" weight='medium'>Full Width</Typography>}\r\n            labelPlacement=\"start\"\r\n            value={Boolean(styles?.fullWidth)}\r\n            onClick={(e) => {\r\n              const checked = e.target.checked\r\n              updateAttrs({ styles: { fullWidth: checked, width: checked ? 100 : 150, height: checked ? 'auto' : 150 }})\r\n            }}\r\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto', mb:2 }}\r\n          />\r\n\r\n          {/* Width Input */}\r\n          <Grid container spacing={2}>\r\n            <Grid item xs={6}>\r\n              <TextField\r\n                label=\"Width (px)\"\r\n                type=\"number\"\r\n                fullWidth\r\n                value={styles?.fullWidth ? '' : styles?.width}\r\n                onChange={(e) =>\r\n                  updateAttrs({ styles: { width: Number(e.target.value) }})\r\n                }\r\n                size=\"small\"\r\n                sx={{ mb: 2 }}\r\n                inputProps={{ min: 1 }}\r\n                disabled={styles?.fullWidth}\r\n              />\r\n            </Grid>\r\n            <Grid item xs={6}>\r\n              {/* Height Input */}\r\n              <TextField\r\n                label=\"Height (px)\"\r\n                type=\"number\"\r\n                fullWidth\r\n                value={styles?.fullWidth ? '' : styles?.height}\r\n                onChange={(e) =>\r\n                  updateAttrs({ styles: { height: Number(e.target.value) }})\r\n                }\r\n                size=\"small\"\r\n                sx={{ mb: 2 }}\r\n                inputProps={{ min: 1 }}\r\n                disabled={styles?.fullWidth}\r\n              />\r\n\r\n            </Grid>\r\n\r\n          </Grid>\r\n\r\n\r\n          {/* Object Fit Dropdown */}\r\n          <Box sx={{ mb: 2 }}>\r\n            <FormControl size=\"small\" fullWidth>\r\n              <Select\r\n                label='Object Fit'\r\n                value={styles?.objectFit}\r\n                onChange={(e) =>\r\n                  updateAttrs({ styles: { objectFit: e.target.value }})\r\n                }\r\n                displayEmpty\r\n              >\r\n                <MenuItem value=\"contain\">Contain</MenuItem>\r\n                <MenuItem value=\"cover\">Cover</MenuItem>\r\n                <MenuItem value=\"fill\">Fill</MenuItem>\r\n                <MenuItem value=\"none\">None</MenuItem>\r\n                <MenuItem value=\"scale-down\">Scale Down</MenuItem>\r\n              </Select>\r\n            </FormControl>\r\n          </Box>\r\n\r\n          {/* Alignment Toggle Buttons */}\r\n          <AlignmentControl\r\n            alignment={getAlignment()}\r\n            onAlignmentChange={handleAlignmentChange}\r\n            displayLabel\r\n          />\r\n\r\n          <BorderControl\r\n            styles={styles}\r\n            onChange={(key, value) => updateAttrs({ styles: { [key]: value } })}\r\n            isBordered={styles?.is_bordered}\r\n            disableCollapse\r\n            initiateStyles={(styles) => updateAttrs({ styles })}\r\n          />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ImageControls;"],"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","attrs","updateAttrs","src","alt","styles","jsxs","Fragment","children","jsx","TextField","label","fullWidth","value","onChange","e","target","size","sx","mb","FormControlLabel","control","defaultChecked","checked","Boolean","Typography","type","weight","labelPlacement","onClick","display","alignItems","justifyContent","Grid","container","spacing","item","xs","Number","inputProps","min","disabled","Box","FormControl","Select","objectFit","displayEmpty","MenuItem","AlignmentControl","alignment","onAlignmentChange","event","newAlignment","displayLabel","BorderControl","key","isBordered","is_bordered","disableCollapse","initiateStyles"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/ImageControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  FormControl,\n  // Select,\n  MenuItem,\n  styled,\n  Switch,\n  Grid,\n  FormControlLabel\n} from '@mui/material';\nimport TextField from '../../../../components/text-field/text-field';\nimport Select from '../../../../components/select/select';\nimport Typography from '../../../../components/typography/typography';\nimport AlignmentControl from './AlignmentControl';\nimport BorderControl from './border-control';\n\nconst Android12Switch = styled(Switch)(({ theme }) => ({\n  padding: 8,\n  '& .MuiSwitch-track': {\n    borderRadius: 22 / 2,\n    '&::before, &::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      transform: 'translateY(-50%)',\n      width: 16,\n      height: 16,\n    },\n    '&::before': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\n      left: 12,\n    },\n    '&::after': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\n      right: 12,\n    },\n  },\n  '& .MuiSwitch-thumb': {\n    boxShadow: 'none',\n    width: 16,\n    height: 16,\n    margin: 2,\n    // color: theme.palette.theme.primary[800]\n  },\n  '& .Mui-checked': {\n    color: theme.palette.theme.primary[800]\n  },\n  '& .Mui-checked+.MuiSwitch-track': {\n    backgroundColor: `${theme.palette.theme.primary[700]}`,\n  },\n}));\n\ninterface ImageControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst ImageControls: React.FC<ImageControlsProps> = ({\n  attrs,\n  updateAttrs\n}) => {\n  const { src, alt, styles } = attrs || {}\n\n  const handleAlignmentChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAlignment: string | null,\n  ) => {\n    if(newAlignment) {\n        let margin = '0';\n        switch (newAlignment) {\n          case 'justify':\n            margin = '0 auto';\n            break;\n          case 'right':\n            margin = '0 0 0 auto';\n            break;\n          case 'center':\n            margin = '0 auto';\n            break;\n          case 'left':\n            margin = 'auto 0 0 0';\n            break;\n          default:\n            margin = '0 auto';\n            break;\n        }\n        updateAttrs({ styles : { margin, alignment: newAlignment } });\n\n    }\n  };\n\n  const getAlignment = () => {\n    if (styles?.margin === '0 auto' || styles?.alignment === 'center') {\n      return 'center';\n    } else if (styles?.margin === '0 0 0 auto' || styles?.alignment === 'right') {\n      return 'right';\n    } else if (styles?.margin === 'auto 0 0 0' || styles?.alignment === 'left') {\n      return 'left';\n    } else {\n      return 'justify';\n    }\n  };\n\n  return (\n    <>\n          {/* Image URL */}\n          <TextField\n            label=\"Image URL\"\n            fullWidth\n            value={src}\n            onChange={(e) => updateAttrs({ src: e.target.value })}\n            size=\"small\"\n            sx={{ mb: 2 }}\n          />\n\n          {/* Alt Text */}\n          <TextField\n            label=\"Alt Text\"\n            fullWidth\n            value={alt}\n            onChange={(e) => updateAttrs({ alt: e.target.value })}\n            size=\"small\"\n            sx={{ mb: 2 }}\n          />\n          <FormControlLabel\n            control={<Android12Switch defaultChecked checked={Boolean(styles?.fullWidth)}/>}\n            label={<Typography type=\"s5\" color=\"theme.secondary.800\" weight='medium'>Full Width</Typography>}\n            labelPlacement=\"start\"\n            value={Boolean(styles?.fullWidth)}\n            onClick={(e) => {\n              const checked = e.target.checked\n              updateAttrs({ styles: { fullWidth: checked, width: checked ? 100 : 150, height: checked ? 'auto' : 150 }})\n            }}\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto', mb:2 }}\n          />\n\n          {/* Width Input */}\n          <Grid container spacing={2}>\n            <Grid item xs={6}>\n              <TextField\n                label=\"Width (px)\"\n                type=\"number\"\n                fullWidth\n                value={styles?.fullWidth ? '' : styles?.width}\n                onChange={(e) =>\n                  updateAttrs({ styles: { width: Number(e.target.value) }})\n                }\n                size=\"small\"\n                sx={{ mb: 2 }}\n                inputProps={{ min: 1 }}\n                disabled={styles?.fullWidth}\n              />\n            </Grid>\n            <Grid item xs={6}>\n              {/* Height Input */}\n              <TextField\n                label=\"Height (px)\"\n                type=\"number\"\n                fullWidth\n                value={styles?.fullWidth ? '' : styles?.height}\n                onChange={(e) =>\n                  updateAttrs({ styles: { height: Number(e.target.value) }})\n                }\n                size=\"small\"\n                sx={{ mb: 2 }}\n                inputProps={{ min: 1 }}\n                disabled={styles?.fullWidth}\n              />\n\n            </Grid>\n\n          </Grid>\n\n\n          {/* Object Fit Dropdown */}\n          <Box sx={{ mb: 2 }}>\n            <FormControl size=\"small\" fullWidth>\n              <Select\n                label='Object Fit'\n                value={styles?.objectFit}\n                onChange={(e) =>\n                  updateAttrs({ styles: { objectFit: e.target.value }})\n                }\n                displayEmpty\n              >\n                <MenuItem value=\"contain\">Contain</MenuItem>\n                <MenuItem value=\"cover\">Cover</MenuItem>\n                <MenuItem value=\"fill\">Fill</MenuItem>\n                <MenuItem value=\"none\">None</MenuItem>\n                <MenuItem value=\"scale-down\">Scale Down</MenuItem>\n              </Select>\n            </FormControl>\n          </Box>\n\n          {/* Alignment Toggle Buttons */}\n          <AlignmentControl\n            alignment={getAlignment()}\n            onAlignmentChange={handleAlignmentChange}\n            displayLabel\n          />\n\n          <BorderControl\n            styles={styles}\n            onChange={(key, value) => updateAttrs({ styles: { [key]: value } })}\n            isBordered={styles?.is_bordered}\n            disableCollapse\n            initiateStyles={(styles) => updateAttrs({ styles })}\n          />\n    </>\n  );\n};\n\nexport default ImageControls;"],"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","attrs","updateAttrs","src","alt","styles","jsxs","Fragment","children","jsx","TextField","label","fullWidth","value","onChange","e","target","size","sx","mb","FormControlLabel","control","defaultChecked","checked","Boolean","Typography","type","weight","labelPlacement","onClick","display","alignItems","justifyContent","Grid","container","spacing","item","xs","Number","inputProps","min","disabled","Box","FormControl","Select","objectFit","displayEmpty","MenuItem","AlignmentControl","alignment","onAlignmentChange","event","newAlignment","displayLabel","BorderControl","key","isBordered","is_bordered","disableCollapse","initiateStyles"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/SignatureControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  Slider,\r\n  InputAdornment,\r\n} from '@mui/material';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport TextField from '../../../../components/text-field/text-field';\r\n\r\ninterface SignatureControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst SignatureControls: React.FC<SignatureControlsProps> = ({\r\n  attrs,\r\n  updateAttrs,\r\n}) => {\r\n  const { styles } = attrs\r\n  return (\r\n    <>\r\n      <Box sx={{ mb: 1 }}>\r\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\r\n          Font Size\r\n        </Typography>\r\n        <Slider\r\n          value={styles?.fontSize}\r\n          onChange={(_, value) => updateAttrs({ styles :{ fontSize: value as number }})}\r\n          min={10}\r\n          max={20}\r\n          step={1}\r\n          valueLabelDisplay=\"auto\"\r\n          size=\"small\"\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      </Box>\r\n      <Box sx={{ mb: 2,  }}>\r\n        <TextField\r\n          label=\"Text Color\"\r\n          type=\"color\"\r\n          value={styles?.color}\r\n          onChange={(e) => updateAttrs({ styles :{ color: e.target.value }})}\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 SignatureControls;"],"names":["ColorLensIcon"],"mappings":";;;;;;;AAgBA,MAAM,oBAAsD,CAAC;AAAA,EAC3D;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW;AACnB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,uBAAsB,QAAO,UAAS,UAAA,YAAA,CAElE;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,iCAAQ;AAAA,UACf,UAAU,CAAC,GAAG,UAAU,YAAY,EAAE,QAAQ,EAAE,UAAU,MAAA,GAAkB;AAAA,UAC5E,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,IAAI,CAAC,WAAW;AAAA,YACd,qBAAqB;AAAA,cACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,UACxC;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,wBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,iCAAQ;AAAA,QACf,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,MAAA,GAAQ;AAAA,QACjE,WAAS;AAAA,QACT,YAAY;AAAA,UACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACA,WAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/SignatureControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  Slider,\n  InputAdornment,\n} from '@mui/material';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport Typography from '../../../../components/typography/typography';\nimport TextField from '../../../../components/text-field/text-field';\n\ninterface SignatureControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst SignatureControls: React.FC<SignatureControlsProps> = ({\n  attrs,\n  updateAttrs,\n}) => {\n  const { styles } = attrs\n  return (\n    <>\n      <Box sx={{ mb: 1 }}>\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\n          Font Size\n        </Typography>\n        <Slider\n          value={styles?.fontSize}\n          onChange={(_, value) => updateAttrs({ styles :{ fontSize: value as number }})}\n          min={10}\n          max={20}\n          step={1}\n          valueLabelDisplay=\"auto\"\n          size=\"small\"\n          sx={(theme) => ({\n            '& .MuiSlider-rail': {\n              color: theme.palette.theme.primary[500],\n            },\n            '& .MuiSlider-thumb': {\n              color: theme.palette.theme.primary[800],\n            },\n            '& .MuiSlider-track': {\n              color: theme.palette.theme.primary[600],\n            },\n          })}\n        />\n      </Box>\n      <Box sx={{ mb: 2,  }}>\n        <TextField\n          label=\"Text Color\"\n          type=\"color\"\n          value={styles?.color}\n          onChange={(e) => updateAttrs({ styles :{ color: e.target.value }})}\n          fullWidth\n          InputProps={{\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <ColorLensIcon fontSize=\"small\" />\n              </InputAdornment>\n            ),\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport default SignatureControls;"],"names":["ColorLensIcon"],"mappings":";;;;;;;AAgBA,MAAM,oBAAsD,CAAC;AAAA,EAC3D;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW;AACnB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,uBAAsB,QAAO,UAAS,UAAA,YAAA,CAElE;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,iCAAQ;AAAA,UACf,UAAU,CAAC,GAAG,UAAU,YAAY,EAAE,QAAQ,EAAE,UAAU,MAAA,GAAkB;AAAA,UAC5E,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,IAAI,CAAC,WAAW;AAAA,YACd,qBAAqB;AAAA,cACnB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,YAExC,sBAAsB;AAAA,cACpB,OAAO,MAAM,QAAQ,MAAM,QAAQ,GAAG;AAAA,YAAA;AAAA,UACxC;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,wBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,iCAAQ;AAAA,QACf,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,MAAA,GAAQ;AAAA,QACjE,WAAS;AAAA,QACT,YAAY;AAAA,UACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACA,WAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/SignatureControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport React from 'react';\r\nimport {\r\n  Box,\r\n  Slider,\r\n  InputAdornment,\r\n} from '@mui/material';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport Typography from '../../../../components/typography/typography';\r\nimport TextField from '../../../../components/text-field/text-field';\r\n\r\ninterface SignatureControlsProps {\r\n  attrs: Record<string, any>;\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\nconst SignatureControls: React.FC<SignatureControlsProps> = ({\r\n  attrs,\r\n  updateAttrs,\r\n}) => {\r\n  const { styles } = attrs\r\n  return (\r\n    <>\r\n      <Box sx={{ mb: 1 }}>\r\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\r\n          Font Size\r\n        </Typography>\r\n        <Slider\r\n          value={styles?.fontSize}\r\n          onChange={(_, value) => updateAttrs({ styles :{ fontSize: value as number }})}\r\n          min={10}\r\n          max={20}\r\n          step={1}\r\n          valueLabelDisplay=\"auto\"\r\n          size=\"small\"\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      </Box>\r\n      <Box sx={{ mb: 2,  }}>\r\n        <TextField\r\n          label=\"Text Color\"\r\n          type=\"color\"\r\n          value={styles?.color}\r\n          onChange={(e) => updateAttrs({ styles :{ color: e.target.value }})}\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 SignatureControls;"],"names":["attrs","updateAttrs","styles","jsxs","Fragment","children","Box","sx","mb","jsx","Typography","type","color","weight","Slider","value","fontSize","onChange","_","min","max","step","valueLabelDisplay","size","theme","palette","primary","TextField","label","e","target","fullWidth","InputProps","startAdornment","InputAdornment","position","ColorLensIcon"],"mappings":"ukBAgB4D,EAC1DA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF;AACnB,OACEG,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAF,EAAAA,KAACG,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,SAAA;eAAAI,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,sBAAsBC,OAAO,SAASR,SAAA;eAGlEI,EAAAA,IAACK,EAAAA,QAAA,CACCC,MAAO,MAAAb,OAAA,EAAAA,EAAQc,SACfC,SAAU,CAACC,EAAGH,IAAUd,EAAY,CAAEC,OAAQ,CAAEc,SAAUD,KAC1DI,IAAK,GACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBC,KAAK,QACLhB,GAAKiB,IAAA,CACH,oBAAqB,CACnBZ,MAAOY,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBd,MAAOY,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBd,MAAOY,EAAMC,QAAQD,MAAME,QAAQ;qBAK1CpB,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,wBAAAI,EAAAA,IAACkB,EAAAA,UAAA,CACCC,MAAM,aACNjB,KAAK,QACLI,MAAO,MAAAb,OAAA,EAAAA,EAAQU,MACfK,SAAWY,GAAM5B,EAAY,CAAEC,OAAQ,CAAEU,MAAOiB,EAAEC,OAAOf,SACzDgB,WAAS,EACTC,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvB9B,wBAAAI,EAAAA,IAAC2B,EAAAA,QAAA,CAAcpB,SAAS"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/SignatureControls.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport {\n  Box,\n  Slider,\n  InputAdornment,\n} from '@mui/material';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport Typography from '../../../../components/typography/typography';\nimport TextField from '../../../../components/text-field/text-field';\n\ninterface SignatureControlsProps {\n  attrs: Record<string, any>;\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\nconst SignatureControls: React.FC<SignatureControlsProps> = ({\n  attrs,\n  updateAttrs,\n}) => {\n  const { styles } = attrs\n  return (\n    <>\n      <Box sx={{ mb: 1 }}>\n        <Typography type=\"s5\" color='theme.secondary.800' weight='medium'>\n          Font Size\n        </Typography>\n        <Slider\n          value={styles?.fontSize}\n          onChange={(_, value) => updateAttrs({ styles :{ fontSize: value as number }})}\n          min={10}\n          max={20}\n          step={1}\n          valueLabelDisplay=\"auto\"\n          size=\"small\"\n          sx={(theme) => ({\n            '& .MuiSlider-rail': {\n              color: theme.palette.theme.primary[500],\n            },\n            '& .MuiSlider-thumb': {\n              color: theme.palette.theme.primary[800],\n            },\n            '& .MuiSlider-track': {\n              color: theme.palette.theme.primary[600],\n            },\n          })}\n        />\n      </Box>\n      <Box sx={{ mb: 2,  }}>\n        <TextField\n          label=\"Text Color\"\n          type=\"color\"\n          value={styles?.color}\n          onChange={(e) => updateAttrs({ styles :{ color: e.target.value }})}\n          fullWidth\n          InputProps={{\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <ColorLensIcon fontSize=\"small\" />\n              </InputAdornment>\n            ),\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport default SignatureControls;"],"names":["attrs","updateAttrs","styles","jsxs","Fragment","children","Box","sx","mb","jsx","Typography","type","color","weight","Slider","value","fontSize","onChange","_","min","max","step","valueLabelDisplay","size","theme","palette","primary","TextField","label","e","target","fullWidth","InputProps","startAdornment","InputAdornment","position","ColorLensIcon"],"mappings":"ukBAgB4D,EAC1DA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF;AACnB,OACEG,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAF,EAAAA,KAACG,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,SAAA;eAAAI,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,sBAAsBC,OAAO,SAASR,SAAA;eAGlEI,EAAAA,IAACK,EAAAA,QAAA,CACCC,MAAO,MAAAb,OAAA,EAAAA,EAAQc,SACfC,SAAU,CAACC,EAAGH,IAAUd,EAAY,CAAEC,OAAQ,CAAEc,SAAUD,KAC1DI,IAAK,GACLC,IAAK,GACLC,KAAM,EACNC,kBAAkB,OAClBC,KAAK,QACLhB,GAAKiB,IAAA,CACH,oBAAqB,CACnBZ,MAAOY,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBd,MAAOY,EAAMC,QAAQD,MAAME,QAAQ,MAErC,qBAAsB,CACpBd,MAAOY,EAAMC,QAAQD,MAAME,QAAQ;qBAK1CpB,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,wBAAAI,EAAAA,IAACkB,EAAAA,UAAA,CACCC,MAAM,aACNjB,KAAK,QACLI,MAAO,MAAAb,OAAA,EAAAA,EAAQU,MACfK,SAAWY,GAAM5B,EAAY,CAAEC,OAAQ,CAAEU,MAAOiB,EAAEC,OAAOf,SACzDgB,WAAS,EACTC,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvB9B,wBAAAI,EAAAA,IAAC2B,EAAAA,QAAA,CAAcpB,SAAS"}