@weaverse/react 0.7.64 → 0.7.65

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore, WeaverseElement } from '@weaverse/core';
+import { WeaverseType, Weaverse, WeaverseElement, ElementCSS, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 import * as React$1 from 'react';
 import React__default, { HTMLAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
@@ -21,6 +21,7 @@ declare let ArrowLeft: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let ArrowRight: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Image: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let ShoppingCart: (props: HTMLAttributes<SVGElement>) => JSX.Element;
+declare let Storefront: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Eye: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 
 declare const PhosphorIcons_CircleNotch: typeof CircleNotch;
@@ -31,6 +32,7 @@ declare const PhosphorIcons_ArrowLeft: typeof ArrowLeft;
 declare const PhosphorIcons_ArrowRight: typeof ArrowRight;
 declare const PhosphorIcons_Image: typeof Image;
 declare const PhosphorIcons_ShoppingCart: typeof ShoppingCart;
+declare const PhosphorIcons_Storefront: typeof Storefront;
 declare const PhosphorIcons_Eye: typeof Eye;
 declare namespace PhosphorIcons {
   export {
@@ -42,6 +44,7 @@ declare namespace PhosphorIcons {
     PhosphorIcons_ArrowRight as ArrowRight,
     PhosphorIcons_Image as Image,
     PhosphorIcons_ShoppingCart as ShoppingCart,
+    PhosphorIcons_Storefront as Storefront,
     PhosphorIcons_Eye as Eye,
   };
 }
@@ -90,10 +93,69 @@ interface BackgroundProps {
     className?: string;
 }
 
+declare let Modal: (props: DialogProps) => JSX.Element;
+declare let ModalTrigger: React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare let ModalHeader: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
+declare let ModalContent: React__default.ForwardRefExoticComponent<ModalContentProps & React__default.RefAttributes<HTMLDivElement>>;
+declare let ModalClose: React__default.ForwardRefExoticComponent<DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+declare const ModalComponents_Modal: typeof Modal;
+declare const ModalComponents_ModalTrigger: typeof ModalTrigger;
+declare const ModalComponents_ModalHeader: typeof ModalHeader;
+declare const ModalComponents_ModalContent: typeof ModalContent;
+declare const ModalComponents_ModalClose: typeof ModalClose;
+declare namespace ModalComponents {
+  export {
+    ModalComponents_Modal as Modal,
+    ModalComponents_ModalTrigger as ModalTrigger,
+    ModalComponents_ModalHeader as ModalHeader,
+    ModalComponents_ModalContent as ModalContent,
+    ModalComponents_ModalClose as ModalClose,
+  };
+}
+
+declare function Spinner(): JSX.Element;
+
+declare function Icon({ name, className, ...props }: WeaverseIconProps): JSX.Element;
+
+declare function Tooltip({ children }: TooltipProps): JSX.Element;
+
+declare function Slider(props: SliderProps): JSX.Element;
+
+declare function Background(props: BackgroundProps): JSX.Element | null;
+
+declare function Overlay(props: OverlayProps): JSX.Element | null;
+
+declare function Arrows(props: SliderArrowsProps): JSX.Element;
+
+declare function Dots(props: SliderDotsProps): JSX.Element;
+
+declare function AutoplayPlugin(changeSlidesEvery: number): KeenSliderPlugin;
+
+declare let Components: {
+    Background: typeof Background;
+    Icon: typeof Icon;
+    ModalComponents: typeof ModalComponents;
+    Overlay: typeof Overlay;
+    Placeholder: React$1.ForwardRefExoticComponent<PlaceholderProps & React$1.RefAttributes<HTMLDivElement>>;
+    Spinner: typeof Spinner;
+    Slider: typeof Slider;
+    Tooltip: typeof Tooltip;
+};
+declare let SliderComponents: {
+    Arrows: typeof Arrows;
+    Dots: typeof Dots;
+    ResizePlugin: keen_slider_react.KeenSliderPlugin<{}, {}, keen_slider_react.KeenSliderHooks>;
+    AutoplayPlugin: typeof AutoplayPlugin;
+};
+
+declare const Elements: Record<string, WeaverseElement>;
+
 interface WeaverseElementProps extends Partial<ReactElement> {
     css?: ElementCSS;
     children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
     className?: string;
+    ['data-wv-id']?: string;
 }
 type WeaverseRootPropsType = {
     context: Weaverse;
@@ -231,64 +293,6 @@ declare global {
     }
 }
 
-declare let Modal: (props: DialogProps) => JSX.Element;
-declare let ModalTrigger: React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare let ModalHeader: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
-declare let ModalContent: React__default.ForwardRefExoticComponent<ModalContentProps & React__default.RefAttributes<HTMLDivElement>>;
-declare let ModalClose: React__default.ForwardRefExoticComponent<DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const ModalComponents_Modal: typeof Modal;
-declare const ModalComponents_ModalTrigger: typeof ModalTrigger;
-declare const ModalComponents_ModalHeader: typeof ModalHeader;
-declare const ModalComponents_ModalContent: typeof ModalContent;
-declare const ModalComponents_ModalClose: typeof ModalClose;
-declare namespace ModalComponents {
-  export {
-    ModalComponents_Modal as Modal,
-    ModalComponents_ModalTrigger as ModalTrigger,
-    ModalComponents_ModalHeader as ModalHeader,
-    ModalComponents_ModalContent as ModalContent,
-    ModalComponents_ModalClose as ModalClose,
-  };
-}
-
-declare function Spinner(): JSX.Element;
-
-declare function Icon({ name, className, ...props }: WeaverseIconProps): JSX.Element;
-
-declare function Tooltip({ children }: TooltipProps): JSX.Element;
-
-declare function Slider(props: SliderProps): JSX.Element;
-
-declare function Background(props: BackgroundProps): JSX.Element | null;
-
-declare function Overlay(props: OverlayProps): JSX.Element | null;
-
-declare function Arrows(props: SliderArrowsProps): JSX.Element;
-
-declare function Dots(props: SliderDotsProps): JSX.Element;
-
-declare function AutoplayPlugin(changeSlidesEvery: number): KeenSliderPlugin;
-
-declare let Components: {
-    Background: typeof Background;
-    Icon: typeof Icon;
-    ModalComponents: typeof ModalComponents;
-    Overlay: typeof Overlay;
-    Placeholder: React$1.ForwardRefExoticComponent<PlaceholderProps & React$1.RefAttributes<HTMLDivElement>>;
-    Spinner: typeof Spinner;
-    Slider: typeof Slider;
-    Tooltip: typeof Tooltip;
-};
-declare let SliderComponents: {
-    Arrows: typeof Arrows;
-    Dots: typeof Dots;
-    ResizePlugin: keen_slider_react.KeenSliderPlugin<{}, {}, keen_slider_react.KeenSliderHooks>;
-    AutoplayPlugin: typeof AutoplayPlugin;
-};
-
-declare const Elements: Record<string, WeaverseElement>;
-
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
-export { BackgroundProps, ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, ModalContentProps, OverlayProps, PlaceholderProps, SlideProps, SliderArrowsProps, SliderComponents, SliderDotsProps, SliderProps, SlideshowProps, TextElementProps, TimerBlockProps, TooltipProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseIcon, WeaverseIconProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };
+export { ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, PlaceholderProps, SlideProps, SliderComponents, SlideshowProps, TextElementProps, TimerBlockProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };

package/dist/index.js

@@ -43,7 +43,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 var import_core = require("@weaverse/core");
 var import_react30 = require("react");
 
-// src/elements/Button.tsx
+// src/elements/button.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
 var Button = React.forwardRef((props, ref) => {
@@ -88,9 +88,9 @@ var css = {
     }
   }
 };
-var Button_default = Button;
+var button_default = Button;
 
-// src/elements/Container.tsx
+// src/elements/container.tsx
 var import_react2 = __toESM(require("react"));
 var Container = (0, import_react2.forwardRef)(
   (props, ref) => {
@@ -111,9 +111,9 @@ var css2 = {
   }
 };
 Container.defaultProps = {};
-var Container_default = Container;
+var container_default = Container;
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 var import_react4 = __toESM(require("react"));
 
 // src/constant/index.ts
@@ -146,7 +146,7 @@ function getVimeoId(url) {
   return match ? match[1] : null;
 }
 
-// src/elements/Countdown/TimerBlock.tsx
+// src/elements/countdown/timer-block.tsx
 var import_react3 = __toESM(require("react"));
 function TimerBlock({ value, label }) {
   return /* @__PURE__ */ import_react3.default.createElement("div", {
@@ -158,7 +158,7 @@ function TimerBlock({ value, label }) {
   }, label));
 }
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 var Countdown = (0, import_react4.forwardRef)(
   (props, ref) => {
     const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
@@ -271,9 +271,9 @@ Countdown.defaultProps = {
   showLabel: true,
   showColon: true
 };
-var Countdown_default = Countdown;
+var countdown_default = Countdown;
 
-// src/elements/Image.tsx
+// src/elements/image.tsx
 var import_react5 = __toESM(require("react"));
 var Image = import_react5.default.forwardRef(
   (props, ref) => {
@@ -330,12 +330,12 @@ Image.defaultProps = {
   openLinkInNewTab: false,
   linkTo: ""
 };
-var Image_default = Image;
+var image_default = Image;
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 var import_react8 = __toESM(require("react"));
 
-// src/elements/Layout/Background.tsx
+// src/elements/layout/Background.tsx
 var import_react6 = __toESM(require("react"));
 function Background(props) {
   let { bgColor, imgUrl, objectFit, objectPosition } = props;
@@ -358,7 +358,7 @@ function Background(props) {
   return null;
 }
 
-// src/elements/Layout/Overlay.tsx
+// src/elements/layout/Overlay.tsx
 var import_react7 = __toESM(require("react"));
 function Overlay(props) {
   let { enableOverlay, overlayOpacity } = props;
@@ -374,7 +374,7 @@ function Overlay(props) {
   return null;
 }
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 var Layout = (0, import_react8.forwardRef)((props, ref) => {
   let {
     children,
@@ -469,9 +469,9 @@ Layout.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Layout_default = Layout;
+var layout_default = Layout;
 
-// src/elements/Map.tsx
+// src/elements/map.tsx
 var import_react9 = __toESM(require("react"));
 var Map = (0, import_react9.forwardRef)((props, ref) => {
   let { place, zoom, ...rest } = props;
@@ -503,9 +503,9 @@ Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
 };
-var Map_default = Map;
+var map_default = Map;
 
-// src/elements/Text.tsx
+// src/elements/text.tsx
 var React10 = __toESM(require("react"));
 var Text = React10.forwardRef(
   (props, ref) => {
@@ -534,12 +534,12 @@ var css7 = {
 Text.defaultProps = {
   value: "<p>The quick brown fox jumps over the lazy dog</p>"
 };
-var Text_default = Text;
+var text_default = Text;
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 var import_react13 = __toESM(require("react"));
 
-// src/elements/Video/HTMLVideo.tsx
+// src/elements/video/html-video.tsx
 var import_react10 = __toESM(require("react"));
 function HTMLVideo(props) {
   let { src, type, controls, autoPlay, loop, muted } = props;
@@ -559,7 +559,7 @@ function HTMLVideo(props) {
   }), "Your browser does not support the video tag.");
 }
 
-// src/elements/Video/Vimeo.tsx
+// src/elements/video/vimeo.tsx
 var import_react11 = __toESM(require("react"));
 function Vimeo(props) {
   let { vimeoId, controls, autoPlay, loop, muted } = props;
@@ -573,7 +573,7 @@ function Vimeo(props) {
   });
 }
 
-// src/elements/Video/Youtube.tsx
+// src/elements/video/youtube.tsx
 var import_react12 = __toESM(require("react"));
 function Youtube(props) {
   let { youtubeId, controls, autoPlay, loop, muted } = props;
@@ -589,12 +589,11 @@ function Youtube(props) {
     src: youtubeSrc,
     width: "100%",
     height: "100%",
-    allowFullScreen: true,
     allow
   });
 }
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 var Video = (0, import_react13.forwardRef)((props, ref) => {
   let { isDesignMode } = (0, import_react13.useContext)(WeaverseContext);
   let {
@@ -656,24 +655,24 @@ Video.defaultProps = {
   autoPlay: true,
   muted: true
 };
-var Video_default = Video;
+var video_default = Video;
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 var import_react22 = require("@stitches/react");
 var import_clsx5 = __toESM(require("clsx"));
 var import_react23 = __toESM(require("react"));
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 var import_react16 = require("@stitches/react");
 var import_clsx2 = __toESM(require("clsx"));
 var import_react17 = __toESM(require("react"));
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 var import_react15 = __toESM(require("react"));
 
-// src/components/Icons/Phosphor.tsx
-var Phosphor_exports = {};
-__export(Phosphor_exports, {
+// src/components/icons/phosphor.tsx
+var phosphor_exports = {};
+__export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
   CircleNotch: () => CircleNotch,
@@ -682,6 +681,7 @@ __export(Phosphor_exports, {
   Minus: () => Minus,
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
+  Storefront: () => Storefront,
   X: () => X
 });
 var import_react14 = __toESM(require("react"));
@@ -883,6 +883,55 @@ var ShoppingCart = (props) => {
     strokeWidth: "16"
   }));
 };
+var Storefront = (props) => {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M96,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M160,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M224,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }));
+};
 var Eye = (props) => {
   return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -914,10 +963,10 @@ var Eye = (props) => {
   }));
 };
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 var import_clsx = __toESM(require("clsx"));
 function Icon({ name, className, ...props }) {
-  let WeaverseIcon = Phosphor_exports[name];
+  let WeaverseIcon = phosphor_exports[name];
   let cls = (0, import_clsx.default)("wv-icon", className);
   return /* @__PURE__ */ import_react15.default.createElement(WeaverseIcon, {
     className: cls,
@@ -925,7 +974,7 @@ function Icon({ name, className, ...props }) {
   });
 }
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 function Arrows(props) {
   let { currentSlide, instanceRef, className, offset } = props;
   let isFirst = currentSlide === 0;
@@ -1000,7 +1049,7 @@ var StyledArrows = (0, import_react16.styled)("div", {
   }
 });
 
-// src/components/Slider/Dots.tsx
+// src/components/slider/dots.tsx
 var import_react18 = require("@stitches/react");
 var import_clsx3 = __toESM(require("clsx"));
 var import_react19 = __toESM(require("react"));
@@ -1071,11 +1120,11 @@ var StyledDots = (0, import_react18.styled)("div", {
   }
 });
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 var import_react20 = require("keen-slider/react");
 var import_react21 = __toESM(require("react"));
 
-// src/components/Slider/AutoplayPlugin.ts
+// src/components/slider/autoplay-plugin.ts
 function AutoplayPlugin(changeSlidesEvery) {
   return (slider) => {
     let timeout;
@@ -1108,7 +1157,7 @@ function AutoplayPlugin(changeSlidesEvery) {
   };
 }
 
-// src/components/Slider/ResizePlugin.ts
+// src/components/slider/resize-plugin.ts
 var ResizePlugin = (slider) => {
   let observer = new ResizeObserver(() => slider.update());
   slider.on("created", () => {
@@ -1167,7 +1216,7 @@ function loadCSS(attrs) {
   });
 }
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 function useSlideshowConfigs(props) {
   let {
     animation,
@@ -1240,7 +1289,7 @@ function useSlideshowConfigs(props) {
   };
 }
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
   let {
     animation,
@@ -1321,12 +1370,12 @@ Slideshow.defaultProps = {
   autoRotate: false,
   changeSlidesEvery: 5
 };
-var Slideshow_default = Slideshow;
+var slideshow_default = Slideshow;
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 var import_react29 = __toESM(require("react"));
 
-// src/components/Background.tsx
+// src/components/background.tsx
 var import_react24 = require("@stitches/react");
 var import_react25 = __toESM(require("react"));
 function Background2(props) {
@@ -1366,7 +1415,7 @@ var StyledBackground = (0, import_react24.styled)("div", {
   }
 });
 
-// src/components/Overlay.tsx
+// src/components/overlay.tsx
 var import_react26 = require("@stitches/react");
 var import_react27 = __toESM(require("react"));
 function Overlay2(props) {
@@ -1386,7 +1435,7 @@ var StyledOverlay = (0, import_react26.styled)("div", {
   backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
 });
 
-// src/components/Placeholder.tsx
+// src/components/placeholder.tsx
 var import_react28 = __toESM(require("react"));
 var Placeholder = (0, import_react28.forwardRef)(
   (props, ref) => {
@@ -1401,9 +1450,9 @@ var Placeholder = (0, import_react28.forwardRef)(
     }, element), /* @__PURE__ */ import_react28.default.createElement("div", null, children));
   }
 );
-var Placeholder_default = Placeholder;
+var placeholder_default = Placeholder;
 
-// src/elements/Slideshow/position.ts
+// src/elements/slideshow/position.ts
 var slidePositionMap = {
   "top left": {
     justifyContent: "flex-start",
@@ -1443,7 +1492,7 @@ var slidePositionMap = {
   }
 };
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 var Slide = (0, import_react29.forwardRef)((props, ref) => {
   let {
     contentPosition,
@@ -1472,7 +1521,7 @@ var Slide = (0, import_react29.forwardRef)((props, ref) => {
     ref,
     style: slidePositionMap[contentPosition],
     ...rest
-  }, children?.length ? children : /* @__PURE__ */ import_react29.default.createElement(Placeholder_default, {
+  }, children?.length ? children : /* @__PURE__ */ import_react29.default.createElement(placeholder_default, {
     element: "Slide",
     className: "wv-slide-placeholder"
   }, "Drag and drop elements here")));
@@ -1500,57 +1549,57 @@ Slide.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Slide_default = Slide;
+var slide_default = Slide;
 
 // src/elements/index.ts
 var Elements = {
   Countdown: {
-    Component: Countdown_default,
+    Component: countdown_default,
     type: "countdown",
     defaultCss: css3
   },
   Button: {
-    Component: Button_default,
+    Component: button_default,
     type: "button",
     defaultCss: css
   },
   Container: {
-    Component: Container_default,
+    Component: container_default,
     type: "container",
     defaultCss: css2
   },
   Image: {
-    Component: Image_default,
+    Component: image_default,
     type: "image",
     defaultCss: css4
   },
   Layout: {
-    Component: Layout_default,
+    Component: layout_default,
     type: "layout",
     defaultCss: css5
   },
   Map: {
-    Component: Map_default,
+    Component: map_default,
     type: "map",
     defaultCss: css6
   },
   Text: {
-    Component: Text_default,
+    Component: text_default,
     type: "text",
     defaultCss: css7
   },
   Video: {
-    Component: Video_default,
+    Component: video_default,
     type: "video",
     defaultCss: css8
   },
   Slideshow: {
-    Component: Slideshow_default,
+    Component: slideshow_default,
     type: "slideshow",
     defaultCss: css9
   },
   Slide: {
-    Component: Slide_default,
+    Component: slide_default,
     type: "slide",
     defaultCss: css10
   }
@@ -1568,9 +1617,9 @@ var WeaverseContext = (0, import_react30.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/components/Modal/index.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
+// src/components/modal/index.tsx
+var modal_exports = {};
+__export(modal_exports, {
   Modal: () => Modal,
   ModalClose: () => ModalClose,
   ModalContent: () => ModalContent,
@@ -1580,7 +1629,7 @@ __export(Modal_exports, {
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 var import_react33 = __toESM(require("react"));
 
-// src/components/Modal/styled.ts
+// src/components/modal/styled.ts
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_react31 = require("@stitches/react");
 var overlayShow = (0, import_react31.keyframes)({
@@ -1663,7 +1712,7 @@ var StyledCloseIcon = (0, import_react31.styled)("button", {
   }
 });
 
-// src/components/Modal/useOpenChangeEffect.ts
+// src/components/modal/use-open-change-effect.ts
 var import_react32 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
@@ -1689,7 +1738,7 @@ function useOpenChangeEffect(props) {
   return handleOpenChange;
 }
 
-// src/components/Modal/index.tsx
+// src/components/modal/index.tsx
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
@@ -1747,7 +1796,7 @@ var ModalClose = (0, import_react33.forwardRef)(
   }
 );
 
-// src/components/Spinner.tsx
+// src/components/spinner.tsx
 var import_react34 = __toESM(require("react"));
 function Spinner() {
   return /* @__PURE__ */ import_react34.default.createElement("span", {
@@ -1758,7 +1807,7 @@ function Spinner() {
   }));
 }
 
-// src/components/Tooltip.tsx
+// src/components/tooltip.tsx
 var import_react35 = __toESM(require("react"));
 function Tooltip({ children }) {
   return /* @__PURE__ */ import_react35.default.createElement("span", {
@@ -1766,7 +1815,7 @@ function Tooltip({ children }) {
   }, children);
 }
 
-// src/components/Slider/index.tsx
+// src/components/slider/index.tsx
 var import_clsx6 = __toESM(require("clsx"));
 var import_react36 = require("keen-slider/react");
 var import_react37 = __toESM(require("react"));
@@ -1817,9 +1866,9 @@ function Slider(props) {
 var Components = {
   Background: Background2,
   Icon,
-  ModalComponents: Modal_exports,
+  ModalComponents: modal_exports,
   Overlay: Overlay2,
-  Placeholder: Placeholder_default,
+  Placeholder: placeholder_default,
   Spinner,
   Slider,
   Tooltip

package/dist/index.mjs

@@ -11,7 +11,7 @@ export * from "@weaverse/core";
 import { Weaverse } from "@weaverse/core";
 import { createContext } from "react";
 
-// src/elements/Button.tsx
+// src/elements/button.tsx
 import * as React from "react";
 import { useContext } from "react";
 var Button = React.forwardRef((props, ref) => {
@@ -56,9 +56,9 @@ var css = {
     }
   }
 };
-var Button_default = Button;
+var button_default = Button;
 
-// src/elements/Container.tsx
+// src/elements/container.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
 var Container = forwardRef2(
   (props, ref) => {
@@ -79,9 +79,9 @@ var css2 = {
   }
 };
 Container.defaultProps = {};
-var Container_default = Container;
+var container_default = Container;
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect } from "react";
 
 // src/constant/index.ts
@@ -114,7 +114,7 @@ function getVimeoId(url) {
   return match ? match[1] : null;
 }
 
-// src/elements/Countdown/TimerBlock.tsx
+// src/elements/countdown/timer-block.tsx
 import React3 from "react";
 function TimerBlock({ value, label }) {
   return /* @__PURE__ */ React3.createElement("div", {
@@ -126,7 +126,7 @@ function TimerBlock({ value, label }) {
   }, label));
 }
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 var Countdown = forwardRef3(
   (props, ref) => {
     const { isDesignMode } = useContext2(WeaverseContext);
@@ -239,9 +239,9 @@ Countdown.defaultProps = {
   showLabel: true,
   showColon: true
 };
-var Countdown_default = Countdown;
+var countdown_default = Countdown;
 
-// src/elements/Image.tsx
+// src/elements/image.tsx
 import React5 from "react";
 var Image = React5.forwardRef(
   (props, ref) => {
@@ -298,12 +298,12 @@ Image.defaultProps = {
   openLinkInNewTab: false,
   linkTo: ""
 };
-var Image_default = Image;
+var image_default = Image;
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 import React8, { forwardRef as forwardRef4 } from "react";
 
-// src/elements/Layout/Background.tsx
+// src/elements/layout/Background.tsx
 import React6 from "react";
 function Background(props) {
   let { bgColor, imgUrl, objectFit, objectPosition } = props;
@@ -326,7 +326,7 @@ function Background(props) {
   return null;
 }
 
-// src/elements/Layout/Overlay.tsx
+// src/elements/layout/Overlay.tsx
 import React7 from "react";
 function Overlay(props) {
   let { enableOverlay, overlayOpacity } = props;
@@ -342,7 +342,7 @@ function Overlay(props) {
   return null;
 }
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 var Layout = forwardRef4((props, ref) => {
   let {
     children,
@@ -437,9 +437,9 @@ Layout.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Layout_default = Layout;
+var layout_default = Layout;
 
-// src/elements/Map.tsx
+// src/elements/map.tsx
 import React9, { forwardRef as forwardRef5 } from "react";
 var Map = forwardRef5((props, ref) => {
   let { place, zoom, ...rest } = props;
@@ -471,9 +471,9 @@ Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
 };
-var Map_default = Map;
+var map_default = Map;
 
-// src/elements/Text.tsx
+// src/elements/text.tsx
 import * as React10 from "react";
 var Text = React10.forwardRef(
   (props, ref) => {
@@ -502,12 +502,12 @@ var css7 = {
 Text.defaultProps = {
   value: "<p>The quick brown fox jumps over the lazy dog</p>"
 };
-var Text_default = Text;
+var text_default = Text;
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 import React14, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
 
-// src/elements/Video/HTMLVideo.tsx
+// src/elements/video/html-video.tsx
 import React11 from "react";
 function HTMLVideo(props) {
   let { src, type, controls, autoPlay, loop, muted } = props;
@@ -527,7 +527,7 @@ function HTMLVideo(props) {
   }), "Your browser does not support the video tag.");
 }
 
-// src/elements/Video/Vimeo.tsx
+// src/elements/video/vimeo.tsx
 import React12 from "react";
 function Vimeo(props) {
   let { vimeoId, controls, autoPlay, loop, muted } = props;
@@ -541,7 +541,7 @@ function Vimeo(props) {
   });
 }
 
-// src/elements/Video/Youtube.tsx
+// src/elements/video/youtube.tsx
 import React13 from "react";
 function Youtube(props) {
   let { youtubeId, controls, autoPlay, loop, muted } = props;
@@ -557,12 +557,11 @@ function Youtube(props) {
     src: youtubeSrc,
     width: "100%",
     height: "100%",
-    allowFullScreen: true,
     allow
   });
 }
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 var Video = forwardRef7((props, ref) => {
   let { isDesignMode } = useContext3(WeaverseContext);
   let {
@@ -624,24 +623,24 @@ Video.defaultProps = {
   autoPlay: true,
   muted: true
 };
-var Video_default = Video;
+var video_default = Video;
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 import { css as stitchesCss } from "@stitches/react";
 import clsx5 from "clsx";
 import React20, { forwardRef as forwardRef8 } from "react";
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 import { styled } from "@stitches/react";
 import clsx2 from "clsx";
 import React17 from "react";
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 import React16 from "react";
 
-// src/components/Icons/Phosphor.tsx
-var Phosphor_exports = {};
-__export(Phosphor_exports, {
+// src/components/icons/phosphor.tsx
+var phosphor_exports = {};
+__export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
   CircleNotch: () => CircleNotch,
@@ -650,6 +649,7 @@ __export(Phosphor_exports, {
   Minus: () => Minus,
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
+  Storefront: () => Storefront,
   X: () => X
 });
 import React15 from "react";
@@ -851,6 +851,55 @@ var ShoppingCart = (props) => {
     strokeWidth: "16"
   }));
 };
+var Storefront = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M96,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M160,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M224,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }));
+};
 var Eye = (props) => {
   return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -882,10 +931,10 @@ var Eye = (props) => {
   }));
 };
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 import clsx from "clsx";
 function Icon({ name, className, ...props }) {
-  let WeaverseIcon = Phosphor_exports[name];
+  let WeaverseIcon = phosphor_exports[name];
   let cls = clsx("wv-icon", className);
   return /* @__PURE__ */ React16.createElement(WeaverseIcon, {
     className: cls,
@@ -893,7 +942,7 @@ function Icon({ name, className, ...props }) {
   });
 }
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 function Arrows(props) {
   let { currentSlide, instanceRef, className, offset } = props;
   let isFirst = currentSlide === 0;
@@ -968,7 +1017,7 @@ var StyledArrows = styled("div", {
   }
 });
 
-// src/components/Slider/Dots.tsx
+// src/components/slider/dots.tsx
 import { styled as styled2 } from "@stitches/react";
 import clsx3 from "clsx";
 import React18 from "react";
@@ -1039,11 +1088,11 @@ var StyledDots = styled2("div", {
   }
 });
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 import { useKeenSlider } from "keen-slider/react";
 import React19, { useContext as useContext4, useEffect as useEffect2, useState } from "react";
 
-// src/components/Slider/AutoplayPlugin.ts
+// src/components/slider/autoplay-plugin.ts
 function AutoplayPlugin(changeSlidesEvery) {
   return (slider) => {
     let timeout;
@@ -1076,7 +1125,7 @@ function AutoplayPlugin(changeSlidesEvery) {
   };
 }
 
-// src/components/Slider/ResizePlugin.ts
+// src/components/slider/resize-plugin.ts
 var ResizePlugin = (slider) => {
   let observer = new ResizeObserver(() => slider.update());
   slider.on("created", () => {
@@ -1135,7 +1184,7 @@ function loadCSS(attrs) {
   });
 }
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 function useSlideshowConfigs(props) {
   let {
     animation,
@@ -1208,7 +1257,7 @@ function useSlideshowConfigs(props) {
   };
 }
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 var Slideshow = forwardRef8((props, ref) => {
   let {
     animation,
@@ -1289,12 +1338,12 @@ Slideshow.defaultProps = {
   autoRotate: false,
   changeSlidesEvery: 5
 };
-var Slideshow_default = Slideshow;
+var slideshow_default = Slideshow;
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 import React24, { forwardRef as forwardRef10 } from "react";
 
-// src/components/Background.tsx
+// src/components/background.tsx
 import { styled as styled3 } from "@stitches/react";
 import React21 from "react";
 function Background2(props) {
@@ -1334,7 +1383,7 @@ var StyledBackground = styled3("div", {
   }
 });
 
-// src/components/Overlay.tsx
+// src/components/overlay.tsx
 import { styled as styled4 } from "@stitches/react";
 import React22 from "react";
 function Overlay2(props) {
@@ -1354,7 +1403,7 @@ var StyledOverlay = styled4("div", {
   backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
 });
 
-// src/components/Placeholder.tsx
+// src/components/placeholder.tsx
 import React23, { forwardRef as forwardRef9 } from "react";
 var Placeholder = forwardRef9(
   (props, ref) => {
@@ -1369,9 +1418,9 @@ var Placeholder = forwardRef9(
     }, element), /* @__PURE__ */ React23.createElement("div", null, children));
   }
 );
-var Placeholder_default = Placeholder;
+var placeholder_default = Placeholder;
 
-// src/elements/Slideshow/position.ts
+// src/elements/slideshow/position.ts
 var slidePositionMap = {
   "top left": {
     justifyContent: "flex-start",
@@ -1411,7 +1460,7 @@ var slidePositionMap = {
   }
 };
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 var Slide = forwardRef10((props, ref) => {
   let {
     contentPosition,
@@ -1440,7 +1489,7 @@ var Slide = forwardRef10((props, ref) => {
     ref,
     style: slidePositionMap[contentPosition],
     ...rest
-  }, children?.length ? children : /* @__PURE__ */ React24.createElement(Placeholder_default, {
+  }, children?.length ? children : /* @__PURE__ */ React24.createElement(placeholder_default, {
     element: "Slide",
     className: "wv-slide-placeholder"
   }, "Drag and drop elements here")));
@@ -1468,57 +1517,57 @@ Slide.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Slide_default = Slide;
+var slide_default = Slide;
 
 // src/elements/index.ts
 var Elements = {
   Countdown: {
-    Component: Countdown_default,
+    Component: countdown_default,
     type: "countdown",
     defaultCss: css3
   },
   Button: {
-    Component: Button_default,
+    Component: button_default,
     type: "button",
     defaultCss: css
   },
   Container: {
-    Component: Container_default,
+    Component: container_default,
     type: "container",
     defaultCss: css2
   },
   Image: {
-    Component: Image_default,
+    Component: image_default,
     type: "image",
     defaultCss: css4
   },
   Layout: {
-    Component: Layout_default,
+    Component: layout_default,
     type: "layout",
     defaultCss: css5
   },
   Map: {
-    Component: Map_default,
+    Component: map_default,
     type: "map",
     defaultCss: css6
   },
   Text: {
-    Component: Text_default,
+    Component: text_default,
     type: "text",
     defaultCss: css7
   },
   Video: {
-    Component: Video_default,
+    Component: video_default,
     type: "video",
     defaultCss: css8
   },
   Slideshow: {
-    Component: Slideshow_default,
+    Component: slideshow_default,
     type: "slideshow",
     defaultCss: css9
   },
   Slide: {
-    Component: Slide_default,
+    Component: slide_default,
     type: "slide",
     defaultCss: css10
   }
@@ -1536,9 +1585,9 @@ var WeaverseContext = createContext({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/components/Modal/index.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
+// src/components/modal/index.tsx
+var modal_exports = {};
+__export(modal_exports, {
   Modal: () => Modal,
   ModalClose: () => ModalClose,
   ModalContent: () => ModalContent,
@@ -1548,7 +1597,7 @@ __export(Modal_exports, {
 import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
 import React25, { forwardRef as forwardRef11 } from "react";
 
-// src/components/Modal/styled.ts
+// src/components/modal/styled.ts
 import { Content, Overlay as Overlay3, Title } from "@radix-ui/react-dialog";
 import { keyframes, styled as styled5 } from "@stitches/react";
 var overlayShow = keyframes({
@@ -1631,7 +1680,7 @@ var StyledCloseIcon = styled5("button", {
   }
 });
 
-// src/components/Modal/useOpenChangeEffect.ts
+// src/components/modal/use-open-change-effect.ts
 import { useContext as useContext5, useEffect as useEffect3 } from "react";
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
@@ -1657,7 +1706,7 @@ function useOpenChangeEffect(props) {
   return handleOpenChange;
 }
 
-// src/components/Modal/index.tsx
+// src/components/modal/index.tsx
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
@@ -1715,7 +1764,7 @@ var ModalClose = forwardRef11(
   }
 );
 
-// src/components/Spinner.tsx
+// src/components/spinner.tsx
 import React26 from "react";
 function Spinner() {
   return /* @__PURE__ */ React26.createElement("span", {
@@ -1726,7 +1775,7 @@ function Spinner() {
   }));
 }
 
-// src/components/Tooltip.tsx
+// src/components/tooltip.tsx
 import React27 from "react";
 function Tooltip({ children }) {
   return /* @__PURE__ */ React27.createElement("span", {
@@ -1734,7 +1783,7 @@ function Tooltip({ children }) {
   }, children);
 }
 
-// src/components/Slider/index.tsx
+// src/components/slider/index.tsx
 import clsx6 from "clsx";
 import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
 import React28, { useState as useState2 } from "react";
@@ -1785,9 +1834,9 @@ function Slider(props) {
 var Components = {
   Background: Background2,
   Icon,
-  ModalComponents: Modal_exports,
+  ModalComponents: modal_exports,
   Overlay: Overlay2,
-  Placeholder: Placeholder_default,
+  Placeholder: placeholder_default,
   Spinner,
   Slider,
   Tooltip
@@ -1801,12 +1850,12 @@ var SliderComponents = {
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React29, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState3 } from "react";
+import React29, { useContext as useContext6, useEffect as useEffect4, useRef, useState as useState3 } from "react";
 var WeaverseRoot = ({ context }) => {
   let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
   let renderRoot = () => setData({});
-  useEffect5(() => {
+  useEffect4(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1832,7 +1881,7 @@ var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
   let [data, setData] = useState3(instance.data);
   let { id, type, childIds = [], css: css11, className, ...rest } = data;
-  useEffect5(() => {
+  useEffect4(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (isBrowser && !instance.ref.current) {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.64",
+  "version": "0.7.65",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "0.7.64",
+    "@weaverse/core": "0.7.65",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }