@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/assets/globals.scss

@@ -62,3 +62,7 @@
     }
   }
 }
+
+.breadcrumb-separator::after {
+  content: var(--theme-breadcrumb-separator);
+}

package/app-template/src/assets/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.537 5.81a.5.5 0 0 1 .817-.162l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708l3.147-3.146H4a.5.5 0 0 1 0-1h10.793l-3.147-3.146a.5.5 0 0 1-.109-.546z" fill="#333030"></path>
+</svg>

package/app-template/src/assets/icons/cart.svg

@@ -1,13 +1,5 @@
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
-    <title>Group 3</title>
-    
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="header/mobile" transform="translate(-339.000000, -16.000000)">
-            <g id="Group-3" transform="translate(339.000000, 16.000000)">
-                
-                <g id="Clip-2"></g>
-                <path d="M8.85138934,0.885245902 C10.5598402,0.885245902 11.94975,2.27515574 11.94975,3.98360656 L11.94975,4.72131148 L5.75302869,4.72131148 L5.75302869,3.98360656 C5.75302869,2.27515574 7.14293852,0.885245902 8.85138934,0.885245902 L8.85138934,0.885245902 Z M4.86778279,5.60655738 L4.86778279,7.52459016 C4.86778279,7.76865984 5.06633607,7.96721311 5.31040574,7.96721311 C5.55447541,7.96721311 5.75302869,7.76865984 5.75302869,7.52459016 L5.75302869,5.60655738 L11.94975,5.60655738 L11.94975,7.52459016 C11.94975,7.76865984 12.1483033,7.96721311 12.392373,7.96721311 C12.6364795,7.96721311 12.8349959,7.76865984 12.8349959,7.52459016 L12.8349959,5.60655738 L15.5403074,5.60655738 L16.8122951,16.29 C16.837082,16.4991762 16.7711311,16.7094221 16.6312254,16.8668484 C16.4916148,17.0240902 16.290959,17.114459 16.0808975,17.1147541 L1.62309836,17.1147541 C1.21643852,17.1147541 0.885356557,16.7839672 0.885356557,16.3773443 C0.885356557,16.3482049 0.887090164,16.3188074 0.890520492,16.2900369 L2.16247131,5.60655738 L4.86778279,5.60655738 Z M17.6927828,16.185209 L17.6761844,16.0581025 L16.3728811,5.1117418 C16.3464713,4.88913934 16.1575451,4.72131148 15.9333566,4.72131148 L12.8349959,4.72131148 L12.8349959,3.98360656 C12.8349959,1.78705328 11.0479426,0 8.85138934,0 C6.65483607,0 4.86778279,1.78705328 4.86778279,3.98360656 L4.86778279,4.72131148 L1.76942213,4.72131148 C1.54527049,4.72131148 1.35634426,4.88913934 1.32989754,5.11166803 L0.0114713115,16.1852459 C-0.0942786885,17.0738484 0.542618852,17.8828525 1.43122131,17.9886025 C1.49447951,17.9961639 1.55884426,18 1.62243443,18 L16.0812664,18 C16.975918,18 17.7041437,17.2720697 17.7041437,16.3774549 C17.7041437,16.313459 17.7003811,16.2487623 17.6927828,16.185209 L17.6927828,16.185209 Z" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
-            </g>
-        </g>
-    </g>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 17.4 16.9">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  
+  <path class="st0" d="M3.9,0H.8L0,11.6c0,.7,0,1.4.3,2,.2.6.6,1.2,1.1,1.7.5.5,1,.9,1.7,1.2.6.3,1.3.4,2,.4h7.4c.7,0,1.4-.1,2-.4.6-.3,1.2-.7,1.7-1.2.5-.5.8-1.1,1.1-1.7.2-.6.3-1.3.3-2l-.8-11.6H3.9ZM1.7,1h2.2v.6c0,.6.1,1.2.4,1.8.2.6.6,1.1,1,1.5.4.4,1,.8,1.5,1,.6.2,1.2.4,1.8.4s1.2-.1,1.8-.4c.6-.2,1.1-.6,1.5-1s.8-1,1-1.5c.2-.6.4-1.2.4-1.8v-.6h2.2l.7,10.7c0,.5,0,1.1-.2,1.6-.2.5-.5,1-.8,1.4-.4.4-.8.7-1.3.9-.5.2-1,.3-1.6.3h-7.4c-.5,0-1.1-.1-1.6-.3-.5-.2-1-.5-1.3-.9-.4-.4-.7-.9-.8-1.4-.2-.5-.3-1.1-.2-1.6L1.7,1ZM4.9,1h7.5v.6c0,1-.4,1.9-1.1,2.7-.7.7-1.7,1.1-2.7,1.1s-1.9-.4-2.7-1.1c-.7-.7-1.1-1.7-1.1-2.7v-.6Z"></path>
 </svg>

package/app-template/src/assets/icons/check.svg

