@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/selwynui",
-  "version": "0.0.1-8",
+  "version": "0.0.1-80",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -21,6 +21,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@hellobetterdigitalnz/selwynui": "^0.0.1-29",
+    "@tinymce/tinymce-react": "^6.3.0",
     "clsx": "^2.1.1",
     "dts": "^0.1.1",
     "es6-slide-up-down": "^1.0.0",
@@ -28,8 +30,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
+    "react-loading-skeleton": "^3.5.0",
+    "react-responsive-masonry": "^2.7.1",
+    "react-slick": "^0.31.0",
     "sass": "^1.94.1",
     "slick-carousel": "^1.8.1",
+    "video.js": "^8.23.4",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
@@ -45,10 +51,13 @@
     "@storybook/addon-vitest": "10.0.7",
     "@storybook/react": "^10.0.7",
     "@storybook/react-vite": "^10.0.7",
+    "@types/classnames": "^2.3.4",
     "@types/node": "^24.10.0",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "@types/react-responsive-masonry": "^2.7.0",
+    "@types/react-slick": "^0.23.13",
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/browser-playwright": "^4.0.8",
     "@vitest/coverage-v8": "^4.0.8",

package/src/Components/DataDisplay/Accordion/Accordion.stories.tsx

@@ -6,6 +6,8 @@ import Accordion from './Accordion.tsx';
 import AccordionItem from './AccordionItem.tsx';
 import Container from "../../Shared/Container/Container";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import Button from "../../Form/Button/Button.tsx";
