@erpsquad/common 1.8.40 → 1.8.41

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

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Box, styled, Tooltip, ToggleButton, ToggleButtonGroup, toggleButtonGroupClasses } from "@mui/material";
-import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
-import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
-import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
-import FormatAlignJustifyIcon from "@mui/icons-material/FormatAlignJustify";
+import default_1 from "../../../../../node_modules/@mui/icons-material/FormatAlignLeft/index.esm.js";
+import default_1$1 from "../../../../../node_modules/@mui/icons-material/FormatAlignCenter/index.esm.js";
+import default_1$2 from "../../../../../node_modules/@mui/icons-material/FormatAlignRight/index.esm.js";
+import default_1$3 from "../../../../../node_modules/@mui/icons-material/FormatAlignJustify/index.esm.js";
 import { Typography } from "../../../../../components/typography/typography/index.esm.js";
+import Box from "../../../../../node_modules/@mui/material/Box/Box/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 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 }) => ({
   display: "grid",
   borderRadius: 4,
@@ -45,10 +50,10 @@ const AlignmentControl = ({
         "aria-label": "text alignment",
         size: "small",
         children: [
-          /* @__PURE__ */ jsx(Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsx(ToggleButton, { value: "left", "aria-label": "left aligned", children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, { fontSize: "small" }) }) }),
-          /* @__PURE__ */ jsx(Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsx(ToggleButton, { value: "center", "aria-label": "centered", children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, { fontSize: "small" }) }) }),
-          /* @__PURE__ */ jsx(Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsx(ToggleButton, { value: "right", "aria-label": "right aligned", children: /* @__PURE__ */ jsx(FormatAlignRightIcon, { fontSize: "small" }) }) }),
-          /* @__PURE__ */ jsx(Tooltip, { title: "Justify", children: /* @__PURE__ */ jsx(ToggleButton, { value: "justify", "aria-label": "justified", children: /* @__PURE__ */ jsx(FormatAlignJustifyIcon, { fontSize: "small" }) }) })
+          /* @__PURE__ */ jsx(Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsx(ToggleButton, { value: "left", "aria-label": "left aligned", children: /* @__PURE__ */ jsx(default_1, { fontSize: "small" }) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsx(ToggleButton, { value: "center", "aria-label": "centered", children: /* @__PURE__ */ jsx(default_1$1, { fontSize: "small" }) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsx(ToggleButton, { value: "right", "aria-label": "right aligned", children: /* @__PURE__ */ jsx(default_1$2, { fontSize: "small" }) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Justify", children: /* @__PURE__ */ jsx(ToggleButton, { value: "justify", "aria-label": "justified", children: /* @__PURE__ */ jsx(default_1$3, { fontSize: "small" }) }) })
         ]
       }
     )

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/AlignmentControl.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport { Box, ToggleButton, ToggleButtonGroup, Tooltip, styled, toggleButtonGroupClasses } from \"@mui/material\";\r\nimport FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';\r\nimport FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';\r\nimport FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';\r\nimport FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';\r\nimport Typography from \"../../../../components/typography/typography\";\r\n\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme, item }) => ({\r\n  display: 'grid',\r\n  borderRadius: 4,\r\n  border: `1px solid #e3e3e3`,\r\n  width: `100%`,\r\n  gridTemplateColumns: `repeat(${item || 4}, 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\ninterface AlignmentControlProps {\r\n  alignment: string;\r\n  onAlignmentChange: (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => void;\r\n  displayLabel?: boolean;\r\n}\r\n\r\nconst AlignmentControl: React.FC<AlignmentControlProps> = ({\r\n  alignment,\r\n  onAlignmentChange,\r\n  displayLabel = false,\r\n  // disableJustify = false\r\n}) => {\r\n  return (\r\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n      {displayLabel &&\r\n        <Typography type=\"s5\" weight=\"medium\" color={\"theme.secondary.800\"}>Alignment</Typography>\r\n      }\r\n      <StyledToggleButtonGroup\r\n        value={alignment}\r\n        exclusive\r\n        onChange={onAlignmentChange}\r\n        aria-label=\"text alignment\"\r\n        size=\"small\"\r\n      >\r\n        <Tooltip title=\"Align Left\">\r\n          <ToggleButton value=\"left\" aria-label=\"left aligned\">\r\n            <FormatAlignLeftIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Center\">\r\n          <ToggleButton value=\"center\" aria-label=\"centered\">\r\n            <FormatAlignCenterIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Right\">\r\n          <ToggleButton value=\"right\" aria-label=\"right aligned\">\r\n            <FormatAlignRightIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        {/* {!disableJustify && */}\r\n          <Tooltip title=\"Justify\">\r\n            <ToggleButton value=\"justify\" aria-label=\"justified\">\r\n              <FormatAlignJustifyIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n        {/* } */}\r\n      </StyledToggleButtonGroup>\r\n    </Box>\r\n  );\r\n}\r\n \r\nexport default AlignmentControl;"],"names":[],"mappings":";;;;;;;AAQA,MAAM,0BAA0B,OAAO,iBAAiB,EAAE,CAAC,EAAE,OAAO,YAAY;AAAA,EAC9E,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,qBAAqB,UAAU,QAAQ,CAAC;AAAA,EACxC,CAAC,MAAM,yBAAyB,OAAO,EAAE,GAAG;AAAA,IAC1C,QAAQ,MAAM,QAAQ,GAAG;AAAA,IACzB,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,CAAC,KAAK,yBAAyB,QAAQ,EAAE,GAAG;AAAA,MAC1C,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,CAAC,MAAM,yBAAyB,YAAY,OAAO,yBAAyB,UAAU,EAAE,GACtF;AAAA,IACE,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEhB,CAAC,MAAM,yBAAyB,QAAQ,EAAE,GAAI;AAAA,IAC5C,iBAAiB,GAAG,MAAM,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAAA,IACpD,OAAO;AAAA,EAAA;AAEX,EAAE;AAQF,MAAM,mBAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA,eAAe;AAAA;AAEjB,MAAM;AACJ,SACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,GAAG,IAAI,EAAA,GACvD,UAAA;AAAA,IAAA,gBACC,oBAAC,cAAW,MAAK,MAAK,QAAO,UAAS,OAAO,uBAAuB,UAAA,YAAA,CAAS;AAAA,IAE/E;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAW;AAAA,QACX,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAQ,OAAM,cACb,UAAA,oBAAC,gBAAa,OAAM,QAAO,cAAW,gBACpC,UAAA,oBAAC,qBAAA,EAAoB,UAAS,QAAA,CAAQ,GACxC,GACF;AAAA,UACA,oBAAC,SAAA,EAAQ,OAAM,gBACb,8BAAC,cAAA,EAAa,OAAM,UAAS,cAAW,YACtC,UAAA,oBAAC,uBAAA,EAAsB,UAAS,QAAA,CAAQ,GAC1C,GACF;AAAA,UACA,oBAAC,SAAA,EAAQ,OAAM,eACb,8BAAC,cAAA,EAAa,OAAM,SAAQ,cAAW,iBACrC,UAAA,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ,GACzC,GACF;AAAA,UAEE,oBAAC,SAAA,EAAQ,OAAM,WACb,8BAAC,cAAA,EAAa,OAAM,WAAU,cAAW,aACvC,UAAA,oBAAC,wBAAA,EAAuB,UAAS,SAAQ,GAC3C,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/AlignmentControl.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport { Box, ToggleButton, ToggleButtonGroup, Tooltip, styled, toggleButtonGroupClasses } from \"@mui/material\";\r\nimport FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';\r\nimport FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';\r\nimport FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';\r\nimport FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';\r\nimport Typography from \"../../../../components/typography/typography\";\r\n\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme, item }) => ({\r\n  display: 'grid',\r\n  borderRadius: 4,\r\n  border: `1px solid #e3e3e3`,\r\n  width: `100%`,\r\n  gridTemplateColumns: `repeat(${item || 4}, 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\ninterface AlignmentControlProps {\r\n  alignment: string;\r\n  onAlignmentChange: (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => void;\r\n  displayLabel?: boolean;\r\n}\r\n\r\nconst AlignmentControl: React.FC<AlignmentControlProps> = ({\r\n  alignment,\r\n  onAlignmentChange,\r\n  displayLabel = false,\r\n  // disableJustify = false\r\n}) => {\r\n  return (\r\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n      {displayLabel &&\r\n        <Typography type=\"s5\" weight=\"medium\" color={\"theme.secondary.800\"}>Alignment</Typography>\r\n      }\r\n      <StyledToggleButtonGroup\r\n        value={alignment}\r\n        exclusive\r\n        onChange={onAlignmentChange}\r\n        aria-label=\"text alignment\"\r\n        size=\"small\"\r\n      >\r\n        <Tooltip title=\"Align Left\">\r\n          <ToggleButton value=\"left\" aria-label=\"left aligned\">\r\n            <FormatAlignLeftIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Center\">\r\n          <ToggleButton value=\"center\" aria-label=\"centered\">\r\n            <FormatAlignCenterIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Right\">\r\n          <ToggleButton value=\"right\" aria-label=\"right aligned\">\r\n            <FormatAlignRightIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        {/* {!disableJustify && */}\r\n          <Tooltip title=\"Justify\">\r\n            <ToggleButton value=\"justify\" aria-label=\"justified\">\r\n              <FormatAlignJustifyIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n        {/* } */}\r\n      </StyledToggleButtonGroup>\r\n    </Box>\r\n  );\r\n}\r\n \r\nexport default AlignmentControl;"],"names":["FormatAlignLeftIcon","FormatAlignCenterIcon","FormatAlignRightIcon","FormatAlignJustifyIcon"],"mappings":";;;;;;;;;;;;AAQA,MAAM,0BAA0B,OAAO,iBAAiB,EAAE,CAAC,EAAE,OAAO,YAAY;AAAA,EAC9E,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,qBAAqB,UAAU,QAAQ,CAAC;AAAA,EACxC,CAAC,MAAM,yBAAyB,OAAO,EAAE,GAAG;AAAA,IAC1C,QAAQ,MAAM,QAAQ,GAAG;AAAA,IACzB,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,CAAC,KAAK,yBAAyB,QAAQ,EAAE,GAAG;AAAA,MAC1C,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,CAAC,MAAM,yBAAyB,YAAY,OAAO,yBAAyB,UAAU,EAAE,GACtF;AAAA,IACE,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEhB,CAAC,MAAM,yBAAyB,QAAQ,EAAE,GAAI;AAAA,IAC5C,iBAAiB,GAAG,MAAM,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAAA,IACpD,OAAO;AAAA,EAAA;AAEX,EAAE;AAQF,MAAM,mBAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA,eAAe;AAAA;AAEjB,MAAM;AACJ,SACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,GAAG,IAAI,EAAA,GACvD,UAAA;AAAA,IAAA,gBACC,oBAAC,cAAW,MAAK,MAAK,QAAO,UAAS,OAAO,uBAAuB,UAAA,YAAA,CAAS;AAAA,IAE/E;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAW;AAAA,QACX,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAQ,OAAM,cACb,UAAA,oBAAC,gBAAa,OAAM,QAAO,cAAW,gBACpC,UAAA,oBAACA,WAAA,EAAoB,UAAS,QAAA,CAAQ,GACxC,GACF;AAAA,UACA,oBAAC,SAAA,EAAQ,OAAM,gBACb,8BAAC,cAAA,EAAa,OAAM,UAAS,cAAW,YACtC,UAAA,oBAACC,aAAA,EAAsB,UAAS,QAAA,CAAQ,GAC1C,GACF;AAAA,UACA,oBAAC,SAAA,EAAQ,OAAM,eACb,8BAAC,cAAA,EAAa,OAAM,SAAQ,cAAW,iBACrC,UAAA,oBAACC,aAAA,EAAqB,UAAS,QAAA,CAAQ,GACzC,GACF;AAAA,UAEE,oBAAC,SAAA,EAAQ,OAAM,WACb,8BAAC,cAAA,EAAa,OAAM,WAAU,cAAW,aACvC,UAAA,oBAACC,aAAA,EAAuB,UAAS,SAAQ,GAC3C,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material"),l=require("@mui/icons-material/FormatAlignLeft"),i=require("@mui/icons-material/FormatAlignCenter"),r=require("@mui/icons-material/FormatAlignRight"),a=require("@mui/icons-material/FormatAlignJustify"),o=require("../../../../../components/typography/typography/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/* @__PURE__ */n(l),u=/* @__PURE__ */n(i),d=/* @__PURE__ */n(r),g=/* @__PURE__ */n(a);const m=t.styled(t.ToggleButtonGroup)(({theme:e,item:l})=>({display:"grid",borderRadius:4,border:"1px solid #e3e3e3",width:"100%",gridTemplateColumns:`repeat(${l||4}, 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"}}));exports.default=({alignment:l,onAlignmentChange:i,displayLabel:r=!1})=>/* @__PURE__ */e.jsxs(t.Box,{sx:{display:"flex",flexWrap:"wrap",gap:1,mb:2},children:[r&&/* @__PURE__ */e.jsx(o.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Alignment"}),
-/* @__PURE__ */e.jsxs(m,{value:l,exclusive:!0,onChange:i,"aria-label":"text alignment",size:"small",children:[
-/* @__PURE__ */e.jsx(t.Tooltip,{title:"Align Left",children:/* @__PURE__ */e.jsx(t.ToggleButton,{value:"left","aria-label":"left aligned",children:/* @__PURE__ */e.jsx(s.default,{fontSize:"small"})})}),
-/* @__PURE__ */e.jsx(t.Tooltip,{title:"Align Center",children:/* @__PURE__ */e.jsx(t.ToggleButton,{value:"center","aria-label":"centered",children:/* @__PURE__ */e.jsx(u.default,{fontSize:"small"})})}),
-/* @__PURE__ */e.jsx(t.Tooltip,{title:"Align Right",children:/* @__PURE__ */e.jsx(t.ToggleButton,{value:"right","aria-label":"right aligned",children:/* @__PURE__ */e.jsx(d.default,{fontSize:"small"})})}),
-/* @__PURE__ */e.jsx(t.Tooltip,{title:"Justify",children:/* @__PURE__ */e.jsx(t.ToggleButton,{value:"justify","aria-label":"justified",children:/* @__PURE__ */e.jsx(g.default,{fontSize:"small"})})})]})]});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../../../node_modules/@mui/icons-material/FormatAlignLeft/index.js"),t=require("../../../../../node_modules/@mui/icons-material/FormatAlignCenter/index.js"),i=require("../../../../../node_modules/@mui/icons-material/FormatAlignRight/index.js"),a=require("../../../../../node_modules/@mui/icons-material/FormatAlignJustify/index.js"),r=require("../../../../../components/typography/typography/index.js"),d=require("../../../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../../../node_modules/@mui/material/styles/styled/index.js"),n=require("../../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),u=require("../../../../../node_modules/@mui/material/ToggleButton/ToggleButton/index.js"),s=require("../../../../../node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup/index.js"),m=require("../../../../../node_modules/@mui/material/ToggleButtonGroup/toggleButtonGroupClasses/index.js");const g=o.default(s.default)(({theme:e,item:l})=>({display:"grid",borderRadius:4,border:"1px solid #e3e3e3",width:"100%",gridTemplateColumns:`repeat(${l||4}, 1fr)`,[`& .${m.default.grouped}`]:{margin:e.spacing(.5),border:0,borderRadius:e.shape.borderRadius,[`&.${m.default.disabled}`]:{border:0}},[`& .${m.default.middleButton},& .${m.default.lastButton}`]:{marginLeft:-1,borderLeft:"1px solid transparent"},[`& .${m.default.selected}`]:{backgroundColor:`${e.palette.theme.primary[800]}!important`,color:"#fff !important"}}));exports.default=({alignment:o,onAlignmentChange:s,displayLabel:m=!1})=>/* @__PURE__ */e.jsxs(d.default,{sx:{display:"flex",flexWrap:"wrap",gap:1,mb:2},children:[m&&/* @__PURE__ */e.jsx(r.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Alignment"}),
+/* @__PURE__ */e.jsxs(g,{value:o,exclusive:!0,onChange:s,"aria-label":"text alignment",size:"small",children:[
+/* @__PURE__ */e.jsx(n.default,{title:"Align Left",children:/* @__PURE__ */e.jsx(u.default,{value:"left","aria-label":"left aligned",children:/* @__PURE__ */e.jsx(l.default,{fontSize:"small"})})}),
+/* @__PURE__ */e.jsx(n.default,{title:"Align Center",children:/* @__PURE__ */e.jsx(u.default,{value:"center","aria-label":"centered",children:/* @__PURE__ */e.jsx(t.default,{fontSize:"small"})})}),
+/* @__PURE__ */e.jsx(n.default,{title:"Align Right",children:/* @__PURE__ */e.jsx(u.default,{value:"right","aria-label":"right aligned",children:/* @__PURE__ */e.jsx(i.default,{fontSize:"small"})})}),
+/* @__PURE__ */e.jsx(n.default,{title:"Justify",children:/* @__PURE__ */e.jsx(u.default,{value:"justify","aria-label":"justified",children:/* @__PURE__ */e.jsx(a.default,{fontSize:"small"})})})]})]});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/AlignmentControl.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport { Box, ToggleButton, ToggleButtonGroup, Tooltip, styled, toggleButtonGroupClasses } from \"@mui/material\";\r\nimport FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';\r\nimport FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';\r\nimport FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';\r\nimport FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';\r\nimport Typography from \"../../../../components/typography/typography\";\r\n\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme, item }) => ({\r\n  display: 'grid',\r\n  borderRadius: 4,\r\n  border: `1px solid #e3e3e3`,\r\n  width: `100%`,\r\n  gridTemplateColumns: `repeat(${item || 4}, 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\ninterface AlignmentControlProps {\r\n  alignment: string;\r\n  onAlignmentChange: (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => void;\r\n  displayLabel?: boolean;\r\n}\r\n\r\nconst AlignmentControl: React.FC<AlignmentControlProps> = ({\r\n  alignment,\r\n  onAlignmentChange,\r\n  displayLabel = false,\r\n  // disableJustify = false\r\n}) => {\r\n  return (\r\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n      {displayLabel &&\r\n        <Typography type=\"s5\" weight=\"medium\" color={\"theme.secondary.800\"}>Alignment</Typography>\r\n      }\r\n      <StyledToggleButtonGroup\r\n        value={alignment}\r\n        exclusive\r\n        onChange={onAlignmentChange}\r\n        aria-label=\"text alignment\"\r\n        size=\"small\"\r\n      >\r\n        <Tooltip title=\"Align Left\">\r\n          <ToggleButton value=\"left\" aria-label=\"left aligned\">\r\n            <FormatAlignLeftIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Center\">\r\n          <ToggleButton value=\"center\" aria-label=\"centered\">\r\n            <FormatAlignCenterIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Right\">\r\n          <ToggleButton value=\"right\" aria-label=\"right aligned\">\r\n            <FormatAlignRightIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        {/* {!disableJustify && */}\r\n          <Tooltip title=\"Justify\">\r\n            <ToggleButton value=\"justify\" aria-label=\"justified\">\r\n              <FormatAlignJustifyIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n        {/* } */}\r\n      </StyledToggleButtonGroup>\r\n    </Box>\r\n  );\r\n}\r\n \r\nexport default AlignmentControl;"],"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","alignment","onAlignmentChange","displayLabel","jsxs","Box","sx","flexWrap","gap","mb","children","jsx","Typography","type","weight","value","exclusive","onChange","size","Tooltip","title","ToggleButton","FormatAlignLeftIcon","fontSize","FormatAlignCenterIcon","FormatAlignRightIcon","FormatAlignJustifyIcon"],"mappings":"sjBAQA,MAAMA,EAA0BC,EAAAA,OAAOC,EAAAA,kBAAPD,CAA0B,EAAGE,QAAOC,YAClEC,QAAS,OACTC,aAAc,EACdC,OAAQ,oBACRC,MAAO,OACPC,oBAAqB,UAAUL,GAAQ,UACvC,CAAC,MAAMM,2BAAyBC,WAAY,CAC1CC,OAAQT,EAAMU,QAAQ,IACtBN,OAAQ,EACRD,aAAcH,EAAMW,MAAMR,aAC1B,CAAC,KAAKI,2BAAyBK,YAAa,CAC1CR,OAAQ,IAGZ,CAAC,MAAMG,2BAAyBM,mBAAmBN,EAAAA,yBAAyBO,cAC1E,CACEC,YAAY,EACZC,WAAY,yBAEhB,CAAC,MAAMT,2BAAyBU,YAAc,CAC5CC,gBAAiB,GAAGlB,EAAMmB,QAAQnB,MAAMoB,QAAQ,iBAChDC,MAAO,sCAU+C,EACxDC,YACAC,oBACAC,gBAAe,sBAIbC,KAACC,EAAAA,IAAA,CAAIC,GAAI,CAAEzB,QAAS,OAAQ0B,SAAU,OAAQC,IAAK,EAAGC,GAAI,GACvDC,SAAA,CAAAP,kBACCQ,EAAAA,IAACC,cAAWC,KAAK,KAAKC,OAAO,SAASd,MAAO,sBAAuBU,SAAA;eAEtEN,EAAAA,KAAC5B,EAAA,CACCuC,MAAOd,EACPe,WAAS,EACTC,SAAUf,EACV,aAAW,iBACXgB,KAAK,QAELR,SAAA;eAAAC,MAACQ,EAAAA,QAAA,CAAQC,MAAM,aACbV,wBAAAC,EAAAA,IAACU,gBAAaN,MAAM,OAAO,aAAW,eACpCL,wBAAAC,EAAAA,IAACW,EAAAA,QAAA,CAAoBC,SAAS;eAGlCZ,MAACQ,EAAAA,QAAA,CAAQC,MAAM,eACbV,8BAACW,eAAA,CAAaN,MAAM,SAAS,aAAW,WACtCL,wBAAAC,EAAAA,IAACa,EAAAA,QAAA,CAAsBD,SAAS;eAGpCZ,MAACQ,EAAAA,QAAA,CAAQC,MAAM,cACbV,8BAACW,eAAA,CAAaN,MAAM,QAAQ,aAAW,gBACrCL,wBAAAC,EAAAA,IAACc,EAAAA,QAAA,CAAqBF,SAAS;eAIjCZ,MAACQ,EAAAA,QAAA,CAAQC,MAAM,UACbV,8BAACW,eAAA,CAAaN,MAAM,UAAU,aAAW,YACvCL,wBAAAC,MAACe,EAAAA,QAAA,CAAuBH,SAAS"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/AlignmentControl.tsx"],"sourcesContent":["/* eslint-disable unused-imports/no-unused-vars */\r\nimport { Box, ToggleButton, ToggleButtonGroup, Tooltip, styled, toggleButtonGroupClasses } from \"@mui/material\";\r\nimport FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';\r\nimport FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';\r\nimport FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';\r\nimport FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';\r\nimport Typography from \"../../../../components/typography/typography\";\r\n\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme, item }) => ({\r\n  display: 'grid',\r\n  borderRadius: 4,\r\n  border: `1px solid #e3e3e3`,\r\n  width: `100%`,\r\n  gridTemplateColumns: `repeat(${item || 4}, 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\ninterface AlignmentControlProps {\r\n  alignment: string;\r\n  onAlignmentChange: (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => void;\r\n  displayLabel?: boolean;\r\n}\r\n\r\nconst AlignmentControl: React.FC<AlignmentControlProps> = ({\r\n  alignment,\r\n  onAlignmentChange,\r\n  displayLabel = false,\r\n  // disableJustify = false\r\n}) => {\r\n  return (\r\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n      {displayLabel &&\r\n        <Typography type=\"s5\" weight=\"medium\" color={\"theme.secondary.800\"}>Alignment</Typography>\r\n      }\r\n      <StyledToggleButtonGroup\r\n        value={alignment}\r\n        exclusive\r\n        onChange={onAlignmentChange}\r\n        aria-label=\"text alignment\"\r\n        size=\"small\"\r\n      >\r\n        <Tooltip title=\"Align Left\">\r\n          <ToggleButton value=\"left\" aria-label=\"left aligned\">\r\n            <FormatAlignLeftIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Center\">\r\n          <ToggleButton value=\"center\" aria-label=\"centered\">\r\n            <FormatAlignCenterIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        <Tooltip title=\"Align Right\">\r\n          <ToggleButton value=\"right\" aria-label=\"right aligned\">\r\n            <FormatAlignRightIcon fontSize=\"small\" />\r\n          </ToggleButton>\r\n        </Tooltip>\r\n        {/* {!disableJustify && */}\r\n          <Tooltip title=\"Justify\">\r\n            <ToggleButton value=\"justify\" aria-label=\"justified\">\r\n              <FormatAlignJustifyIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n        {/* } */}\r\n      </StyledToggleButtonGroup>\r\n    </Box>\r\n  );\r\n}\r\n \r\nexport default AlignmentControl;"],"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","alignment","onAlignmentChange","displayLabel","jsxs","Box","sx","flexWrap","gap","mb","children","jsx","Typography","type","weight","value","exclusive","onChange","size","Tooltip","title","ToggleButton","FormatAlignLeftIcon","fontSize","FormatAlignCenterIcon","FormatAlignRightIcon","FormatAlignJustifyIcon"],"mappings":"0hCAQA,MAAMA,EAA0BC,EAAAA,QAAOC,EAAAA,QAAPD,CAA0B,EAAGE,QAAOC,YAClEC,QAAS,OACTC,aAAc,EACdC,OAAQ,oBACRC,MAAO,OACPC,oBAAqB,UAAUL,GAAQ,UACvC,CAAC,MAAMM,UAAyBC,WAAY,CAC1CC,OAAQT,EAAMU,QAAQ,IACtBN,OAAQ,EACRD,aAAcH,EAAMW,MAAMR,aAC1B,CAAC,KAAKI,UAAyBK,YAAa,CAC1CR,OAAQ,IAGZ,CAAC,MAAMG,UAAyBM,mBAAmBN,EAAAA,QAAyBO,cAC1E,CACEC,YAAY,EACZC,WAAY,yBAEhB,CAAC,MAAMT,UAAyBU,YAAc,CAC5CC,gBAAiB,GAAGlB,EAAMmB,QAAQnB,MAAMoB,QAAQ,iBAChDC,MAAO,sCAU+C,EACxDC,YACAC,oBACAC,gBAAe,sBAIbC,KAACC,EAAAA,QAAA,CAAIC,GAAI,CAAEzB,QAAS,OAAQ0B,SAAU,OAAQC,IAAK,EAAGC,GAAI,GACvDC,SAAA,CAAAP,kBACCQ,EAAAA,IAACC,cAAWC,KAAK,KAAKC,OAAO,SAASd,MAAO,sBAAuBU,SAAA;eAEtEN,EAAAA,KAAC5B,EAAA,CACCuC,MAAOd,EACPe,WAAS,EACTC,SAAUf,EACV,aAAW,iBACXgB,KAAK,QAELR,SAAA;eAAAC,MAACQ,EAAAA,QAAA,CAAQC,MAAM,aACbV,wBAAAC,EAAAA,IAACU,WAAaN,MAAM,OAAO,aAAW,eACpCL,wBAAAC,EAAAA,IAACW,EAAAA,QAAA,CAAoBC,SAAS;eAGlCZ,MAACQ,EAAAA,QAAA,CAAQC,MAAM,eACbV,8BAACW,UAAA,CAAaN,MAAM,SAAS,aAAW,WACtCL,wBAAAC,EAAAA,IAACa,EAAAA,QAAA,CAAsBD,SAAS;eAGpCZ,MAACQ,EAAAA,QAAA,CAAQC,MAAM,cACbV,8BAACW,UAAA,CAAaN,MAAM,QAAQ,aAAW,gBACrCL,wBAAAC,EAAAA,IAACc,EAAAA,QAAA,CAAqBF,SAAS;eAIjCZ,MAACQ,EAAAA,QAAA,CAAQC,MAAM,UACbV,8BAACW,UAAA,CAAaN,MAAM,UAAU,aAAW,YACvCL,wBAAAC,MAACe,EAAAA,QAAA,CAAuBH,SAAS"}

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

