publ-echo 0.0.13 → 0.0.15

package/dist/src/App.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Example } from "./examples";
+function App() {
+    return _jsx(Example, {});
+}
+export default App;

package/dist/src/examples/Example.d.ts

@@ -0,0 +1,7 @@
+declare const EXAMPLES: {
+    readonly NORMAL: "NORMAL";
+    readonly RESPONSIVE: "RESPONSIVE";
+};
+export type ExamplesType = keyof typeof EXAMPLES;
+declare function Example(): import("react/jsx-runtime").JSX.Element;
+export default Example;

package/dist/src/examples/Example.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import ExampleMatcher from "./ExampleMatcher";
+var EXAMPLES = {
+    NORMAL: "NORMAL",
+    RESPONSIVE: "RESPONSIVE",
+};
+function Example() {
+    var _a = useState(EXAMPLES.RESPONSIVE), example = _a[0], setExample = _a[1];
+    var _b = useState("1"), id = _b[0], setId = _b[1];
+    function onChangeSelect(e) {
+        setExample(e.target.value);
+    }
+    function onClickShuffle() {
+        setId(function (prev) { return prev + 1; });
+    }
+    return (_jsxs(S_Example, { children: [_jsx(S_InfoBody, { children: _jsx("h1", { children: "Echo:" }) }), _jsx(S_GridLayoutWrapper, { children: _jsx(ExampleMatcher, { example: example }, id) })] }));
+}
+var S_InfoBody = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: \"GT Walsheim LC\", \"Arial\", \"Helvetica\", sans-serif;\n  color: #f5f5f5;\n\n  h1 {\n    font-weight: 300;\n    font-size: 72px;\n    line-height: 1.1944;\n  }\n\n  .h1-span {\n    font-weight: 100;\n    font-size: 60px;\n  }\n\n  *::selection {\n    background: #ffe800;\n    color: #000;\n  }\n"], ["\n  font-family: \"GT Walsheim LC\", \"Arial\", \"Helvetica\", sans-serif;\n  color: #f5f5f5;\n\n  h1 {\n    font-weight: 300;\n    font-size: 72px;\n    line-height: 1.1944;\n  }\n\n  .h1-span {\n    font-weight: 100;\n    font-size: 60px;\n  }\n\n  *::selection {\n    background: #ffe800;\n    color: #000;\n  }\n"])));
+var S_Example = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  background-color: black;\n  margin-left: 40px;\n  margin-right: 40px;\n"], ["\n  height: 100%;\n  background-color: black;\n  margin-left: 40px;\n  margin-right: 40px;\n"])));
+var S_GridLayoutWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .react-grid-layout {\n    background-color: #edebe5;\n  }\n"], ["\n  .react-grid-layout {\n    background-color: #edebe5;\n  }\n"])));
+export default Example;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/examples/ExampleMatcher.d.ts

@@ -0,0 +1,6 @@
+import type { ExamplesType } from "./Example";
+type Props = {
+    example: ExamplesType;
+};
+declare function ExampleMatcher({ example }: Props): import("react/jsx-runtime").JSX.Element;
+export default ExampleMatcher;

package/dist/src/examples/ExampleMatcher.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactGridLayoutShowcase01 } from "./ReactGridLayout";
+import { ResponsiveGridLayoutShowcase01 } from "./ResponsiveGridLayout";
+function ExampleMatcher(_a) {
+    var example = _a.example;
+    switch (example) {
+        case "NORMAL":
+            return _jsx(ReactGridLayoutShowcase01, {});
+        case "RESPONSIVE":
+            return _jsx(ResponsiveGridLayoutShowcase01, {});
+    }
+}
+export default ExampleMatcher;

package/dist/{examples → src/examples}/ReactGridLayout/ReactGridLayoutShowcase01.d.ts

@@ -1,2 +1,3 @@
+import "../css/gle-styles.css";
 declare function ReactGridLayoutShowcase01(): import("react/jsx-runtime").JSX.Element;
 export default ReactGridLayoutShowcase01;