@@ -1,19 +1,3 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
-<style type="text/css">
-	.st0{filter:url(#Adobe_OpacityMaskFilter);}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-	.st2{mask:url(#mask-3_1_);fill:#060000;}
-</style>
-<g id="_x30_6-checkout">
-	<g id="check" transform="translate(-312.000000, -209.000000)">
-		<g transform="translate(312.000000, 209.000000)">
-			<g id="path-1">
-			</g>
-			
-			
-			<path id="Fill-1" class="st2" d="M5.3,13c-0.2,0-0.4-0.1-0.6-0.3L0.3,8.2c-0.3-0.4-0.3-0.9,0-1.3c0.2-0.2,0.4-0.3,0.6-0.3
-				s0.4,0.1,0.6,0.3l3.8,4l8.2-8.6C13.7,2.1,13.9,2,14.1,2s0.4,0.1,0.6,0.3c0.3,0.4,0.3,0.9,0,1.3l-8.9,9.2C5.7,12.9,5.5,13,5.3,13"></path>
-		</g>
-	</g>
-</g>
+<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.89594 9.23991C1.89594 9.13591 1.87594 9.08391 1.83594 9.08391L1.55994 9.21591C1.55994 9.15991 1.52794 9.11991 1.46394 9.09591L1.36794 9.08391C1.30394 9.08391 1.22394 9.11191 1.12794 9.16791C1.11194 9.12791 1.09194 9.08791 1.06794 9.04791C1.04394 9.00791 1.02394 8.97191 1.00794 8.93991C0.90394 8.73991 0.79994 8.51991 0.69594 8.27991C0.599939 8.03191 0.507939 7.79591 0.419939 7.57191C0.33994 7.34791 0.275939 7.17191 0.227939 7.04391C0.195939 6.93991 0.159939 6.78391 0.11994 6.57591C0.0799395 6.36791 0.0399395 6.10391 -6.05136e-05 5.78391C0.0879395 5.83991 0.155939 5.86791 0.203939 5.86791C0.259939 5.86791 0.311939 5.78391 0.359939 5.61591C0.38394 5.64791 0.42794 5.66391 0.49194 5.66391C0.53994 5.66391 0.57594 5.64791 0.599939 5.61591L0.79194 5.32791L1.00794 5.39991H1.01994C1.03594 5.39991 1.05194 5.39191 1.06794 5.37591C1.08394 5.35991 1.10794 5.34391 1.13994 5.32791C1.20394 5.28791 1.25194 5.26791 1.28394 5.26791L1.31994 5.27991C1.51994 5.37591 1.64794 5.55191 1.70394 5.80791C1.84794 6.41591 1.99194 6.71991 2.13594 6.71991C2.27994 6.71991 2.44794 6.56791 2.63994 6.26391C2.73594 6.11191 2.83194 5.93591 2.92794 5.73591C3.03194 5.53591 3.13594 5.31191 3.23994 5.06391C3.25594 5.15991 3.27194 5.20791 3.28794 5.20791C3.32794 5.20791 3.39594 5.10791 3.49194 4.90791C3.59594 4.70791 3.75994 4.43191 3.98394 4.07991C4.11194 3.86391 4.27194 3.61991 4.46394 3.34791C4.66394 3.07591 4.87594 2.79591 5.09994 2.50791C5.32394 2.21991 5.53994 1.94791 5.74794 1.69191C5.96394 1.43591 6.15594 1.21591 6.32394 1.03191C6.49194 0.847914 6.61594 0.727914 6.69594 0.671914C6.99994 0.463914 7.23994 0.263914 7.41594 0.0719137C7.40794 0.127913 7.39594 0.179914 7.37994 0.227914C7.37194 0.267914 7.36794 0.295914 7.36794 0.311913C7.36794 0.343914 7.38394 0.359914 7.41594 0.359914L7.75194 0.191914V0.239914C7.75194 0.303914 7.76794 0.335914 7.79994 0.335914C7.82394 0.335914 7.87194 0.299914 7.94394 0.227914C8.01594 0.155914 8.05594 0.103914 8.06394 0.0719137L8.03994 0.239914L8.44794 -8.60691e-05L8.35194 0.215914C8.47994 0.127914 8.57194 0.0839136 8.62794 0.0839136C8.65994 0.0839136 8.68394 0.103914 8.69994 0.143914C8.71594 0.175914 8.72394 0.207914 8.72394 0.239914C8.72394 0.287914 8.70394 0.343914 8.66394 0.407914C8.62394 0.471914 8.57194 0.547914 8.50794 0.635914C8.45994 0.699914 8.37994 0.795914 8.26794 0.923913C8.16394 1.04391 8.00394 1.22391 7.78794 1.46391C7.57194 1.69591 7.28394 2.01991 6.92394 2.43591C6.82794 2.53991 6.67994 2.72391 6.47994 2.98791C6.27994 3.24391 6.05194 3.54391 5.79594 3.88791C5.54794 4.22391 5.29994 4.56391 5.05194 4.90791C4.80394 5.25191 4.58394 5.56391 4.39194 5.84391C4.19994 6.11591 4.06394 6.31991 3.98394 6.45591L3.23994 7.71591C3.07994 7.98791 2.94794 8.21191 2.84394 8.38791C2.73994 8.55591 2.65994 8.67191 2.60394 8.73591C2.48394 8.87991 2.35194 9.00791 2.20794 9.11991L2.09994 9.05991L2.00394 9.11991L1.89594 9.23991Z" fill="#0A0A0A"></path>
 </svg>

package/app-template/src/assets/icons/chevron-down.svg

@@ -1,8 +1,3 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" space="preserve">
-<g id="Symbols">
-	<g id="header_x2F_main" transform="translate(-173.000000, -15.000000)">
-		<path id="XMLID_89_" d="M184.1,17.9L179,23l-5.1-5.1c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l5.5,5.5
-			c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.3-0.1,0.4-0.2l5.5-5.5c0.2-0.2,0.2-0.6,0-0.8C184.6,17.7,184.3,17.7,184.1,17.9z"></path>
-	</g>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m5.64 8.177.707-.707 3.647 3.646L13.64 7.47l.707.707-4.353 4.354L5.64 8.177z" fill="#000"></path>
 </svg>

package/app-template/src/assets/icons/delete.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.97 5.5h3.53a.5.5 0 0 1 0 1h-1.25v10a.5.5 0 0 1-.5.5h-8.5c-.28 0-.5-.22-.5-.5v-10H4.5a.5.5 0 1 1 0-1h3.53a3.06 3.06 0 0 1 .6-1.65C9.06 3.32 9.7 3 10.5 3s1.44.32 1.87.85a3.07 3.07 0 0 1 .6 1.65zM10.5 4c-.51 0-.86.19-1.09.48-.19.24-.31.6-.36 1.02h2.9c-.06-.42-.16-.78-.36-1.02-.24-.29-.58-.48-1.09-.48zM6.75 6.5V16h7.5V6.5h-7.5zm1.946 1.396a.5.5 0 0 1 .854.354v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .146-.354zm2.9 0a.5.5 0 0 1 .854.354v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .146-.354z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/facebook.svg

@@ -1,9 +1,3 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-</style>
-<g class="st0">
-	<path d="M8.6,14.7V9.6h1.7l0.3-2.1h-2V6.2C8.6,5.6,8.9,5,9.8,5h0.9V3.3c0,0-0.8-0.1-1.6-0.1c-1.7,0-2.7,1-2.7,2.8v1.6H4.5v2.1h1.8
-		v5.1c-3.5-0.5-6.1-3.6-6.1-7.2c0-4,3.3-7.3,7.3-7.3s7.3,3.3,7.3,7.3C14.8,11.2,12.1,14.2,8.6,14.7z"></path>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.302 4.583h-2.276c-.871 0-1.616.31-2.234.928-.59.618-.886 1.363-.886 2.234v2.234H9.094v2.698h1.812v6.28h2.698v-6.28h2.698V9.979h-2.698V8.166c0-.225.085-.421.253-.59a.799.799 0 0 1 .633-.295h1.812V4.583zM1 2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v15.958a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z" fill="#000"></path>
 </svg>

package/app-template/src/assets/icons/fav-off.svg

@@ -0,0 +1,5 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14.7 12.7">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  
+  <path class="st0" d="M7.3,12.7c-.3,0-.6,0-.8-.2-.3-.1-.5-.3-.7-.5l-3.6-3.5C1.1,7.4,0,6.1,0,4.3s.3-1.7.8-2.5c.5-.7,1.2-1.3,2-1.6C3.6,0,4.5,0,5.3.1c.8.2,1.4.6,2,1.1.5-.5,1.2-.9,2-1.1.9-.2,1.7-.2,2.6.2.8.3,1.5.9,2,1.6.5.7.8,1.6.8,2.5,0,1.8-1.1,3.1-2.2,4.1l-3.7,3.5c-.1.2-.4.3-.6.5-.3.1-.5.2-.8.2h0ZM4.3,1.3c-.4,0-.7,0-1.1.2-.6.2-1.1.6-1.4,1.1-.3.5-.5,1.1-.5,1.7,0,1.3.9,2.3,1.8,3.2l3.7,3.5c0,.1.2.2.3.2,0,0,.2,0,.3,0,0,0,.2,0,.3,0s.2,0,.2-.2l3.7-3.6c.9-.9,1.8-1.9,1.8-3.2,0-.6-.2-1.2-.5-1.7-.3-.5-.8-.9-1.4-1.1-.6-.2-1.2-.3-1.8-.1-.6.1-1.1.5-1.5.9-.1.1-.2.2-.4.3-.3.1-.6.1-.8,0-.1,0-.2-.1-.3-.2-.4-.5-.9-.8-1.5-.9-.2,0-.5,0-.7,0Z"></path>
+</svg>

package/app-template/src/assets/icons/fav-on.svg

@@ -0,0 +1,5 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14.7 12.7">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  
+  <path class="st0" d="M7.3,12.7c-.3,0-.6,0-.8-.2-.3-.1-.5-.3-.7-.5l-3.6-3.5C1.1,7.4,0,6.1,0,4.3s.3-1.7.8-2.5c.5-.7,1.2-1.3,2-1.6C3.6,0,4.5,0,5.3.1c.8.2,1.4.6,2,1.1.5-.5,1.2-.9,2-1.1.9-.2,1.7-.2,2.6.2.8.3,1.5.9,2,1.6.5.7.8,1.6.8,2.5,0,1.8-1.1,3.1-2.2,4.1l-3.7,3.5c-.1.2-.4.3-.6.5-.3.1-.5.2-.8.2h0Z"></path>
+</svg>

package/app-template/src/assets/icons/filter-and-sort.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13 11c1.21 0 2.219.859 2.45 2H17v1h-1.55a2.501 2.501 0 0 1-4.9 0H3v-1h7.55c.231-1.141 1.24-2 2.45-2zm-.139 1.007-.054.007a1.465 1.465 0 0 0-.224.046l-.04.011a1.474 1.474 0 0 0-.34.16c-.022.013-.043.027-.064.042a1.509 1.509 0 0 0-.321.307c-.01.01-.017.021-.025.032a1.49 1.49 0 0 0 0 1.775l.019.026a1.523 1.523 0 0 0 .275.274l.052.04.064.042.04.023.069.04c.073.037.15.07.231.096l.04.011a1.56 1.56 0 0 0 .224.046A1.513 1.513 0 0 0 13 15c.047 0 .094-.004.14-.008l.054-.007a1.47 1.47 0 0 0 .224-.045l.04-.012c.08-.026.158-.059.232-.097l.069-.039.039-.023.064-.042.052-.04a1.517 1.517 0 0 0 .274-.274l.02-.026a1.49 1.49 0 0 0 0-1.775l-.024-.033a1.41 1.41 0 0 0-.091-.105 1.509 1.509 0 0 0-.179-.162l-.052-.04-.064-.042-.041-.024c-.014-.008-.028-.018-.042-.025l-.035-.018a1.493 1.493 0 0 0-.213-.089l-.02-.007-.029-.007a1.505 1.505 0 0 0-.15-.036l-.074-.01-.054-.007a1.532 1.532 0 0 0-.279 0zM7 4c1.21 0 2.219.859 2.45 2H17v1H9.45a2.501 2.501 0 0 1-4.9 0H3V6h1.55C4.78 4.859 5.79 4 7 4zm-.14 1.007-.054.007a1.504 1.504 0 0 0-.224.046l-.028.007-.02.007a1.486 1.486 0 0 0-.214.09l-.035.017c-.014.007-.028.017-.042.025l-.04.024-.065.042-.052.04a1.508 1.508 0 0 0-.27.267l-.024.033a1.492 1.492 0 0 0 0 1.775l.02.026a1.512 1.512 0 0 0 .274.274l.052.04.064.042.04.023a1.494 1.494 0 0 0 .3.136l.04.011a1.475 1.475 0 0 0 .224.046l.054.007c.046.004.093.008.14.008.047 0 .093-.004.139-.008l.054-.007a1.492 1.492 0 0 0 .224-.046l.04-.011a1.484 1.484 0 0 0 .3-.136l.04-.023.064-.042.052-.04a1.505 1.505 0 0 0 .275-.274l.019-.026a1.49 1.49 0 0 0 0-1.775l-.024-.033a1.518 1.518 0 0 0-.27-.267l-.052-.04-.064-.042a1.52 1.52 0 0 0-.34-.159l-.04-.011a1.49 1.49 0 0 0-.224-.046l-.054-.007a1.513 1.513 0 0 0-.279 0z" fill="#000"/>
+</svg>

package/app-template/src/assets/icons/heart.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.65 5.88a2.78 2.78 0 0 1 3.72-.3c1.4 1.2 1.2 3.11.19 4.13L9.77 14.6c-.05.06-.1.06-.19 0L4.8 9.7a2.8 2.8 0 0 1 .19-4.1c1.06-.9 2.7-.76 3.74.28l.96.98.96-.98zm-.96-.45.24-.25A3.78 3.78 0 0 1 15 4.8l.01.01v.01a3.822 3.822 0 0 1 .26 5.59l-4.79 4.9a1.12 1.12 0 0 1-1.45.12l-.1-.06-4.84-4.96a3.8 3.8 0 0 1 .26-5.57 3.79 3.79 0 0 1 5.1.33l.01.01.24.25h-.01z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/instagram.svg

@@ -1,14 +1,3 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-</style>
-<g class="st0">
-	<path d="M14.7,10.5c-0.1,1.2-0.3,2.2-1.2,3c-0.8,0.9-1.9,1.1-3,1.2c-1.2,0.1-4.8,0.1-6,0c-1.2-0.1-2.2-0.3-3-1.2s-1.1-1.9-1.2-3
-		c-0.1-1.2-0.1-4.8,0-6c0.1-1.2,0.3-2.2,1.2-3s1.9-1.1,3-1.2c1.2-0.1,4.8-0.1,6,0c1.2,0.1,2.2,0.3,3,1.2c0.9,0.8,1.1,1.9,1.2,3
-		C14.8,5.7,14.8,9.3,14.7,10.5z M13.4,7.5c0-1.1,0.1-3.3-0.3-4.3c-0.3-0.6-0.7-1.1-1.4-1.4c-1-0.4-3.2-0.3-4.3-0.3S4.2,1.5,3.2,1.8
-		C2.6,2.1,2.1,2.6,1.9,3.2c-0.4,1-0.3,3.2-0.3,4.3s-0.1,3.3,0.3,4.3c0.3,0.6,0.7,1.1,1.4,1.4c1,0.4,3.2,0.3,4.3,0.3s3.3,0.1,4.3-0.3
-		c0.6-0.3,1.1-0.7,1.4-1.4C13.5,10.8,13.4,8.6,13.4,7.5z M11.2,7.5c0,2.1-1.7,3.7-3.7,3.7S3.8,9.6,3.8,7.5s1.7-3.7,3.7-3.7
-		S11.2,5.4,11.2,7.5z M9.9,7.5c0-1.3-1.1-2.4-2.4-2.4S5.1,6.2,5.1,7.5s1.1,2.4,2.4,2.4S9.9,8.8,9.9,7.5z M11.4,4.5
-		c-0.5,0-0.9-0.4-0.9-0.9s0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9C12.2,4.1,11.8,4.5,11.4,4.5z"></path>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 2.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.671-.163.42-.358.72-.673 1.035-.315.315-.615.51-1.035.673-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.788 2.788 0 0 1-1.036-.673 2.788 2.788 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052zM10 1c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.419A4.412 4.412 0 0 0 2.51 2.51c-.5.5-.809 1.002-1.039 1.594-.222.572-.374 1.226-.418 2.184C1.01 7.25 1 7.556 1 10s.01 2.75.054 3.71c.044.959.196 1.613.418 2.185.23.592.538 1.094 1.039 1.595.5.5 1.002.808 1.594 1.038.572.222 1.226.374 2.184.418C7.25 18.99 7.556 19 10 19s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.419a4.411 4.411 0 0 0 1.594-1.038c.5-.5.808-1.002 1.038-1.594.223-.572.375-1.226.419-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.419-2.185A4.41 4.41 0 0 0 17.49 2.51a4.41 4.41 0 0 0-1.594-1.038c-.572-.223-1.226-.375-2.184-.419C12.75 1.01 12.444 1 10 1zm0 4.378a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244zM10 13a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm5.884-7.804a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0z" fill="#0A0A08"></path>
 </svg>

package/app-template/src/assets/icons/materials.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.374 3.79a1 1 0 0 1 .98-.79h3.01a1 1 0 0 1 .98.79 2.05 2.05 0 0 0 2.9 1.4 1 1 0 0 1 1.39.6l.37 1.23a1.003 1.003 0 0 1-.77 1.27 2.84 2.84 0 0 0-.25 5.52 1 1 0 0 1 .69 1.25l-.42 1.35a1.001 1.001 0 0 1-1.6.47 2.661 2.661 0 0 0-3.89.51 1 1 0 0 1-1.64 0 2.66 2.66 0 0 0-3.8-.6 1 1 0 0 1-1.55-.49l-.5-1.6a1 1 0 0 1 .61-1.24 2.72 2.72 0 0 0-.17-5.16 1 1 0 0 1-.67-1.25l.35-1.13a1 1 0 0 1 1.29-.65 2.05 2.05 0 0 0 2.7-1.48h-.01zm-2.77 2.5A3.05 3.05 0 0 0 8.354 4h3.01a3.04 3.04 0 0 0 4.31 2.09l.38 1.22a3.83 3.83 0 0 0-.34 7.46l-.41 1.35a3.641 3.641 0 0 0-5.36.7 3.69 3.69 0 0 0-4.33-1.31c-.31.12-.61.29-.89.5l-.5-1.61a3.7 3.7 0 0 0 1.35-6.12 3.7 3.7 0 0 0-1.57-.94l.35-1.12.25.07z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/person.svg

@@ -0,0 +1,4 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 17 18">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  <path d="M5.5,4c0-.8.3-1.6.9-2.1.6-.6,1.3-.9,2.1-.9s1.6.3,2.1.9.9,1.3.9,2.1-.3,1.6-.9,2.1c-.6.6-1.3.9-2.1.9s-1.6-.3-2.1-.9c-.6-.6-.9-1.3-.9-2.1ZM8.5,0c-1.1,0-2.1.4-2.8,1.2-.8.8-1.2,1.8-1.2,2.8s.4,2.1,1.2,2.8c.8.8,1.8,1.2,2.8,1.2s2.1-.4,2.8-1.2c.8-.8,1.2-1.8,1.2-2.8s-.4-2.1-1.2-2.8c-.8-.8-1.8-1.2-2.8-1.2ZM14.1,12.1c1.1.8,1.8,2.2,1.9,4.9H1c0-2.6.8-4,1.9-4.9,1.2-.9,3.1-1.1,5.6-1.1s4.4.3,5.6,1.1ZM8.5,10c-2.5,0-4.7.2-6.2,1.4-1.6,1.1-2.3,3.1-2.3,6.1v.5h17v-.5c0-3.1-.8-5-2.3-6.1-1.5-1.1-3.7-1.4-6.2-1.4Z"></path>
+</svg>

package/app-template/src/assets/icons/pinterest.svg

@@ -1,12 +1,6 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-</style>
-<g class="st0">
-	<path d="M7.5,14.8c-0.8,0-1.5-0.1-2.2-0.3c0.3-0.5,0.7-1.3,0.9-1.9c0.1-0.3,0.5-1.7,0.5-1.7c0.2,0.5,0.9,0.8,1.7,0.8
-		c2.2,0,3.8-2,3.8-4.5c0-2.4-2-4.2-4.5-4.2C4.5,2.9,2.9,5,2.9,7.3c0,1.1,0.6,2.4,1.5,2.8c0.1,0.1,0.2,0,0.2-0.1
-		c0-0.1,0.1-0.6,0.2-0.8c0-0.1,0-0.1,0-0.2C4.4,8.6,4.2,8,4.2,7.4c0-1.6,1.2-3.2,3.3-3.2c1.8,0,3,1.2,3,3c0,2-1,3.3-2.3,3.3
-		c-0.7,0-1.2-0.6-1.1-1.3c0.2-0.9,0.6-1.8,0.6-2.4c0-0.6-0.3-1-0.9-1c-0.7,0-1.3,0.8-1.3,1.8c0,0.6,0.2,1.1,0.2,1.1s-0.7,3-0.8,3.6
-		c-0.1,0.6-0.1,1.5,0,2.1c-2.7-1.1-4.6-3.7-4.6-6.8c0-4,3.3-7.3,7.3-7.3s7.3,3.3,7.3,7.3S11.5,14.8,7.5,14.8z"></path>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#623p45fqea)">
+        <path d="M15.821 2.05C14.444.728 12.54 0 10.457 0c-3.182 0-5.139 1.304-6.22 2.398C2.904 3.746 2.14 5.536 2.14 7.31c0 2.227.932 3.936 2.491 4.571.105.043.21.065.313.065.33 0 .59-.216.68-.56.053-.199.175-.688.228-.9.113-.419.022-.62-.226-.912-.45-.534-.66-1.165-.66-1.986 0-2.44 1.816-5.032 5.182-5.032 2.672 0 4.331 1.518 4.331 3.962 0 1.542-.332 2.97-.936 4.022-.419.73-1.156 1.601-2.288 1.601-.49 0-.93-.2-1.207-.551-.262-.332-.348-.76-.243-1.206.12-.504.282-1.03.439-1.538.287-.928.558-1.805.558-2.505 0-1.196-.736-2-1.83-2-1.392 0-2.482 1.413-2.482 3.217 0 .884.235 1.546.341 1.8-.175.743-1.216 5.158-1.414 5.99-.114.486-.803 4.325.337 4.63 1.28.345 2.423-3.394 2.54-3.816.094-.344.424-1.643.627-2.442.618.596 1.613.998 2.58.998 1.825 0 3.466-.821 4.621-2.312 1.12-1.446 1.738-3.462 1.738-5.675 0-1.73-.743-3.437-2.039-4.68z" fill="#000"></path>
+    </g>
+    
 </svg>

package/app-template/src/assets/icons/ruler.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m17.446 6.12-2.83-2.83a1 1 0 0 0-1.41 0l-3.89 3.89-6.02 6.01a1 1 0 0 0 0 1.42l2.82 2.82a1 1 0 0 0 1.42 0l9.9-9.9a1 1 0 0 0 0-1.4l.01-.01zm-10.6 10.6-2.85-2.81 1.41-1.41 1.06 1.06a.502.502 0 0 0 .71-.71l-1.05-1.07 1.42-1.42 1.05 1.06a.5.5 0 0 0 .71-.7l-1.06-1.06 1.42-1.42 1.05 1.07c.2.2.5.2.7 0 .2-.2.2-.5 0-.7l-1.05-1.07 1.42-1.43 1.06 1.06a.5.5 0 0 0 .71-.7l-1.06-1.06 1.41-1.4 2.83 2.83-9.9 9.9.01-.02z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/search.svg

@@ -1,13 +1,10 @@
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
-    <title>Group 3</title>
-    
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="header/mobile" transform="translate(-262.000000, -16.000000)">
-            <g id="Group-3" transform="translate(262.000000, 16.000000)">
-                
-                <g id="Clip-2"></g>
-                <path d="M1.01537308,6.41537308 C1.01537308,3.43779231 3.43779231,1.01537308 6.41537308,1.01537308 C9.39295385,1.01537308 11.8153731,3.43779231 11.8153731,6.41537308 C11.8153731,9.39295385 9.39295385,11.8153731 6.41537308,11.8153731 C3.43779231,11.8153731 1.01537308,9.39295385 1.01537308,6.41537308 M17.8508769,17.13375 L11.2938577,10.5766962 C12.2515615,9.45560769 12.8307462,8.00193462 12.8307462,6.41537308 C12.8307462,2.87792308 9.95282308,0 6.41537308,0 C2.87792308,0 0,2.87792308 0,6.41537308 C0,9.95282308 2.87792308,12.8307462 6.41537308,12.8307462 C8.00158846,12.8307462 9.45491538,12.2518038 10.5759,11.2945154 L17.1334731,17.8521577 C17.2298769,17.9474885 17.3572962,18 17.4922962,18 C17.6278846,18 17.7552346,17.9473154 17.8508769,17.8516038 C18.0488077,17.6536731 18.0488077,17.3316462 17.8508769,17.13375" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
-            </g>
-        </g>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18.9 18.9">
+  <!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123)  -->
+  
+  <g id="Icon">
+    <g>
+      <path class="st0" d="M7.2,0C3.2,0,0,3.2,0,7.2s3.2,7.2,7.2,7.2,7.2-3.2,7.2-7.2S11.2,0,7.2,0ZM7.2,1.1c3.4,0,6.1,2.7,6.1,6.1s-2.7,6.1-6.1,6.1S1.1,10.6,1.1,7.2,3.9,1.1,7.2,1.1Z"></path>
+      <path class="st0" d="M18.7,18l-6.4-6.4c-.2-.2-.6-.2-.8,0s-.2.6,0,.8l6.4,6.4c.2.2.6.2.8,0,.2-.2.2-.6,0-.8Z"></path>
     </g>
+  </g>
 </svg>

package/app-template/src/assets/icons/share.svg

@@ -1,10 +1,3 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 31" style="enable-background:new 0 0 31 31;" space="preserve">
-<path d="M24.1,19.9c-1.4,0-2.7,0.5-3.6,1.5c-0.2,0.2-0.4,0.4-0.6,0.7l-8.1-4.9c0.2-0.6,0.3-1.1,0.3-1.7c0-0.6-0.1-1.2-0.3-1.7
-	l8.1-4.9c1,1.4,2.5,2.2,4.2,2.2c2.8,0,5.2-2.3,5.2-5.2c0-2.8-2.3-5.2-5.2-5.2s-5.2,2.3-5.2,5.2c0,0.6,0.1,1.1,0.3,1.6l-8.1,4.9
-	c-1-1.3-2.5-2.1-4.2-2.1c-2.8,0-5.2,2.3-5.2,5.2c0,2.8,2.3,5.2,5.2,5.2c1.7,0,3.2-0.8,4.2-2.1l8.1,4.9c-0.2,0.5-0.3,1.1-0.3,1.6
-	c0,1.4,0.5,2.7,1.5,3.7c1,1,2.3,1.5,3.6,1.5c1.4,0,2.7-0.5,3.6-1.5c1-1,1.5-2.3,1.5-3.7c0-1.4-0.5-2.7-1.5-3.7
-	C26.8,20.5,25.5,19.9,24.1,19.9z M27.8,25.1c0,1-0.4,1.9-1.1,2.6c-0.7,0.7-1.6,1.1-2.6,1.1c0,0,0,0,0,0c-1,0-1.9-0.4-2.6-1.1
-	c-0.7-0.7-1.1-1.6-1.1-2.6s0.4-1.9,1.1-2.6c0.7-0.7,1.6-1.1,2.6-1.1c1,0,1.9,0.4,2.6,1.1C27.4,23.2,27.8,24.1,27.8,25.1z M20.4,5.9
-	c0-2,1.6-3.7,3.7-3.7c2,0,3.7,1.7,3.7,3.7c0,2-1.6,3.7-3.7,3.7C22.1,9.6,20.4,7.9,20.4,5.9z M10.6,15.5c0,2-1.6,3.7-3.7,3.7
-	s-3.7-1.7-3.7-3.7c0-2,1.6-3.7,3.7-3.7S10.6,13.4,10.6,15.5z"></path>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.875 11.13a.5.5 0 0 1 .5.5v2.167a1.583 1.583 0 0 1-1.583 1.583H6.208a1.583 1.583 0 0 1-1.583-1.583V11.63a.5.5 0 0 1 1 0v2.167a.583.583 0 0 0 .583.583h7.584a.583.583 0 0 0 .583-.583V11.63a.5.5 0 0 1 .5-.5zm-4.97-6.491a.504.504 0 0 1 .195 0c.003 0 .007.003.01.004.09.02.175.064.245.134l2.708 2.708a.5.5 0 0 1-.707.707L10.5 6.335v5.295a.5.5 0 0 1-1 0V6.338L7.646 8.192a.5.5 0 1 1-.707-.707L9.642 4.78a.5.5 0 0 1 .169-.114l.03-.01c.02-.007.041-.014.063-.018z" fill="#000"></path>
 </svg>

package/app-template/src/assets/icons/snapchat.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.172 1.161c.77 0 3.29.216 4.484 2.888.18.404.262.992.28 1.692.017.69-.03 1.43-.073 2.112v.006l-.003.05c-.01.149-.017.287-.024.426l-.015.299.257.154c.152.091.35.147.59.147h.015l.012-.001c.336-.018.702-.13 1.053-.3l.009-.005.009-.004a.224.224 0 0 1 .063-.02.647.647 0 0 1 .323.03l.016.007.016.004c.245.082.268.21.268.224v.009l.001.008c0 .011.003.057-.09.147-.104.1-.294.22-.608.345a8.747 8.747 0 0 0-.11.038l-.145.05a4.266 4.266 0 0 0-.708.27c-.242.123-.556.333-.707.683l-.005.012c-.148.37-.07.779.121 1.142l.036.067.003.003a7.42 7.42 0 0 0 1.03 1.58c.68.798 1.73 1.673 3.192 1.947-.059.067-.193.175-.488.295-.383.155-.944.294-1.708.409l-.223.033-.123.19a.892.892 0 0 0-.09.191 2.204 2.204 0 0 0-.047.158c-.026.1-.05.211-.067.287l-.004.015-.002.016a2.84 2.84 0 0 1-.092.378h-.013c-.056 0-.157-.015-.356-.053a5.53 5.53 0 0 0-1.783-.086l-.217.033c-.472.082-.887.313-1.268.566l-.37.254c-.714.502-1.408.983-2.458.983.012 0 .018.002-.012-.002-.02-.003-.076-.01-.138-.01h-.124c-1.05 0-1.733-.47-2.44-.98l-.005-.003c-.475-.333-.993-.71-1.623-.82l-.008-.002h-.008a6.005 6.005 0 0 0-.844-.067c-.504 0-.899.084-1.154.133H3.79a1.994 1.994 0 0 1-.35.053l-.01-.001-.048-.195-.056-.25-.028-.118-.036-.152c-.013-.051-.03-.11-.05-.165-.012-.038-.047-.14-.12-.23l-.127-.16-.204-.023-.546-.075c-.507-.08-.897-.18-1.184-.293-.306-.119-.438-.23-.492-.297 1.461-.275 2.51-1.149 3.189-1.948a7.3 7.3 0 0 0 1.057-1.642l.008-.015.006-.01c.176-.337.292-.764.111-1.16h.001c-.154-.342-.469-.545-.705-.666-.25-.127-.523-.217-.701-.277l-.022-.008-.022-.005a1.378 1.378 0 0 1-.21-.073l-.012-.005-.268-.12c-.226-.114-.333-.214-.38-.276-.045-.06-.042-.09-.04-.109.006-.023.032-.083.135-.148a.685.685 0 0 1 .346-.104c.051 0 .092.01.134.027v-.001c.372.169.747.287 1.105.287.286 0 .494-.075.63-.15l.283-.158-.027-.32-.038-.475c-.04-.68-.085-1.414-.067-2.1.018-.699.101-1.286.281-1.686l.002-.004C6.493 1.385 9 1.173 9.772 1.173h.01l.008-.001.32-.01h.062z" stroke="#000"></path>
+</svg>

package/app-template/src/assets/icons/tiktok.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.236 1c.297 2.554 1.723 4.077 4.201 4.24v2.873c-1.436.14-2.694-.33-4.157-1.216v5.374c0 6.826-7.44 8.96-10.432 4.066-1.923-3.148-.745-8.673 5.42-8.894v3.03c-.469.075-.971.194-1.43.35-1.372.465-2.149 1.335-1.933 2.868.416 2.938 5.804 3.808 5.356-1.933V1.005h2.975V1z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/tumblr.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#i1knyz5xwa)">
+        <path d="M16.115 15.286a.322.322 0 0 0-.33.014c-.913.6-1.837.903-2.746.903-.495 0-.922-.11-1.306-.341a1.154 1.154 0 0 1-.525-.598c-.071-.192-.156-.703-.156-2.047V8.575h4.268a.323.323 0 0 0 .323-.322V5.214a.322.322 0 0 0-.323-.323h-4.268V.323A.323.323 0 0 0 10.729 0H7.975c-.163 0-.3.121-.32.283-.118.957-.336 1.751-.646 2.361a4.991 4.991 0 0 1-1.227 1.563c-.506.431-1.126.767-1.843.999a.323.323 0 0 0-.223.307v2.74c0 .178.144.322.323.322h1.817v6.467c0 .935.098 1.636.3 2.143.204.514.57 1 1.088 1.447.511.438 1.134.78 1.85 1.016.708.234 1.53.352 2.447.352.8 0 1.557-.082 2.248-.243.692-.163 1.47-.446 2.31-.843a.323.323 0 0 0 .185-.292v-3.053a.322.322 0 0 0-.17-.283z" fill="#000"></path>
+    </g>
+    
+</svg>

package/app-template/src/assets/icons/twitter.svg

@@ -1,11 +1,3 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-</style>
-<g class="st0">
-	<path d="M13.5,4.8c0,4.1-3.1,8.7-8.7,8.7c-1.7,0-3.4-0.5-4.7-1.4c0.2,0,0.5,0,0.7,0c1.4,0,2.8-0.5,3.8-1.3c-1.4,0-2.5-0.9-2.9-2.1
-		c0.2,0,0.4,0,0.6,0c0.3,0,0.6,0,0.8-0.1c-1.4-0.3-2.5-1.5-2.5-3v0C1,5.9,1.5,6.1,2,6.1C1.2,5.5,0.6,4.6,0.6,3.5C0.6,3,0.8,2.4,1,2
-		c1.5,1.9,3.8,3.1,6.3,3.2c0-0.2-0.1-0.5-0.1-0.7c0-1.7,1.4-3.1,3.1-3.1c0.9,0,1.7,0.4,2.2,1c0.7-0.1,1.4-0.4,2-0.7
-		c-0.2,0.7-0.7,1.3-1.4,1.7c0.6-0.1,1.2-0.2,1.8-0.5c-0.4,0.6-0.9,1.2-1.5,1.6C13.5,4.6,13.5,4.7,13.5,4.8z"></path>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.145 6.625v.464c0 1.265-.239 2.515-.716 3.752a10.9 10.9 0 0 1-1.982 3.33c-.843 1.012-1.953 1.84-3.33 2.487-1.349.618-2.838.927-4.468.927-2.052 0-3.935-.547-5.649-1.644.281.029.576.043.885.043 1.715 0 3.246-.52 4.595-1.56a3.826 3.826 0 0 1-2.192-.759 3.571 3.571 0 0 1-1.265-1.813 2.813 2.813 0 0 0 1.644-.084 3.59 3.59 0 0 1-2.107-1.264 3.519 3.519 0 0 1-.843-2.319v-.042a3.988 3.988 0 0 0 1.686.464c-1.096-.76-1.644-1.785-1.644-3.078 0-.674.168-1.292.506-1.855a10.677 10.677 0 0 0 3.33 2.698c1.32.675 2.74 1.054 4.257 1.139a4.289 4.289 0 0 1-.084-.844c0-1.011.351-1.868 1.054-2.571.73-.73 1.602-1.096 2.614-1.096 1.068 0 1.967.38 2.698 1.138a7.719 7.719 0 0 0 2.36-.885c-.28.871-.829 1.546-1.644 2.023A7.799 7.799 0 0 0 19 4.728a7.922 7.922 0 0 1-1.855 1.897z" fill="#000"></path>
 </svg>

package/app-template/src/assets/icons/vimeo.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.915 4.21c.15-.838.146-1.699-.371-2.35-.722-.913-2.258-.947-3.31-.785-.856.13-3.751 1.408-4.737 4.466 1.746-.133 2.66.126 2.493 2.047-.07.805-.477 1.685-.93 2.53-.524.973-1.506 2.885-2.793 1.507-1.16-1.24-1.073-3.612-1.338-5.191-.147-.886-.303-1.99-.594-2.902-.25-.784-.824-1.73-1.525-1.934-.754-.221-1.686.124-2.233.447C2.835 3.068 1.507 4.525 0 5.727c.245.526.38.866.819.93 1.037.153 2.026-.967 2.716.198.42.712.55 1.492.819 2.26.359 1.021.636 2.134.93 3.31.496 1.99 1.107 4.964 2.828 5.692.878.373 2.197-.126 2.865-.522 1.81-1.07 3.22-2.623 4.426-4.202 2.76-3.738 4.282-7.973 4.512-9.183z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/youtube.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.79 6.698c.14.983.21 1.953.21 2.909v1.349l-.21 2.908c-.113.815-.352 1.405-.717 1.77-.394.394-.984.647-1.77.76-.76.056-1.673.098-2.74.126-1.04.028-1.898.042-2.572.042H9.979c-3.12-.028-5.157-.084-6.112-.169l-.338-.042a7.896 7.896 0 0 1-.548-.084 2.337 2.337 0 0 1-.548-.21 2.594 2.594 0 0 1-.548-.422 3.526 3.526 0 0 1-.421-.675 3.784 3.784 0 0 1-.211-.8l-.084-.296A25.604 25.604 0 0 1 1 10.955V9.607l.169-2.91c.112-.814.35-1.404.716-1.77.394-.421.998-.674 1.813-.758a58.63 58.63 0 0 1 2.698-.127A98.591 98.591 0 0 1 8.967 4H9.98c2.53 0 4.637.056 6.323.169.787.084 1.377.337 1.77.758.113.113.211.253.296.422.084.14.154.295.21.464.057.14.099.28.127.421.028.14.056.253.084.337v.127zm-6.366 3.71.59-.296-4.848-2.529v5.059l4.258-2.234z" fill="#000"></path>
+</svg>

package/app-template/src/assets/icons/zoom.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#rkzgqbvqxa)" fill-rule="evenodd" clip-rule="evenodd" fill="#000">
+        <path d="M2.8 4.764a.3.3 0 0 1 .3-.3l3.32-.01a.3.3 0 1 1 .001.6l-3.32.01a.3.3 0 0 1-.3-.3z"></path>
+        <path d="M4.755 2.799a.3.3 0 0 1 .301.299l.009 3.32a.3.3 0 1 1-.6.002L4.456 3.1a.3.3 0 0 1 .3-.301z"></path>
+        <path d="M7.7 1.818A4.159 4.159 0 1 0 1.817 7.7 4.159 4.159 0 0 0 7.7 1.82zm-6.306-.424A4.759 4.759 0 0 1 8.17 8.075l2.777 2.777a.3.3 0 1 1-.424.425L7.727 8.479a4.76 4.76 0 0 1-6.333-7.085z"></path>
+    </g>
+    
+</svg>

package/app-template/src/components/accordion.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
-import { AccordionProps } from './types';
+import { AccordionProps } from '@theme/components/types/index';
 
 export const Accordion = ({
   isCollapse = false,
@@ -13,6 +13,9 @@ export const Accordion = ({
   icons = ['chevron-up', 'chevron-down'],
   iconSize = 16,
   iconColor = 'fill-[#000000]',
+  leftIcon,
+  leftIconSize = 20,
+  leftIconClassName,
   children,
   headerClassName,
   className,
@@ -26,7 +29,7 @@ export const Accordion = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none last:mb-0',
         className
       )}
     >
@@ -38,22 +41,41 @@ export const Accordion = ({
         onClick={() => setCollapse(!collapse)}
         data-testid={dataTestId}
       >
-        <div className={twMerge('flex flex-col', contentClassName)}>
-          {title && (
-            <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
-          )}
-          {subTitle && (
-            <h4 className={twMerge('text-xs text-gray-700', subTitleClassName)}>
-              {subTitle}
-            </h4>
+        <div className={twMerge('flex items-center gap-3', contentClassName)}>
+          {leftIcon && (
+            <Icon
+              name={leftIcon}
+              size={leftIconSize}
+              className={leftIconClassName}
+            />
           )}
+          <div className="flex flex-col">
+            {title && (
+              <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
+            )}
+            {subTitle && (
+              <h4
+                className={twMerge('text-xs text-gray-700', subTitleClassName)}
+              >
+                {subTitle}
+              </h4>
+            )}
+          </div>
         </div>
 
         {icons && (
           <Icon
             name={collapse ? icons[0] : icons[1]}
             size={iconSize}
-            className={`fill-[${iconColor}]}`}
+            style={{
+              color: iconColor.startsWith('#') ? iconColor : `#${iconColor}`,
+              width: `${iconSize}px`,
+              height: `${iconSize}px`,
+              minWidth: `${iconSize}px`,
+              minHeight: `${iconSize}px`,
+              maxWidth: `${iconSize}px`,
+              maxHeight: `${iconSize}px`
+            }}
           />
         )}
       </div>

package/app-template/src/components/action-tooltip.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import clsx from 'clsx';
+
+interface ActionTooltipProps {
+  widgetData: {
+    attributes: Record<string, any>;
+    name: string;
+    template: string;
+    slug: string;
+  };
+  selectedWidget: any;
+  designMode: boolean;
+  onDelete?: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onCopy?: () => void;
+}
+
+export function ActionTooltip({
+  widgetData,
+  selectedWidget,
+  designMode,
+  onDelete,
+  onMoveUp,
+  onMoveDown,
+  onCopy
+}: ActionTooltipProps) {
+  if (!widgetData?.attributes) {
+    return null;
+  }
+
+  const componentId = Object.keys(widgetData.attributes)[0];
+  const attributes = widgetData.attributes[componentId];
+
+  if (!attributes) {
+    return null;
+  }
+
+  const isRootContainer = !attributes.parentId;
+
+  if (isRootContainer) {
+    return null;
+  }
+
+  const isContainer = ['container'].includes(attributes.type);
+  const isCollectionItem = selectedWidget?.id?.includes('-');
+
+  const isSelected = isCollectionItem
+    ? selectedWidget?.id === componentId
+    : selectedWidget?.id?.split('-')[0] === componentId?.split('-')[0];
+
+  if (!designMode || !selectedWidget || !isSelected) {
+    return null;
+  }
+
+  return (
+    <section className="flex absolute justify-center right-[29px] mr-[4px] bottom-[-1px] z-[51] w-[73px] h-[21px] bg-[#292b2c] overflow-hidden gap-[9px]">
+      <button
+        className={clsx('bg-[#292b2c] text-white hover:opacity-80')}
+        onClick={onMoveUp}
+      >
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.94 2.33 2.557 3.715a.546.546 0 0 1-.771-.772L4.1.628a.546.546 0 0 1 .771 0l2.315 2.314a.546.546 0 0 1-.772.772L5.031 2.33v5.626a.546.546 0 0 1-1.09 0V2.33z"
+            fill="#FFF"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        className={clsx(
+          'bg-[#292b2c] text-white hover:opacity-80',
+          isContainer && 'disabled'
+        )}
+        onClick={onMoveDown}
+      >
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.697 6.64 2.314 5.257a.546.546 0 0 0-.771.771l2.314 2.315a.546.546 0 0 0 .772 0l2.314-2.315a.546.546 0 0 0-.772-.771L4.788 6.64V1.014a.546.546 0 0 0-1.09 0V6.64z"
+            fill="#FFF"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        className="bg-[#292b2c] text-white hover:opacity-80"
+        onClick={onDelete}
+      >
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.8986356,1.49777209 L5.4463047,1.49777209 L5.4463047,1.089312 C5.4463047,0.499342458 4.94696224,0 4.3569927,0 L2.9046618,0 C2.31469226,0 1.8153498,0.499342458 1.8153498,1.089312 L1.8153498,1.49777209 L0.363018903,1.49777209 C0.181509452,1.49777209 0,1.63384035 0,1.86079099 C0,2.08774162 0.181509452,2.17836871 0.363018903,2.17836871 L0.771478991,2.17836871 L0.771478991,6.9438215 C0.771478991,7.53379103 1.27082145,7.98769231 1.86079099,7.98769231 L5.4914906,7.98769231 C6.08146013,7.98769231 6.53536141,7.48834985 6.53536141,6.9438215 L6.53536141,2.17836871 L6.9438215,2.17836871 C7.12533095,2.17836871 7.3068404,2.04230044 7.3068404,1.8153498 C7.3068404,1.58839917 7.07988976,1.49777209 6.89838031,1.49777209 L6.8986356,1.49777209 Z M2.5416429,1.089312 C2.5416429,0.862361361 2.72315235,0.680851909 2.95010299,0.680851909 L4.40243389,0.680851909 C4.62938452,0.680851909 4.81089397,0.862361361 4.81089397,1.089312 L4.81089397,1.49777209 L2.5416429,1.49777209 L2.5416429,1.089312 L2.5416429,1.089312 Z M5.8093236,6.8986356 C5.8093236,7.12558623 5.62781415,7.2616545 5.4463047,7.2616545 L1.81560509,7.2616545 C1.58865445,7.2616545 1.407145,7.08014505 1.407145,6.8986356 L1.407145,2.17862399 L5.8093236,2.17862399 L5.8093236,6.8986356 Z M2.9046618,3.31312189 C2.72315235,3.31312189 2.5416429,3.44919016 2.5416429,3.67614079 L2.5416429,5.8093236 C2.5416429,5.99083305 2.67771116,6.1723425 2.9046618,6.1723425 C3.13161244,6.1723425 3.2676807,6.03627424 3.2676807,5.8093236 L3.2676807,3.63095489 C3.2676807,3.44944544 3.08617125,3.31337718 2.9046618,3.31337718 L2.9046618,3.31312189 Z M4.3569927,3.31312189 C4.17548325,3.31312189 3.9939738,3.44919016 3.9939738,3.63069961 L3.9939738,5.80906831 C3.9939738,5.99057777 4.13004206,6.17208722 4.3569927,6.17208722 C4.58394334,6.17208722 4.7200116,6.03601895 4.7200116,5.80906831 L4.7200116,3.63069961 C4.67457042,3.44919016 4.53850215,3.31312189 4.3569927,3.31312189 Z"
+            fill="#FFF"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        className="bg-[#292b2c] text-white hover:opacity-80"
+        onClick={onCopy}
+      >
+        <svg
+          width="8px"
+          height="10px"
+          viewBox="0 0 8 10"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            id="dynamic-widget"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+          >
+            <g
+              id="dynamic-widget---02"
+              transform="translate(-543, -615)"
+              fill="#FFFFFF"
+              fillRule="nonzero"
+              stroke="#FFFFFF"
+              strokeWidth="0.307692308"
+            >
+              <g id="Grou5" transform="translate(484, 610)">
+                <g id="Group-5" transform="translate(59.6154, 6)">
+                  <path
+                    d="M4.35136402,1.39920627 L0.632480235,1.39920627 C0.283491141,1.39920627 0,1.68269742 0,2.03168651 L0,7.36751977 C0,7.71650886 0.283491141,8 0.632480235,8 L4.35136402,8 C4.70035311,8 4.98384425,7.71650886 4.98384425,7.36751977 L4.98384425,2.03168651 C4.98209431,1.68269742 4.69885316,1.39920627 4.35136402,1.39920627 Z M4.53985813,7.36576982 C4.53985813,7.47051655 4.45461079,7.55576388 4.34986407,7.55576388 L0.630980282,7.55576388 C0.526233555,7.55576388 0.440986219,7.47051655 0.440986219,7.36576982 L0.440986219,2.03143652 C0.440986219,1.92668979 0.526233555,1.84144245 0.630980282,1.84144245 L4.34986407,1.84144245 C4.45461079,1.84144245 4.53985813,1.92668979 4.53985813,2.03143652 L4.53985813,7.36576982 Z"
+                    id="Shape"
+                  ></path>
+                  <path
+                    d="M5.77331958,0 L2.0544358,0 C1.7054467,0 1.42195556,0.283491141 1.42195556,0.632480235 C1.42195556,0.755226399 1.52020249,0.853723321 1.64319865,0.853723321 C1.76619481,0.853723321 1.86444174,0.755476391 1.86444174,0.632480235 C1.86444174,0.527733508 1.94968907,0.442486172 2.0544358,0.442486172 L5.77331958,0.442486172 C5.87806631,0.442486172 5.96331365,0.527733508 5.96331365,0.632480235 L5.96331365,5.96831349 C5.96331365,6.07306022 5.87806631,6.15830755 5.77331958,6.15830755 C5.65057342,6.15830755 5.5520765,6.25655448 5.5520765,6.37955064 C5.5520765,6.5025468 5.65032343,6.60079373 5.77331958,6.60079373 C6.12230868,6.60079373 6.40579982,6.31730258 6.40579982,5.96831349 L6.40579982,0.632480235 C6.40579982,0.283491141 6.12230868,0 5.77331958,0 Z"
+                    id="Path"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </button>
+    </section>
+  );
+}