@xwadex/fesd-next 0.3.4-7.21 → 0.3.4-7.23

package/dist/components/content-builders/article4/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./baseBlock";
+export * from "./commonComponents";
+export { default as Type1Block } from "./type1Block";
+export { default as Type2Block } from "./type2Block";
+export { default as Type3Block } from "./type3Block";
+export { default as Type4Block } from "./type4Block";
+export { default as Type5Block } from "./type5Block";
+export { default as Type6Block } from "./type6Block";
+export { default as Type7Block } from "./type7Block";
+export { default as Type8Block } from "./type8Block";
+export { default as Type9Block } from "./type9Block";
+export { default as Type10Block } from "./type10Block";

package/dist/components/content-builders/article4/index.js

@@ -0,0 +1,12 @@
+export * from "./baseBlock";
+export * from "./commonComponents";
+export { default as Type1Block } from "./type1Block";
+export { default as Type2Block } from "./type2Block";
+export { default as Type3Block } from "./type3Block";
+export { default as Type4Block } from "./type4Block";
+export { default as Type5Block } from "./type5Block";
+export { default as Type6Block } from "./type6Block";
+export { default as Type7Block } from "./type7Block";
+export { default as Type8Block } from "./type8Block";
+export { default as Type9Block } from "./type9Block";
+export { default as Type10Block } from "./type10Block";

package/dist/components/content-builders/article4/type10Block.d.ts

@@ -0,0 +1,14 @@
+type ContentBlockData = {
+    imgPC?: string;
+    imgMB?: string;
+    option?: {
+        size?: 'S' | 'M' | 'L';
+        align?: 'start' | 'center' | 'end';
+        isSlice?: boolean;
+        boxColor?: string;
+        bgColor?: string;
+        rwdReverse?: 'normal' | 'reverse';
+    };
+};
+export declare const Type10Block: React.FC<ContentBlockData>;
+export default Type10Block;