@@ -1,10 +1,13 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Box, FormControl, MenuItem, Slider } from "@mui/material";
 import { Typography } from "../../../../../components/typography/typography/index.esm.js";
 import TextField from "../../../../../components/text-field/text-field/index.esm.js";
 import AlignmentControl from "../AlignmentControl/index.esm.js";
 import Select from "../../../../../components/select/select/index.esm.js";
 import ColorPickerInput from "../../../../../components/color-picker-input/color-picker-input/index.esm.js";
+import 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 Slider from "../../../../../node_modules/@mui/material/Slider/Slider/index.esm.js";
 const borderOptions = [
   { label: "None", value: "none" },
   { value: "1px solid #e0e0e0", label: "Solid" },

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.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":[],"mappings":"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"}
+{"version":3,"file":"index.esm.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":[],"mappings":";;;;;;;;;;AAmBA,MAAM,gBAAgB;AAAA,EACpB,EAAC,OAAO,QAAQ,OAAO,OAAA;AAAA,EACvB,EAAC,OAAO,qBAAqB,OAAO,QAAA;AAAA,EACpC,EAAC,OAAO,sBAAsB,OAAO,SAAA;AAAA,EACrC,EAAC,OAAO,sBAAsB,OAAO,SAAA;AACvC;AAEA,MAAM,iBAAgD,CAAC;AAAA,EACrD;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,EAAE,MAAM,OAAA,IAAW;AACzB,QAAM,wBAAwB,CAC5B,OACA,iBACG;AACH,QAAG,cAAc;AACb,UAAI,SAAS;AACb,cAAQ,cAAA;AAAA,QAEN,KAAK;AACH,mBAAS;AACT;AAAA,QACF,KAAK;AACH,mBAAS;AACT;AAAA,QACF,KAAK;AACH,mBAAS;AACT;AAAA,QACF,KAAK;AACH,mBAAS;AACT;AAAA,QACF;AACE,mBAAS;AACT;AAAA,MAAA;AAEJ,kBAAY,EAAE,QAAS,EAAE,OAAA,GAAU;AAAA,IACvC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,SAAI,iCAAQ,YAAW,UAAU;AAC/B,aAAO;AAAA,IACT,YAAW,iCAAQ,YAAW,cAAc;AAC1C,aAAO;AAAA,IACT,YAAW,iCAAQ,YAAW,cAAc;AAC1C,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SACE,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,YAAY,EAAE,MAAM,EAAE,OAAO,OAAO;AAAA,QACrD,MAAK;AAAA,QACL,IAAI,EAAE,IAAI,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,wBAEb,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAO,iCAAQ,oBAAmB;AAAA,QAClC,UAAU,CAAC,UAAU,YAAY,EAAE,QAAQ,EAAE,iBAAiB,MAAA,GAAQ;AAAA,QACtE,OAAM;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,wBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAO,iCAAQ,UAAS;AAAA,QACxB,UAAU,CAAC,UAAU,YAAY,EAAE,QAAQ,EAAE,MAAA,GAAe;AAAA,QAC5D,OAAM;AAAA,MAAA;AAAA,IAAA,GAGV;AAAA,IACA,oBAAC,aAAA,EAAY,WAAS,MAAC,MAAK,SAAQ,IAAI,EAAE,IAAI,EAAA,GAC5C,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,iCAAQ;AAAA,QACf,aAAa,CAAC;;AAAW,sCAAc,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,MAArD,mBAAwD,UAAS;AAAA;AAAA,QAC1F,UAAU,CAAC,MAAM,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,MAAA,GAAQ;AAAA,QAClE,OAAM;AAAA,QAEN,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAS,OAAM,QAAO,UAAA,QAAI;AAAA,UAC3B,oBAAC,UAAA,EAAS,OAAM,qBAAoB,UAAA,SAAK;AAAA,UACzC,oBAAC,UAAA,EAAS,OAAM,sBAAqB,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE/C;AAAA,yBACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,qBAAoB,UAAA,iBAEhD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,iCAAQ;AAAA,UACf,UAAU,CAAC,GAAG,UAAU,YAAY,EAAE,QAAQ,EAAE,cAAc,MAAA,GAAkB;AAAA,UAChF,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,mBAAkB;AAAA,UAClB,MAAK;AAAA,UACL,OAAK;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,yBACC,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,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,OAAK;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,aAAA,GAAgB,mBAAmB,sBAAA,CAAsB;AAAA,EAAA,GAC1F;AAEJ;"}

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

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("@mui/material"),r=require("../../../../../components/typography/typography/index.js"),t=require("../../../../../components/text-field/text-field/index.js"),a=require("../AlignmentControl/index.js"),o=require("../../../../../components/select/select/index.js"),i=require("../../../../../components/color-picker-input/color-picker-input/index.js");const s=[{label:"None",value:"none"},{value:"1px solid #e0e0e0",label:"Solid"},{value:"1px dashed #e0e0e0",label:"Dashed"},{value:"1px dotted #e0e0e0",label:"Dotted"}];exports.default=({attrs:n,updateAttrs:u})=>{const{text:d,styles:m}=n;/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../../../components/typography/typography/index.js"),t=require("../../../../../components/text-field/text-field/index.js"),r=require("../AlignmentControl/index.js"),a=require("../../../../../components/select/select/index.js"),o=require("../../../../../components/color-picker-input/color-picker-input/index.js"),i=require("../../../../../node_modules/@mui/material/Box/Box/index.js"),s=require("../../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),u=require("../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),n=require("../../../../../node_modules/@mui/material/Slider/Slider/index.js");const d=[{label:"None",value:"none"},{value:"1px solid #e0e0e0",label:"Solid"},{value:"1px dashed #e0e0e0",label:"Dashed"},{value:"1px dotted #e0e0e0",label:"Dotted"}];exports.default=({attrs:m,updateAttrs:x})=>{const{text:c,styles:p}=m;/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(t.default,{label:"Button Text",fullWidth:!0,value:d,onChange:e=>u({text:e.target.value}),size:"small",sx:{mb:2}}),
-/* @__PURE__ */e.jsx(l.Box,{sx:{mb:2},children:/* @__PURE__ */e.jsx(i.default,{value:(null==m?void 0:m.backgroundColor)||"#333333",onChange:e=>u({styles:{backgroundColor:e}}),label:"Background Color"})}),
-/* @__PURE__ */e.jsx(l.Box,{sx:{mb:2},children:/* @__PURE__ */e.jsx(i.default,{value:(null==m?void 0:m.color)||"#333333",onChange:e=>u({styles:{color:e}}),label:"Text Color"})}),
-/* @__PURE__ */e.jsx(l.FormControl,{fullWidth:!0,size:"small",sx:{mb:2},children:/* @__PURE__ */e.jsxs(o.default,{value:null==m?void 0:m.border,renderValue:e=>{var l;return(null==(l=s.find(l=>l.value===e))?void 0:l.label)||"None"},onChange:e=>u({styles:{border:e.target.value}}),label:"Border",children:[
-/* @__PURE__ */e.jsx(l.MenuItem,{value:"none",children:"None"}),
-/* @__PURE__ */e.jsx(l.MenuItem,{value:"1px solid #e0e0e0",children:"Solid"}),
-/* @__PURE__ */e.jsx(l.MenuItem,{value:"1px dashed #e0e0e0",children:"Dashed"})]})}),
-/* @__PURE__ */e.jsxs(l.Box,{sx:{mb:2},children:[
-/* @__PURE__ */e.jsx(r.Typography,{type:"s3",color:"theme.neutral.800",children:"Border Radius"}),
-/* @__PURE__ */e.jsx(l.Slider,{value:null==m?void 0:m.borderRadius,onChange:(e,l)=>u({styles:{borderRadius:l}}),min:0,max:20,step:1,valueLabelDisplay:"auto",size:"small",marks:!0,sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
-/* @__PURE__ */e.jsxs(l.Box,{sx:{mb:2},children:[
-/* @__PURE__ */e.jsx(r.Typography,{type:"s3",color:"theme.neutral.800",children:"Font Size"}),
-/* @__PURE__ */e.jsx(l.Slider,{value:null==m?void 0:m.fontSize,onChange:(e,l)=>u({styles:{fontSize:l}}),min:10,max:20,step:1,valueLabelDisplay:"auto",size:"small",marks:!0,sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
-/* @__PURE__ */e.jsx(a.default,{alignment:"0 auto"===(null==m?void 0:m.margin)?"center":"0 0 0 auto"===(null==m?void 0:m.margin)?"right":"auto 0 0 0"===(null==m?void 0:m.margin)?"left":"justify",onAlignmentChange:(e,l)=>{if(l){let e="0";switch(l){case"justify":case"center":default:e="0 auto";break;case"right":e="0 0 0 auto";break;case"left":e="auto 0 0 0"}u({styles:{margin:e}})}}})]})};
+/* @__PURE__ */e.jsx(t.default,{label:"Button Text",fullWidth:!0,value:c,onChange:e=>x({text:e.target.value}),size:"small",sx:{mb:2}}),
+/* @__PURE__ */e.jsx(i.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(o.default,{value:(null==p?void 0:p.backgroundColor)||"#333333",onChange:e=>x({styles:{backgroundColor:e}}),label:"Background Color"})}),
+/* @__PURE__ */e.jsx(i.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(o.default,{value:(null==p?void 0:p.color)||"#333333",onChange:e=>x({styles:{color:e}}),label:"Text Color"})}),
+/* @__PURE__ */e.jsx(s.default,{fullWidth:!0,size:"small",sx:{mb:2},children:/* @__PURE__ */e.jsxs(a.default,{value:null==p?void 0:p.border,renderValue:e=>{var l;return(null==(l=d.find(l=>l.value===e))?void 0:l.label)||"None"},onChange:e=>x({styles:{border:e.target.value}}),label:"Border",children:[
+/* @__PURE__ */e.jsx(u.default,{value:"none",children:"None"}),
+/* @__PURE__ */e.jsx(u.default,{value:"1px solid #e0e0e0",children:"Solid"}),
+/* @__PURE__ */e.jsx(u.default,{value:"1px dashed #e0e0e0",children:"Dashed"})]})}),
+/* @__PURE__ */e.jsxs(i.default,{sx:{mb:2},children:[
+/* @__PURE__ */e.jsx(l.Typography,{type:"s3",color:"theme.neutral.800",children:"Border Radius"}),
+/* @__PURE__ */e.jsx(n.default,{value:null==p?void 0:p.borderRadius,onChange:(e,l)=>x({styles:{borderRadius:l}}),min:0,max:20,step:1,valueLabelDisplay:"auto",size:"small",marks:!0,sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
+/* @__PURE__ */e.jsxs(i.default,{sx:{mb:2},children:[
+/* @__PURE__ */e.jsx(l.Typography,{type:"s3",color:"theme.neutral.800",children:"Font Size"}),
+/* @__PURE__ */e.jsx(n.default,{value:null==p?void 0:p.fontSize,onChange:(e,l)=>x({styles:{fontSize:l}}),min:10,max:20,step:1,valueLabelDisplay:"auto",size:"small",marks:!0,sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
+/* @__PURE__ */e.jsx(r.default,{alignment:"0 auto"===(null==p?void 0:p.margin)?"center":"0 0 0 auto"===(null==p?void 0:p.margin)?"right":"auto 0 0 0"===(null==p?void 0:p.margin)?"left":"justify",onAlignmentChange:(e,l)=>{if(l){let e="0";switch(l){case"justify":case"center":default:e="0 auto";break;case"right":e="0 0 0 auto";break;case"left":e="auto 0 0 0"}x({styles:{margin:e}})}}})]})};
 //# sourceMappingURL=index.js.map

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 */\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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"}

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

@@ -1,7 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Box, Slider } from "@mui/material";
 import { Typography } from "../../../../../components/typography/typography/index.esm.js";
 import AlignmentControl from "../AlignmentControl/index.esm.js";
+import Box from "../../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import Slider from "../../../../../node_modules/@mui/material/Slider/Slider/index.esm.js";
 const CodeControls = ({
   // type,
   attrs,

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 */\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;"}

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("../../../../../components/typography/typography/index.js"),l=require("../AlignmentControl/index.js");exports.default=({attrs:i,updateAttrs:a})=>{const{styles:n}=i,s=e=>{a({styles:e})};/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../../components/typography/typography/index.js"),r=require("../AlignmentControl/index.js"),l=require("../../../../../node_modules/@mui/material/Box/Box/index.js"),i=require("../../../../../node_modules/@mui/material/Slider/Slider/index.js");exports.default=({attrs:a,updateAttrs:n})=>{const{styles:s}=a,o=e=>{n({styles:e})};/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsxs(t.Box,{sx:{mb:2},children:[
-/* @__PURE__ */e.jsx(r.Typography,{type:"s3",color:"theme.neutral.800",children:"Size (px)"}),
-/* @__PURE__ */e.jsx(t.Slider,{value:n.fontSize,onChange:(e,t)=>s({fontSize:t}),min:10,max:25,step:5,valueLabelDisplay:"auto",size:"small",sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
-/* @__PURE__ */e.jsx(l.default,{alignment:null==n?void 0:n.textAlign,onAlignmentChange:(e,t)=>{null!==t&&s({textAlign:t})},displayLabel:!0})]})};
+/* @__PURE__ */e.jsxs(l.default,{sx:{mb:2},children:[
+/* @__PURE__ */e.jsx(t.Typography,{type:"s3",color:"theme.neutral.800",children:"Size (px)"}),
+/* @__PURE__ */e.jsx(i.default,{value:s.fontSize,onChange:(e,t)=>o({fontSize:t}),min:10,max:25,step:5,valueLabelDisplay:"auto",size:"small",sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
+/* @__PURE__ */e.jsx(r.default,{alignment:null==s?void 0:s.textAlign,onAlignmentChange:(e,t)=>{null!==t&&o({textAlign:t})},displayLabel:!0})]})};
 //# sourceMappingURL=index.js.map

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":"kQAYkD,EAEhDA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF,EAEbG,EAAgBD,IACpBD,EAAY,CAAEC,OAAAA;AAYhB,OACEE,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAF,EAAAA,KAACG,EAAAA,IAAA,CAAIC,GAAI,CAAEC,GAAI,GACbH,SAAA;eAAAI,MAACC,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,oBAAoBP,SAAA;eAGhDI,EAAAA,IAACI,EAAAA,OAAA,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 */\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"}

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

@@ -1,10 +1,14 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { FormControl, MenuItem, Box, Slider, InputAdornment } from "@mui/material";
-import ColorLensIcon from "@mui/icons-material/ColorLens";
+import default_1 from "../../../../../node_modules/@mui/icons-material/ColorLens/index.esm.js";
 import { Typography } from "../../../../../components/typography/typography/index.esm.js";
 import TextField from "../../../../../components/text-field/text-field/index.esm.js";
 import Select from "../../../../../components/select/select/index.esm.js";
 import formatText from "../../../../../utils/format-text/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 Box from "../../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import Slider from "../../../../../node_modules/@mui/material/Slider/Slider/index.esm.js";
+import InputAdornment from "../../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
 const DividerControls = ({
   attrs,
   updateAttrs
@@ -61,7 +65,7 @@ const DividerControls = ({
         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, { fontSize: "small" }) })
         }
       }
     ) })

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":[],"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,oBAAC,eAAA,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 */\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;"}

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

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@mui/icons-material/ColorLens"),l=require("../../../../../components/typography/typography/index.js"),s=require("../../../../../components/text-field/text-field/index.js"),i=require("../../../../../components/select/select/index.js"),o=require("../../../../../utils/format-text/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=/* @__PURE__ */a(r);exports.default=({attrs:r,updateAttrs:a})=>{const{styles:n}=r;/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../../../node_modules/@mui/icons-material/ColorLens/index.js"),r=require("../../../../../components/typography/typography/index.js"),t=require("../../../../../components/text-field/text-field/index.js"),i=require("../../../../../components/select/select/index.js"),d=require("../../../../../utils/format-text/index.js"),s=require("../../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),o=require("../../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),a=require("../../../../../node_modules/@mui/material/Box/Box/index.js"),u=require("../../../../../node_modules/@mui/material/Slider/Slider/index.js"),n=require("../../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.js");exports.default=({attrs:m,updateAttrs:x})=>{const{styles:h}=m;/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(t.FormControl,{fullWidth:!0,size:"small",sx:{mb:2},children:/* @__PURE__ */e.jsxs(i.default,{label:"Style",value:null==n?void 0:n.borderStyle,onChange:e=>a({styles:{borderStyle:e.target.value}}),renderValue:e=>o.default(e),children:[
-/* @__PURE__ */e.jsx(t.MenuItem,{value:"solid",children:"Solid"}),
-/* @__PURE__ */e.jsx(t.MenuItem,{value:"dashed",children:"Dashed"}),
-/* @__PURE__ */e.jsx(t.MenuItem,{value:"dotted",children:"Dotted"})]})}),
-/* @__PURE__ */e.jsxs(t.Box,{sx:{mb:1},children:[
-/* @__PURE__ */e.jsx(l.Typography,{type:"s5",color:"theme.secondary.800",weight:"medium",children:"Thickness (px)"}),
-/* @__PURE__ */e.jsx(t.Slider,{value:null==n?void 0:n.borderWidth,onChange:(e,t)=>a({styles:{borderWidth:t}}),min:1,max:10,step:1,valueLabelDisplay:"auto",size:"small",sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
-/* @__PURE__ */e.jsx(t.Box,{sx:{mb:2},children:/* @__PURE__ */e.jsx(s.default,{label:"Divider Color",type:"color",value:null==n?void 0:n.borderColor,onChange:e=>a({styles:{borderColor:e.target.value}}),size:"small",fullWidth:!0,InputProps:{startAdornment:/* @__PURE__ */e.jsx(t.InputAdornment,{position:"start",children:/* @__PURE__ */e.jsx(d.default,{fontSize:"small"})})}})})]})};
+/* @__PURE__ */e.jsx(s.default,{fullWidth:!0,size:"small",sx:{mb:2},children:/* @__PURE__ */e.jsxs(i.default,{label:"Style",value:null==h?void 0:h.borderStyle,onChange:e=>x({styles:{borderStyle:e.target.value}}),renderValue:e=>d.default(e),children:[
+/* @__PURE__ */e.jsx(o.default,{value:"solid",children:"Solid"}),
+/* @__PURE__ */e.jsx(o.default,{value:"dashed",children:"Dashed"}),
+/* @__PURE__ */e.jsx(o.default,{value:"dotted",children:"Dotted"})]})}),
+/* @__PURE__ */e.jsxs(a.default,{sx:{mb:1},children:[
+/* @__PURE__ */e.jsx(r.Typography,{type:"s5",color:"theme.secondary.800",weight:"medium",children:"Thickness (px)"}),
+/* @__PURE__ */e.jsx(u.default,{value:null==h?void 0:h.borderWidth,onChange:(e,l)=>x({styles:{borderWidth:l}}),min:1,max:10,step:1,valueLabelDisplay:"auto",size:"small",sx:e=>({"& .MuiSlider-rail":{color:e.palette.theme.primary[500]},"& .MuiSlider-thumb":{color:e.palette.theme.primary[800]},"& .MuiSlider-track":{color:e.palette.theme.primary[600]}})})]}),
+/* @__PURE__ */e.jsx(a.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(t.default,{label:"Divider Color",type:"color",value:null==h?void 0:h.borderColor,onChange:e=>x({styles:{borderColor:e.target.value}}),size:"small",fullWidth:!0,InputProps:{startAdornment:/* @__PURE__ */e.jsx(n.default,{position:"start",children:/* @__PURE__ */e.jsx(l.default,{fontSize:"small"})})}})})]})};
 //# sourceMappingURL=index.js.map

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":"giBAoBwD,EACtDA,QACAC,kBAEA,MAAMC,OAAEA,GAAWF;AACnB,OACEG,EAAAA,KAAAC,WAAA,CACEC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,YAAA,CAAYC,WAAS,EAACC,KAAK,QAAQC,GAAI,CAAEC,GAAI,GAC5CN,wBAAAF,EAAAA,KAACS,EAAAA,QAAA,CACCC,MAAM,QACNC,MAAO,MAAAZ,OAAA,EAAAA,EAAQa,YACfC,SAAWC,GAAMhB,EAAY,CAAEC,OAAQ,CAAEa,YAAaE,EAAEC,OAAOJ,SAC/DK,YAAcL,GAAWM,EAAAA,QAAWN,GAEpCT,SAAA;eAAAC,EAAAA,IAACe,EAAAA,SAAA,CAASP,MAAM,QAAQT,SAAA;eACxBC,EAAAA,IAACe,EAAAA,SAAA,CAASP,MAAM,SAAST,SAAA;eACzBC,EAAAA,IAACe,EAAAA,SAAA,CAASP,MAAM,SAAST,SAAA;sBAG5BiB,EAAAA,IAAA,CAAIZ,GAAI,CAAEC,GAAI,GACbN,SAAA;eAAAC,EAAAA,IAACiB,EAAAA,YAAWC,KAAK,KAAKC,MAAM,sBAAsBC,OAAO,SAASrB,SAAA;eAGlEC,EAAAA,IAACqB,EAAAA,OAAA,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,IAAA,CAAIZ,GAAI,CAAEC,GAAI,GACbN,wBAAAC,EAAAA,IAAC+B,EAAAA,QAAA,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,iBAAA,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 */\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,QAAA,CACCC,MAAM,QACNC,MAAO,MAAAZ,OAAA,EAAAA,EAAQa,YACfC,SAAWC,GAAMhB,EAAY,CAAEC,OAAQ,CAAEa,YAAaE,EAAEC,OAAOJ,SAC/DK,YAAcL,GAAWM,EAAAA,QAAWN,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,QAAA,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

@@ -1,10 +1,16 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { FormControlLabel, styled, Grid, Box, FormControl, MenuItem, Switch } from "@mui/material";
 import TextField from "../../../../../components/text-field/text-field/index.esm.js";
 import Select from "../../../../../components/select/select/index.esm.js";
 import { Typography } from "../../../../../components/typography/typography/index.esm.js";
 import AlignmentControl from "../AlignmentControl/index.esm.js";
 import BorderControl from "../border-control/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 Grid from "../../../../../node_modules/@mui/material/Grid/Grid/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 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/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 */\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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"}