@janbox/storefront-builder 2.0.22 → 2.0.23

package/dist/editor.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as w, Fragment as Fe } from "@emotion/react/jsx-runtime";
-import { at as ft, au as bt, av as wt, aw as b, ax as kt, ay as ce, az as $, aA as fe, b as Te, B as Ie, a1 as mt, aB as J, aC as Oe, aD as Ct, aE as W, aF as I, as as He, ar as vt, aG as xt, aH as yt, aI as Tt, aJ as It, aK as Mt, aL as St, aM as Et, aN as $e, aO as Lt, aP as Wt, aQ as Nt, aR as Rt, aS as At, u as H, aT as Dt, aU as Bt, aV as oe, m as Pt, i as jt, G as Vt, l as Me, o as Ft, F as Se, s as Ot, V as Ht, I as $t, aW as _t, q as Gt, P as zt, aX as _e, aY as Ut, aZ as Zt, a_ as Yt, a$ as Xt, b0 as qt, b1 as _, b2 as Ge, b3 as Jt, b4 as Kt, b5 as ze, b6 as Qt, b7 as en, b8 as tn, a0 as Ue, Z as Ze, b9 as Ee, ba as nn, N as ke, bb as rn, bc as on, bd as sn, $ as an, be as Le, bf as cn } from "./toaster-Bls2Iq-H.js";
-import { bg as So, bh as Eo, bi as Lo, bj as Wo, bk as No, bl as Ro, bm as Ao, bn as Do, bo as Bo, bp as Po, bq as jo, br as Vo, bs as Fo, bt as Oo, bu as Ho, bv as $o, bw as _o, bx as Go, by as zo, bz as Uo, bA as Zo, bB as Yo, bC as Xo, bD as qo, bE as Jo, bF as Ko, bG as Qo, bH as es, bI as ts, bJ as ns, bK as rs, bL as os, bM as ss, bN as is, bO as as, bP as cs, bQ as ls, bR as ds, bS as hs, bT as us, bU as ps, bV as gs, bW as fs, bX as bs, bY as ws, bZ as ks, b_ as ms, b$ as Cs, c0 as vs, c1 as xs, c2 as ys, c3 as Ts, W as Is, c4 as Ms, c5 as Ss, c6 as Es, c7 as Ls, c8 as Ws } from "./toaster-Bls2Iq-H.js";
+import { at as ft, au as bt, av as wt, aw as b, ax as kt, ay as ce, az as $, aA as fe, b as Te, B as Ie, a1 as mt, aB as J, aC as Oe, aD as Ct, aE as W, aF as I, as as He, ar as vt, aG as xt, aH as yt, aI as Tt, aJ as It, aK as Mt, aL as St, aM as Et, aN as $e, aO as Lt, aP as Wt, aQ as Nt, aR as Rt, aS as At, u as H, aT as Dt, aU as Bt, aV as oe, m as Pt, i as jt, G as Vt, l as Me, o as Ft, F as Se, s as Ot, V as Ht, I as $t, aW as _t, q as Gt, P as zt, aX as _e, aY as Ut, aZ as Zt, a_ as Yt, a$ as Xt, b0 as qt, b1 as _, b2 as Ge, b3 as Jt, b4 as Kt, b5 as ze, b6 as Qt, b7 as en, b8 as tn, a0 as Ue, Z as Ze, b9 as Ee, ba as nn, N as ke, bb as rn, bc as on, bd as sn, $ as an, be as Le, bf as cn } from "./toaster-DMjFxzB_.js";
+import { bg as So, bh as Eo, bi as Lo, bj as Wo, bk as No, bl as Ro, bm as Ao, bn as Do, bo as Bo, bp as Po, bq as jo, br as Vo, bs as Fo, bt as Oo, bu as Ho, bv as $o, bw as _o, bx as Go, by as zo, bz as Uo, bA as Zo, bB as Yo, bC as Xo, bD as qo, bE as Jo, bF as Ko, bG as Qo, bH as es, bI as ts, bJ as ns, bK as rs, bL as os, bM as ss, bN as is, bO as as, bP as cs, bQ as ls, bR as ds, bS as hs, bT as us, bU as ps, bV as gs, bW as fs, bX as bs, bY as ws, bZ as ks, b_ as ms, b$ as Cs, c0 as vs, c1 as xs, c2 as ys, c3 as Ts, W as Is, c4 as Ms, c5 as Ss, c6 as Es, c7 as Ls, c8 as Ws } from "./toaster-DMjFxzB_.js";
 import { throttle as ln, isFunction as We, isNumber as se, isNil as ee, isEqual as dn } from "lodash-es";
 import { useImperativeHandle as hn, useMemo as un, isValidElement as pn, useState as P, useRef as z, useEffect as V, Fragment as ie, Suspense as gn, createElement as Ye, useCallback as fn } from "react";
 import "flat";
@@ -14,7 +14,7 @@ import "@tanstack/react-virtual";
 import In, { useFrame as Ce } from "react-frame-component";
 import "react-dropzone";
 import "react-datepicker";
-import { a as rt, C as ot } from "./index-CCWut9qY.js";
+import { a as rt, C as ot } from "./index-BBoR6Gy_.js";
 import "@janbox/storefront-ui/utils";
 import { useToggle as st } from "usehooks-ts";
 import "@hello-pangea/dnd";

package/dist/{index-CCWut9qY.js → index-BBoR6Gy_.js}

@@ -1,6 +1,6 @@
 import { jsx as i } from "@emotion/react/jsx-runtime";
 import { useMemo as m, useEffect as f } from "react";
-import { u as c, C as v, D as p, a as N, d as h, N as E, g as b, r as D, b as y, B as l } from "./toaster-Bls2Iq-H.js";
+import { u as c, C as v, D as p, a as N, d as h, N as E, g as b, r as D, b as y, B as l } from "./toaster-DMjFxzB_.js";
 import { isNil as u, isString as d } from "lodash-es";
 import "flat";
 const k = ({ children: t, data: e }) => {

package/dist/index-BPG8gpQT.js

@@ -0,0 +1,4 @@
+import { W as p } from "./toaster-DMjFxzB_.js";
+export {
+  p as WbTooltip
+};

package/dist/index.js

@@ -1,9 +1,9 @@
-import { N as n, c as t } from "./toaster-Bls2Iq-H.js";
-import { A as C, e as L, f as T, h as x, i as S, j as A, k as E, l as w, m as R, n as h, F, o as k, p as q, G as B, H as G, q as H, I as M, s as U, t as y, v as V, L as j, w as D, M as z, x as J, y as K, P as O, R as Q, S as X, z as Y, T as Z, E as _, J as $, K as W, O as ee, U as oe, Q as se, V as ae, X as re, Y as de, Z as te, _ as ne, $ as Ne, g as ue, a0 as ie, a1 as pe, a2 as me, a3 as Pe, a4 as ce, a5 as le, a6 as ge, a7 as be, a8 as fe, a9 as ve, u as Ie, aa as Ce, ab as Le, ac as Te, ad as xe, ae as Se, af as Ae, ag as Ee, ah as we, ai as Re, aj as he, ak as Fe, al as ke, am as qe, an as Be, ao as Ge, ap as He, aq as Me } from "./toaster-Bls2Iq-H.js";
+import { N as n, c as t } from "./toaster-DMjFxzB_.js";
+import { A as C, e as L, f as T, h as x, i as S, j as A, k as E, l as w, m as R, n as h, F, o as k, p as q, G as B, H as G, q as H, I as M, s as U, t as y, v as V, L as j, w as D, M as z, x as J, y as K, P as O, R as Q, S as X, z as Y, T as Z, E as _, J as $, K as W, O as ee, U as oe, Q as se, V as ae, X as re, Y as de, Z as te, _ as ne, $ as Ne, g as ue, a0 as ie, a1 as pe, a2 as me, a3 as Pe, a4 as ce, a5 as le, a6 as ge, a7 as be, a8 as fe, a9 as ve, u as Ie, aa as Ce, ab as Le, ac as Te, ad as xe, ae as Se, af as Ae, ag as Ee, ah as we, ai as Re, aj as he, ak as Fe, al as ke, am as qe, an as Be, ao as Ge, ap as He, aq as Me } from "./toaster-DMjFxzB_.js";
 import "lodash-es";
 import { useRef as N, useEffect as u } from "react";
 import { getTabPanelProps as i, getListItemProps as p } from "@janbox/storefront-ui";
-import { C as ye, a as Ve } from "./index-CCWut9qY.js";
+import { C as ye, a as Ve } from "./index-BBoR6Gy_.js";
 const g = ({ enabled: a, onChange: r }) => {
   const { dom: e } = n((s) => ({ dom: s.dom })), o = N(void 0);
   u(() => {

package/dist/lib/box/README.md

@@ -8,6 +8,14 @@ Block container đa năng (render ra `div`). Là canvas node — chứa bất k
 
 ## Configurable props
 
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
+
+`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.
+
 ### `sx` props
 
 ```ts

package/dist/lib/cell/README.md

@@ -13,8 +13,9 @@ Một ô (column) trong `GridNode`. Hỗ trợ `colSpan` để chiếm nhiều c
 | Prop | Type | Description |
 | --- | --- | --- |
 | `colSpan` | `number` | Số cột mà cell chiếm (`grid-column: span colSpan`) |
+| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
 
-`colSpan` hỗ trợ responsive: `colSpan={1}` cho mobile, `md={{ colSpan: 2 }}` cho desktop.
+`colSpan` và `hidden` hỗ trợ responsive: `colSpan={1}` cho mobile, `md={{ colSpan: 2 }}` cho desktop. `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.
 
 ### `sx` props
 

package/dist/lib/container/README.md

@@ -8,6 +8,14 @@ Block container có max-width cố định, căn giữa theo chiều ngang. Dùn
 
 ## Configurable props
 
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
+
+`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.
+
 ### `sx` props
 
 ```ts

package/dist/lib/flex-item/README.md

@@ -8,7 +8,13 @@ Một item trong `FlexboxNode`. Kiểm soát kích thước, grow/shrink, thứ
 
 ## Configurable props
 
-Tất cả props nằm trong `sx`. Không có top-level prop riêng.
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
+
+`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.
 
 ### `sx` props
 

package/dist/lib/flexbox/README.md

@@ -8,6 +8,14 @@ Flex container node (`display: flex`). Chỉ chấp nhận `FlexItemNode` làm c
 
 ## Configurable props
 
+### Top-level props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
+
+`hidden` hỗ trợ responsive: `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.
+
 ### `sx` props
 
 ```ts

package/dist/lib/grid/README.md

@@ -15,9 +15,10 @@ Props mà user có thể chỉnh trong editor inspector.
 | Prop | Type | Description |
 | --- | --- | --- |
 | `cols` | `number` | Số cột — generates `grid-template-columns: repeat(cols, minmax(0, 1fr))` |
-| `sm` | `{ cols?: number }` | Override `cols` tại breakpoint sm |
-| `md` | `{ cols?: number }` | Override `cols` tại breakpoint md |
-| `lg` | `{ cols?: number }` | Override `cols` tại breakpoint lg |
+| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
+| `sm` | `{ cols?: number, hidden?: boolean }` | Override tại breakpoint sm |
+| `md` | `{ cols?: number, hidden?: boolean }` | Override tại breakpoint md |
+| `lg` | `{ cols?: number, hidden?: boolean }` | Override tại breakpoint lg |
 
 ### `sx` props
 

package/dist/templates/sections/about/index.d.ts

@@ -0,0 +1,2 @@
+import { InsertTemplateGroup } from '../../../editor';
+export declare const ABOUT_SECTION_GROUP: InsertTemplateGroup;

package/dist/templates/sections/brand-story/index.d.ts

@@ -0,0 +1,2 @@
+import { InsertTemplateGroup } from '../../../editor';
+export declare const BRAND_STORY_SECTION_GROUP: InsertTemplateGroup;

package/dist/templates/sections/index.d.ts

@@ -1,3 +1,5 @@
 export * from './hero';
 export * from './faqs';
 export * from './guarantee';
+export * from './brand-story';
+export * from './about';

package/dist/templates.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "@emotion/react/jsx-runtime";
 import { getColorVar as o } from "@janbox/storefront-ui/theme";
-import { m as l, G as c, l as n, q as s, P as i, j as h, s as p, i as w, x as k, M as m, e as g, ar as u, as as x, f as r, h as d, A as a } from "./toaster-Bls2Iq-H.js";
+import { m as l, G as c, l as n, q as s, P as i, j as T, s as p, i as g, x as B, M as u, e as f, ar as x, as as b, f as r, h as d, A as a } from "./toaster-DMjFxzB_.js";
 import "lodash-es";
 import "react";
 import "flat";
@@ -17,7 +17,7 @@ import "react-datepicker";
 import "usehooks-ts";
 import "@hello-pangea/dnd";
 import "@janbox/storefront-ui";
-const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+const h = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.0021 19.5031H3.99667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.99875 14.5012H3.99667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.99875 9.49874H3.99667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -25,9 +25,9 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
 <path d="M19.0029 8.97259C20.3915 10.3612 20.3915 12.6121 19.0029 14.0007C17.6143 15.3893 15.3634 15.3893 13.9748 14.0007C12.5862 12.6121 12.5862 10.3612 13.9748 8.97259C15.3634 7.58401 17.6143 7.58401 19.0029 8.97259" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M21.0037 16.0018L19.0029 14.001L21.0037 16.0018Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, R = "https://cdn.shopify.com/s/files/1/0959/8114/2305/files/img140.png", U = {
+`, L = "https://cdn.shopify.com/s/files/1/0959/8114/2305/files/img140.png", _ = {
   name: "Hero",
-  icon: { source: b },
+  icon: { source: h },
   templates: [
     {
       template: /* @__PURE__ */ e(l, { children: /* @__PURE__ */ t(
@@ -78,18 +78,18 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                       children: "Discover our latest running shoes with advanced air technology soles and boost technology, conquering every terrain with comfort and confidence."
                     }
                   ),
-                  /* @__PURE__ */ e(h, { sx: { marginTop: 32, width: "100%", md: { width: 200 } }, children: "Explore Now" })
+                  /* @__PURE__ */ e(T, { sx: { marginTop: 32, width: "100%", md: { width: 200 } }, children: "Explore Now" })
                 ]
               }
             ),
-            /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { src: R }) })
+            /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { src: L }) })
           ]
         }
       ) })
     },
     {
       template: /* @__PURE__ */ e(l, { children: /* @__PURE__ */ t(
-        w,
+        g,
         {
           sx: {
             backgroundColor: o("primary.100"),
@@ -128,12 +128,12 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                     children: "New arrivals shaped like a campaign board: sharp, wearable, and ready for the street."
                   }
                 ),
-                /* @__PURE__ */ e(h, { sx: { width: "100%", marginTop: 24, md: { width: 200 } }, children: "Explore New Arrivals" })
+                /* @__PURE__ */ e(T, { sx: { width: "100%", marginTop: 24, md: { width: 200 } }, children: "Explore New Arrivals" })
               ] }),
               /* @__PURE__ */ e(n, { md: { colSpan: 12 }, children: /* @__PURE__ */ e(
                 p,
                 {
-                  src: R,
+                  src: L,
                   sx: {
                     width: "100%",
                     aspectRatio: "16 / 9",
@@ -147,16 +147,16 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               ) })
             ] }),
             /* @__PURE__ */ t(
-              k,
+              B,
               {
                 spaceBetween: 24,
                 md: { spaceBetween: 40 },
                 sx: { marginTop: 24, paddingTop: 16, paddingBottom: 8 },
                 children: [
-                  /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "New Arrivals" }) }),
-                  /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "Editor's Picks" }) }),
-                  /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "Limited Edit" }) }),
-                  /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "Tailored For Now" }) })
+                  /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "New Arrivals" }) }),
+                  /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "Editor's Picks" }) }),
+                  /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "Limited Edit" }) }),
+                  /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(i, { sizeVariant: "lg", sx: { fontWeight: 600, textTransform: "uppercase" }, children: "Tailored For Now" }) })
                 ]
               }
             )
@@ -167,7 +167,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
   ]
 }, H = {
   name: "FAQs",
-  icon: { source: b },
+  icon: { source: h },
   templates: [
     {
       template: /* @__PURE__ */ t(l, { children: [
@@ -188,7 +188,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
           }
         ),
         /* @__PURE__ */ t(
-          g,
+          f,
           {
             openMode: "single",
             accordionSummaryProps: {
@@ -208,8 +208,8 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               expandIcon: {
                 position: "right",
                 source: {
-                  expanded: x,
-                  collapsed: u
+                  expanded: b,
+                  collapsed: x
                 }
               }
             },
@@ -262,10 +262,10 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
           ),
           /* @__PURE__ */ e(s, { sizeVariant: "4xl", md: { sizeVariant: "5xl" }, sx: { fontWeight: 600, marginTop: 12 }, children: "Questions before checkout?" }),
           /* @__PURE__ */ e(i, { sx: { color: o("neutral.600"), marginTop: 16 }, children: "Keep buying decisions calm with answers for shipping, returns, sizing, and payment." }),
-          /* @__PURE__ */ e(h, { sx: { width: "100%", marginTop: 28, md: { width: 180 } }, children: "Contact Support" })
+          /* @__PURE__ */ e(T, { sx: { width: "100%", marginTop: 28, md: { width: 180 } }, children: "Contact Support" })
         ] }),
         /* @__PURE__ */ e(n, { md: { colSpan: 8 }, children: /* @__PURE__ */ e(
-          w,
+          g,
           {
             sx: {
               backgroundColor: o("neutral.100"),
@@ -285,7 +285,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               }
             },
             children: /* @__PURE__ */ t(
-              g,
+              f,
               {
                 openMode: "single",
                 sx: { rowGap: 8 },
@@ -305,8 +305,8 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                   expandIcon: {
                     position: "right",
                     source: {
-                      expanded: x,
-                      collapsed: u
+                      expanded: b,
+                      collapsed: x
                     }
                   }
                 },
@@ -340,7 +340,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
     },
     {
       template: /* @__PURE__ */ e(l, { children: /* @__PURE__ */ t(
-        w,
+        g,
         {
           sx: {
             backgroundColor: o("primary.100"),
@@ -376,7 +376,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               }
             ),
             /* @__PURE__ */ t(
-              g,
+              f,
               {
                 openMode: "multiple",
                 sx: { marginTop: 20, rowGap: 6, md: { marginTop: 32, rowGap: 12 } },
@@ -396,8 +396,8 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                   expandIcon: {
                     position: "right",
                     source: {
-                      expanded: x,
-                      collapsed: u
+                      expanded: b,
+                      collapsed: x
                     }
                   }
                 },
@@ -433,9 +433,116 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
           ]
         }
       ) })
+    },
+    {
+      template: /* @__PURE__ */ e(
+        l,
+        {
+          sx: {
+            backgroundImage: "url(https://cdn.shopify.com/s/files/1/2005/9307/files/432750572815254551-fc38f909-2492-4367-8f30-f09c5de9caf3.png)",
+            backgroundSize: "cover",
+            backgroundPosition: "right bottom",
+            backgroundRepeat: "no-repeat",
+            paddingTop: 56,
+            paddingBottom: 56,
+            md: { paddingTop: 88, paddingBottom: 88 }
+          },
+          children: /* @__PURE__ */ e(c, { cols: 1, md: { cols: 12 }, sx: { alignItems: "center" }, children: /* @__PURE__ */ e(n, { md: { colSpan: 5 }, children: /* @__PURE__ */ t(
+            g,
+            {
+              sx: {
+                backgroundColor: "rgba(255, 255, 255, 0.86)",
+                paddingTop: 24,
+                paddingRight: 16,
+                paddingBottom: 24,
+                paddingLeft: 16,
+                md: {
+                  paddingTop: 0,
+                  paddingRight: 0,
+                  paddingBottom: 0,
+                  paddingLeft: 0
+                }
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    sizeVariant: "2xl",
+                    md: { sizeVariant: "3xl" },
+                    sx: { color: "#74331f", fontWeight: 700, textTransform: "uppercase" },
+                    children: "Frequently Asked Questions"
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  f,
+                  {
+                    openMode: "single",
+                    sx: { marginTop: 28, rowGap: 16 },
+                    accordionSummaryProps: {
+                      sx: {
+                        paddingTop: 14,
+                        paddingBottom: 14,
+                        paddingLeft: 10,
+                        paddingRight: 10,
+                        md: {
+                          paddingTop: 18,
+                          paddingBottom: 18,
+                          paddingLeft: 12,
+                          paddingRight: 12
+                        }
+                      },
+                      expandIcon: {
+                        position: "right",
+                        source: {
+                          expanded: b,
+                          collapsed: x
+                        }
+                      }
+                    },
+                    accordionContentProps: {
+                      sx: {
+                        paddingTop: 0,
+                        paddingBottom: 12,
+                        paddingLeft: 10,
+                        paddingRight: 10,
+                        md: {
+                          paddingLeft: 12,
+                          paddingRight: 12
+                        }
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ t(r, { children: [
+                        /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { sizeVariant: "base", sx: { fontWeight: 700, color: "#74331f" }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod?" }) }),
+                        /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(i, { sx: { color: "#74331f" }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." }) })
+                      ] }),
+                      /* @__PURE__ */ t(r, { children: [
+                        /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { sizeVariant: "base", sx: { fontWeight: 700, color: "#74331f" }, children: "Lorem ipsum dolor sit amet, consectetur?" }) }),
+                        /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(i, { sx: { color: "#74331f" }, children: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip." }) })
+                      ] }),
+                      /* @__PURE__ */ t(r, { children: [
+                        /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { sizeVariant: "base", sx: { fontWeight: 700, color: "#74331f" }, children: "Lorem ipsum dolor sit amet, consectetur elit sed do eiusmod?" }) }),
+                        /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(i, { sx: { color: "#74331f" }, children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore." }) })
+                      ] }),
+                      /* @__PURE__ */ t(r, { children: [
+                        /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { sizeVariant: "base", sx: { fontWeight: 700, color: "#74331f" }, children: "Lorem ipsum dolor sit amet consectetur?" }) }),
+                        /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(i, { sx: { color: "#74331f" }, children: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt." }) })
+                      ] }),
+                      /* @__PURE__ */ t(r, { children: [
+                        /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { sizeVariant: "base", sx: { fontWeight: 700, color: "#74331f" }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod?" }) }),
+                        /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(i, { sx: { color: "#74331f" }, children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque." }) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ) }) })
+        }
+      )
     }
   ]
-}, f = [
+}, w = [
   {
     image: "https://ucarecdn.com/3c98ccba-611f-43aa-baee-8b70deaa56c4/-/format/auto/",
     title: "24/7 Friendly Support"
@@ -452,9 +559,9 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
     image: "https://ucarecdn.com/8a7a086c-1ef5-43a9-a036-daaf1f15a9f1/-/format/auto/",
     title: "Secure Online Payment"
   }
-], _ = {
+], D = {
   name: "Guarantee",
-  icon: { source: b },
+  icon: { source: h },
   templates: [
     {
       template: /* @__PURE__ */ t(l, { children: [
@@ -509,7 +616,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
             md: {
               cols: 4
             },
-            children: f.map((T, A) => /* @__PURE__ */ t(n, { children: [
+            children: w.map((m, R) => /* @__PURE__ */ t(n, { children: [
               /* @__PURE__ */ e(
                 p,
                 {
@@ -518,7 +625,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                     marginLeft: "auto",
                     marginRight: "auto"
                   },
-                  src: T.image
+                  src: m.image
                 }
               ),
               /* @__PURE__ */ e(
@@ -530,10 +637,10 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                     marginTop: 16,
                     fontWeight: 500
                   },
-                  children: T.title
+                  children: m.title
                 }
               )
-            ] }, A))
+            ] }, R))
           }
         )
       ] })
@@ -660,7 +767,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
                       )
                     ] })
                   ] }),
-                  /* @__PURE__ */ e(h, { sx: { width: "100%", marginTop: 32, md: { width: 180 } }, children: "Explore Now" })
+                  /* @__PURE__ */ e(T, { sx: { width: "100%", marginTop: 32, md: { width: 180 } }, children: "Explore Now" })
                 ] })
               ]
             }
@@ -700,7 +807,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               borderBottomLeftRadius: 28
             },
             children: [
-              /* @__PURE__ */ e(p, { sx: { width: 72 }, src: f[0].image }),
+              /* @__PURE__ */ e(p, { sx: { width: 72 }, src: w[0].image }),
               /* @__PURE__ */ e(s, { sizeVariant: "2xl", sx: { marginTop: 24, fontWeight: 600 }, children: "Always-on support" }),
               /* @__PURE__ */ e(i, { sx: { color: o("neutral.500"), marginTop: 12 }, children: "Ask questions before or after purchase and get guidance whenever you need it." })
             ]
@@ -721,7 +828,7 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
               borderBottomLeftRadius: 28
             },
             children: [
-              /* @__PURE__ */ e(p, { sx: { width: 72 }, src: f[3].image }),
+              /* @__PURE__ */ e(p, { sx: { width: 72 }, src: w[3].image }),
               /* @__PURE__ */ e(s, { sizeVariant: "2xl", sx: { marginTop: 24, fontWeight: 600 }, children: "Protected checkout" }),
               /* @__PURE__ */ e(i, { sx: { color: o("neutral.600"), marginTop: 12 }, children: "Secure payment flows and trusted order handling keep every transaction simple." })
             ]
@@ -730,9 +837,335 @@ const b = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="ht
       ] }) })
     }
   ]
+}, Q = {
+  name: "Brand Story",
+  icon: { source: h },
+  templates: [
+    {
+      template: /* @__PURE__ */ e(
+        l,
+        {
+          sx: {
+            backgroundColor: "#faf5ef",
+            paddingTop: 40,
+            paddingBottom: 40,
+            paddingLeft: 16,
+            paddingRight: 16,
+            md: {
+              paddingTop: 64,
+              paddingBottom: 64,
+              paddingLeft: 48,
+              paddingRight: 48
+            }
+          },
+          children: /* @__PURE__ */ t(
+            c,
+            {
+              cols: 1,
+              md: { cols: 12 },
+              sx: {
+                rowGap: 32,
+                columnGap: 32,
+                alignItems: "center",
+                md: {
+                  rowGap: 0,
+                  columnGap: 40
+                }
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  n,
+                  {
+                    hidden: !0,
+                    sm: { hidden: !0 },
+                    md: { colSpan: 3 },
+                    sx: {
+                      md: {
+                        paddingTop: 120
+                      }
+                    },
+                    children: /* @__PURE__ */ e(
+                      p,
+                      {
+                        src: "https://cdn.shopify.com/s/files/1/2005/9307/files/432750572815254551-1b13c10f-dc7c-494a-9dbb-ce3dd680f887.png",
+                        alt: "Product",
+                        sx: {
+                          width: "100%",
+                          objectFit: "cover",
+                          borderTopLeftRadius: 12,
+                          borderTopRightRadius: 12,
+                          borderBottomRightRadius: 12,
+                          borderBottomLeftRadius: 12
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(n, { md: { colSpan: 4 }, children: /* @__PURE__ */ e(
+                  p,
+                  {
+                    src: "https://cdn.shopify.com/s/files/1/2005/9307/files/432750572815254551-9a302469-3a91-4a94-bf0b-564f2486a9f9.png",
+                    alt: "Brand founder",
+                    sx: {
+                      width: "100%",
+                      objectFit: "cover",
+                      borderTopLeftRadius: 12,
+                      borderTopRightRadius: 12,
+                      borderBottomRightRadius: 12,
+                      borderBottomLeftRadius: 12
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ t(n, { md: { colSpan: 5 }, children: [
+                  /* @__PURE__ */ e(
+                    s,
+                    {
+                      as: "h2",
+                      sizeVariant: "3xl",
+                      md: { sizeVariant: "4xl" },
+                      sx: {
+                        fontWeight: 600,
+                        color: "#1a1a1a"
+                      },
+                      children: "Lorem ipsum dolor sit amet"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    i,
+                    {
+                      sizeVariant: "base",
+                      sx: {
+                        color: "#4a4a4a",
+                        marginTop: 20,
+                        md: {
+                          marginTop: 24
+                        }
+                      },
+                      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    i,
+                    {
+                      sizeVariant: "base",
+                      sx: {
+                        color: "#4a4a4a",
+                        marginTop: 20,
+                        md: {
+                          marginTop: 24
+                        }
+                      },
+                      children: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    p,
+                    {
+                      src: "https://cdn.shopify.com/s/files/1/2005/9307/files/432750572815254551-0fae58d0-dd31-4973-9cea-5cc6bfd8276a.png",
+                      alt: "Signature",
+                      sx: {
+                        width: 140,
+                        marginTop: 28,
+                        md: {
+                          width: 160,
+                          marginTop: 36
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    i,
+                    {
+                      sizeVariant: "base",
+                      sx: {
+                        color: "#1a1a1a",
+                        marginTop: 12,
+                        fontWeight: 500
+                      },
+                      children: "Lorem ipsum dolor sit amet"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  ]
+}, A = [
+  { icon: "https://cdn.shopify.com/s/files/1/2005/9307/files/photo_6.png", value: "10+", label: "Years of experience" },
+  { icon: "https://cdn.shopify.com/s/files/1/2005/9307/files/photo_7.png", value: "235+", label: "Happy Clients" },
+  { icon: "https://cdn.shopify.com/s/files/1/2005/9307/files/photo_8.png", value: "50+", label: "Project completed" }
+], K = {
+  name: "About",
+  icon: { source: h },
+  templates: [
+    {
+      template: /* @__PURE__ */ e(
+        l,
+        {
+          sx: {
+            paddingTop: 40,
+            paddingBottom: 40,
+            paddingLeft: 16,
+            paddingRight: 16,
+            md: {
+              paddingTop: 64,
+              paddingBottom: 64,
+              paddingLeft: 48,
+              paddingRight: 48
+            }
+          },
+          children: /* @__PURE__ */ t(
+            c,
+            {
+              cols: 1,
+              md: { cols: 2 },
+              sx: {
+                rowGap: 32,
+                columnGap: 48,
+                alignItems: "center",
+                md: {
+                  columnGap: 64
+                }
+              },
+              children: [
+                /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+                  p,
+                  {
+                    src: "https://cdn.shopify.com/s/files/1/2005/9307/files/Frame_45283_1.webp",
+                    alt: "About us",
+                    sx: {
+                      width: "100%",
+                      objectFit: "cover",
+                      borderTopLeftRadius: 24,
+                      borderTopRightRadius: 24,
+                      borderBottomRightRadius: 24,
+                      borderBottomLeftRadius: 24
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ t(n, { children: [
+                  /* @__PURE__ */ e(
+                    i,
+                    {
+                      sizeVariant: "sm",
+                      sx: {
+                        color: o("primary.600"),
+                        fontWeight: 600,
+                        textTransform: "uppercase"
+                      },
+                      children: "About Us"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    s,
+                    {
+                      as: "h2",
+                      sizeVariant: "3xl",
+                      md: { sizeVariant: "4xl" },
+                      sx: {
+                        fontWeight: 700,
+                        marginTop: 12
+                      },
+                      children: "We help to bring your dream home to reality"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    i,
+                    {
+                      sizeVariant: "base",
+                      sx: {
+                        color: o("neutral.600"),
+                        marginTop: 16,
+                        md: { marginTop: 20 }
+                      },
+                      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    c,
+                    {
+                      cols: 1,
+                      sm: { cols: 3 },
+                      sx: {
+                        rowGap: 20,
+                        columnGap: 20,
+                        marginTop: 28,
+                        md: { marginTop: 36 }
+                      },
+                      children: A.map((m, R) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ t(
+                        g,
+                        {
+                          sx: {
+                            backgroundColor: o("neutral.100"),
+                            paddingTop: 20,
+                            paddingBottom: 20,
+                            paddingLeft: 16,
+                            paddingRight: 16,
+                            borderTopLeftRadius: 16,
+                            borderTopRightRadius: 16,
+                            borderBottomRightRadius: 16,
+                            borderBottomLeftRadius: 16,
+                            textAlign: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              p,
+                              {
+                                src: m.icon,
+                                sx: {
+                                  width: 48,
+                                  height: 48,
+                                  objectFit: "contain",
+                                  marginLeft: "auto",
+                                  marginRight: "auto"
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              s,
+                              {
+                                as: "div",
+                                sizeVariant: "3xl",
+                                sx: {
+                                  fontWeight: 700,
+                                  color: o("neutral.600"),
+                                  marginTop: 8
+                                },
+                                children: m.value
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              i,
+                              {
+                                sizeVariant: "sm",
+                                sx: {
+                                  color: o("neutral.500"),
+                                  marginTop: 4
+                                },
+                                children: m.label
+                              }
+                            )
+                          ]
+                        }
+                      ) }, R))
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  ]
 };
 export {
+  K as ABOUT_SECTION_GROUP,
+  Q as BRAND_STORY_SECTION_GROUP,
   H as FAQS_SECTION_GROUP,
-  _ as GUARANTEE_SECTION_GROUP,
-  U as HERO_SECTION_GROUP
+  D as GUARANTEE_SECTION_GROUP,
+  _ as HERO_SECTION_GROUP
 };

package/dist/{toaster-Bls2Iq-H.js → toaster-DMjFxzB_.js}

@@ -5969,7 +5969,7 @@ const i6 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
     size: "lg",
     name: "Desktop"
   }
-], u6 = "px", d6 = Gy(() => import("./index-DBQ5OjJh.js").then((e) => ({ default: e.WbTooltip }))), J = Qe(
+], u6 = "px", d6 = Gy(() => import("./index-BPG8gpQT.js").then((e) => ({ default: e.WbTooltip }))), J = Qe(
   ({ tooltip: e, size: t = "24", type: n = "button", isHighlighted: r, ...o }, i) => {
     const s = /* @__PURE__ */ u(
       "button",
@@ -6661,6 +6661,13 @@ const Ls = (e, t) => {
     focusTab: a
   }), [i]);
   return /* @__PURE__ */ u(G2.Provider, { value: l, children: /* @__PURE__ */ u("div", { css: { display: "flex", flexDirection: "column" }, ...o, children: n }) });
+}, $e = ({ children: e, ...t }) => {
+  const n = Eo.toArray(e).filter((r) => Lt(r));
+  return /* @__PURE__ */ u("ul", { css: [{ display: "flex", alignItems: "center" }], ...t, children: n.map(
+    (r, o) => Un(r, {
+      "data-tab-index": o
+    })
+  ) });
 }, te = ({ fill: e = !1, ...t }) => {
   const { activeIndex: n, focusTab: r } = Z2(), o = Number(Bn(t, "data-tab-index")), i = (s) => {
     r(o), t.onClick?.(s);
@@ -6691,17 +6698,8 @@ const Ls = (e, t) => {
       onClick: i
     }
   );
-}, $e = ({ children: e, ...t }) => {
-  const n = Eo.toArray(e).filter(
-    (r) => Lt(r) && r.type === te
-  );
-  return /* @__PURE__ */ u("ul", { css: [{ display: "flex", alignItems: "center" }], ...t, children: n.map(
-    (r, o) => Un(r, {
-      "data-tab-index": o
-    })
-  ) });
-}, ne = ({ ...e }) => /* @__PURE__ */ u("div", { ...e }), Fe = ({ children: e, ...t }) => {
-  const { activeIndex: n } = Z2(), r = Eo.toArray(e).filter((o) => Lt(o) && o.type === ne).find((o, i) => i === n);
+}, Fe = ({ children: e, ...t }) => {
+  const { activeIndex: n } = Z2(), r = Eo.toArray(e).filter((o) => Lt(o)).find((o, i) => i === n);
   return /* @__PURE__ */ u(
     "div",
     {
@@ -6710,7 +6708,7 @@ const Ls = (e, t) => {
       children: r
     }
   );
-}, p6 = ({ children: e, options: t, ...n }) => /* @__PURE__ */ u(
+}, ne = ({ ...e }) => /* @__PURE__ */ u("div", { ...e }), p6 = ({ children: e, options: t, ...n }) => /* @__PURE__ */ u(
   Xb,
   {
     options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-builder",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "description": "Standalone storefront builder library extracted from craft-layers-portal",
   "type": "module",
   "files": [

package/dist/index-DBQ5OjJh.js

@@ -1,4 +0,0 @@
-import { W as p } from "./toaster-Bls2Iq-H.js";
-export {
-  p as WbTooltip
-};