package/dist/components/content-builders/article4/type10Block.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderText } from "./commonComponents";
+export const Type10Block = (props) => {
+    const { imgPC, imgMB, option, } = props;
+    const { size = "M", align = "center", isSlice = false, bgColor = "rgba(122, 140, 125, 0.7)", boxColor, rwdReverse = "normal", } = option || {};
+    const boxSize = {
+        S: "@4xl:w-[50%]",
+        M: "@4xl:w-[75%]",
+        L: "@4xl:w-[90%]",
+    };
+    const justifyMap = {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+    };
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type10Block", className: cn("@container", "w-full", "max-w-full"), children: _jsxs("div", { "data-component": "article-item-inner", className: cn("relative", "w-9/10", "max-w-[1200px]", "mx-auto", "flex", "gap-5", "overflow-hidden", "p-5", align && justifyMap[align], isSlice && "@4xl:p-0", !isSlice && "@4xl:py-15 @4xl:px-10"), children: [_jsx("div", { "data-component": "article-bgWrapper", className: cn("absolute", "top-0", "left-0", "w-full", "h-full", "bg-(--BG-color)"), style: { "--BG-color": bgColor }, children: (imgPC || imgMB) &&
+                            _jsxs("picture", { children: [imgPC && _jsx("source", { media: "(min-width: 1025px)", srcSet: imgPC }), _jsx("img", { className: cn("w-full", "h-full", "object-cover", "block"), src: imgMB, alt: '' })] }) }), _jsxs("div", { className: cn("relative", "z-1", 
+                        // "space-y-5",
+                        "grid", "grid-rows-[auto_auto]", "gap-5", "bg-(--box-color)", boxColor && "@4xl:p-10 p-5", size && boxSize[size]), style: { "--box-color": boxColor }, children: [_jsx("div", { className: cn("w-full", "@4xl:order-1", isRWDReverse && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-2", isRWDReverse && "order-1"), children: _jsx(RenderText, {}) })] })] }) }) }));
+};
+Type10Block.displayName = "Type10Block";
+export default Type10Block;

package/dist/components/content-builders/article4/type1Block.d.ts

@@ -0,0 +1,9 @@
+type ContentBlockData = {
+    className?: string;
+    option?: {
+        direction?: 'top' | 'bottom';
+        rwdReverse?: 'normal' | 'reverse';
+    };
+};
+export declare const Type1Block: React.FC<ContentBlockData>;
+export default Type1Block;

package/dist/components/content-builders/article4/type1Block.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderText } from "./commonComponents";
+export const Type1Block = (props) => {
+    const { option } = props;
+    const { direction = "top", rwdReverse = "normal", } = option || {};
+    const isReverse = direction === 'bottom';
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type1Block", className: cn("@container", "w-full", "max-w-full"), children: _jsx("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto"), children: _jsxs("div", { className: cn("grid", "grid-rows-[auto_auto]", "gap-5"), children: [_jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-2" : "@4xl:order-1", (isReverse !== isRWDReverse) && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-1" : "@4xl:order-2", (isReverse !== isRWDReverse) && "order-1"), children: _jsx(RenderText, {}) })] }) }) }) }));
+};
+Type1Block.displayName = "Type1Block";
+export default Type1Block;

package/dist/components/content-builders/article4/type2Block.d.ts

@@ -0,0 +1,9 @@
+type ContentBlockData = {
+    option?: {
+        direction?: 'right' | 'left';
+        rwdReverse?: 'normal' | 'reverse';
+        wordAlign?: 'start' | 'center' | 'end';
+    };
+};
+export declare const Type2Block: React.FC<ContentBlockData>;
+export default Type2Block;

package/dist/components/content-builders/article4/type2Block.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderText } from "./commonComponents";
+export const Type2Block = (props) => {
+    const { option } = props;
+    const { direction = "left", rwdReverse = "normal", wordAlign = "start", } = option || {};
+    const isReverse = direction === 'right';
+    const isRWDReverse = rwdReverse === 'reverse';
+    const alignMap = {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type2Block", className: cn("@container", "w-full", "max-w-full"), children: _jsx("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto"), children: _jsxs("div", { className: cn("grid", "grid-cols-1", "@4xl:grid-cols-2", "gap-x-[50px]", "gap-y-5", wordAlign && alignMap[wordAlign]), children: [_jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-2" : "@4xl:order-1", (isReverse !== isRWDReverse) && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-1" : "@4xl:order-2", (isReverse !== isRWDReverse) && "order-1"), children: _jsx(RenderText, {}) })] }) }) }) }));
+};
+Type2Block.displayName = "Type2Block";
+export default Type2Block;

package/dist/components/content-builders/article4/type3Block.d.ts

@@ -0,0 +1,8 @@
+type ContentBlockData = {
+    option?: {
+        direction?: 'right' | 'left';
+        rwdReverse?: 'normal' | 'reverse';
+    };
+};
+export declare const Type3Block: React.FC<ContentBlockData>;
+export default Type3Block;

package/dist/components/content-builders/article4/type3Block.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderText } from "./commonComponents";
+export const Type3Block = (props) => {
+    const { option } = props;
+    const { direction = "left", rwdReverse = "normal", } = option || {};
+    const isReverse = direction === 'right';
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type3Block", className: cn("@container", "w-full", "max-w-full"), children: _jsx("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto"), children: _jsxs("div", { className: cn("@4xl:after:block", "@4xl:after:clear-both", "@4xl:block", "grid", "gap-5"), children: [_jsx("div", { className: cn("w-full", "@4xl:w-1/2", "@4xl:mb-5", isReverse ? "@4xl:float-right" : "@4xl:float-left", isReverse ? "@4xl:ml-10" : "@4xl:mr-10", (isReverse !== isRWDReverse) && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", (isReverse !== isRWDReverse) && "order-1"), children: _jsx(RenderText, { paragraph: "tests the player's ability to manage. You can freely design the structure of the museum, from the planning of the exhibition hall to the location of the gift shop, laying different floors for each room, setting windows, and of course matching Create a first class museum on the wallpaper. What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world. The museum simulator Mondo Museum is a game that tests the player's ability to manage. You can freely design the structure of the museum, from the planning of the exhibition hall to the location of the gift shop, laying different floors for each room, setting windows, and of course matching Create a first class museum on the wallpaper.What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whethert tests the player's ability to manage. You can freely design the structure of the museum, from the planning of the exhibition hall to the location of the gift shop, laying different floors for each room, setting windows, and of course matching Create a first class museum on the wallpaper. What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world. The museum simulator Mondo Museum is a game that tests the player's ability to manage. You can freely design the structure of the museum, from the planning of the exhibition hall to the location of the gift shop, laying different floors for each room, setting windows, and of course matching Create a first class museum on the wallpaper.What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world. The museum simulator Mondo Museum is a game that tests the player's ability to manage. You can freely design the structure of the museum, from the planning of the exhibition hall to the location of the gift shop, laying different floors for each room, setting windows, and of course matching Create a first class museum on the wallpaper. What would the museum in your imagination look like? It's a good idea to build your favorite museum in Mondo Museum, whether it's to be displayed in a sub-category, or to show it all at once and make a sensation in the world. The museum simulator Mondo Museum is a game that tests the player's ability to manage. You can freely design the structure of the museum, from the planning of the exhibition hall to the location of the gift shop, laying different floors for each room, setting windows, and of course matching Create a first class museum on the wallpaper. What would the museum in your imagination" }) })] }) }) }) }));
+};
+Type3Block.displayName = "Type3Block";
+export default Type3Block;