+import { ArrowRight } from "@hellobetterdigitalnz/selwynui";
 
 const meta: Meta = {
   title: 'DataDisplay / Accordion',
@@ -22,7 +24,6 @@ type Story = StoryObj<typeof meta>;
 
 const AccordionTemplate: Story = {
     render: ({ items, ...args }) => {
-        // keep track of open states by index
         const [openItems, setOpenItems] = useState<Record<string, boolean>>({});
 
         const handleToggle = (id: string, value: boolean) => {
@@ -30,9 +31,8 @@ const AccordionTemplate: Story = {
         };
 
         return (
-            <ElementHolder paddingBottom="md" paddingTop="sm" pillar="visit">
-                <Container>
-                    <Accordion {...args}>
+            <ElementHolder paddingBottom="md" paddingTop="md" pillar="visit">
+                 <Accordion {...args}>
                         {items.map((item: any) => (
                             <AccordionItem
                                 key={item.index}
@@ -45,9 +45,6 @@ const AccordionTemplate: Story = {
                             </AccordionItem>
                         ))}
                     </Accordion>
-                </Container>
-
-                {/* Buttons to trigger specific IDs */}
             </ElementHolder>
         );
     },
@@ -58,31 +55,26 @@ export const Example = {
   args: {
     allowMultiple:true,
     title: 'Insights lorem ipsum dolor sit amet',
-    content: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.',
-    // image: '/img/accordion-image.svg',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
     items: [
       {
         index:'1',
         title: 'Lorem ipsum dolor',
-        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+        children: <p>Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.</p>
       },
       {
         index:'2',
         title: 'Lorem ipsum dolor',
         children: <>
-        <p>'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'</p>
+        <p>Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.</p>
+        <Button label="LEARN MORE" secondaryIcon={<ArrowRight/>} pillar="taste"/>
         <img src="/img/accordion-image.svg" alt="" />
         </>,
       },
       {
         index:'3',
         title: 'Lorem ipsum dolor',
-        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
-      {
-        index:'4',
-        title: 'Lorem ipsum dolor',
-        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+        children: <p>Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.</p>
       },
     ],
   },

package/src/Components/DataDisplay/Accordion/Accordion.tsx

@@ -2,8 +2,8 @@ import styles from "./Accordion.module.scss";
 import AccordionProvider from "./AccordionProvider";
 import AccordionProps from "./AccordionProps.tsx";
 import ScrollFadeIn from "../../Shared/ScrollFadeIn/ScrollFadeIn.tsx";
-import React, { Children, useEffect, useState } from "react";
 import AccordionBgDesign from "./accordion-bg-design.tsx";
+import { Container } from "../../Shared/index.ts";
 
 const Accordion = (props: AccordionProps) => {
   const {
@@ -11,45 +11,48 @@ const Accordion = (props: AccordionProps) => {
     allowMultiple,
     title,
     content,
-    image,
-    activeId,
-    onActiveIdChange
   } = props;
 
-  const childrenArray = Children.toArray(children);
 
-  const [isTabletOrLarger, setIsTabletOrLarger] = useState(
-    typeof window !== "undefined" ? window.innerWidth >= 768 : false
-  );
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsTabletOrLarger(window.innerWidth >= 768);
-    };
+  // const childrenArray = Children.toArray(children);
 
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // const [isTabletOrLarger, setIsTabletOrLarger] = useState(
+  //   typeof window !== "undefined" ? window.innerWidth >= 768 : false
+  // );
+  //
+  // useEffect(() => {
+  //   const handleResize = () => {
+  //     setIsTabletOrLarger(window.innerWidth >= 768);
+  //   };
+  //
+  //   window.addEventListener("resize", handleResize);
+  //   return () => window.removeEventListener("resize", handleResize);
+  // }, []);
 
   return (
     <AccordionProvider allowMultiple={allowMultiple ?? false} >
-      <div className={styles.accordionBlock}>
-        {title && (
-          <div className={styles.accordionHeading}>
+      <Container>
+        <div className={styles.accordionBlock} >
+          {title && (
+            <div className={styles.accordionHeading}>
+              <ScrollFadeIn>
+                <h2>{title}</h2>
+                <p>{content}</p>
+              </ScrollFadeIn>
+            </div>
+
+          )}
+          <div className={`${styles.accordionWrapper}`}>
             <ScrollFadeIn>
-              <h2>{title}</h2>
-              <p>{content}</p>
+              {children}
             </ScrollFadeIn>
           </div>
-
-        )}
-        <div className={`${styles.accordionWrapper}`}>
           <div className={styles.accordionBgDesignContainer}>
             <AccordionBgDesign />
           </div>
-          {children}
         </div>
-      </div>
+      </Container>
     </AccordionProvider>
   );
 };

package/src/Components/DataDisplay/Accordion/AccordionItem.tsx

@@ -132,7 +132,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                     <h4>{title}</h4>
                 </div>
                 <div className={`${styles.icon} accordionIcon`}>
-                    {isOpened ? <CaretUp /> : <CaretDown />}
+                    {isOpened ? <CaretUp/> : <CaretDown />}
                 </div>
             </div>
 
@@ -150,7 +150,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                 </div>
             </div>
 
-            <hr className={styles.accordionHorizontalLine}/>
+            <div className={styles.accordionHorizontalLine}></div>
             
         </div>
     );

package/src/Components/DataDisplay/Accordion/AccordionProps.tsx

@@ -1,4 +1,4 @@
-import {ReactNode} from "react";
+import { ReactNode } from "react";
 
 interface AccordionProps {
   allowMultiple?: boolean;
@@ -8,6 +8,7 @@ interface AccordionProps {
   image?: string;
   activeId?: number | null;
   onActiveIdChange?: (id: number | null) => void;
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
 }
 
 export default AccordionProps;

package/src/Components/DataDisplay/Accordion/accordion-bg-design.tsx

@@ -1,11 +1,11 @@
 const AccordionBgDesign = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="543" height="490" viewBox="0 0 543 490" fill="none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="639" height="577" viewBox="0 0 639 577" fill="none">
             <g opacity="0.05">
-                <path d="M0 251.765C145.603 251.765 263.669 358.442 263.669 490H0V251.765Z" fill="#92C134" />
-                <path d="M0 0.0778264C145.603 0.0778264 263.669 106.755 263.669 238.313H0V0.0778264Z" fill="#92C134" />
-                <path d="M543 489.922C543 358.364 424.934 251.687 279.331 251.687V489.922H543Z" fill="#92C134" />
-                <path d="M543 238.235C543 106.677 424.934 0 279.331 0V238.235H543Z" fill="#92C134" />
+                <path d="M639 296.466C467.655 296.466 328.715 422.083 328.715 577H639V296.466Z" fill="currentColor" />
+                <path d="M639 0.0916445C467.655 0.0916445 328.715 125.71 328.715 280.626H639V0.0916445Z" fill="currentColor" />
+                <path d="M0 576.908C0 421.992 138.94 296.374 310.285 296.374V576.908H0Z" fill="currentColor" />
+                <path d="M0 280.534C0 125.618 138.94 0 310.285 0V280.534H0Z" fill="currentColor" />
             </g>
         </svg>
     )

package/src/Components/DataDisplay/Accordion/accordion.module.scss

@@ -1,16 +1,11 @@
 .accordionBlock {
-    display: flex;
-    flex-grow: 1;
-    gap: 90px;
-
     .accordionHeading {
-        width: 50%;
-
         h2 {
             font-size: var(--font-size-h4);
             font-weight: var(--font-weight-bold);
             line-height: var(--line-height-h4);
-            padding-bottom: 72px;
+            letter-spacing: var(--letter-spacing-h4);
+            padding-bottom: 32px;
         }
 
         p {
@@ -20,71 +15,128 @@
         }
     }
 
+    .accordionBgDesignContainer {
+        display: none;
+    }
+
     .accordionWrapper {
-        width: 50%;
-    position: relative;
+
+        .title {
+            flex: 1;
+            display: flex;
+            align-items: center;
+
+            h4 {
+                flex: 1;
+                font-size: var(--font-size-body-regular);
+                font-weight: var(--font-weight-bold);
+                line-height: var(--line-height-body-regular);
+            }
+        }
+
+        .icon {
+            display: flex;
+            align-items: center;
+            margin-right: 4px;
+
+            svg {
+                width: 24px !important;
+                height: 24px !important;
+            }
+        }
 
 
         .accordion {
             display: flex;
             flex-direction: column;
             overflow: hidden;
+
+            .accordionHorizontalLine {
+                border-bottom: 1px solid var(--color-text);
+                height: 0;
+                width: 100%;
+            }
         }
 
         .header {
             display: flex;
             align-items: center;
             cursor: pointer;
+            padding: 14px 32px;
         }
 
         .accordionBodyHolder {
             .accordionBody {
-                font-size: var(--font-size-body-regular);
-                font-weight: var(--font-weight-body-regular);
-            }
-        }
 
-        .accordionHorizontalLine {
-            background: var(--color-text);
-            margin-block: 16px;
+                img {
+                    width: 100%;
+                    padding: 32px 0;
+                }
+            }
         }
 
-        .title {
-            flex: 1;
-            display: flex;
-            align-items: center;
+        .bodyInner {
+            font-size: var(--font-size-body-regular);
+            font-weight: var(--font-weight-body-regular);
+            padding-left: 32px;
 
-            h4 {
-                flex: 1;
-                font-size: var(--font-size-body-regula);
-                font-weight: var(--font-weight-bold);
+            p {
+                margin: 8px 32px 32px 0;
+                padding: 0 16px 0 0;
                 line-height: var(--line-height-body-regular);
             }
 
-            .accordionIcon {
-                display: flex;
-                align-items: center;
-                margin-right: 4px;
+            p:has(+ button) {
+                margin-bottom: 8px !important;
+            }
 
-                svg {
-                    width: 24px;
-                    height: 24px;
-                }
+            button {
+                display: inline-flex;
+                flex-wrap: nowrap;
+                margin-top: 16px;
             }
-        }
 
-        .bodyInner {
-            font-size: var(--font-size-body-regular);
-            font-weight: var(--font-weight-body-regular);
+            img {
+                width: 100%;
+                height: 450px;
+                border-radius: 12px;
+                object-fit: cover;
+            }
         }
     }
 
-    .accordionBgDesignContainer {
-        position: absolute;
-        top: -40px;
-        right: 0;
-        pointer-events: none;
-    }
+    @media screen and (min-width: 992px) {
+
+        display: flex;
+        flex-grow: 1;
+        margin: 0 -45px;
 
+        .accordionHeading {
+            width: 37%;
+            padding: 0 45px;
 
+            h2 {
+                padding-bottom: 62px;
+            }
+        }
+
+        .accordionWrapper {
+            width: 61%;
+            position: relative;
+            padding: 0 45px;
+            margin-top: 8px;
+
+            .title {
+                margin-top: 2px;
+            }
+        }
+
+        .accordionBgDesignContainer {
+            position: absolute;
+            top: 191px;
+            right: 0;
+            pointer-events: none;
+            display: block;
+        }
+    }
 }

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderTool.stories.tsx

@@ -0,0 +1,53 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+import BrandBuilderTool from "./BrandBuilderTool";
+import BrandBuilderToolWrapper from "./BrandBuilderToolWrapper/BrandBuilderToolWrapper";
+import BrandBuilderToolUploader from "./BrandBuilderToolUploader/BrandBuilderToolUploader";
+import BrandBuilderToolMain from "./BrandBuilderToolMain/BrandBuilderToolMain";
+import BrandBuilderToolTemplateSelector from "./BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector";
+import BrandBuilderToolPreview from "./BrandbuilderToolPreview/BrandBuilderToolPreview";
+import BrandBuilderToolTemplateItem from "./BrandBuilderToolTemplate/BrandBuilderToolTemplateItem";
+
+const meta: Meta = {
+  title: "DataDisplay / BrandBuilderTool",
+  component: BrandBuilderTool,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const BrandBuilderToolTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pdBillar="live" level="light">
+          <BrandBuilderTool title={'Build your brand'} description={'Lorem ipsum dolor sit amet'}>
+            <BrandBuilderToolWrapper sideBar={<BrandBuilderToolUploader/>}>
+              <BrandBuilderToolMain>
+                <BrandBuilderToolTemplateSelector>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                  <BrandBuilderToolTemplateItem/>
+                </BrandBuilderToolTemplateSelector>
+                <BrandBuilderToolPreview/>
+              </BrandBuilderToolMain>
+            </BrandBuilderToolWrapper>
+          </BrandBuilderTool>
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const BrandBuilderToolComponent = {
+  ...BrandBuilderToolTemplate
+};

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderTool.tsx

@@ -0,0 +1,23 @@
+import styles from './brandBuilder.module.scss'
+import BrandBuilderToolProps from "./BrandBuilderToolProps.tsx";
+import {Container} from "../../Shared";
+
+const BrandBuilderTool = (props : BrandBuilderToolProps) => {
+
+  const {title, description, children} = props
+
+  return <div className={styles.brandBuilder}>
+    <Container border={true}>
+      <div className={styles.header}>
+        {title && <h1>{title}</h1>}
+        {description && <p>{description}</p>}
+      </div>
+
+      <div className={styles.brandBuilderHolder}>
+        {children}
+      </div>
+    </Container>
+  </div>
+}
+
+export default BrandBuilderTool

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMain.tsx

@@ -0,0 +1,13 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolMainProps from "./BrandBuilderToolMainProps.tsx";
+
+const BrandBuilderToolMain = (props : BrandBuilderToolMainProps) =>{
+
+  const {children} = props
+
+  return <div className={styles.main}>
+    {children}
+  </div>
+}
+
+export default BrandBuilderToolMain

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMainProps.tsx

@@ -0,0 +1,7 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolMainProps {
+  children?:ReactNode
+}
+
+export default BrandBuilderToolMainProps

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolProps.tsx

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolProps{
+  title?:string
+  description?:string
+  children?:ReactNode
+}
+
+export default BrandBuilderToolProps;

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItem.tsx

@@ -0,0 +1,15 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolTemplateItemProps from "./BrandBuilderToolTemplateItemProps.tsx";
+const BrandBuilderToolTemplateItem = ({icon, iconName, active, onClick} : BrandBuilderToolTemplateItemProps) =>{
+  return <div className={styles.item}>
+    <div
+      onClick={onClick}
+      className={`${styles.itemWrapper} ${active && styles.active}`} aria-description={iconName}
+    >
+      {icon}
+      <p>{iconName}</p>
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolTemplateItem;

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItemProps.tsx

@@ -0,0 +1,10 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolTemplateItemProps{
+  icon?:ReactNode
+  iconName?: string;
+  onClick?: () => void;
+  active?: boolean;
+}
+
+export default BrandBuilderToolTemplateItemProps;

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector.tsx

@@ -0,0 +1,29 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolTemplateSelectorProps from "./BrandBuilderToolTemplateSelectorProps.tsx";
+const BrandBuilderToolTemplateSelector = (props : BrandBuilderToolTemplateSelectorProps) =>{
+
+  const {actions, children} = props
+
+  return <div className={styles.templateSelector}>
+    <div className={styles.selectorsWrapper}>
+      <div className={styles.selectors}>
+        <div className={`${styles.title} ${styles.selectorTitle}`}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+            <rect width="50" height="50" rx="25" fill="currentColor"/>
+            <path d="M34.7346 19.892C34.7346 24.464 31.4946 26.624 26.9586 28.928C23.7186 30.584 22.0986 31.772 21.9546 33.176H34.7706V38H15.0426V35.804C15.0426 30.404 19.4706 27.38 23.2866 25.148C26.9586 23.024 28.8666 21.944 28.8666 19.784C28.8666 17.84 27.6786 16.58 25.3386 16.58C22.8906 16.58 21.4506 18.452 21.3066 20.792H15.2946C15.6906 15.788 19.2186 11.864 25.3746 11.864C30.9546 11.864 34.7346 15.14 34.7346 19.892Z" fill="#EFEAE7"/>
+          </svg>
+          <h5>Select a template</h5>
+        </div>
+        <div>
+          {actions}
+        </div>
+      </div>
+      <p>Choose the image template that most closely aligns with your intended usage.</p>
+    </div>
+    <div className={styles.items}>
+      {children}
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolTemplateSelector

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelectorProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolTemplateSelectorProps {
+  actions?:ReactNode
+  children?:ReactNode
+}
+
+export default BrandBuilderToolTemplateSelectorProps

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolUploader/BrandBuilderToolUploader.tsx

@@ -0,0 +1,33 @@
+import styles from '../brandBuilder.module.scss'
+import BrandBuilderToolUploaderProps from "./BrandBuilderToolUploaderProps.tsx";
+import Masonry from "react-responsive-masonry"
+const BrandBuilderToolUploader = (props : BrandBuilderToolUploaderProps) =>{
+
+  const {action, children } = props
+
+  return <div className={styles.brandBuilderToolUploader}>
+    <div className={styles.title}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+        <rect width="50" height="50" rx="25" fill="currentColor"/>
+        <path d="M18.2427 20.18V16.076C22.6347 16.076 24.5067 14.924 25.1187 12.26H29.5827V38H23.3547V20.18H18.2427Z" fill="#EFEAE7"/>
+      </svg>
+      <h5>Upload your photos</h5>
+    </div>
+    <div className={styles.uploaderBtn}>
+      {action}
+    </div>
+    <div className={styles.uploaderDesc}>
+      <p>You can select one image or four.</p>
+      <p>
+        If you choose four, each image will be placed into its own segment of the selected shape, and the shape will automatically mask them.
+      </p>
+    </div>
+    <div className={styles.imagesUploader}>
+        <Masonry gutter={'24px'}  columnsCount={2}>
+          {children}
+        </Masonry>
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolUploader