@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/assets/images/templates/dynamic-field.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+
+const DynamicField = (props: any) => {
+  const {stroke} = props;
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        id="Capa_1"
+        x="0px"
+        y="0px"
+        viewBox="0 0 512 512"
+        style={{ width: '18px', height: '18px'}}
+        xmlSpace="preserve"
+        width="512"
+        height="512"
+      >
+        <g>
+          <path
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            d="M412,136h40c22.091,0,40,17.909,40,40v160c0,22.091-17.909,40-40,40h-40"
+          />
+          <line
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            x1="100"
+            y1="216"
+            x2="180"
+            y2="216"
+          />
+          <line
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            x1="140"
+            y1="296"
+            x2="140"
+            y2="216"
+          />
+          <line
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            x1="332"
+            y1="456"
+            x2="332"
+            y2="56"
+          />
+          <line
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            x1="292"
+            y1="56"
+            x2="372"
+            y2="56"
+          />
+          <line
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            x1="292"
+            y1="456"
+            x2="372"
+            y2="456"
+          />
+          <path
+            style={{
+              fill: 'none',
+              stroke: `${stroke}`,
+              strokeWidth: 40,
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeMiterlimit: 10,
+            }}
+            d="M332,376H60c-22.091,0-40-17.909-40-40V176c0-22.091,17.909-40,40-40h272"
+          />
+        </g>
+      </svg>
+    </>
+  );
+};
+
+export default DynamicField;

package/src/assets/images/templates/edit-pencil-icon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const editPencilIcon = (props: any) => {
+    const { fill} = props;
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.4991 0.704746C12.2767 0.481379 12.0124 0.304137 11.7213 0.183197C11.4302 0.062257 11.1181 0 10.8029 0C10.4877 0 10.1756 0.062257 9.88452 0.183197C9.59344 0.304137 9.32911 0.481379 9.10671 0.704746L0.495914 9.33755C0.426952 9.40785 0.383571 9.49926 0.372714 9.59715L0.00311381 12.7079C-0.00472373 12.7735 0.00228003 12.8399 0.0236062 12.9024C0.0449324 12.9648 0.0800346 13.0217 0.126314 13.0687C0.167582 13.1109 0.216892 13.1442 0.271313 13.1669C0.325735 13.1896 0.384158 13.2011 0.443114 13.2007H0.491514L3.62871 12.8751C3.72871 12.864 3.82189 12.819 3.89271 12.7475L12.4991 4.11035C12.9489 3.65777 13.2014 3.04562 13.2014 2.40755C13.2014 1.76948 12.9489 1.15732 12.4991 0.704746ZM3.38231 12.0083L0.944714 12.2679L1.22631 9.85235L8.02872 3.03235L10.1803 5.18835L3.38231 12.0083ZM10.8007 4.56795L8.64911 2.40755L9.72711 1.32075C10.0166 1.04167 10.403 0.885735 10.8051 0.885735C11.2072 0.885735 11.5936 1.04167 11.8831 1.32075C12.1685 1.60694 12.3287 1.9946 12.3287 2.39875C12.3287 2.80289 12.1685 3.19055 11.8831 3.47675L10.8007 4.56795Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+export default editPencilIcon;

package/src/assets/images/templates/edit.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.75 12.25H12.25M8.04091 3.0985C8.04091 3.0985 8.04091 4.05203 8.99444 5.00556C9.94797 5.95909 10.9015 5.95909 10.9015 5.95909M4.26978 10.493L6.2722 10.207C6.56104 10.1657 6.82871 10.0319 7.03502 9.82557L11.855 5.00556C12.3817 4.47894 12.3817 3.62512 11.855 3.0985L10.9015 2.14497C10.3749 1.61834 9.52106 1.61834 8.99444 2.14497L4.17443 6.96498C3.96811 7.17129 3.83428 7.43896 3.79302 7.7278L3.50696 9.73022C3.44339 10.1752 3.8248 10.5566 4.26978 10.493Z" stroke="black" stroke-opacity="0.4" stroke-width="0.875" stroke-linecap="round"/>
+</svg>

package/src/assets/images/templates/epo-icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const EPO = () => {
+  return (
+    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 66.9 66.8" fill='#7f7f7f'>
+      <path className="st0" d="M44.3,15.7c0,.9-.7,1.6-1.6,1.6s-1.6-.7-1.6-1.6.7-1.6,1.6-1.6,1.6.7,1.6,1.6ZM39.1,15.7c0,2,1.6,3.7,3.6,3.7s3.6-1.6,3.6-3.7-1.6-3.7-3.6-3.7-3.6,1.6-3.6,3.7Z"/>
+      <path className="st0" d="M16.9,61.6c0,.1,0,.3,0,.4,0,.1-.1.2-.2.3,0,0-.2.2-.3.2-.1,0-.3,0-.4,0s-.3,0-.4,0c-.1,0-.2-.1-.3-.2,0,0-.2-.2-.2-.3,0-.1,0-.3,0-.4s0-.3,0-.4c0-.1.1-.2.2-.3,0,0,.2-.2.3-.2s.3,0,.4,0,.3,0,.4,0,.2.1.3.2c0,0,.2.2.2.3,0,.1,0,.3,0,.4Z"/>
+      <path className="st0" d="M41.9,2.5c.5-.5,1.3-.5,1.8,0l13.7,15.1v14.6c.5-.2,1.2-.4,1.9-.4h.2v-11.9l3.4,3.8c.4.4,1,.5,1.5,0,.4-.4.5-1,0-1.5L45.1,1.1c-.6-.7-1.5-1.1-2.4-1.1s-1.8.4-2.4,1.1l-9.8,10.8c.7.3,1.3.6,1.9,1,0,0,9.3-10.4,9.4-10.4Z"/>
+      <path className="st0" d="M26.2,15.1c4,0,7.3,3.3,7.3,7.3s-3.2,7.3-7.3,7.3-7.3-3.3-7.3-7.3,3.3-7.3,7.3-7.3ZM26.2,31.9c5.2,0,9.3-4.2,9.3-9.4s-4.2-9.4-9.3-9.4-9.3,4.2-9.3,9.4,4.2,9.4,9.3,9.4Z"/>
+      <path className="st0" d="M25.8,23.6h.7c.4,0,.7.2.7.5s0,.5-.7.5h-2c-.6,0-1,.5-1,1s.5,1,1,1h1v.5c0,.6.5,1,1,1s1-.5,1-1v-.7c1.1-.4,1.7-1.5,1.7-2.4s-.9-2.6-2.8-2.6h-.7c-.2,0-.4,0-.5-.2-.1-.1-.2-.2-.2-.4s.1-.5.7-.5h2c.6,0,1-.5,1-1s-.5-1-1-1h-.2v-.6c0-.6-.5-1-1-1s-1,.5-1,1v.6c-1.6.1-2.5,1.4-2.5,2.6s.9,2.6,2.7,2.6Z"/>
+      <path className="st0" d="M66.6,34.7c-.3-.5-.9-.8-1.6-.8h-5.6c-.6,0-1.1.2-1.5.4-.5.2-1.2.7-2.9,3.1l-1.3,1.7h-4.6v-12c0-.6-.5-1-1-1h-10.4c-.6,0-1,.5-1,1v6.7h2.1v-5.6h8.4v6.8c1.3,1,2.1,2.6,2.1,4.3v1.8h5.1c.3,0,.6-.2.8-.4l1.6-2.1c1.6-2.1,2-2.4,2.1-2.4.3-.1.5-.2.7-.2h5.2l-3.3,7.7c-.2.4-.7,1-1.1,1.3l-11.4,7.4c-.2.1-.5.3-1.7.3h-21.8c-.3,0-.5.1-.7.3l-2.7,2.6-12.2-12.2,7.3-6.9c.3-.3.9-.5,1.4-.5h11.2c.5,0,1.4.2,1.9.4l2.6,1c.7.3,1.9.5,2.7.5h6.9c.7,0,1.4.6,1.4,1.4v3.7c0,.8-.6,1.4-1.4,1.4h-13.9c-.6,0-1,.5-1,1s.5,1,1,1h13.8c1.9,0,3.4-1.6,3.4-3.4v-3.7c0-1.9-1.6-3.4-3.4-3.4h-6.9c-.5,0-1.4-.2-1.9-.4l-2.6-1c-.7-.3-1.9-.5-2.7-.5h-11.1c-.9,0-2.1.5-2.8,1.1l-7.3,6.9c-1.5-1.5-3.8-1.7-5.1-.6l-2.6,2.1c-.5.4-.5,1-.2,1.5.4.5,1,.5,1.5.2l2.6-2.1c.5-.4,1.6-.3,2.4.5l14.4,14.4c.7.7.7,1.9,0,2.6l-4.3,4.5c-.4.4-.4,1.1,0,1.5.4.4,1.1.4,1.5,0l4.3-4.5c.7-.7,1.1-1.7,1.1-2.7s-.2-1.5-.6-2.1l2.5-2.3h21.4c.9,0,2.1,0,2.9-.6l11.4-7.4c.7-.5,1.6-1.4,1.9-2.2l3.4-8c.3-.6.3-1.2,0-1.7Z"/>
+    </svg>
+  );
+};
+
+export default EPO;

package/src/assets/images/templates/field.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Field = (props: any) => {
+    const {fill} = props
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.3047 5.21094H18.5078C18.0116 5.21094 17.6094 5.61317 17.6094 6.10938C17.6094 6.60558 18.0116 7.00781 18.5078 7.00781H20.3047C20.8001 7.00781 21.2031 7.41085 21.2031 7.90625V15.0938C21.2031 15.5891 20.8001 15.9922 20.3047 15.9922H18.5078C18.0116 15.9922 17.6094 16.3944 17.6094 16.8906C17.6094 17.3868 18.0116 17.7891 18.5078 17.7891H20.3047C21.7909 17.7891 23 16.5799 23 15.0938V7.90625C23 6.42005 21.7909 5.21094 20.3047 5.21094Z"
+        fill={fill}
+      />
+      <path
+        d="M4.49219 10.6016H5.39062V13.2969C5.39062 13.7931 5.79286 14.1953 6.28906 14.1953C6.78527 14.1953 7.1875 13.7931 7.1875 13.2969V10.6016H8.08594C8.58214 10.6016 8.98438 10.1993 8.98438 9.70312C8.98438 9.20692 8.58214 8.80469 8.08594 8.80469H4.49219C3.99598 8.80469 3.59375 9.20692 3.59375 9.70312C3.59375 10.1993 3.99598 10.6016 4.49219 10.6016Z"
+        fill={fill}
+      />
+      <path
+        d="M2.69531 17.7891H14.0156V19.5859H13.1172C12.621 19.5859 12.2188 19.9882 12.2188 20.4844C12.2188 20.9806 12.621 21.3828 13.1172 21.3828H16.7109C17.2071 21.3828 17.6094 20.9806 17.6094 20.4844C17.6094 19.9882 17.2071 19.5859 16.7109 19.5859H15.8125V3.41406H16.7109C17.2071 3.41406 17.6094 3.01183 17.6094 2.51562C17.6094 2.01942 17.2071 1.61719 16.7109 1.61719H13.1172C12.621 1.61719 12.2188 2.01942 12.2188 2.51562C12.2188 3.01183 12.621 3.41406 13.1172 3.41406H14.0156V5.21094H2.69531C1.20912 5.21094 0 6.42005 0 7.90625V15.0938C0 16.5799 1.20912 17.7891 2.69531 17.7891ZM1.79688 7.90625C1.79688 7.41085 2.19991 7.00781 2.69531 7.00781H14.0156V15.9922H2.69531C2.19991 15.9922 1.79688 15.5891 1.79688 15.0938V7.90625Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+export default Field

package/src/assets/images/templates/gsv-icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const GSV = () => {
+  return (
+    <svg
+      width="685"
+      height="497"
+      viewBox="0 0 685 497"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="285.5" cy="146.5" r="56" stroke="black" strokeWidth="23" />
+      <rect
+        x="12.5"
+        y="12.5"
+        width="660"
+        height="472"
+        rx="28.5"
+        stroke="black"
+        strokeWidth="25"
+      />
+      <path
+        d="M13 316L126.663 218.694C138.981 208.149 157.344 208.878 168.787 220.366L275.5 327.5M275.5 327.5L124 482M275.5 327.5L467.765 137.481C479.819 125.568 499.206 125.542 511.29 137.424L668 291.5"
+        stroke="black"
+        strokeWidth="24"
+      />
+    </svg>
+  );
+};
+
+export default GSV;

package/src/assets/images/templates/info-icon.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+const infoIcon = (props: any) => {
+    const {className={}, fill}= props;
+  return (
+    <svg
+      width="12"
+      className={className}
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1555_2219)">
+        <path
+          d="M6.80169 8.45472C6.67902 8.46615 6.55586 8.43847 6.44987 8.37562C6.37243 8.29612 6.33531 8.18575 6.34897 8.07562C6.35183 7.98393 6.36278 7.89266 6.38169 7.8029C6.4 7.69991 6.42364 7.59796 6.45259 7.49744L6.77441 6.39015C6.8076 6.28087 6.82954 6.16846 6.83987 6.05469C6.83987 5.93197 6.85623 5.84741 6.85623 5.79833C6.86307 5.57959 6.76968 5.36969 6.60259 5.22833C6.39707 5.07055 6.14113 4.993 5.88259 5.01015C5.69732 5.01294 5.51347 5.04327 5.33713 5.10015C5.1444 5.16015 4.94167 5.23197 4.72895 5.31562L4.63623 5.67561C4.69895 5.65379 4.77533 5.62926 4.86259 5.60197C4.94584 5.57732 5.03214 5.56445 5.11895 5.56379C5.24073 5.5506 5.36331 5.58051 5.46531 5.64833C5.53459 5.731 5.5671 5.83839 5.55531 5.94562C5.555 6.03733 5.54495 6.12876 5.52531 6.21833C5.50621 6.3138 5.48167 6.41469 5.45167 6.52105L5.12713 7.63377C5.10097 7.7372 5.08004 7.84187 5.06441 7.94741C5.05166 8.03776 5.04529 8.12889 5.04531 8.22013C5.04397 8.44037 5.14468 8.64883 5.31803 8.78467C5.52672 8.94491 5.78631 9.02434 6.04893 9.00831C6.23385 9.01211 6.41814 8.98539 6.59439 8.92921C6.74893 8.87647 6.9553 8.80103 7.21349 8.70285L7.30077 8.35921C7.23083 8.38822 7.15881 8.41192 7.08531 8.43011C6.99236 8.45134 6.89692 8.45959 6.80169 8.45472Z"
+          fill={fill}
+        />
+        <path
+          d="M7.14277 3.20479C6.99434 3.06848 6.79878 2.99514 6.59731 3.00025C6.39596 2.9957 6.20059 3.06897 6.05185 3.20479C5.77923 3.43987 5.74878 3.85145 5.98388 4.1241C6.00484 4.14841 6.02755 4.17112 6.05185 4.19207C6.36244 4.46988 6.83218 4.46988 7.14275 4.19207C7.41537 3.95467 7.44394 3.54123 7.20655 3.26861C7.18681 3.2459 7.16548 3.22457 7.14277 3.20479Z"
+          fill={fill}
+        />
+        <path
+          d="M6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0ZM6 11.4545C2.98753 11.4545 0.545461 9.01247 0.545461 6C0.545461 2.98753 2.98753 0.545461 6 0.545461C9.01247 0.545461 11.4545 2.98753 11.4545 6C11.4545 9.01247 9.01247 11.4545 6 11.4545Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1555_2219">
+          <rect width="12" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default infoIcon

package/src/assets/images/templates/left-arrow.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_17308_3374)">
+<path d="M23.3333 11.667L16.6666 20.0003L23.3333 28.3337" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_17308_3374" x="-0.583496" y="-1.58301" width="41.1667" height="51.167" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17308_3374"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_17308_3374" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/images/templates/pencil.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2174 10.223L9.22815 19.2133C8.66761 19.7738 7.95123 20.1529 7.17249 20.3011L4.94397 20.725C4.25088 20.8569 3.64322 20.2491 3.77502 19.556L4.19885 17.3275C4.3471 16.5488 4.7262 15.8324 5.28674 15.2719L14.276 6.28162L18.2174 10.223ZM16.7418 3.81677C17.8302 2.72842 19.5949 2.72842 20.6832 3.81677C21.7715 4.90511 21.7715 6.66887 20.6832 7.7572L19.278 9.16248L15.3365 5.22107L16.7418 3.81677Z" fill="black" fill-opacity="0.4"/>
+</svg>

package/src/assets/images/templates/personal-letter.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+const PersonalLetter = (props: any) => {
+    const { fill } = props
+  return (
+    <svg
+      width="54"
+      height="53"
+      viewBox="0 0 54 53"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1099_4261)">
+        <path
+          d="M20.6226 12.4552L16.0639 14.4813L11.5051 12.9617L9.479 10.429L8.46594 8.90945L7.45288 5.87028L7.95941 3.84417L8.97247 1.81805L10.4921 1.31152H12.5182L14.5443 2.32458L16.0639 3.33764L17.0769 2.32458L19.103 1.81805L21.1292 1.31152L23.1553 2.83111L24.1683 6.37681L23.1553 9.41598L20.6226 12.4552Z"
+          fill={fill}
+        />
+        <path
+          d="M47.1776 24.1329L4.18954 15.8659C3.86133 15.8026 3.51449 15.9689 3.35789 16.2642C3.2013 16.5594 3.2583 16.9397 3.49463 17.1761L10.713 24.3944V40.6188C10.713 41.1689 11.298 41.5508 11.802 41.3283L23.8394 36.0093L25.8519 37.8781C26.102 38.1103 26.4857 38.1503 26.7786 37.9749L37.8497 31.3323C38.217 31.1118 38.3361 30.6355 38.1157 30.2681C37.8953 29.9007 37.4189 29.7816 37.0517 30.0021L26.4804 36.3448L16.6705 27.2357L43.998 25.8343L40.1438 28.1467C39.7764 28.3672 39.6573 28.8434 39.8778 29.2108C40.0232 29.4532 40.2801 29.5874 40.5436 29.5874C40.6794 29.5874 40.817 29.5517 40.942 29.4769L47.4609 25.5656C48.0658 25.2044 47.8866 24.2342 47.1776 24.1329ZM22.6021 34.8601L12.6006 39.2794L15.2474 28.0306L22.6021 34.8601ZM14.758 25.7803C14.4174 25.8004 14.1216 26.0442 14.0427 26.3772L12.2641 33.9362V24.8669L26.2348 25.1918L14.758 25.7803ZM11.8173 23.305L6.37891 17.8665L37.8009 23.9091L11.8173 23.305Z"
+          fill="black"
+        />
+        <path
+          d="M49.6958 36.6144C48.9136 36.0813 46.1967 34.6911 42.7717 38.0372C39.3468 34.6911 36.63 36.0813 35.8476 36.6144C33.587 38.1551 32.9008 41.5309 34.2854 44.3C36.7978 49.3251 42.2937 51.2052 42.5264 51.2826C42.6847 51.3355 42.8587 51.3355 43.0169 51.2826C43.2495 51.205 48.7454 49.325 51.258 44.3C52.6426 41.5309 51.9563 38.1551 49.6958 36.6144ZM49.8707 43.6062C47.9319 47.4839 43.815 49.3088 42.7709 49.7196C41.7251 49.3104 37.6179 47.4968 35.6727 43.6062C34.5221 41.3049 35.321 38.8505 36.7211 37.8962C37.1979 37.5711 37.7206 37.4113 38.2737 37.4113C39.4897 37.4113 40.8522 38.1845 42.195 39.6765C42.4985 40.0138 43.0445 40.0138 43.348 39.6765C45.3018 37.5057 47.2972 36.8567 48.822 37.8962C50.2224 38.8505 51.0213 41.3049 49.8707 43.6062Z"
+          fill="black"
+        />
+        <path
+          d="M22.7034 1.04121C21.9211 0.50804 19.2042 -0.882088 15.7793 2.46395C12.3542 -0.882088 9.63734 0.508143 8.85518 1.04121C6.59462 2.58186 5.90835 5.95774 7.29292 8.72678C9.80536 13.7519 15.3013 15.6319 15.534 15.7094C15.6922 15.7623 15.8662 15.7623 16.0245 15.7094C16.2571 15.6318 21.753 13.7518 24.2655 8.72678C25.6501 5.95774 24.9638 2.58186 22.7034 1.04121ZM22.8782 8.03301C20.9393 11.9107 16.8225 13.7356 15.7785 14.1464C14.7327 13.7372 10.6255 11.9236 8.68027 8.03301C7.52967 5.7317 8.3286 3.27729 9.72871 2.323C10.2055 1.99787 10.7283 1.83808 11.2814 1.83808C12.4973 1.83808 13.8599 2.61129 15.2027 4.10328C15.5062 4.44055 16.0521 4.44055 16.3557 4.10328C18.3094 1.93253 20.3048 1.28361 21.8296 2.323C23.23 3.27729 24.0289 5.7317 22.8782 8.03301Z"
+          fill="black"
+        />
+        <path
+          d="M11.8118 44.2896C10.8738 43.6502 9.3821 43.5235 7.82611 44.8817C6.27002 43.5235 4.77845 43.6505 3.84041 44.2896C2.4615 45.2294 2.03502 47.2727 2.86935 48.9415C4.30825 51.8191 7.44789 52.8933 7.58093 52.9377C7.73917 52.9905 7.91315 52.9905 8.0714 52.9377C8.20443 52.8933 11.3441 51.8192 12.783 48.9415C13.6172 47.2727 13.1906 45.2294 11.8118 44.2896ZM11.3954 48.2478C10.4554 50.1278 8.50857 51.083 7.82457 51.3706C7.13943 51.0851 5.20214 50.139 4.2566 48.2478C3.7119 47.1585 4.06985 46.0103 4.71373 45.5715C4.91158 45.4366 5.13074 45.3704 5.36584 45.3704C5.93101 45.3704 6.58682 45.7538 7.24942 46.4902C7.55294 46.8274 8.09887 46.8274 8.40239 46.4902C9.34073 45.4476 10.2652 45.1126 10.9381 45.5715C11.5823 46.0103 11.9401 47.1584 11.3954 48.2478Z"
+          fill="black"
+        />
+        <path
+          d="M46.5577 8.71538C45.6196 8.07603 44.128 7.94917 42.572 9.30751C41.0159 7.94927 39.5243 8.07634 38.5863 8.71538C37.2073 9.65517 36.7809 11.6985 37.6152 13.3673C39.054 16.245 42.1937 17.3192 42.3267 17.3635C42.4849 17.4164 42.6589 17.4164 42.8171 17.3635C42.9502 17.3191 46.0899 16.245 47.5287 13.3673C48.3631 11.6985 47.9366 9.65517 46.5577 8.71538ZM46.1414 12.6737C45.2014 14.5537 43.2546 15.5089 42.5705 15.7965C41.8854 15.511 39.9481 14.5649 39.0025 12.6737C38.4578 11.5844 38.8157 10.4362 39.4597 9.99737C39.6575 9.86249 39.8767 9.79633 40.1118 9.79633C40.677 9.79633 41.3328 10.1797 41.9954 10.9161C42.2989 11.2533 42.8448 11.2533 43.1483 10.9161C44.0867 9.87339 45.011 9.53849 45.684 9.99737C46.3281 10.4362 46.6861 11.5843 46.1414 12.6737Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1099_4261">
+          <rect
+            width="52.679"
+            height="52.679"
+            fill="white"
+            transform="translate(0.868164 0.297852)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default PersonalLetter;

package/src/assets/images/templates/postcard.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+const postcard = (props: any) => {
+    const {fill} = props;
+  return (
+    <svg
+      width="61"
+      height="46"
+      viewBox="0 0 61 46"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1099_4254)">
+        <path
+          d="M3.01993 0.916016C1.35375 0.916016 -0.0231934 2.28696 -0.0231934 3.95313V42.4514C-0.0231934 44.1176 1.35375 45.4865 3.01993 45.4865H57.723C59.3892 45.4865 60.7602 44.1176 60.7602 42.4514V3.95313C60.7602 2.28696 59.3892 0.916016 57.723 0.916016H3.01993ZM3.01993 2.94403H57.723C58.3018 2.94403 58.7341 3.3744 58.7341 3.95313V42.4514C58.7341 43.0301 58.3018 43.4605 57.723 43.4605H3.01993C2.4412 43.4605 2.00292 43.0301 2.00292 42.4514V3.95313C2.00292 3.3744 2.4412 2.94403 3.01993 2.94403ZM29.3594 8.00542V38.3971C29.3284 39.7785 31.4165 39.7785 31.3855 38.3971V8.00542C31.3855 6.68607 29.3594 6.6253 29.3594 8.00542ZM42.5272 6.98838C41.9646 6.98623 41.508 7.44284 41.5102 8.00542V11.3691C40.2276 10.9301 39.0104 10.9747 38.0713 11.2148C36.7206 11.5601 35.8196 12.2753 35.8196 12.2753C34.6686 13.1009 36.0084 14.7932 37.0761 13.8622C37.0761 13.8622 37.6472 13.418 38.5719 13.1816C39.4966 12.9453 40.6592 12.9059 42.0345 13.8919C43.8966 15.2272 45.7767 15.2731 47.0899 14.9227C48.4031 14.5724 49.2585 13.8385 49.2585 13.8385C50.4446 12.9828 48.9866 11.2668 47.9506 12.2991C47.9506 12.2991 47.4328 12.7325 46.5656 12.9639C45.7673 13.1768 44.7699 13.2196 43.5383 12.4534V9.01464H52.6617V21.1753H43.5383V18.7573C44.872 19.27 46.1322 19.2325 47.0899 18.9771C48.4031 18.6268 49.2585 17.8929 49.2585 17.8929C50.4247 17.0348 48.9871 15.3406 47.9506 16.3515C47.9506 16.3515 47.4328 16.7869 46.5656 17.0183C45.6983 17.2495 44.5986 17.2916 43.2157 16.3C41.346 14.9593 39.422 14.9219 38.0713 15.2672C36.7206 15.6125 35.8196 16.3297 35.8196 16.3297C34.6411 17.1513 36.0073 18.8746 37.0761 17.9146C37.0761 17.9146 37.6472 17.4704 38.5719 17.234C39.3769 17.0284 40.3614 16.9744 41.5102 17.6138V22.1845C41.508 22.747 41.9646 23.2035 42.5272 23.2014H53.6708C54.2303 23.1991 54.682 22.7439 54.6799 22.1845V8.00554C54.682 7.44606 54.2303 6.99083 53.6708 6.98861L42.5272 6.98838ZM11.1185 17.121C9.76639 17.121 9.76639 19.149 11.1185 19.149H24.2882C25.6402 19.149 25.6402 17.121 24.2882 17.121H11.1185ZM7.07414 22.1842C5.6931 22.1536 5.6931 24.241 7.07414 24.2104H17.1988C18.5199 24.1797 18.5199 22.2136 17.1988 22.1842H7.07414ZM21.253 22.1842C19.8719 22.1536 19.8719 24.241 21.253 24.2104H24.2882C25.6093 24.1797 25.6093 22.2136 24.2882 22.1842H21.253ZM7.07414 29.2816H24.2882C25.6693 29.3122 25.6693 27.2248 24.2882 27.2556H7.02171C5.64946 27.3532 5.75127 29.3209 7.07414 29.2816ZM36.4488 29.2816H53.6708C55.0519 29.3122 55.0519 27.2248 53.6708 27.2556H36.4004C35.0327 27.3486 35.1268 29.3151 36.4488 29.2816ZM36.4488 32.3168C35.0968 32.3168 35.0968 34.3448 36.4488 34.3448H53.6708C55.0229 34.3448 55.0229 32.3168 53.6708 32.3168H36.4488ZM36.4488 37.3801C35.1277 37.4107 35.1277 39.3769 36.4488 39.4062H53.6708C54.9919 39.3756 54.9919 37.4094 53.6708 37.3801H36.4488Z"
+          fill="black"
+        />
+        <path
+          d="M52.6578 9.01953H43.5403V21.1762H52.6578V9.01953Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1099_4254">
+          <rect width="61" height="46" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default postcard

package/src/assets/images/templates/professional-letter.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+const ProfessionalLetter = (props: any) => {
+    const { fill } = props
+  return (
+    <svg
+      width="51"
+      height="51"
+      viewBox="0 0 51 51"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1435_1353)">
+        <path
+          d="M48.0905 22.6074L43.9147 18.4315V5.74449C43.9147 5.20902 43.4806 4.77496 42.9451 4.77496H30.2581L26.1792 0.69606C25.8006 0.317459 25.1867 0.317459 24.808 0.69606L20.7291 4.77496H8.04215C7.50668 4.77496 7.07262 5.20902 7.07262 5.74449V18.4314L2.89677 22.6073C2.71498 22.7892 2.61279 23.0358 2.61279 23.2929V49.0824C2.61279 49.6178 3.04685 50.0519 3.58232 50.0519H21.1308C21.6662 50.0519 22.1003 49.6178 22.1003 49.0824C22.1003 48.5469 21.6662 48.1128 21.1308 48.1128H5.92305L25.4936 28.5421L45.0643 48.1128H29.8565C29.321 48.1128 28.887 48.5469 28.887 49.0824C28.887 49.6178 29.321 50.0519 29.8565 50.0519H47.405C47.9404 50.0519 48.3745 49.6178 48.3745 49.0824V23.2929C48.3745 23.0358 48.2723 22.7892 48.0905 22.6074ZM46.4354 25.6337V46.7417L35.8814 36.1876L46.4354 25.6337ZM46.0339 23.2929L43.9147 25.4121V21.1738L46.0339 23.2929ZM25.4936 2.75272L27.5159 4.77496H23.4714L25.4936 2.75272ZM4.55185 25.6337L15.1058 36.1876L4.55185 46.7417V25.6337ZM7.07262 25.4121L4.95343 23.2929L7.07262 21.1738V25.4121ZM24.8081 26.4855L16.477 34.8165L9.01167 27.3512V6.71401H41.9756V27.3511L34.5102 34.8164L26.1792 26.4854C25.8006 26.1069 25.1867 26.1069 24.8081 26.4855Z"
+          fill="black"
+        />
+        <path
+          d="M25.4935 48.1123C25.2385 48.1123 24.9883 48.216 24.808 48.3964C24.6277 48.5767 24.5239 48.8268 24.5239 49.0818C24.5239 49.3368 24.6277 49.587 24.808 49.7673C24.9883 49.9476 25.2385 50.0514 25.4935 50.0514C25.7484 50.0514 25.9986 49.9476 26.1789 49.7673C26.3592 49.587 26.463 49.3368 26.463 49.0818C26.463 48.8268 26.3592 48.5767 26.1789 48.3964C25.9986 48.216 25.7484 48.1123 25.4935 48.1123Z"
+          fill="black"
+        />
+        <path
+          d="M16.7356 12.1432H34.2518C34.7873 12.1432 35.2213 11.7091 35.2213 11.1736C35.2213 10.6382 34.7873 10.2041 34.2518 10.2041H16.7356C16.2002 10.2041 15.7661 10.6382 15.7661 11.1736C15.7661 11.7091 16.2002 12.1432 16.7356 12.1432Z"
+          fill="black"
+        />
+        <path
+          d="M35.2213 16.6033C35.2213 16.0678 34.7873 15.6338 34.2518 15.6338H16.7356C16.2002 15.6338 15.7661 16.0678 15.7661 16.6033C15.7661 17.1388 16.2002 17.5728 16.7356 17.5728H34.2518C34.7873 17.5728 35.2213 17.1388 35.2213 16.6033Z"
+          fill="black"
+        />
+        <path
+          d="M30.6323 21.0625H20.3553C19.8198 21.0625 19.3857 21.4966 19.3857 22.032C19.3857 22.5675 19.8198 23.0016 20.3553 23.0016H30.6323C31.1677 23.0016 31.6018 22.5675 31.6018 22.032C31.6018 21.4966 31.1677 21.0625 30.6323 21.0625Z"
+          fill="black"
+        />
+        <path
+          d="M5.73926 48.0261L25.4939 28.2715L45.2485 48.0261H5.73926Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1435_1353">
+          <rect
+            width="49.6398"
+            height="49.6398"
+            fill="white"
+            transform="translate(0.673828 0.412109)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default ProfessionalLetter;

package/src/assets/images/templates/qr-code.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const QRCode = () => {
+  return (
+    <>
+        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2 7.16667V3.16667C2 2.97778 2.064 2.81956 2.192 2.692C2.32 2.56444 2.47822 2.50044 2.66667 2.5H6.66667C6.85556 2.5 7.014 2.564 7.142 2.692C7.27 2.82 7.33378 2.97822 7.33333 3.16667V7.16667C7.33333 7.35556 7.26933 7.514 7.14133 7.642C7.01333 7.77 6.85511 7.83378 6.66667 7.83333H2.66667C2.47778 7.83333 2.31956 7.76933 2.192 7.64133C2.06444 7.51333 2.00044 7.35511 2 7.16667ZM3.33333 6.5H6V3.83333H3.33333V6.5ZM2 13.8333V9.83333C2 9.64444 2.064 9.48622 2.192 9.35867C2.32 9.23111 2.47822 9.16711 2.66667 9.16667H6.66667C6.85556 9.16667 7.014 9.23067 7.142 9.35867C7.27 9.48667 7.33378 9.64489 7.33333 9.83333V13.8333C7.33333 14.0222 7.26933 14.1807 7.14133 14.3087C7.01333 14.4367 6.85511 14.5004 6.66667 14.5H2.66667C2.47778 14.5 2.31956 14.436 2.192 14.308C2.06444 14.18 2.00044 14.0218 2 13.8333ZM3.33333 13.1667H6V10.5H3.33333V13.1667ZM8.66667 7.16667V3.16667C8.66667 2.97778 8.73067 2.81956 8.85867 2.692C8.98667 2.56444 9.14489 2.50044 9.33333 2.5H13.3333C13.5222 2.5 13.6807 2.564 13.8087 2.692C13.9367 2.82 14.0004 2.97822 14 3.16667V7.16667C14 7.35556 13.936 7.514 13.808 7.642C13.68 7.77 13.5218 7.83378 13.3333 7.83333H9.33333C9.14444 7.83333 8.98622 7.76933 8.85867 7.64133C8.73111 7.51333 8.66711 7.35511 8.66667 7.16667ZM10 6.5H12.6667V3.83333H10V6.5ZM12.6667 14.5V13.1667H14V14.5H12.6667ZM8.66667 10.5V9.16667H10V10.5H8.66667ZM10 11.8333V10.5H11.3333V11.8333H10ZM8.66667 13.1667V11.8333H10V13.1667H8.66667ZM10 14.5V13.1667H11.3333V14.5H10ZM11.3333 13.1667V11.8333H12.6667V13.1667H11.3333ZM11.3333 10.5V9.16667H12.6667V10.5H11.3333ZM12.6667 11.8333V10.5H14V11.8333H12.6667Z" fill="black"/>
+        </svg>
+    </>
+  )
+}
+
+export default QRCode

package/src/assets/images/templates/real-penned-letters.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+const realPennedLetters = (props: any) => {
+    const { fill } = props;
+  return (
+    <svg
+      width="46"
+      height="45"
+      viewBox="0 0 46 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M43.6083 11.0674C31.4516 13.4987 26.0486 23.5618 24.8667 28.2894L26.8928 29.8089L27.3993 31.8351L31.9581 32.3416C31.5529 29.9102 39.556 17.1457 43.6083 11.0674Z"
+        fill={fill}
+      />
+      <path
+        d="M37.5168 25.0229V37.2527C37.5168 37.6095 37.812 37.8987 38.176 37.8987C38.54 37.8987 38.8351 37.6095 38.8351 37.2527V25.0229C38.8351 24.6662 38.54 24.377 38.176 24.377C37.812 24.377 37.5168 24.6662 37.5168 25.0229Z"
+        fill="black"
+      />
+      <path
+        d="M45.109 39.3245H14.6038C14.2398 39.3245 13.9447 39.6137 13.9447 39.9704C13.9447 41.4874 12.6853 42.7216 11.1374 42.7216C9.58938 42.7216 8.32993 41.4875 8.32993 39.9704V3.28095C8.32993 2.77152 8.1843 2.29482 7.93182 1.88856H36.7895C37.1906 1.88856 37.517 2.20835 37.517 2.60151V9.39587C37.517 9.7526 37.8121 10.0418 38.1761 10.0418C38.5401 10.0418 38.8352 9.7526 38.8352 9.39587V2.60151C38.8352 1.49609 37.9176 0.59668 36.7895 0.59668H5.59096C4.0806 0.59668 2.8519 1.8008 2.8519 3.28095V9.39587C2.8519 10.1636 2.21458 10.7883 1.4311 10.7883C1.06708 10.7883 0.771973 11.0775 0.771973 11.4342C0.771973 11.7909 1.06708 12.0801 1.4311 12.0801H4.89756C5.26157 12.0801 5.55669 11.7909 5.55669 11.4342C5.55669 11.0775 5.26157 10.7883 4.89756 10.7883H3.77204C4.02453 10.3821 4.17006 9.9053 4.17006 9.39587V3.28095C4.17006 2.51314 4.80739 1.88856 5.59087 1.88856C6.37435 1.88856 7.01168 2.51323 7.01168 3.28095V39.9704C7.01168 42.1998 8.86241 44.0135 11.1373 44.0135H41.6425C43.9173 44.0135 45.7681 42.1998 45.7681 39.9704C45.7682 39.6137 45.4731 39.3245 45.109 39.3245ZM41.6426 42.7217H14.1578C14.7013 42.1491 15.0777 41.4222 15.2103 40.6165H44.3718C44.0745 41.8228 42.9635 42.7217 41.6426 42.7217Z"
+        fill="black"
+      />
+      <path
+        d="M27.03 22.5099C26.8501 22.82 26.9608 23.2144 27.2773 23.3907C27.5936 23.5669 27.9961 23.4585 28.176 23.1484C31.5365 17.3553 35.7787 14.4709 38.7457 13.0714C40.3955 12.2931 41.8463 11.874 42.8719 11.6501C40.4314 14.8036 34.3024 23.1773 31.4647 31.1717H27.9788C29.8509 26.8906 31.8826 23.5876 33.4692 21.3322C35.9437 17.8146 37.8972 16.0158 37.931 15.985C38.198 15.7425 38.2138 15.3337 37.9663 15.0721C37.7188 14.8105 37.3017 14.795 37.0348 15.0376C36.9519 15.113 34.9735 16.9252 32.4124 20.5584C30.9781 22.5932 29.1901 25.4605 27.4727 29.1092L25.8109 28.1399C26.1592 27.2304 26.5372 26.346 26.9375 25.5043C27.0913 25.181 26.9485 24.7967 26.6186 24.6459C26.2886 24.4952 25.8965 24.6353 25.7427 24.9585C25.2528 25.9888 24.7953 27.0799 24.3833 28.2017C24.2764 28.4928 24.3951 28.8174 24.6664 28.9756L26.9297 30.2958C26.0231 32.3327 25.1493 34.5901 24.3735 37.0634C24.2666 37.4043 24.4619 37.7657 24.8098 37.8706C24.8744 37.8901 24.9396 37.8993 25.0037 37.8993C25.2856 37.8993 25.5464 37.7208 25.6336 37.443C26.1901 35.6686 26.7981 34.0088 27.4319 32.4636H31.9366C32.2202 32.4636 32.4721 32.2857 32.5618 32.022C35.9494 22.0627 44.8382 11.2704 44.9275 11.1626C45.0918 10.9644 45.1216 10.69 45.0034 10.4625C44.8852 10.2348 44.641 10.0968 44.3813 10.1103C44.2727 10.1159 41.6828 10.266 38.2386 11.8772C35.0826 13.3533 30.5763 16.3965 27.03 22.5099Z"
+        fill="black"
+      />
+      <path
+        d="M11.8306 8.00308C12.2327 8.00308 12.4129 8.16224 12.7505 8.49322C13.1245 8.85977 13.6366 9.36188 14.6027 9.36188C15.5688 9.36188 16.081 8.85977 16.455 8.49313C16.7926 8.16215 16.9728 8.00299 17.3748 8.00299C17.777 8.00299 17.9571 8.16215 18.2948 8.49313C18.6688 8.85977 19.1809 9.3618 20.147 9.3618C21.113 9.3618 21.6251 8.8596 21.999 8.49305C22.3365 8.16207 22.5166 8.00299 22.9184 8.00299C23.3204 8.00299 23.5006 8.16215 23.8381 8.49313C24.212 8.85977 24.7242 9.36188 25.6902 9.36188C26.6564 9.36188 27.1685 8.85977 27.5426 8.49322C27.8803 8.16215 28.0605 8.00308 28.4626 8.00308C28.8662 8.00308 29.0468 8.16232 29.3853 8.49365C29.7598 8.86011 30.2726 9.36197 31.2396 9.36197C32.2065 9.36197 32.7193 8.86011 33.0938 8.49365C33.4323 8.16232 33.6129 8.00308 34.0165 8.00308C34.3805 8.00308 34.6756 7.71387 34.6756 7.35714C34.6756 7.00041 34.3805 6.7112 34.0165 6.7112C33.0495 6.7112 32.5367 7.21305 32.1622 7.57951C31.8237 7.91084 31.6431 8.07008 31.2396 8.07008C30.836 8.07008 30.6554 7.91084 30.3169 7.57951C29.9424 7.21305 29.4296 6.7112 28.4626 6.7112C27.4964 6.7112 26.9843 7.21331 26.6102 7.57986C26.2725 7.91092 26.0923 8.07 25.6902 8.07C25.2882 8.07 25.1081 7.91092 24.7706 7.57986C24.3967 7.21322 23.8845 6.71111 22.9185 6.71111C21.9525 6.71111 21.4405 7.21322 21.0666 7.57986C20.7292 7.91084 20.549 8.06991 20.1472 8.06991C19.7451 8.06991 19.565 7.91075 19.2273 7.57977C18.8534 7.21314 18.3412 6.71102 17.3751 6.71102C16.409 6.71102 15.8969 7.21314 15.523 7.57969C15.1853 7.91075 15.0052 8.06983 14.6031 8.06983C14.201 8.06983 14.0209 7.91067 13.6832 7.57969C13.3093 7.21305 12.7971 6.71094 11.831 6.71094C11.467 6.71094 11.1719 7.00015 11.1719 7.35688C11.1719 7.71361 11.4666 8.00308 11.8306 8.00308Z"
+        fill="black"
+      />
+      <path
+        d="M11.8306 12.7597C12.2327 12.7597 12.4129 12.9188 12.7505 13.2498C13.1245 13.6164 13.6366 14.1185 14.6027 14.1185C15.5688 14.1185 16.081 13.6164 16.455 13.2498C16.7926 12.9188 16.9728 12.7597 17.3748 12.7597C17.777 12.7597 17.9571 12.9188 18.2948 13.2498C18.6688 13.6164 19.1809 14.1185 20.147 14.1185C21.113 14.1185 21.6251 13.6163 21.999 13.2497C22.3365 12.9187 22.5166 12.7597 22.9184 12.7597C23.3204 12.7597 23.5006 12.9188 23.8381 13.2498C24.212 13.6164 24.7242 14.1185 25.6902 14.1185C26.6564 14.1185 27.1685 13.6164 27.5426 13.2499C27.8803 12.9188 28.0605 12.7597 28.4626 12.7597C28.8662 12.7597 29.0468 12.919 29.3853 13.2503C29.7598 13.6168 30.2726 14.1186 31.2396 14.1186C32.2065 14.1186 32.7193 13.6168 33.0938 13.2503C33.4323 12.919 33.6129 12.7597 34.0165 12.7597C34.3805 12.7597 34.6756 12.4705 34.6756 12.1138C34.6756 11.7571 34.3805 11.4679 34.0165 11.4679C33.0495 11.4679 32.5367 11.9697 32.1622 12.3362C31.8237 12.6675 31.6431 12.8267 31.2396 12.8267C30.836 12.8267 30.6554 12.6675 30.3169 12.3362C29.9424 11.9697 29.4296 11.4679 28.4626 11.4679C27.4964 11.4679 26.9843 11.97 26.6102 12.3365C26.2725 12.6676 26.0923 12.8267 25.6902 12.8267C25.2882 12.8267 25.1081 12.6675 24.7706 12.3366C24.3967 11.97 23.8845 11.4679 22.9185 11.4679C21.9525 11.4679 21.4405 11.97 21.0666 12.3366C20.7292 12.6676 20.549 12.8267 20.1472 12.8267C19.7451 12.8267 19.565 12.6675 19.2273 12.3365C18.8534 11.9699 18.3412 11.4678 17.3751 11.4678C16.409 11.4678 15.8969 11.9699 15.523 12.3364C15.1853 12.6675 15.0052 12.8266 14.6031 12.8266C14.201 12.8266 14.0209 12.6674 13.6832 12.3364C13.3093 11.9699 12.7971 11.4678 11.831 11.4678C11.467 11.4678 11.1719 11.757 11.1719 12.1137C11.1719 12.4704 11.4666 12.7597 11.8306 12.7597Z"
+        fill="black"
+      />
+      <path
+        d="M11.8306 17.5157C12.2327 17.5157 12.4129 17.6748 12.7505 18.0058C13.1245 18.3725 13.6366 18.8746 14.6027 18.8746C15.5688 18.8746 16.081 18.3725 16.455 18.0058C16.7926 17.6748 16.9728 17.5157 17.3748 17.5157C17.7769 17.5157 17.957 17.6748 18.2947 18.0058C18.6687 18.3725 19.1808 18.8745 20.1469 18.8745C21.113 18.8745 21.625 18.3723 21.9989 18.0057C22.3364 17.6748 22.5165 17.5157 22.9183 17.5157C23.3203 17.5157 23.5005 17.6748 23.838 18.0058C24.2119 18.3725 24.7241 18.8746 25.6901 18.8746C26.6563 18.8746 27.1685 18.3725 27.5425 18.0059C27.7222 17.8297 27.8775 17.6775 28.0566 17.5952C28.3862 17.4436 28.5279 17.059 28.3732 16.736C28.2186 16.413 27.826 16.2743 27.4965 16.4257C27.1084 16.6041 26.8438 16.8636 26.6103 17.0926C26.2726 17.4236 26.0924 17.5827 25.6902 17.5827C25.2882 17.5827 25.1081 17.4236 24.7706 17.0926C24.3967 16.7259 23.8845 16.2238 22.9185 16.2238C21.9525 16.2238 21.4405 16.7259 21.0666 17.0926C20.7292 17.4235 20.549 17.5826 20.1472 17.5826C19.7451 17.5826 19.565 17.4234 19.2273 17.0925C18.8534 16.7258 18.3412 16.2237 17.3751 16.2237C16.409 16.2237 15.8969 16.7258 15.523 17.0924C15.1853 17.4234 15.0052 17.5825 14.6031 17.5825C14.201 17.5825 14.0209 17.4234 13.6832 17.0924C13.3093 16.7257 12.7971 16.2236 11.831 16.2236C11.467 16.2236 11.1719 16.5128 11.1719 16.8696C11.1719 17.2263 11.4666 17.5157 11.8306 17.5157Z"
+        fill="black"
+      />
+      <path
+        d="M25.6016 23.1182C25.7561 22.7952 25.6143 22.4106 25.2846 22.2591C25.1054 22.1768 24.9501 22.0245 24.7703 21.8482C24.3964 21.4816 23.8843 20.9795 22.9183 20.9795C21.9523 20.9795 21.4403 21.4816 21.0664 21.8482C20.7289 22.1792 20.5488 22.3383 20.147 22.3383C19.7449 22.3383 19.5647 22.1791 19.2271 21.8482C18.8531 21.4815 18.341 20.9795 17.3749 20.9795C16.4088 20.9795 15.8967 21.4816 15.5227 21.8482C15.1851 22.1791 15.0049 22.3383 14.6029 22.3383C14.2008 22.3383 14.0206 22.1791 13.683 21.8482C13.309 21.4815 12.7969 20.9795 11.8308 20.9795C11.4667 20.9795 11.1716 21.2687 11.1716 21.6254C11.1716 21.9822 11.4667 22.2714 11.8308 22.2714C12.2328 22.2714 12.413 22.4305 12.7506 22.7615C13.1246 23.1282 13.6368 23.6302 14.6029 23.6302C15.569 23.6302 16.0811 23.1281 16.4551 22.7615C16.7927 22.4305 16.9729 22.2714 17.375 22.2714C17.7771 22.2714 17.9572 22.4305 18.2949 22.7615C18.6689 23.1282 19.181 23.6302 20.1471 23.6302C21.1132 23.6302 21.6252 23.1281 21.9991 22.7614C22.3366 22.4304 22.5166 22.2714 22.9185 22.2714C23.3205 22.2714 23.5007 22.4305 23.8382 22.7615C24.0719 22.9906 24.3368 23.2504 24.7253 23.4288C25.0545 23.5804 25.4471 23.4411 25.6016 23.1182Z"
+        fill="black"
+      />
+      <path
+        d="M11.8305 27.0274C12.2326 27.0274 12.4127 27.1866 12.7504 27.5175C13.1243 27.8842 13.6365 28.3863 14.6026 28.3863C15.5687 28.3863 16.0809 27.8842 16.4548 27.5175C16.7925 27.1866 16.9726 27.0274 17.3747 27.0274C17.7768 27.0274 17.9569 27.1866 18.2947 27.5175C18.6686 27.8842 19.1808 28.3862 20.1469 28.3862C21.1129 28.3862 21.6249 27.884 21.9988 27.5175C22.3363 27.1865 22.5165 27.0274 22.9183 27.0274C23.2823 27.0274 23.5774 26.7382 23.5774 26.3815C23.5774 26.0247 23.2823 25.7355 22.9183 25.7355C21.9523 25.7355 21.4403 26.2376 21.0664 26.6043C20.7289 26.9353 20.5488 27.0943 20.147 27.0943C19.7449 27.0943 19.5647 26.9352 19.2271 26.6042C18.8531 26.2376 18.341 25.7354 17.3749 25.7354C16.4088 25.7354 15.8967 26.2376 15.5227 26.6041C15.1851 26.9352 15.0049 27.0942 14.6029 27.0942C14.2008 27.0942 14.0206 26.9351 13.683 26.6041C13.309 26.2375 12.7969 25.7354 11.8308 25.7354C11.4667 25.7354 11.1716 26.0246 11.1716 26.3813C11.1716 26.738 11.4665 27.0274 11.8305 27.0274Z"
+        fill="black"
+      />
+      <path
+        d="M11.8305 31.7842C12.2326 31.7842 12.4127 31.9434 12.7504 32.2744C13.1243 32.641 13.6365 33.1431 14.6026 33.1431C15.5687 33.1431 16.0809 32.641 16.4548 32.2744C16.7925 31.9434 16.9726 31.7842 17.3746 31.7842C17.7768 31.7842 17.9568 31.9434 18.2946 32.2744C18.6685 32.641 19.1807 33.143 20.1468 33.143C21.1128 33.143 21.6248 32.6408 21.9988 32.2743C22.3362 31.9433 22.5164 31.7842 22.9182 31.7842C23.0809 31.7842 23.2127 31.8108 23.3328 31.8677C23.6604 32.0231 24.0547 31.8887 24.2132 31.5676C24.3718 31.2465 24.2347 30.8602 23.907 30.7048C23.6055 30.5619 23.2821 30.4924 22.9183 30.4924C21.9523 30.4924 21.4403 30.9945 21.0664 31.3611C20.7289 31.6921 20.5488 31.8512 20.147 31.8512C19.7449 31.8512 19.5647 31.692 19.2271 31.361C18.8531 30.9944 18.341 30.4923 17.3749 30.4923C16.4088 30.4923 15.8967 30.9944 15.5227 31.3609C15.1851 31.692 15.0049 31.8511 14.6029 31.8511C14.2008 31.8511 14.0206 31.6919 13.683 31.3609C13.309 30.9943 12.7969 30.4922 11.8308 30.4922C11.4667 30.4922 11.1716 30.7814 11.1716 31.1381C11.1716 31.4949 11.4665 31.7842 11.8305 31.7842Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
+
+export default realPennedLetters;

package/src/assets/images/templates/right-arrow.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_17308_2930)">
+<path d="M16.6667 11.667L23.3334 20.0003L16.6667 28.3337" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_17308_2930" x="-0.583252" y="-1.58301" width="41.1667" height="51.167" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17308_2930"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_17308_2930" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/images/templates/size-image-lg.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const sizeImageLg = () => {
+  return (
+    <svg
+      width="199"
+      height="147"
+      viewBox="0 0 199 147"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.92523 0.988281C4.49095 0.988281 0 5.46002 0 10.8943V136.457C0 141.891 4.49095 146.356 9.92523 146.356H188.341C193.775 146.356 198.247 141.891 198.247 136.457V10.8943C198.247 5.46002 193.775 0.988281 188.341 0.988281H9.92523ZM138.779 20.7938H175.124C176.949 20.8011 178.423 22.2862 178.416 24.111V70.3555C178.423 72.1803 176.949 73.6653 175.124 73.6727H138.779C136.944 73.6795 135.455 72.1904 135.462 70.3555V55.4483C131.715 53.3632 128.504 53.538 125.879 54.2093C122.863 54.9798 121 56.4293 121 56.4293C117.514 59.5604 113.059 53.9396 116.902 51.26C116.902 51.26 119.841 48.9209 124.246 47.7946C128.652 46.6682 134.927 46.7905 141.025 51.1632C145.535 54.3973 149.122 54.2605 151.95 53.5058C154.779 52.7515 156.468 51.3312 156.468 51.3312C159.848 48.0339 164.537 53.5597 160.733 56.3584C160.733 56.3584 157.944 58.752 153.661 59.8946C150.537 60.7276 146.427 60.8499 142.077 59.1778V67.0639H171.833V27.4018H142.077V38.6173C146.094 41.1161 149.347 40.9769 151.95 40.2823C154.779 39.528 156.468 38.1142 156.468 38.1142C159.847 34.7473 164.602 40.344 160.733 43.1349C160.733 43.1349 157.944 45.5285 153.661 46.6711C149.377 47.8138 143.246 47.664 137.172 43.309C132.687 40.0927 128.895 40.2213 125.879 40.9923C122.863 41.7628 121 43.2122 121 43.2122C117.518 46.2488 113.148 40.7294 116.902 38.0365C116.902 38.0365 119.841 35.7037 124.246 34.5776C127.309 33.7946 131.279 33.6499 135.462 35.081V24.1102C135.456 22.2753 136.944 20.7868 138.779 20.7938ZM99.1363 20.806C100.788 20.831 102.44 21.959 102.44 24.1106V123.234C102.542 127.739 95.7323 127.739 95.8322 123.234V24.1106C95.8322 21.8599 97.4842 20.7813 99.1363 20.806ZM36.3388 53.8412H79.2922C83.702 53.8412 83.702 60.456 79.2922 60.456H36.3388C31.929 60.456 31.929 53.8412 36.3388 53.8412ZM23.1482 70.3555H56.1699C60.4788 70.4554 60.4788 76.8683 56.1699 76.9639H23.1482C18.6437 77.0638 18.6437 70.2556 23.1482 70.3555ZM69.3928 70.3555H79.2922C83.6011 70.4554 83.6011 76.8683 79.2922 76.9639H69.3928C64.8885 77.0638 64.8885 70.2556 69.3928 70.3555ZM22.9803 86.8954H79.2922C83.7968 86.7955 83.7968 93.6033 79.2922 93.5034H23.1482C18.8337 93.632 18.5048 87.2133 22.9803 86.8954ZM118.8 86.8954H175.124C179.629 86.7955 179.629 93.6033 175.124 93.5034H118.955C114.643 93.6157 114.339 87.1985 118.8 86.8954ZM118.954 103.403H175.124C179.534 103.403 179.534 110.018 175.124 110.018H118.954C114.545 110.018 114.545 103.403 118.954 103.403ZM118.954 119.917H175.124C179.433 120.017 179.433 126.429 175.124 126.526H118.954C114.646 126.426 114.646 120.013 118.954 119.917Z"
+        fill="#FDECD3"
+      />
+    </svg>
+  );
+};
+
+export default sizeImageLg;

package/src/assets/images/templates/size-image-mid.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const sizeImageMid = () => {
+  return (
+    <svg
+      width="149"
+      height="111"
+      viewBox="0 0 149 111"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.45968 0.988281C3.37535 0.988281 0 4.34919 0 8.43353V102.805C0 106.889 3.37535 110.245 7.45968 110.245H141.555C145.639 110.245 149 106.889 149 102.805V8.43353C149 4.34919 145.639 0.988281 141.555 0.988281H7.45968ZM104.305 15.8739H131.622C132.993 15.8793 134.1 16.9956 134.095 18.367V53.1239C134.1 54.4954 132.993 55.6115 131.622 55.617H104.305C102.926 55.6222 101.807 54.503 101.812 53.1239V41.9198C98.9957 40.3526 96.5824 40.484 94.6092 40.9886C92.3425 41.5677 90.9424 42.6571 90.9424 42.6571C88.3224 45.0104 84.9735 40.7859 87.8625 38.7719C87.8625 38.7719 90.071 37.0139 93.382 36.1674C96.6932 35.3208 101.409 35.4127 105.993 38.6992C109.383 41.1299 112.078 41.027 114.204 40.4599C116.33 39.893 117.599 38.8255 117.599 38.8255C120.14 36.3472 123.664 40.5003 120.805 42.6038C120.805 42.6038 118.709 44.4028 115.49 45.2616C113.142 45.8876 110.053 45.9796 106.783 44.7228V50.65H129.148V20.8404H106.783V29.2698C109.803 31.1479 112.248 31.0433 114.204 30.5212C116.33 29.9543 117.599 28.8917 117.599 28.8917C120.139 26.3612 123.713 30.5676 120.805 32.6652C120.805 32.6652 118.709 34.4642 115.49 35.323C112.27 36.1818 107.662 36.0692 103.097 32.7961C99.7259 30.3787 96.876 30.4754 94.6092 31.0548C92.3425 31.6339 90.9424 32.7233 90.9424 32.7233C88.3252 35.0056 85.0408 30.8572 87.8625 28.8333C87.8625 28.8333 90.071 27.08 93.382 26.2336C95.684 25.6451 98.6678 25.5364 101.812 26.612V18.3664C101.807 16.9874 102.926 15.8686 104.305 15.8739ZM74.5097 15.8831C75.7514 15.9018 76.993 16.7496 76.993 18.3667V92.8667C77.069 96.2529 71.9513 96.2529 72.0264 92.8667V18.3667C72.0264 16.6751 73.268 15.8645 74.5097 15.8831ZM27.3118 40.7119H59.5951C62.9095 40.7119 62.9095 45.6835 59.5951 45.6835H27.3118C23.9975 45.6835 23.9975 40.7119 27.3118 40.7119ZM17.3979 53.1239H42.2167C45.4552 53.199 45.4552 58.0188 42.2167 58.0906H17.3979C14.0124 58.1657 14.0124 53.0488 17.3979 53.1239ZM52.1548 53.1239H59.5951C62.8336 53.199 62.8336 58.0188 59.5951 58.0906H52.1548C48.7695 58.1657 48.7695 53.0488 52.1548 53.1239ZM17.2718 65.5551H59.5951C62.9807 65.48 62.9807 70.5966 59.5951 70.5215H17.3979C14.1552 70.6182 13.908 65.794 17.2718 65.5551ZM89.2884 65.5551H131.622C135.007 65.48 135.007 70.5966 131.622 70.5215H89.4048C86.1646 70.606 85.9358 65.7829 89.2884 65.5551ZM89.4048 77.9619H131.621C134.936 77.9619 134.936 82.9335 131.621 82.9335H89.4048C86.0905 82.9335 86.0905 77.9619 89.4048 77.9619ZM89.4048 90.3739H131.621C134.86 90.449 134.86 95.2684 131.621 95.3406H89.4048C86.1663 95.2656 86.1663 90.4462 89.4048 90.3739Z"
+        fill="#FDECD3"
+      />
+    </svg>
+  );
+};
+
+export default sizeImageMid;

package/src/assets/images/templates/size-image-xl.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const sizeImageLg = () => {
+  return (
+    <svg
+      width="199"
+      height="175"
+      viewBox="0 0 199 147"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.92523 0.988281C4.49095 0.988281 0 5.46002 0 10.8943V136.457C0 141.891 4.49095 146.356 9.92523 146.356H188.341C193.775 146.356 198.247 141.891 198.247 136.457V10.8943C198.247 5.46002 193.775 0.988281 188.341 0.988281H9.92523ZM138.779 20.7938H175.124C176.949 20.8011 178.423 22.2862 178.416 24.111V70.3555C178.423 72.1803 176.949 73.6653 175.124 73.6727H138.779C136.944 73.6795 135.455 72.1904 135.462 70.3555V55.4483C131.715 53.3632 128.504 53.538 125.879 54.2093C122.863 54.9798 121 56.4293 121 56.4293C117.514 59.5604 113.059 53.9396 116.902 51.26C116.902 51.26 119.841 48.9209 124.246 47.7946C128.652 46.6682 134.927 46.7905 141.025 51.1632C145.535 54.3973 149.122 54.2605 151.95 53.5058C154.779 52.7515 156.468 51.3312 156.468 51.3312C159.848 48.0339 164.537 53.5597 160.733 56.3584C160.733 56.3584 157.944 58.752 153.661 59.8946C150.537 60.7276 146.427 60.8499 142.077 59.1778V67.0639H171.833V27.4018H142.077V38.6173C146.094 41.1161 149.347 40.9769 151.95 40.2823C154.779 39.528 156.468 38.1142 156.468 38.1142C159.847 34.7473 164.602 40.344 160.733 43.1349C160.733 43.1349 157.944 45.5285 153.661 46.6711C149.377 47.8138 143.246 47.664 137.172 43.309C132.687 40.0927 128.895 40.2213 125.879 40.9923C122.863 41.7628 121 43.2122 121 43.2122C117.518 46.2488 113.148 40.7294 116.902 38.0365C116.902 38.0365 119.841 35.7037 124.246 34.5776C127.309 33.7946 131.279 33.6499 135.462 35.081V24.1102C135.456 22.2753 136.944 20.7868 138.779 20.7938ZM99.1363 20.806C100.788 20.831 102.44 21.959 102.44 24.1106V123.234C102.542 127.739 95.7323 127.739 95.8322 123.234V24.1106C95.8322 21.8599 97.4842 20.7813 99.1363 20.806ZM36.3388 53.8412H79.2922C83.702 53.8412 83.702 60.456 79.2922 60.456H36.3388C31.929 60.456 31.929 53.8412 36.3388 53.8412ZM23.1482 70.3555H56.1699C60.4788 70.4554 60.4788 76.8683 56.1699 76.9639H23.1482C18.6437 77.0638 18.6437 70.2556 23.1482 70.3555ZM69.3928 70.3555H79.2922C83.6011 70.4554 83.6011 76.8683 79.2922 76.9639H69.3928C64.8885 77.0638 64.8885 70.2556 69.3928 70.3555ZM22.9803 86.8954H79.2922C83.7968 86.7955 83.7968 93.6033 79.2922 93.5034H23.1482C18.8337 93.632 18.5048 87.2133 22.9803 86.8954ZM118.8 86.8954H175.124C179.629 86.7955 179.629 93.6033 175.124 93.5034H118.955C114.643 93.6157 114.339 87.1985 118.8 86.8954ZM118.954 103.403H175.124C179.534 103.403 179.534 110.018 175.124 110.018H118.954C114.545 110.018 114.545 103.403 118.954 103.403ZM118.954 119.917H175.124C179.433 120.017 179.433 126.429 175.124 126.526H118.954C114.646 126.426 114.646 120.013 118.954 119.917Z"
+        fill="#FDECD3"
+      />
+    </svg>
+  );
+};
+
+export default sizeImageLg;