package/dist/components/content-builders/article4/type4Block.d.ts

@@ -0,0 +1,27 @@
+import { ButtonItem } from "./commonComponents";
+type HeadingData = {
+    title?: string;
+    titleTag?: any;
+    titleColor?: string;
+    titleAlign?: "left" | "center" | "right";
+};
+type ContentData = {
+    subTitle?: string;
+    paragraph?: string;
+    subTitleAlign?: "left" | "center" | "right";
+    paragraphAlign?: "left" | "center" | "right";
+    buttonAlign?: "left" | "center" | "right";
+    buttonData?: ButtonItem[];
+    subTitleColor?: string;
+    paragraphColor?: string;
+    direction?: 'left' | 'right';
+};
+type ContentBlockData = {
+    option?: {
+        rwdReverse?: 'normal' | 'reverse';
+    };
+};
+export declare const Type4Block: React.FC<ContentBlockData>;
+export declare const RenderHeading: React.FC<HeadingData>;
+export declare const RenderText: React.FC<ContentData>;
+export default Type4Block;

package/dist/components/content-builders/article4/type4Block.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderBtn } from "./commonComponents";
+export const Type4Block = (props) => {
+    const { option } = props;
+    const { rwdReverse = "normal", } = option || {};
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type4Block", className: cn("@container", "w-full", "max-w-full"), children: _jsxs("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto", 
+                // "space-y-5",
+                "grid", "grid-rows-[auto_auto]", "gap-5"), children: [_jsx("div", { className: cn("w-full", "order-0"), children: _jsx(RenderHeading, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-1", isRWDReverse && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-2", isRWDReverse && "order-1"), children: _jsx(RenderText, {}) })] }) }) }));
+};
+export const RenderHeading = (props) => {
+    const { title = '標題', titleTag: TitleComponent = "h2", titleColor, titleAlign = "left", } = props;
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { className: cn("w-full"), style: {
+                "--title-color": titleColor,
+            }, children: title &&
+                _jsx(TitleComponent, { "data-component": "article-item-title", className: cn("text-xl", "font-bold", "@4xl:text-3xl", "text-(--title-color)", titleAlign && alignMap[titleAlign]), children: title }) }) }));
+};
+export const RenderText = (props) => {
+    const { subTitle = '副標題', paragraph = '內文', subTitleAlign = "left", paragraphAlign = "left", buttonAlign = "left", buttonData = [
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+    ], subTitleColor, paragraphColor, direction = "right", } = props;
+    const isReverse = direction === 'right';
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-component": "article-text-content", className: cn("w-full", "gap-x-6", "gap-y-2", "grid", "grid-cols-1", "@4xl:grid-cols-4"), style: {
+                "--subTitle-color": subTitleColor,
+                "--paragraph-color": paragraphColor,
+            }, children: [_jsx("div", { className: cn("w-full", "@4xl:col-span-1", isReverse && "@4xl:order-2"), children: subTitle &&
+                        _jsx("p", { "data-component": "article-item-subtitle", className: cn("text-m", "@4xl:text-xl", "text-gray-600", "text-(--subTitle-color)", subTitleAlign && alignMap[subTitleAlign]), children: subTitle }) }), _jsxs("div", { className: cn("space-y-2", "w-full", "@4xl:col-span-3", isReverse && "@4xl:order-1"), children: [paragraph &&
+                            _jsx("p", { "data-component": "article-item-paragraph", className: cn("text-sm", "text-gray-700", "text-(--paragraph-color)", paragraphAlign && alignMap[paragraphAlign]), children: paragraph }), buttonData && _jsx(RenderBtn, { buttonData: buttonData, buttonAlign: buttonAlign })] })] }) }));
+};
+Type4Block.displayName = "Type4Block";
+export default Type4Block;

package/dist/components/content-builders/article4/type5Block.d.ts

@@ -0,0 +1,24 @@
+import { ButtonItem } from "./commonComponents";
+type ContentData = {
+    title?: string;
+    subTitle?: string;
+    paragraph?: string;
+    titleAlign?: "left" | "center" | "right";
+    subTitleAlign?: "left" | "center" | "right";
+    paragraphAlign?: "left" | "center" | "right";
+    buttonAlign?: "left" | "center" | "right";
+    buttonData?: ButtonItem[];
+    titleTag?: any;
+    titleColor?: string;
+    subTitleColor?: string;
+    paragraphColor?: string;
+    direction?: 'left' | 'right';
+};
+type ContentBlockData = {
+    option?: {
+        rwdReverse?: 'normal' | 'reverse';
+    };
+};
+export declare const Type5Block: React.FC<ContentBlockData>;
+export declare const RenderText: React.FC<ContentData>;
+export default Type5Block;

package/dist/components/content-builders/article4/type5Block.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderBtn } from "./commonComponents";
+export const Type5Block = (props) => {
+    const { option } = props;
+    const { rwdReverse = "normal", } = option || {};
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type5Block", className: cn("@container", "w-full", "max-w-full"), children: _jsxs("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto", 
+                // "space-y-5",
+                "grid", "grid-rows-[auto_auto]", "gap-5"), children: [_jsx("div", { className: cn("w-full", "@4xl:order-1", isRWDReverse && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-2", isRWDReverse && "order-1"), children: _jsx(RenderText, {}) })] }) }) }));
+};
+export const RenderText = (props) => {
+    const { title = '標題', subTitle = '副標題', paragraph = '內文', titleAlign = "left", subTitleAlign = "left", paragraphAlign = "left", buttonAlign = "left", buttonData = [
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+    ], titleTag: TitleComponent = "h2", titleColor, subTitleColor, paragraphColor, direction = "left", } = props;
+    const isReverse = direction === 'right';
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-component": "article-text-content", className: cn("w-full", "gap-x-6", "gap-y-5", "grid", "grid-cols-1", "@4xl:grid-cols-4"), style: {
+                "--title-color": titleColor,
+                "--subTitle-color": subTitleColor,
+                "--paragraph-color": paragraphColor,
+            }, children: [_jsx("div", { className: cn("w-full", "@4xl:col-span-1", isReverse && "@4xl:order-2"), children: title &&
+                        _jsx(TitleComponent, { "data-component": "article-item-title", className: cn("text-xl", "font-bold", "@4xl:text-3xl", "text-(--title-color)", titleAlign && alignMap[titleAlign]), children: title }) }), _jsxs("div", { className: cn("w-full", "@4xl:col-span-3", isReverse && "@4xl:order-1"), children: [_jsxs("div", { className: cn("space-y-5"), children: [subTitle &&
+                                    _jsx("p", { "data-component": "article-item-subtitle", className: cn("text-m", "@4xl:text-xl", "text-gray-600", "text-(--subTitle-color)", subTitleAlign && alignMap[subTitleAlign]), children: subTitle }), paragraph &&
+                                    _jsx("p", { "data-component": "article-item-paragraph", className: cn("text-sm", "text-gray-700", "text-(--paragraph-color)", paragraphAlign && alignMap[paragraphAlign]), children: paragraph })] }), buttonData && _jsx(RenderBtn, { buttonData: buttonData, buttonAlign: buttonAlign })] })] }) }));
+};
+Type5Block.displayName = "Type5Block";
+export default Type5Block;

package/dist/components/content-builders/article4/type6Block.d.ts

@@ -0,0 +1,24 @@
+import { ButtonItem } from "./commonComponents";
+type ContentData = {
+    title?: string;
+    subTitle?: string;
+    paragraph?: string;
+    titleAlign?: "left" | "center" | "right";
+    subTitleAlign?: "left" | "center" | "right";
+    paragraphAlign?: "left" | "center" | "right";
+    buttonAlign?: "left" | "center" | "right";
+    buttonData?: ButtonItem[];
+    titleTag?: any;
+    titleColor?: string;
+    subTitleColor?: string;
+    paragraphColor?: string;
+    direction?: 'left' | 'right';
+};
+type ContentBlockData = {
+    option?: {
+        rwdReverse?: 'normal' | 'reverse';
+    };
+};
+export declare const Type6Block: React.FC<ContentBlockData>;
+export declare const RenderText: React.FC<ContentData>;
+export default Type6Block;