package/dist/{examples → src/examples}/ReactGridLayout/ReactGridLayoutShowcase01.js

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -16,15 +12,17 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { generateLayout } from "../utils";
-import styled from "styled-components";
-import { ReactGridLayoutPreview } from "../../lib/PreviewGLE";
 import ReactGridLayout from "../../lib/GridLayoutEditor/ReactGridLayout";
-var lay = generateLayout().slice(0, 2);
+import "../css/gle-styles.css";
+import GridBox from "../components/GridBox";
+import SampleMap from "../components/SampleMap";
 // NOTE - windowSize viewport에 맞게 Resize시키기 위한 Provider
 // const Responsive = WidthProvider(ReactGridLayout);
 function ReactGridLayoutShowcase01() {
-    var _a = useState(lay), layout = _a[0], setLayout = _a[1];
-    var _b = useState(false), isOpenPreview = _b[0], setIsOpenPreview = _b[1];
+    var _a = useState(function () {
+        return generateLayout().splice(0, 8);
+    }), layout = _a[0], setLayout = _a[1];
+    var _b = useState(false), isPreview = _b[0], setIsPreview = _b[1];
     var defaultProps = {
         width: 1280,
         // className: "layout",
@@ -50,8 +48,6 @@ function ReactGridLayoutShowcase01() {
         var node = _a.node, size = _a.size;
         return;
     };
-    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: function () { return setIsOpenPreview(true); }, children: "previewButton" }), !isOpenPreview && (_jsx(ReactGridLayout, __assign({}, defaultProps, { layout: layout, onLayoutChange: onLayoutChange, resizeHandles: ["nw", "e", "n", "ne", "s", "se", "sw", "w"], isHiddenVisibility: true, children: layout.map(function (each) { return (_jsx(S_SampleBox, { children: each.i }, each.i)); }) }))), isOpenPreview && (_jsx(ReactGridLayoutPreview, { layout: layout, props: defaultProps }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: function () { return setIsPreview(function (prev) { return !prev; }); }, children: isPreview ? "Go Edit" : "Go Preview" }), _jsx(ReactGridLayout, __assign({}, defaultProps, { layout: layout, onLayoutChange: onLayoutChange, resizeHandles: ["nw", "e", "n", "ne", "s", "se", "sw", "w"], isHiddenVisibility: true, isDraggable: !isPreview, isResizable: !isPreview, children: layout.map(function (each, index) { return (_jsx("div", { children: _jsx(GridBox, { children: _jsx(SampleMap, { order: index }) }) }, each.i)); }) }))] }));
 }
-var S_SampleBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100px;\n  height: 100px;\n  background-color: lightgray;\n  border: dodgerblue 1px solid;\n"], ["\n  width: 100px;\n  height: 100px;\n  background-color: lightgray;\n  border: dodgerblue 1px solid;\n"])));
 export default ReactGridLayoutShowcase01;
-var templateObject_1;

package/dist/src/examples/ResponsiveGridLayout/ResponsiveGridLayoutShowcase01.js

