@janbox/storefront-ui 4.0.1 → 4.0.2

package/README.md

@@ -478,7 +478,7 @@ Mọi component đều có README riêng với API reference, examples, và usag
 - [Drawer](./dist/lib/drawer/README.md)
 - [FilterPanel](./dist/lib/filter-panel/README.md)
 - [Flag](./dist/lib/flag/README.md)
-- [Flexbox](./dist/lib/flexbox/README.md)
+- [Flexbox](./dist/lib/flexbox/flexbox/README.md)
 - [Floating](./dist/lib/floating/README.md)
 - [FormHelperText](./dist/lib/form-helper-text/README.md)
 - [FormLabel](./dist/lib/form-label/README.md)

package/dist/lib/box/README.md

@@ -11,7 +11,11 @@ import { Box } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn Box (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `BoxResponsiveProps` | - | Override responsive props tại breakpoint `sm` (768px). |
+| `md` | `BoxResponsiveProps` | - | Override responsive props tại breakpoint `md` (1280px). |
+| `lg` | `BoxResponsiveProps` | - | Override responsive props tại breakpoint `lg` (1680px). |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Responsive Emotion CSS overrides. Accepts a base StyledCSS object plus optional `sm`, `md`, and `lg` breakpoint keys for responsive styles. |
 | `as` | `HTMLElementType` | "div" | Override the rendered HTML element (polymorphic). Defaults to `div`. |
 | `children` | `React.ReactNode` | - | Content rendered inside the Box. |
@@ -44,6 +48,15 @@ import { Box } from '@janbox/storefront-ui';
 </Box>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Box hidden md={{ hidden: false }}>
+  Desktop only content
+</Box>
+```
+
 ## Related Components
 
 - [Primitive](../primitive/README.md)

package/dist/lib/box/box.js

@@ -2,22 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import { getBoxProps } from "./helpers.js";
 import { Primitive } from "../primitive/primitive.js";
 const Box = ({ children, ref, ..._props }) => {
-  const { sx = {}, ...rest } = getBoxProps(_props);
+  const { hidden, sm, md, lg, sx = {}, ...rest } = getBoxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
+        ...createStyle({ hidden }),
         ...sx,
-        sm: { ...sx.sm },
-        md: { ...sx.md },
-        lg: { ...sx.lg }
+        sm: { ...createStyle(sm), ...sx.sm },
+        md: { ...createStyle(md), ...sx.md },
+        lg: { ...createStyle(lg), ...sx.lg }
       },
       ref,
       children
     }
   );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "block"
+});
 export {
   Box
 };

package/dist/lib/box/types.d.ts

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../primitive';
-export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']>;
+import { ShallowMerge, ToResponsiveProps } from '../../types';
+export interface BoxResponsiveProps {
+    hidden?: boolean;
+}
+type BoxExtendedProps = ToResponsiveProps<BoxResponsiveProps>;
+export type BoxProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], BoxExtendedProps>, 'div'>;
+export {};

package/dist/lib/container/README.md

@@ -11,7 +11,11 @@ import { Container } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn Container (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `ContainerResponsiveProps` | - | Override responsive props tại breakpoint `sm` (768px). |
+| `md` | `ContainerResponsiveProps` | - | Override responsive props tại breakpoint `md` (1280px). |
+| `lg` | `ContainerResponsiveProps` | - | Override responsive props tại breakpoint `lg` (1680px). |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom Emotion CSS. Hỗ trợ responsive keys (`sm`, `md`, `lg`). **Không nên override** `width`, `max-width`, `margin-left`, `margin-right`, `padding-left`, `padding-right` — các thuộc tính này do Container quản lý nội bộ. |
 | `children` | `React.ReactNode` | - | Nội dung render bên trong container. |
 | `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn (`className`, `style`, `onClick`, v.v.). |
@@ -34,6 +38,15 @@ import { Container } from '@janbox/storefront-ui';
 </Container>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Container hidden md={{ hidden: false }}>
+  Desktop only section
+</Container>
+```
+
 > Không dùng `sx` để override layout core của Container như `width`, `max-width`, `margin-left`, `margin-right`, `padding-left`, `padding-right`. Nếu cần layout khác, dùng wrapper component riêng thay vì thay đổi contract của Container.
 
 ## Dependencies

package/dist/lib/container/container.js

@@ -2,9 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import { getContainerProps } from "./helpers.js";
 import { Primitive } from "../primitive/primitive.js";
 const Container = ({ children, ref, ..._props }) => {
-  const props = getContainerProps(_props);
-  return /* @__PURE__ */ jsx(Primitive, { ...props, ref, children });
+  const { hidden, sm, md, lg, sx = {}, ...rest } = getContainerProps(_props);
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      ...rest,
+      sx: {
+        ...createStyle({ hidden }),
+        ...sx,
+        sm: { ...createStyle(sm), ...sx.sm },
+        md: { ...createStyle(md), ...sx.md },
+        lg: { ...createStyle(lg), ...sx.lg }
+      },
+      ref,
+      children
+    }
+  );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "block"
+});
 export {
   Container
 };

package/dist/lib/container/types.d.ts

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../primitive';
-export type ContainerProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
+import { ShallowMerge, ToResponsiveProps } from '../../types';
+export interface ContainerResponsiveProps {
+    hidden?: boolean;
+}
+type ContainerExtendedProps = ToResponsiveProps<ContainerResponsiveProps>;
+export type ContainerProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>, 'div'>;
+export {};

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

@@ -0,0 +1,53 @@
+# FlexItem
+
+A flex child component intended to be used inside Flexbox. Constrains content to `max-width: 100%` by default and supports `hidden` for responsive visibility control.
+
+## Import
+
+```tsx
+import { FlexItem } from '@janbox/storefront-ui';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn FlexItem (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `FlexItemResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ hidden?: boolean }`. |
+| `md` | `FlexItemResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ hidden?: boolean }`. |
+| `lg` | `FlexItemResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ hidden?: boolean }`. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Custom Emotion CSS. Hỗ trợ responsive keys (`sm`, `md`, `lg`). |
+| `children` | `React.ReactNode` | - | Nội dung render bên trong flex item. |
+| `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
+| `...rest` | `JSX.IntrinsicElements['div']` | - | Tất cả HTML div attributes tiêu chuẩn. |
+
+## Examples
+
+### Basic FlexItem
+
+```tsx
+<Flexbox sx={{ gap: 8 }}>
+  <FlexItem>Item 1</FlexItem>
+  <FlexItem>Item 2</FlexItem>
+</Flexbox>
+```
+
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Flexbox sx={{ gap: 8 }}>
+  <FlexItem>Always visible</FlexItem>
+  <FlexItem hidden md={{ hidden: false }}>Desktop only</FlexItem>
+</Flexbox>
+```
+
+## Related Components
+
+- [Flexbox](../flexbox/README.md)
+- [Primitive](../../primitive/README.md)
+
+## See Also
+
+- [Component Source](./flex-item.tsx)
+- [Main README](../../../README.md)

package/dist/lib/flexbox/flex-item/flex-item.js

@@ -2,13 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { getFlexItemProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const FlexItem = ({ children, ref, ...rest }) => {
-  const { sx, ...props } = getFlexItemProps(rest);
+  const { hidden, sm, md, lg, sx, ...props } = getFlexItemProps(rest);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       sx: {
         maxWidth: "100%",
-        ...sx
+        ...createStyle({ hidden }),
+        ...sx,
+        sm: { ...createStyle(sm), ...sx == null ? void 0 : sx.sm },
+        md: { ...createStyle(md), ...sx == null ? void 0 : sx.md },
+        lg: { ...createStyle(lg), ...sx == null ? void 0 : sx.lg }
       },
       ...props,
       ref,
@@ -16,6 +20,9 @@ const FlexItem = ({ children, ref, ...rest }) => {
     }
   );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "block"
+});
 export {
   FlexItem
 };

package/dist/lib/flexbox/flex-item/types.d.ts

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../../primitive';
-export type FlexItemProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
+export interface FlexItemResponsiveProps {
+    hidden?: boolean;
+}
+type FlexItemExtendedProps = ToResponsiveProps<FlexItemResponsiveProps>;
+export type FlexItemProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], FlexItemExtendedProps>, 'div'>;
+export {};