package/dist/components/content-builders/article4/type6Block.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderBtn } from "./commonComponents";
+export const Type6Block = (props) => {
+    const { option } = props;
+    const { rwdReverse = "normal", } = option || {};
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type6Block", className: cn("@container", "w-full", "max-w-full"), children: _jsxs("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto", 
+                // "space-y-5",
+                "grid", "grid-rows-[auto_auto]", "gap-5"), children: [_jsx("div", { className: cn("w-full", "@4xl:order-1", isRWDReverse && "order-2"), children: _jsx(RenderText, {}) }), _jsx("div", { className: cn("w-full", "@4xl:order-2", isRWDReverse && "order-1"), children: _jsx(RenderImage, {}) })] }) }) }));
+};
+export const RenderText = (props) => {
+    const { title = '標題', subTitle = '副標題', paragraph = '內文', titleAlign = "left", subTitleAlign = "left", paragraphAlign = "left", buttonAlign = "left", buttonData = [
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+        {
+            buttonText: '按鈕',
+            buttonLink: 'javascript:;',
+        },
+    ], titleTag: TitleComponent = "h2", titleColor, subTitleColor, paragraphColor, direction = "left", } = props;
+    const isReverse = direction === 'right';
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-component": "article-text-content", className: cn("w-full", "gap-x-6", "gap-y-5", "grid", "grid-cols-1", "@4xl:grid-cols-4"), style: {
+                "--title-color": titleColor,
+                "--subTitle-color": subTitleColor,
+                "--paragraph-color": paragraphColor,
+            }, children: [_jsx("div", { className: cn("w-full", "@4xl:col-span-1", isReverse && "@4xl:order-2"), children: title &&
+                        _jsx(TitleComponent, { "data-component": "article-text-title", className: cn("text-xl", "font-bold", "@4xl:text-3xl", "text-(--title-color)", titleAlign && alignMap[titleAlign]), children: title }) }), _jsxs("div", { className: cn("w-full", "@4xl:col-span-3", isReverse && "@4xl:order-1"), children: [_jsxs("div", { className: cn("space-y-5"), children: [subTitle &&
+                                    _jsx("p", { "data-component": "article-text-subtitle", className: cn("text-m", "@4xl:text-xl", "text-gray-600", "text-(--subTitle-color)", subTitleAlign && alignMap[subTitleAlign]), children: subTitle }), paragraph &&
+                                    _jsx("p", { "data-component": "article-text-paragraph", className: cn("text-sm", "text-gray-700", "text-(--paragraph-color)", paragraphAlign && alignMap[paragraphAlign]), children: paragraph })] }), buttonData && _jsx(RenderBtn, { buttonData: buttonData, buttonAlign: buttonAlign })] })] }) }));
+};
+Type6Block.displayName = "Type6Block";
+export default Type6Block;

package/dist/components/content-builders/article4/type7Block.d.ts

@@ -0,0 +1,12 @@
+type ContentBlockData = {
+    quote?: string;
+    paragraph?: string;
+    option?: {
+        quoteAlign?: 'left' | 'center' | 'right';
+        paragraphAlign?: 'left' | 'center' | 'right';
+        quoteColor?: string;
+        paragraphColor?: string;
+    };
+};
+export declare const Type7Block: React.FC<ContentBlockData>;
+export default Type7Block;

package/dist/components/content-builders/article4/type7Block.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+export const Type7Block = (props) => {
+    const { quote = '引言', paragraph = '內文', option } = props;
+    const { quoteColor, paragraphColor, quoteAlign = 'left', paragraphAlign = 'left', } = option || {};
+    const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type7Block", className: cn("@container", "w-full", "max-w-full"), children: _jsxs("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto", "space-y-5"), style: {
+                    "--quote-color": quoteColor,
+                    "--paragraph-color": paragraphColor,
+                }, children: [quote &&
+                        _jsx("q", { className: cn('block', "text-xl", "@md:text-3xl", "font-semibold", "tracking-[0.8px]", "text-(--quote-color)", quoteAlign && alignMap[quoteAlign]), children: quote }), paragraph &&
+                        _jsx("p", { className: cn("text-sm", "text-gray-700", "text-(--paragraph-color)", paragraphAlign && alignMap[paragraphAlign]), children: paragraph })] }) }) }));
+};
+Type7Block.displayName = "Type7Block";
+export default Type7Block;