@@ -0,0 +1,73 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateWhatsAppLayout } from "../utils";
+import _ from "lodash";
+import styled from "styled-components";
+import { WidthProvider } from "../../lib/components";
+import ResponsiveGridLayout from "../../lib/GridLayoutEditor/ResponsiveGridLayout";
+import GridBox from "../components/GridBox";
+import WhatsAppDesign from "../components/WhatsAppDesign";
+// NOTE - windowSize viewport에 맞게 Resize시키기 위한 Provider
+var Responsive = WidthProvider(ResponsiveGridLayout);
+function ResponsiveGridLayoutShowcase01() {
+    var _a = useState("lg"), currentBreakpoint = _a[0], setCurrentBreakpoint = _a[1];
+    var _b = useState("vertical"), currentCompactType = _b[0], setCurrentCompactType = _b[1];
+    var _c = useState(false), mounted = _c[0], setMounted = _c[1];
+    var _d = useState({
+        lg: generateWhatsAppLayout(),
+    }), layouts = _d[0], setLayouts = _d[1];
+    var _e = useState(false), isPreview = _e[0], setIsPreview = _e[1];
+    var defaultProps = {
+        // className: "layout",
+        cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+        rowHeight: 50,
+        allowOverlap: true,
+        margin: [10, 10],
+    };
+    var onLayoutChange = function (_a) {
+        var layout = _a.layout, layouts = _a.layouts;
+        setLayouts(__assign({}, layouts));
+        console.log(layout);
+    };
+    var onBreakpointChange = function (breakpoint) {
+        setCurrentBreakpoint(breakpoint);
+    };
+    var onCompactTypeChange = function () {
+        var compactType = currentCompactType === "horizontal"
+            ? "vertical"
+            : currentCompactType === "vertical"
+                ? null
+                : "horizontal";
+        setCurrentCompactType(compactType);
+    };
+    var onWidthChange = function (containerWidth, margin, cols, containerPadding) {
+        return;
+    };
+    function generateDOM() {
+        return _.map(layouts.lg, function (l) {
+            return (_jsx("div", { className: l.static ? "static" : "", children: _jsx(GridBox, { children: _jsx(WhatsAppDesign, { id: l.i }) }) }, l.i));
+        });
+    }
+    // NOTE - window resize 적용된 Responsive
+    return (_jsxs(_Fragment, { children: [_jsxs(S_Status, { children: [_jsx(S_YelloDot, {}), isPreview ? "PREVIEW MODE" : "EDIT MODE", _jsx(S_Button, { onClick: function () { return setIsPreview(function (prev) { return !prev; }); }, children: "CHANGE" })] }), _jsx(Responsive, __assign({}, defaultProps, { layouts: layouts, onLayoutChange: onLayoutChange, resizeHandles: ["nw", "e", "n", "ne", "s", "se", "sw", "w"], isDraggable: !isPreview, isResizable: !isPreview, children: generateDOM() }))] }));
+}
+var S_YelloDot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ffe800;\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 8px;\n"], ["\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ffe800;\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 8px;\n"])));
+var S_Status = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-family: \"GT Walsheim LC\", \"Arial\", \"Helvetica\", sans-serif;\n  color: #f5f5f5;\n\n  &::selection {\n    background: #ffe800;\n    color: #000;\n  }\n\n  min-width: 50px;\n  letter-spacing: -0.02em;\n  font-size: 20px;\n  font-weight: 400;\n  margin-bottom: 5px;\n"], ["\n  display: flex;\n  align-items: center;\n  font-family: \"GT Walsheim LC\", \"Arial\", \"Helvetica\", sans-serif;\n  color: #f5f5f5;\n\n  &::selection {\n    background: #ffe800;\n    color: #000;\n  }\n\n  min-width: 50px;\n  letter-spacing: -0.02em;\n  font-size: 20px;\n  font-weight: 400;\n  margin-bottom: 5px;\n"])));
+var S_Button = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(255, 232, 0, 0.4);\n  border-radius: 50%;\n  color: #ffe800;\n  transition: border 0.4s ease-out, opacity 0.7s ease-out;\n  font-size: 12px;\n  line-height: 1;\n  height: 30px;\n  padding: 6px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: #ffe800;\n    color: black;\n    font-weight: 400;\n  }\n"], ["\n  margin-left: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(255, 232, 0, 0.4);\n  border-radius: 50%;\n  color: #ffe800;\n  transition: border 0.4s ease-out, opacity 0.7s ease-out;\n  font-size: 12px;\n  line-height: 1;\n  height: 30px;\n  padding: 6px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: #ffe800;\n    color: black;\n    font-weight: 400;\n  }\n"])));
+export default ResponsiveGridLayoutShowcase01;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/examples/components/GridBox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+declare function GridBox({ children, className }: Props): import("react/jsx-runtime").JSX.Element;
+export default GridBox;

package/dist/src/examples/components/GridBox.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+function GridBox(_a) {
+    var children = _a.children, className = _a.className;
+    return _jsx(S_GridBox, { className: className, children: children });
+}
+var S_GridBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 24px;\n  border: 1.5px solid black;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 24px;\n  border: 1.5px solid black;\n"])));
+export default GridBox;
+var templateObject_1;

package/dist/src/examples/components/Icon.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+export default function Icon({ icon, size, styles, }: {
+    icon: string;
+    size: number;
+    styles?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/examples/components/Icon.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+export default function Icon(_a) {
+    var icon = _a.icon, size = _a.size, styles = _a.styles;
+    var Icon = require("react-feather/dist/icons/".concat(icon)).default;
+    return (_jsx(S_IconWrapper, { style: styles, children: _jsx(Icon, { size: size }) }));
+}
+var S_IconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n"])));
+var templateObject_1;

package/dist/src/examples/components/Iframe.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    src: string;
+};
+declare function Iframe({ src }: Props): import("react/jsx-runtime").JSX.Element;
+export default Iframe;

package/dist/src/examples/components/Iframe.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+function Iframe(_a) {
+    var src = _a.src;
+    return (_jsx(S_Iframe, { src: src, allow: "autoplay; fullscreen; picture-in-picture", title: "Fiverr_Website_Thumbnail", "data-ready": "true" }));
+}
+var S_Iframe = styled.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100% !important;\n  height: 100% !important;\n  outline: none;\n  border: none;\n  pointer-events: none;\n"], ["\n  width: 100% !important;\n  height: 100% !important;\n  outline: none;\n  border: none;\n  pointer-events: none;\n"])));
+export default Iframe;
+var templateObject_1;

package/dist/src/examples/components/Img.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+declare function Img({ src, styles }: {
+    src: string;
+    styles?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export default Img;

package/dist/src/examples/components/Img.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+function Img(_a) {
+    var src = _a.src, styles = _a.styles;
+    return _jsx(S_Img, { style: styles, src: src });
+}
+var S_Img = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  object-fit: cover;\n  height: 100%;\n  width: 100%;\n"], ["\n  object-fit: cover;\n  height: 100%;\n  width: 100%;\n"])));
+export default Img;
+var templateObject_1;

package/dist/src/examples/components/SampleMap.d.ts

@@ -0,0 +1,4 @@
+declare function SampleMap({ order }: {
+    order: number;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export default SampleMap;

package/dist/src/examples/components/SampleMap.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Iframe from "./Iframe";
+import Img from "./Img";
+function SampleMap(_a) {
+    var order = _a.order;
+    switch (order) {
+        case 0:
+            return (_jsx(Iframe, { src: "https://player.vimeo.com/video/479330024?h=ba2f9dc9eb&title=0&muted=1&autopause=0&loop=1&background=1&quality=1080p&app_id=122963" }));
+        case 1:
+            return (_jsx(Img, { src: "https://kotoprod.wpengine.com/wp-content/uploads/2022/10/Yubo-CS-Visual-1-2-scaled.jpg" }));
+        case 2:
+            return (_jsx(Iframe, { src: "https://player.vimeo.com/video/783603552?h=2b2a1e9418&title=0&muted=1&autopause=0&loop=1&background=1&quality=1080p&app_id=122963" }));
+        case 3:
+            return (_jsx(Img, { src: "https://kotoprod.wpengine.com/wp-content/uploads/2023/02/Koto-x-Bolt_Horizontal-cover.jpg" }));
+        case 4:
+            return (_jsx(Img, { src: "https://kotoprod.wpengine.com/wp-content/uploads/2023/06/WebThumbnail_Vert.png" }));
+        case 5:
+            return (_jsx(Iframe, { src: "https://player.vimeo.com/video/842715869?h=48032adb8d&title=0&muted=1&autopause=0&loop=1&background=1&quality=1080p&app_id=122963" }));
+        case 6:
+            return (_jsx(Iframe, { src: "https://player.vimeo.com/video/549081065?h=8f6f09879c&title=0&muted=1&autopause=0&loop=1&background=1&quality=1080p&app_id=122963" }));
+        case 7:
+            return (_jsx(Img, { src: "https://kotoprod.wpengine.com/wp-content/uploads/2022/10/Koto_Meatable_CS00045_3639b3deb.jpg" }));
+        case 8:
+            return (_jsx(Img, { src: "https://kotoprod.wpengine.com/wp-content/uploads/2022/10/01_Koto_CS_BackMkt_Logo_Q100B_2628b100d.jpg" }));
+        default:
+            _jsx("div", { children: order });
+    }
+}
+export default SampleMap;

package/dist/src/examples/components/Text.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from "react";
+type Props = {
+    text: string;
+    styles?: CSSProperties;
+};
+declare function Text({ text, styles }: Props): import("react/jsx-runtime").JSX.Element;
+export default Text;

package/dist/src/examples/components/Text.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+function Text(_a) {
+    var text = _a.text, styles = _a.styles;
+    return _jsx(S_Text, { style: styles, children: text });
+}
+var S_Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+export default Text;
+var templateObject_1;

package/dist/src/examples/components/TextWIcon.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+type Props = {
+    text: string;
+    icon: string;
+    styles?: CSSProperties;
+    order: "icon-text" | "text-icon";
+    size: number;
+};
+declare function TextWIcon({ icon, text, styles, order, size }: Props): import("react/jsx-runtime").JSX.Element;
+export default TextWIcon;

package/dist/src/examples/components/TextWIcon.js

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+function TextWIcon(_a) {
+    var icon = _a.icon, text = _a.text, styles = _a.styles, order = _a.order, size = _a.size;
+    var Icon = require("react-feather/dist/icons/".concat(icon)).default;
+    if (order === "icon-text") {
+        return (_jsxs(S_Wrapper, { style: styles, children: [_jsx(Icon, { size: size }), _jsx(Text, { text: text, styles: { marginLeft: "0px", fontSize: "".concat(size, "px") } })] }));
+    }
+    return (_jsxs(S_Wrapper, { style: styles, children: [_jsx(Text, { text: text, styles: { marginRight: "0px", fontSize: "".concat(size, "px") } }), _jsx(Icon, { size: size })] }));
+}
+var S_Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n"])));
+function Text(_a) {
+    var text = _a.text, styles = _a.styles;
+    return _jsx(S_Text, { style: styles, children: text });
+}
+var S_Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 70px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  font-size: 70px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+export default TextWIcon;
+var templateObject_1, templateObject_2;

package/dist/src/examples/components/Video.d.ts

@@ -0,0 +1,4 @@
+declare function Video({ src }: {
+    src: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default Video;

package/dist/src/examples/components/Video.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+function Video(_a) {
+    var src = _a.src;
+    return _jsx(S_Video, { src: src, autoPlay: true, loop: true, muted: true });
+}
+var S_Video = styled.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
+export default Video;
+var templateObject_1;

package/dist/src/examples/components/WhatsAppDesign.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from "react";
+export declare const COLORS: {
+    green: string;
+    lightGreen: string;
+    beige: string;
+    white: string;
+};
+export declare const BLOCK_TYPES: {
+    readonly TEXT: "TEXT";
+    readonly IMAGE: "IMAGE";
+    readonly VIDEO: "VIDEO";
+    readonly IFRAME: "IFRAME";
+    readonly TEXT_W_IMG: "TEXT_W_IMG";
+    readonly TEXT_W_ICON: "TEXT_W_ICON";
+    readonly ICON: "ICON";
+};
+type BlockType = {
+    id: string;
+    type: keyof typeof BLOCK_TYPES;
+    styles: CSSProperties;
+    content: {
+        option?: Record<string, unknown>;
+        value: Record<string, unknown>;
+    };
+};
+export declare const SAMPLE_BLOCKS: BlockType[];
+declare function WhatsAppDesign({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default WhatsAppDesign;