package/dist/lib/flexbox/{README.md → flexbox/README.md}

@@ -11,7 +11,11 @@ import { Flexbox } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
+| `hidden` | `boolean` | - | Ẩn Flexbox (`display: none`) hoặc hiển thị (`display: flex`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `FlexboxResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ hidden?: boolean }`. |
+| `md` | `FlexboxResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ hidden?: boolean }`. |
+| `lg` | `FlexboxResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ hidden?: boolean }`. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start' } | Responsive style overrides via the Emotion-powered sx prop. Supports base styles plus `sm`, `md`, and `lg` breakpoint keys. Merged on top of the component defaults (`flexDirection: 'row'`, `alignItems: 'flex-start'`, `justifyContent: 'flex-start'`). |
 | `children` | `React.ReactNode` | - | Child elements rendered inside the flex container — typically `FlexItem` components. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying `div` element. |
@@ -47,12 +51,22 @@ import { Flexbox } from '@janbox/storefront-ui';
 </Flexbox>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Flexbox hidden md={{ hidden: false }} sx={{ gap: 16 }}>
+  <FlexItem>Desktop only</FlexItem>
+</Flexbox>
+```
+
 ## Related Components
 
-- [Primitive](../primitive/README.md)
+- [FlexItem](../flex-item/README.md)
+- [Primitive](../../primitive/README.md)
 
 ## See Also
 
 - [Component Source](./index.ts)
-- [Storybook Stories](./flexbox.stories.tsx)
-- [Main README](../../README.md)
+- [Storybook Stories](../flexbox.stories.tsx)
+- [Main README](../../../README.md)

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -2,23 +2,27 @@ import { jsx } from "react/jsx-runtime";
 import { getFlexboxProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const Flexbox = ({ children, ref, ..._props }) => {
-  const { sx = {}, ...rest } = getFlexboxProps(_props);
+  var _a, _b, _c;
+  const { hidden, sm, md, lg, ...rest } = getFlexboxProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
-        display: "flex",
-        ...sx,
-        sm: { ...sx.sm },
-        md: { ...sx.md },
-        lg: { ...sx.lg }
+        ...createStyle({ hidden }),
+        ...rest.sx,
+        sm: { ...createStyle(sm), ...(_a = rest.sx) == null ? void 0 : _a.sm },
+        md: { ...createStyle(md), ...(_b = rest.sx) == null ? void 0 : _b.md },
+        lg: { ...createStyle(lg), ...(_c = rest.sx) == null ? void 0 : _c.lg }
       },
       ref,
       children
     }
   );
 };
+const createStyle = ({ hidden } = {}) => ({
+  display: hidden ? "none" : "flex"
+});
 export {
   Flexbox
 };

package/dist/lib/flexbox/flexbox/types.d.ts

@@ -1,3 +1,9 @@
 import { JSX } from 'react';
 import { PrimitiveProps } from '../../primitive';
-export type FlexboxProps = PrimitiveProps<JSX.IntrinsicElements['div'], 'div'>;
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
+export interface FlexboxResponsiveProps {
+    hidden?: boolean;
+}
+type FlexboxExtendedProps = ToResponsiveProps<FlexboxResponsiveProps>;
+export type FlexboxProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], FlexboxExtendedProps>, 'div'>;
+export {};

package/dist/lib/grid/cell/README.md

@@ -11,11 +11,12 @@ import { Cell } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
 | `colSpan` | `number` | - | Number of grid columns the cell should span. Generates `grid-column: span colSpan`. Supports responsive variants via sm/md/lg. |
-| `sm` | `CellResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ colSpan?: number }`. |
-| `md` | `CellResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ colSpan?: number }`. |
-| `lg` | `CellResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ colSpan?: number }`. |
+| `hidden` | `boolean` | - | Ẩn Cell (`display: none`) hoặc hiển thị (`display: block`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `CellResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ colSpan?: number, hidden?: boolean }`. |
+| `md` | `CellResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ colSpan?: number, hidden?: boolean }`. |
+| `lg` | `CellResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ colSpan?: number, hidden?: boolean }`. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for inline Emotion styles. Supports responsive keys (sm, md, lg) alongside base styles. |
 | `children` | `React.ReactNode` | - | Cell content. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
@@ -50,6 +51,18 @@ import { Cell } from '@janbox/storefront-ui';
 </Cell>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ sm trở lên */}
+<Grid cols={3}>
+  <Cell hidden sm={{ hidden: false }}>
+    Desktop only cell
+  </Cell>
+  <Cell>Always visible</Cell>
+</Grid>
+```
+
 ## Related Components
 
 - [Grid](../grid/README.md)