package/dist/components/content-builders/article4/type8Block.d.ts

@@ -0,0 +1,11 @@
+type ContentBlockData = {
+    className?: string;
+    option?: {
+        direction?: 'top' | 'bottom';
+        rwdReverse?: 'normal' | 'reverse';
+        isSlice?: boolean;
+        fullBGColor?: string;
+    };
+};
+export declare const Type8Block: React.FC<ContentBlockData>;
+export default Type8Block;

package/dist/components/content-builders/article4/type8Block.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderText } from "./commonComponents";
+export const Type8Block = (props) => {
+    const { option } = props;
+    const { direction = "top", rwdReverse = "normal", isSlice = false, fullBGColor } = option || {};
+    const isReverse = direction === 'bottom';
+    const isRWDReverse = rwdReverse === 'reverse';
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type8Block", className: cn("@container", "w-full", "max-w-full", "py-15", "bg-(--fullBG-color)", isSlice && "mb-0"), style: {
+                "--fullBG-color": fullBGColor,
+            }, children: _jsx("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto"), children: _jsxs("div", { className: cn("grid", "grid-rows-[auto_auto]", "gap-5"), children: [_jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-2" : "@4xl:order-1", (isReverse !== isRWDReverse) && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-1" : "@4xl:order-2", (isReverse !== isRWDReverse) && "order-1"), children: _jsx(RenderText, {}) })] }) }) }) }));
+};
+Type8Block.displayName = "Type8Block";
+export default Type8Block;

package/dist/components/content-builders/article4/type9Block.d.ts

@@ -0,0 +1,11 @@
+type ContentBlockData = {
+    option?: {
+        direction?: 'right' | 'left';
+        rwdReverse?: 'normal' | 'reverse';
+        wordAlign?: 'start' | 'center' | 'end';
+        isSlice?: boolean;
+        fullBGColor?: string;
+    };
+};
+export declare const Type9Block: React.FC<ContentBlockData>;
+export default Type9Block;

package/dist/components/content-builders/article4/type9Block.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RenderImage, RenderText } from "./commonComponents";
+export const Type9Block = (props) => {
+    const { option } = props;
+    const { direction = "left", rwdReverse = "normal", wordAlign = "start", isSlice = false, fullBGColor } = option || {};
+    const isReverse = direction === "right";
+    const isRWDReverse = rwdReverse === "reverse";
+    const alignMap = {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-component": "Type9Block", className: cn("@container", "w-full", "max-w-full", "py-15", "bg-(--fullBG-color)", isSlice && "mb-0"), style: {
+                "--fullBG-color": fullBGColor,
+            }, children: _jsx("div", { "data-component": "article-item-inner", className: cn("w-9/10", "max-w-[1200px]", "mx-auto"), children: _jsxs("div", { className: cn("grid", "grid-cols-1", "@4xl:grid-cols-2", "gap-x-[50px]", "gap-y-5", wordAlign && alignMap[wordAlign]), children: [_jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-2" : "@4xl:order-1", (isReverse !== isRWDReverse) && "order-2"), children: _jsx(RenderImage, {}) }), _jsx("div", { className: cn("w-full", isReverse ? "@4xl:order-1" : "@4xl:order-2", (isReverse !== isRWDReverse) && "order-1"), children: _jsx(RenderText, {}) })] }) }) }) }));
+};
+Type9Block.displayName = "Type9Block";
+export default Type9Block;

package/dist/components/content-builders/blocks/base-block.d.ts

@@ -0,0 +1,12 @@
+import type { PuckComponent, ComponentConfig, Slot } from "@puckeditor/core";
+export interface Props {
+    textAlign?: "left" | "right";
+    textAlign2?: "top";
+    backgroundImage?: string;
+    blockview?: boolean;
+    className?: string;
+    slotTextBlock?: Slot;
+    slotMediaBlock?: Slot;
+}
+export declare const BaseBlock: PuckComponent<Props>;
+export declare const BaseBlockConfigs: ComponentConfig;

package/dist/components/content-builders/blocks/base-block.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaContentConfigs } from "./media-content";
+import { TextContentConfigs } from "./text-content";
+import { BuilderBlocksComponent } from "../content-builder-blocks";
+import { cn } from "../../../shadcns/index.js";
+export const BaseBlock = ({ textAlign = "left", textAlign2 = "top", slotTextBlock: SlotTextBlock, slotMediaBlock: SlotMediaBlock, className, puck, ...props }) => {
+    return (_jsx(BuilderBlocksComponent, { name: "BaseBlock", puck: puck, children: _jsxs("div", { "data-component": "base-block", className: cn("grid items-center justify-center overflow-hidden", "grid-cols-[1fr_1fr]", 
+            // "p-10",
+            className), ...props, children: [textAlign == "left" && _jsxs(_Fragment, { children: [SlotTextBlock && _jsx("div", { children: _jsx(SlotTextBlock, {}) }), SlotMediaBlock && _jsx("div", { children: _jsx(SlotMediaBlock, {}) })] }), textAlign == "right" && _jsxs(_Fragment, { children: [SlotMediaBlock && _jsx("div", { children: _jsx(SlotMediaBlock, {}) }), SlotTextBlock && _jsx("div", { children: _jsx(SlotTextBlock, {}) })] })] }) }));
+};
+export const BaseBlockConfigs = {
+    label: "Base Block",
+    permissions: {
+    // delete: false,
+    // drag: false,
+    // insert: false
+    },
+    fields: {
+        textAlign: {
+            label: "Content Position",
+            type: "radio",
+            options: [
+                { label: "Left", value: "left" },
+                { label: "Right", value: "right" },
+            ],
+        },
+        textAlign2: {
+            label: "Content Vertical",
+            type: "radio",
+            options: [
+                { label: "Top", value: "top" },
+                { label: "Middle", value: "middle" },
+                { label: "Bottom", value: "bottom" },
+            ],
+        },
+        backgroundImage: {
+            label: "Background Setting",
+            type: "object",
+            objectFields: {
+                isImage: {
+                    label: "Use Image",
+                    type: "radio",
+                    options: [
+                        { label: "Yes", value: "yes" },
+                        { label: "No", value: "no" },
+                    ],
+                },
+                imageAddress: {
+                    label: "Image Address",
+                    type: "text"
+                },
+                color: {
+                    label: "Color",
+                    type: "text"
+                },
+            },
+        },
+        slotTextBlock: { type: "slot", allow: ["TextContent"] },
+        slotMediaBlock: { type: "slot", allow: ["MediaContent"] },
+    },
+    // resolvePermissions: async (data, {permissions}) => {
+    //     console.log("BaseBlock resolvePermissions", data.props);
+    //     // if (data.props?.lockDelete) {
+    //     //     return {
+    //     //         ...permissions,
+    //     //         delete: false,
+    //     //         // 建議順便鎖，避免用拖拉/複製繞過「必須至少一個」
+    //     //         drag: false,
+    //     //         duplicate: false,
+    //     //     };
+    //     // }
+    //     return permissions;
+    // },
+    defaultProps: {
+        textAlign: "left",
+        textAlign2: "top",
+        backgroundImage: "no",
+        slotTextBlock: [{
+                type: "TextContent",
+                props: { ...TextContentConfigs.defaultProps, requiredInSlot: true, }
+            }],
+        slotMediaBlock: [{
+                type: "MediaContent",
+                props: { ...MediaContentConfigs.defaultProps }
+            }],
+        configs: {
+            className: ""
+        }
+    },
+    render: BaseBlock
+};

package/dist/components/content-builders/blocks/headers-block.d.ts

@@ -0,0 +1,20 @@
+import { ComponentConfig, PuckComponent } from "@puckeditor/core";
+export interface Button {
+    label?: string;
+    link?: string;
+    linkBlank?: boolean;
+    labelColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+}
+export interface TextContentProps {
+    title?: string;
+    description?: string;
+    subTitle?: string;
+    buttons?: Button[];
+    imgs?: string;
+    options?: any;
+    titleOptions?: any;
+}
+export declare const HeaderBlock: PuckComponent<any>;
+export declare const HeaderBlockConfigs: ComponentConfig;