@janbox/storefront-builder 2.0.21 → 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-1qwGcpRC.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-1qwGcpRC.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-DYjYzzu9.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-DYjYzzu9.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-1qwGcpRC.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-1qwGcpRC.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-1qwGcpRC.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-DYjYzzu9.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/button/README.md

@@ -12,7 +12,7 @@ CTA button node dùng component `Button` từ `@janbox/storefront-ui`. Có thể
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| `dangerouslySetInnerHTML.__html` | `string` | Text hiển thị trong button |
+| `children` | `ReactNode` | Nội dung hiển thị trong button |
 | `color` | `ColorScale` | Màu theme của button |
 | `variant` | `ButtonVariant` | Kiểu hiển thị của button |
 | `size` | `ButtonSizeVariant` | Kích thước button |
@@ -53,21 +53,14 @@ sx?: {
 import { ButtonNode } from '@janbox/storefront-builder';
 
 // Button cơ bản
-<ButtonNode
-  color="primary"
-  variant="contained"
-  size="md"
-  dangerouslySetInnerHTML={{ __html: 'Buy now' }}
-/>
+<ButtonNode color="primary" variant="contained" size="md">
+  Buy now
+</ButtonNode>
 
 // Link button
-<ButtonNode
-  color="primary"
-  variant="contained"
-  size="lg"
-  anchor={{ to: '/checkout', target: '_self' }}
-  dangerouslySetInnerHTML={{ __html: 'Checkout' }}
-/>
+<ButtonNode color="primary" variant="contained" size="lg" anchor={{ to: '/checkout', target: '_self' }}>
+  Checkout
+</ButtonNode>
 
 // Responsive size + width
 <ButtonNode
@@ -83,12 +76,13 @@ import { ButtonNode } from '@janbox/storefront-builder';
       marginTop: 24,
     },
   }}
-  dangerouslySetInnerHTML={{ __html: 'View products' }}
-/>
+>
+  View products
+</ButtonNode>
 ```
 
 ## Rules
 
 - **Canvas**: no — không chứa node con.
 - Khi editor đang bật, `anchor` bị unset lúc render để tránh navigate trong canvas.
-- Nội dung button được chỉnh qua `dangerouslySetInnerHTML.__html` trong inspector.
+- Nội dung button được chỉnh qua prop `children` trong inspector.

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/lib/link/README.md

@@ -103,7 +103,7 @@ import { LinkNode } from '@janbox/storefront-builder';
 ## Rules
 
 - **Canvas**: yes — chứa node con.
-- **canMoveIn**: bị block khi prop `dangerouslySetInnerHTML` đang được dùng.
+- **canMoveIn**: bị block khi prop `children` đang có nội dung inline.
 - Editor preview: click bị `preventDefault` khi editor đang bật để tránh navigate.
 
 ## Related nodes

package/dist/lib/tab/README.md

@@ -12,14 +12,14 @@ Tab header button — click để switch giữa các panels.
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| `dangerouslySetInnerHTML.__html` | `string` | Text hiển thị trong tab button |
+| `children` | `ReactNode` | Text hiển thị trong tab button |
 
 ## Usage
 
 ```tsx
 import { TabNode } from '@janbox/storefront-builder';
 
-<TabNode dangerouslySetInnerHTML={{ __html: 'Overview' }} />
+<TabNode>Overview</TabNode>
 ```
 
 ## Rules

package/dist/lib/tab-list/README.md

@@ -16,9 +16,9 @@ Không có props riêng. Styling được control qua parent `TabsNode`.
 import { TabListNode, TabNode } from '@janbox/storefront-builder';
 
 <TabListNode>
-  <TabNode dangerouslySetInnerHTML={{ __html: 'Tab 1' }} />
-  <TabNode dangerouslySetInnerHTML={{ __html: 'Tab 2' }} />
-  <TabNode dangerouslySetInnerHTML={{ __html: 'Tab 3' }} />
+  <TabNode>Tab 1</TabNode>
+  <TabNode>Tab 2</TabNode>
+  <TabNode>Tab 3</TabNode>
 </TabListNode>
 ```
 

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';