package/dist/lib/grid/cell/cell.js

@@ -4,13 +4,13 @@ import { getCellProps } from "./helpers.js";
 import { Primitive } from "../../primitive/primitive.js";
 const Cell = ({ children, ref, ..._props }) => {
   var _a, _b, _c;
-  const { colSpan, sm, md, lg, ...rest } = getCellProps(_props);
+  const { colSpan, hidden, sm, md, lg, ...rest } = getCellProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
       ...rest,
       sx: {
-        ...createStyle({ colSpan }),
+        ...createStyle({ colSpan, hidden }),
         ...rest.sx,
         sm: {
           ...createStyle(sm),
@@ -30,8 +30,9 @@ const Cell = ({ children, ref, ..._props }) => {
     }
   );
 };
-const createStyle = ({ colSpan } = {}) => {
+const createStyle = ({ colSpan, hidden } = {}) => {
   return {
+    display: hidden ? "none" : "block",
     gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan
   };
 };

package/dist/lib/grid/cell/types.d.ts

@@ -3,5 +3,6 @@ import { ToResponsiveProps } from '../../../types';
 import { PrimitiveProps } from '../../primitive';
 export interface CellResponsiveProps {
     colSpan?: number;
+    hidden?: boolean;
 }
 export type CellProps = PrimitiveProps<JSX.IntrinsicElements['div'] & ToResponsiveProps<CellResponsiveProps>>;

package/dist/lib/grid/grid/README.md

@@ -11,11 +11,12 @@ import { Grid } from '@janbox/storefront-ui';
 ## Props
 
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| ------ | ------ | ------- | ----------- |
 | `cols` | `number` | 1 | Number of equal-width columns in the grid. Generates `grid-template-columns: repeat(cols, minmax(0, 1fr))`. Supports responsive variants via sm/md/lg. |
-| `sm` | `GridResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ cols?: number }`. |
-| `md` | `GridResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ cols?: number }`. |
-| `lg` | `GridResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ cols?: number }`. |
+| `hidden` | `boolean` | - | Ẩn Grid (`display: none`) hoặc hiển thị (`display: grid`). Hỗ trợ responsive qua `sm`, `md`, `lg`. |
+| `sm` | `GridResponsiveProps` | - | Responsive overrides applied at the sm breakpoint (≥768px). Accepts `{ cols?: number, hidden?: boolean }`. |
+| `md` | `GridResponsiveProps` | - | Responsive overrides applied at the md breakpoint (≥1280px). Accepts `{ cols?: number, hidden?: boolean }`. |
+| `lg` | `GridResponsiveProps` | - | Responsive overrides applied at the lg breakpoint (≥1680px). Accepts `{ cols?: number, hidden?: boolean }`. |
 | `sx` | `ToResponsiveProps<StyledCSS>` | - | Escape-hatch for inline Emotion styles. Supports responsive keys (sm, md, lg) alongside base styles. |
 | `children` | `React.ReactNode` | - | Grid children, typically Cell components. |
 | `ref` | `React.Ref<HTMLDivElement>` | - | Forwarded ref to the underlying div element. |
@@ -55,6 +56,17 @@ import { Grid } from '@janbox/storefront-ui';
 </Grid>
 ```
 
+### Responsive hidden
+
+```tsx
+{/* Ẩn trên mobile, hiện từ md trở lên */}
+<Grid cols={3} hidden md={{ hidden: false }}>
+  <Cell>Item 1</Cell>
+  <Cell>Item 2</Cell>
+  <Cell>Item 3</Cell>
+</Grid>
+```
+
 ## Related Components
 
 - [Cell](../cell/README.md)

package/dist/lib/grid/grid/grid.js

@@ -5,25 +5,26 @@ import { Primitive } from "../../primitive/primitive.js";
 const GRID_MINIMUM_COLS = 1;
 const GRID_MAXIMUM_COLS = 24;
 const Grid = ({ children, ref, ..._props }) => {
-  const { cols, sm, md, lg, sx = {}, ...rest } = getGridProps(_props);
+  var _a, _b, _c;
+  const { cols, hidden, sm, md, lg, ...rest } = getGridProps(_props);
   return /* @__PURE__ */ jsx(
     Primitive,
     {
+      ...rest,
       sx: {
-        display: "grid",
-        ...createStyle({ cols }),
-        ...sx,
-        sm: { ...createStyle(sm), ...sx.sm },
-        md: { ...createStyle(md), ...sx.md },
-        lg: { ...createStyle(lg), ...sx.lg }
+        ...createStyle({ cols, hidden }),
+        ...rest.sx,
+        sm: { ...createStyle(sm), ...(_a = rest.sx) == null ? void 0 : _a.sm },
+        md: { ...createStyle(md), ...(_b = rest.sx) == null ? void 0 : _b.md },
+        lg: { ...createStyle(lg), ...(_c = rest.sx) == null ? void 0 : _c.lg }
       },
-      ...rest,
       ref,
       children
     }
   );
 };
-const createStyle = ({ cols } = {}) => ({
+const createStyle = ({ cols, hidden } = {}) => ({
+  display: hidden ? "none" : "grid",
   gridTemplateColumns: isNil(cols) ? void 0 : `repeat(${cols}, minmax(0, 1fr))`
 });
 export {

package/dist/lib/grid/grid/types.d.ts

@@ -3,6 +3,7 @@ import { ShallowMerge, ToResponsiveProps } from '../../../types';
 import { PrimitiveProps } from '../../primitive';
 export interface GridResponsiveProps {
     cols?: number;
+    hidden?: boolean;
 }
 type GridExtendedProps = ToResponsiveProps<GridResponsiveProps>;
 export type GridProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [