@windstream/react-shared-components 0.0.17 → 0.0.20

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -1,7 +1,89 @@
+import React from "react";
 import { ImagePromoBarProps } from "./types";
 
-export const ImagePromoBar: React.FC<{ fields: ImagePromoBarProps }> = ({ fields }) => {
-  return <div>Image Promo Bar</div>;
+export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
+  brow,
+  showAsHeading,
+  title,
+  subTitle,
+  ctaDisclaimer,
+  disclaimer,
+  description,
+  image,
+  imageLinks,
+  mediaPosition,
+  openDescriptionLinksOnANewTab,
+  checklist,
+  secondaryCta,
+  cta,
+  videoLink,
+  maxWidth = true,
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`image-promo-bar-content ${maxWidth ? "mx-auto max-w-120" : ""}`}
+      >
+        {/* Header Section */}
+        {brow && <div>{brow}</div>}
+        {title && (showAsHeading ? <h1>{title}</h1> : <div>{title}</div>)}
+        {subTitle && <div>{subTitle}</div>}
+
+        {/* Media Section */}
+        {image && (
+          <img
+            className={`${mediaPosition ? "media-right" : "media-left"}`}
+            src={image}
+            alt={title}
+          />
+        )}
+
+        {/* Content Section */}
+        {description && <div>{description}</div>}
+        {openDescriptionLinksOnANewTab && <div>Links open in new tab: Yes</div>}
+
+        {/* Checklist Rendering */}
+        {checklist?.map((item, index) => (
+          <div key={item.anchorId || index} className="checklist-item">
+            {item.iconUrl && <img src={item.iconUrl} alt="" />}
+            <span>{item.title}</span>
+          </div>
+        ))}
+
+        {/* Image Links Collection */}
+        {imageLinks?.map((link, index) => (
+          <div key={index} className="image-link">
+            <a href={link.url}>image : {link.image}</a>
+          </div>
+        ))}
+
+        {/* Video Link Section */}
+        {videoLink?.link && (
+          <div className="video-section">
+            {videoLink.image && (
+              <img src={videoLink.image} alt="Video preview" />
+            )}
+            <div>Video URL: {videoLink.link}</div>
+            {videoLink.videoPopup && <div>Mode: Popup</div>}
+          </div>
+        )}
+
+        {/* CTAs and Disclaimers */}
+        {cta && (
+          <div className="primary-cta">
+            {/* Render Button component here */}
+          </div>
+        )}
+        {secondaryCta && (
+          <div className="secondary-cta">
+            {/* Render Button component here */}
+          </div>
+        )}
+        {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
+        {disclaimer && <div>{disclaimer}</div>}
+      </div>
+    </div>
+  );
 };
 
 export default ImagePromoBar;

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -1 +1,28 @@
-export type ImagePromoBarProps = {}
+import React from "react";
+
+export type ImagePromoBarProps = {
+  brow: string;
+  showAsHeading: boolean;
+  title: string;
+  subTitle: string;
+  image: string;
+  mediaPosition: boolean;
+  description: React.ReactNode;
+  openDescriptionLinksOnANewTab: boolean;
+  checklist: {
+    title: string;
+    iconUrl?: string;
+    anchorId?: string;
+  }[];
+  disclaimer: React.ReactNode;
+  imageLinks: { url: string; image: string }[];
+  cta: any;
+  secondaryCta: any;
+  ctaDisclaimer: React.ReactNode;
+  videoLink: {
+    image?: string;
+    videoPopup?: boolean;
+    link?: string;
+  };
+  maxWidth?: boolean;
+};

package/src/contentful/blocks/modal/Modal.stories.tsx

@@ -0,0 +1,23 @@
+import { Modal } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Contentful Blocks/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful modal block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/modal/index.tsx

@@ -1,6 +1,12 @@
 import { ModalProps } from "./types";
 
+import { Text } from "@shared/components/text";
+
 export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
-  return <div>Modal Block</div>;
+  return (
+    <div>
+      <Text>Modal Block</Text>
+    </div>
+  );
 };
-export default Modal;
+export default Modal;

package/src/contentful/blocks/modal/types.ts

@@ -1 +1 @@
-export type ModalProps = {}
+export type ModalProps = {};

package/src/contentful/blocks/navigation/Navigation.stories.tsx

@@ -0,0 +1,23 @@
+import { Navigation } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Navigation> = {
+  title: "Contentful Blocks/Navigation",
+  component: Navigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful navigation block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/navigation/index.tsx

@@ -1,7 +1,11 @@
 import { NavigationProps } from "./types";
 
-export const Navigation: React.FC<{ fields: NavigationProps }> = ({ fields }) => {
-  return <div>Navigation</div>;
+import { Text } from "@shared/components/text";
+
+export const Navigation: React.FC<{ fields: NavigationProps }> = ({
+  fields,
+}) => {
+  return <Text>Navigation</Text>;
 };
 
 export default Navigation;

package/src/contentful/blocks/navigation/types.ts

@@ -1 +1 @@
-export type NavigationProps = {}
+export type NavigationProps = {};

package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx

@@ -0,0 +1,23 @@
+import { PrimaryHero } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof PrimaryHero> = {
+  title: "Contentful Blocks/PrimaryHero",
+  component: PrimaryHero,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful primary hero block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/primary-hero/index.tsx

@@ -1,5 +1,6 @@
-import { PrimaryHeroProps } from "./types";
 import React from "react";
+import { PrimaryHeroProps } from "./types";
+
 export const PrimaryHero: React.FC<PrimaryHeroProps> = ({
   maxWidth = true,
   title,
@@ -49,8 +50,8 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = ({
         {squareImage && <div>Square Layout: {String(squareImage)}</div>}
 
         {/* Checklist */}
-        {checklist?.map((item) => (
-          <div key={item.anchorId}>Checklist Item: {item.title}</div>
+        {checklist?.map((item, index) => (
+          <div key={`checklist-${index}`}>Checklist Item: {item.title}</div>
         ))}
 
         {/* CTAs & Availability */}

package/src/contentful/blocks/primary-hero/types.ts

@@ -1,25 +1,29 @@
-export type PrimaryHeroProps = {
-    title: string;
-    showAsHeading?: boolean;
-    subTitle?: string;
-    price?: string;
-    priceSuffix?: string;
-    priceCallout?: string;
-    pricingDescription?: string;
-    pricingDescriptionDisclaimer?: string;
-    checklist?: any[];
-    logoLockup?: string;
-    checkAvailabilityEyebrow?: string;
-    primaryCtaPrefix1?: string;
-    primaryCtaPrefix2?: string;
-    primaryCta1?: any;
-    primaryCta2?: any;
-    secondaryCtaPrefix?: string;
-    secondaryCta?: any;
-    bottomLink?: any;
-    carouselImages?: string[];
-    squareImage?: boolean;
-    badgeImage?: string;
-    textColor?: string;
-    maxWidth?: boolean;
-};
+export type PrimaryHeroProps = {
+  title: string;
+  showAsHeading?: boolean;
+  subTitle?: string;
+  price?: string;
+  priceSuffix?: string;
+  priceCallout?: string;
+  pricingDescription?: string;
+  pricingDescriptionDisclaimer?: string;
+  checklist?: {
+    title: string;
+    iconUrl?: string;
+    anchorId?: string;
+  }[];
+  logoLockup?: string;
+  checkAvailabilityEyebrow?: string;
+  primaryCtaPrefix1?: string;
+  primaryCtaPrefix2?: string;
+  primaryCta1?: any;
+  primaryCta2?: any;
+  secondaryCtaPrefix?: string;
+  secondaryCta?: any;
+  bottomLink?: any;
+  carouselImages?: string[];
+  squareImage?: boolean;
+  badgeImage?: string;
+  textColor?: string;
+  maxWidth?: boolean;
+};

package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx

@@ -0,0 +1,26 @@
+import { ShapeBackgroundWrapper } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ShapeBackgroundWrapper> = {
+  title: "Contentful Blocks/ShapeBackgroundWrapper",
+  component: ShapeBackgroundWrapper,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful shape background wrapper block. Wraps children with optional SVG shape background.",
+      },
+    },
+  },
+  args: {
+    children: "Content",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/shape-background-wrapper/index.tsx

@@ -1,123 +1,124 @@
 // ShapeBackgroundWrapper.tsx
 import React from "react";
-
 import { ShapeBackgroundWrapperProps, ThemeKey } from "./types";
+
 export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
-    children,
-    background,
-    className,
-    fill = "yellow",
-    maxFit,
-    show = true,
-    path = "path2",
+  children,
+  background,
+  className,
+  fill = "yellow",
+  maxFit,
+  show = true,
+  path = "path2",
 }) => {
-    const variantClass = `${path}`;
-
-    const textColorClasses: Record<ThemeKey, string> = {
-        blue: "text-[#07B2E2]",
-        green: "text-[#26B170]",
-        yellow: "text-[#F5FF1E]",
-        purple: "text-[#931D69]",
-        white: "text-white",
-        navy: "text-[#00002D]",
-    };
+  const variantClass = `${path}`;
 
-    const bgColorClasses: Record<ThemeKey, string> = {
-        blue: "bg-[#07B2E2]",
-        green: "bg-[#26B170]",
-        yellow: "bg-[#F5FF1E]",
-        purple: "bg-[#931D69]",
-        white: "bg-white",
-        navy: "bg-[#00002D]",
-    };
+  const textColorClasses: Record<ThemeKey, string> = {
+    blue: "text-[#07B2E2]",
+    green: "text-[#26B170]",
+    yellow: "text-[#F5FF1E]",
+    purple: "text-[#931D69]",
+    white: "text-white",
+    navy: "text-[#00002D]",
+  };
 
-    const isThemeKey =
-        typeof background === "string" && background in bgColorClasses;
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+  };
 
-    const bgClass = isThemeKey
-        ? bgColorClasses[background as ThemeKey]
-        : undefined;
-    const bgStyle = background && !isThemeKey ? { background } : undefined;
+  const isThemeKey =
+    typeof background === "string" && background in bgColorClasses;
 
-    const fillClass =
-        fill in textColorClasses
-            ? textColorClasses[fill as ThemeKey]
-            : "text-[#F5FF1E]";
+  const bgClass = isThemeKey
+    ? bgColorClasses[background as ThemeKey]
+    : undefined;
+  const bgStyle = background && !isThemeKey ? { background } : undefined;
 
-    if (!show) {
-        return (
-            <div className={className} style={bgStyle}>
-                {children}
-            </div>
-        );
-    }
+  const fillClass =
+    fill in textColorClasses
+      ? textColorClasses[fill as ThemeKey]
+      : "text-[#F5FF1E]";
 
+  if (!show) {
     return (
-        <div
-            className={`shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${bgClass ?? (!bgStyle ? "bg-white" : "")
-                }`}
-            style={bgStyle}
+      <div className={className} style={bgStyle}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${
+        bgClass ?? (!bgStyle ? "bg-white" : "")
+      }`}
+      style={bgStyle}
+    >
+      {path === "path1" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2371px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
+          width="2262"
+          height="4359"
+          viewBox="0 0 2262 4359"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
         >
-            {path === "path1" && (
-                <svg
-                    className={`shape-bg-svg absolute pointer-events-none z-0 left-1/2 top-[-2371px] translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
-                    width="2262"
-                    height="4359"
-                    viewBox="0 0 2262 4359"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    aria-hidden="true"
-                    focusable="false"
-                >
-                    <path d="M1838.72 444.021C2216.45 758.242 2351.22 1060.81 2202.83 1982.25C2062.95 2851.55 1923.57 4265.14 1394.48 4348.94C1079.75 4409.66 766.955 4172.68 508.523 4003.04C340.876 3884.89 192.855 3774.9 26.6866 3661.93C-27.6562 3624.7 8.69435 3542.15 74.1261 3555.69C415.628 3626.61 686.916 3615.36 942.942 3443.48C1410.95 3163.54 1632.32 2141.02 1629.56 1543.75C1637.51 910.76 1276.06 582.318 829.643 352.709C587.562 235.528 333.508 169.963 100.699 149.757C31.9431 143.965 25.0259 47.9703 92.459 33.1281C623.196 -84.6769 1404.59 131.886 1839.84 443.573" />
-                </svg>
-            )}
-            {path === "path2" && (
-                <svg
-                    className={`shape-bg-svg absolute pointer-events-none z-0 left-1/2 top-[45.8px] translate-x-[-101%] ${variantClass} fill-current ${fillClass}`}
-                    width="3739"
-                    height="3666"
-                    viewBox="0 0 3739 3666"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    aria-hidden="true"
-                    focusable="false"
-                >
-                    <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.09 4009.1 647.09 3634.26 264.38C3417.79 27.9944 3025.37 31.7818 2716.76 13.9013C2511.72 8.81634 2327.31 8.87399 2126.55 0.511773C2060.73 -2.00127 2040.7 85.9475 2101.3 114.087C2417.76 260.743 2628.86 431.51 2731.94 722.142C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.97 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
-                </svg>
-            )}
-            {path === "path3" && (
-                <svg
-                    className={`shape-bg-svg absolute pointer-events-none z-0 top-[-2600px] left-1/2 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
-                    width="3044"
-                    height="3248"
-                    viewBox="0 0 3044 3248"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    aria-hidden="true"
-                    focusable="false"
-                >
-                    <path d="M1.21857 1353.6C-0.931975 1765.46 120.504 2015.15 791.765 2417.01C1424.98 2796.19 2407.16 3469.31 2746.34 3175.04C2955.08 3005.86 2971.76 2677.32 3002.33 2420C3016.95 2248.7 3026.23 2094.39 3043.38 1926.83C3048.81 1871.88 2976.24 1850.67 2949.63 1899.96C2810.91 2157.33 2657.35 2325.33 2408.95 2396.88C1976.88 2546.15 1201.39 2136.59 819.655 1812.63C409.231 1476.27 393.475 1067.19 486.97 656.895C542.372 438.358 637.352 239.983 749.974 79.7081C783.347 32.4684 725.487 -23.7534 679.587 11.5067C317.699 288.49 35.1358 906.671 0.328344 1354.07" />
-                </svg>
-            )}
-            {path === "path4" && (
-                <svg
-                    className={`shape-bg-svg absolute pointer-events-none z-0 left-1/2 top-[-1966.1px] translate-x-[-48%] ${variantClass} fill-current ${fillClass}`}
-                    width="3739"
-                    height="3666"
-                    viewBox="0 0 3739 3666"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    aria-hidden="true"
-                    focusable="false"
-                >
-                    <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.1 4009.1 647.091 3634.26 264.381C3417.79 27.9951 3025.37 31.7826 2716.76 13.902C2511.72 8.81709 2327.31 8.87474 2126.55 0.512528C2060.73 -2.00052 2040.7 85.9483 2101.3 114.088C2417.76 260.743 2628.86 431.51 2731.94 722.143C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.98 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
-                </svg>
-            )}
+          <path d="M1838.72 444.021C2216.45 758.242 2351.22 1060.81 2202.83 1982.25C2062.95 2851.55 1923.57 4265.14 1394.48 4348.94C1079.75 4409.66 766.955 4172.68 508.523 4003.04C340.876 3884.89 192.855 3774.9 26.6866 3661.93C-27.6562 3624.7 8.69435 3542.15 74.1261 3555.69C415.628 3626.61 686.916 3615.36 942.942 3443.48C1410.95 3163.54 1632.32 2141.02 1629.56 1543.75C1637.51 910.76 1276.06 582.318 829.643 352.709C587.562 235.528 333.508 169.963 100.699 149.757C31.9431 143.965 25.0259 47.9703 92.459 33.1281C623.196 -84.6769 1404.59 131.886 1839.84 443.573" />
+        </svg>
+      )}
+      {path === "path2" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[45.8px] z-0 translate-x-[-101%] ${variantClass} fill-current ${fillClass}`}
+          width="3739"
+          height="3666"
+          viewBox="0 0 3739 3666"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.09 4009.1 647.09 3634.26 264.38C3417.79 27.9944 3025.37 31.7818 2716.76 13.9013C2511.72 8.81634 2327.31 8.87399 2126.55 0.511773C2060.73 -2.00127 2040.7 85.9475 2101.3 114.087C2417.76 260.743 2628.86 431.51 2731.94 722.142C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.97 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
+        </svg>
+      )}
+      {path === "path3" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2600px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
+          width="3044"
+          height="3248"
+          viewBox="0 0 3044 3248"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1.21857 1353.6C-0.931975 1765.46 120.504 2015.15 791.765 2417.01C1424.98 2796.19 2407.16 3469.31 2746.34 3175.04C2955.08 3005.86 2971.76 2677.32 3002.33 2420C3016.95 2248.7 3026.23 2094.39 3043.38 1926.83C3048.81 1871.88 2976.24 1850.67 2949.63 1899.96C2810.91 2157.33 2657.35 2325.33 2408.95 2396.88C1976.88 2546.15 1201.39 2136.59 819.655 1812.63C409.231 1476.27 393.475 1067.19 486.97 656.895C542.372 438.358 637.352 239.983 749.974 79.7081C783.347 32.4684 725.487 -23.7534 679.587 11.5067C317.699 288.49 35.1358 906.671 0.328344 1354.07" />
+        </svg>
+      )}
+      {path === "path4" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-1966.1px] z-0 translate-x-[-48%] ${variantClass} fill-current ${fillClass}`}
+          width="3739"
+          height="3666"
+          viewBox="0 0 3739 3666"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.1 4009.1 647.091 3634.26 264.381C3417.79 27.9951 3025.37 31.7826 2716.76 13.902C2511.72 8.81709 2327.31 8.87474 2126.55 0.512528C2060.73 -2.00052 2040.7 85.9483 2101.3 114.088C2417.76 260.743 2628.86 431.51 2731.94 722.143C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.98 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
+        </svg>
+      )}
 
-            <div className="shape-bg-content relative z-[1]">{children}</div>
-        </div>
-    );
+      <div className="shape-bg-content relative z-[1]">{children}</div>
+    </div>
+  );
 };
 
 export default ShapeBackgroundWrapper;

package/src/contentful/blocks/shape-background-wrapper/types.ts

@@ -1,35 +1,36 @@
 import React from "react";
+
 export const svgPaths: Record<string, string> = {
-    path1:
-        "M6183.96 7035.43C6943.82 6952.66 7380.2 6676.58 7990.48 5362.95C8565.72 4123.69 9615.39 2181.9 9006.03 1622.93C8652.98 1276.95 8045.02 1315.49 7564.14 1313.75C7245.36 1323.32 6958.63 1339.47 6647.54 1342.72C6545.53 1343.83 6520.42 1482.38 6615.44 1520.24C7116.37 1719.55 7456.61 1965.53 7637.69 2405.03C7996.29 3164.74 7392.93 4672.05 6870.51 5439.14C6330.05 6261.86 5579.71 6377.14 4804.66 6292.58C4390.94 6237.27 4007.68 6104.9 3689.42 5932.73C3595.96 5881.89 3503.99 5999.87 3577.76 6076.26C4158.63 6680.16 5353 7066.59 6184.5 7035.07",
-    path2:
-        "M7084.87 3152.11C6998.44 2399.11 6718.09 1965.81 5389.62 1356.34C4136.36 781.869 2172.07 -265.216 1610.51 336.377C1262.56 684.784 1303.76 1287.15 1303.81 1763.48C1314.67 2079.29 1332.06 2363.37 1336.52 2671.54C1338.02 2772.59 1477.99 2797.98 1515.86 2704.01C1715.18 2208.55 1962.22 1872.45 2405.24 1694.74C3170.84 1342.39 4694.82 1945.74 5471.2 2466.11C6303.81 3004.57 6423.02 3748.26 6340.57 4515.68C6286.3 4925.29 6154.1 5304.42 5981.5 5619.04C5930.51 5711.42 6049.97 5802.96 6126.81 5730.18C6734.29 5157.06 7119.9 3975.43 7084.95 3151.67",
-    path3:
-        "M3161.08 2245.08C2401.23 2327.85 1964.85 2603.93 1354.57 3917.56C779.331 5156.82 -270.345 7098.61 339.023 7657.58C692.066 8003.56 1300.03 7965.02 1780.91 7966.76C2099.69 7957.19 2386.42 7941.04 2697.51 7937.79C2799.52 7936.68 2824.63 7798.13 2729.61 7760.27C2228.68 7560.96 1888.43 7314.98 1707.36 6875.48C1348.76 6115.77 1952.12 4608.46 2474.54 3841.37C3015 3018.65 3765.34 2903.37 4540.39 2987.93C4954.11 3043.24 5337.36 3175.61 5655.63 3347.77C5749.09 3398.62 5841.06 3280.64 5767.29 3204.25C5186.41 2600.35 3992.04 2213.93 3160.55 2245.44",
-    path4:
-        "M2260.18 6128.4C2346.6 6881.39 2626.96 7314.69 3955.43 7924.16C5208.69 8498.64 7172.98 9545.72 7734.98 8944.21C8082.94 8595.81 8041.74 7993.44 8041.68 7517.11C8030.82 7201.3 8013.43 6917.22 8008.98 6609.05C8007.48 6508 7867.51 6482.61 7829.64 6576.58C7630.32 7072.04 7383.27 7408.14 6940.26 7585.85C6174.65 7938.2 4650.68 7334.85 3874.29 6814.48C3041.68 6276.02 2922.48 5532.33 3004.93 4764.91C3059.2 4355.3 3191.4 3976.17 3364 3661.56C3414.98 3569.17 3295.53 3477.63 3218.68 3550.41C2611.21 4123.53 2225.6 5305.17 2260.54 6128.92",
+  path1:
+    "M6183.96 7035.43C6943.82 6952.66 7380.2 6676.58 7990.48 5362.95C8565.72 4123.69 9615.39 2181.9 9006.03 1622.93C8652.98 1276.95 8045.02 1315.49 7564.14 1313.75C7245.36 1323.32 6958.63 1339.47 6647.54 1342.72C6545.53 1343.83 6520.42 1482.38 6615.44 1520.24C7116.37 1719.55 7456.61 1965.53 7637.69 2405.03C7996.29 3164.74 7392.93 4672.05 6870.51 5439.14C6330.05 6261.86 5579.71 6377.14 4804.66 6292.58C4390.94 6237.27 4007.68 6104.9 3689.42 5932.73C3595.96 5881.89 3503.99 5999.87 3577.76 6076.26C4158.63 6680.16 5353 7066.59 6184.5 7035.07",
+  path2:
+    "M7084.87 3152.11C6998.44 2399.11 6718.09 1965.81 5389.62 1356.34C4136.36 781.869 2172.07 -265.216 1610.51 336.377C1262.56 684.784 1303.76 1287.15 1303.81 1763.48C1314.67 2079.29 1332.06 2363.37 1336.52 2671.54C1338.02 2772.59 1477.99 2797.98 1515.86 2704.01C1715.18 2208.55 1962.22 1872.45 2405.24 1694.74C3170.84 1342.39 4694.82 1945.74 5471.2 2466.11C6303.81 3004.57 6423.02 3748.26 6340.57 4515.68C6286.3 4925.29 6154.1 5304.42 5981.5 5619.04C5930.51 5711.42 6049.97 5802.96 6126.81 5730.18C6734.29 5157.06 7119.9 3975.43 7084.95 3151.67",
+  path3:
+    "M3161.08 2245.08C2401.23 2327.85 1964.85 2603.93 1354.57 3917.56C779.331 5156.82 -270.345 7098.61 339.023 7657.58C692.066 8003.56 1300.03 7965.02 1780.91 7966.76C2099.69 7957.19 2386.42 7941.04 2697.51 7937.79C2799.52 7936.68 2824.63 7798.13 2729.61 7760.27C2228.68 7560.96 1888.43 7314.98 1707.36 6875.48C1348.76 6115.77 1952.12 4608.46 2474.54 3841.37C3015 3018.65 3765.34 2903.37 4540.39 2987.93C4954.11 3043.24 5337.36 3175.61 5655.63 3347.77C5749.09 3398.62 5841.06 3280.64 5767.29 3204.25C5186.41 2600.35 3992.04 2213.93 3160.55 2245.44",
+  path4:
+    "M2260.18 6128.4C2346.6 6881.39 2626.96 7314.69 3955.43 7924.16C5208.69 8498.64 7172.98 9545.72 7734.98 8944.21C8082.94 8595.81 8041.74 7993.44 8041.68 7517.11C8030.82 7201.3 8013.43 6917.22 8008.98 6609.05C8007.48 6508 7867.51 6482.61 7829.64 6576.58C7630.32 7072.04 7383.27 7408.14 6940.26 7585.85C6174.65 7938.2 4650.68 7334.85 3874.29 6814.48C3041.68 6276.02 2922.48 5532.33 3004.93 4764.91C3059.2 4355.3 3191.4 3976.17 3364 3661.56C3414.98 3569.17 3295.53 3477.63 3218.68 3550.41C2611.21 4123.53 2225.6 5305.17 2260.54 6128.92",
 
-    path5:
-        "M1282.49 -1892.66C1660.21 -1578.44 1794.98 -1275.87 1646.6 -354.424C1506.72 514.868 1367.34 1928.46 838.242 2012.26C523.517 2072.99 210.72 1836 -47.7117 1666.37C-215.358 1548.21 -363.379 1438.22 -529.548 1325.25C-583.891 1288.03 -547.54 1205.47 -482.108 1219.01C-140.607 1289.93 130.682 1278.68 386.707 1106.8C854.714 826.863 1076.08 -195.662 1073.33 -792.933C1081.27 -1425.92 719.826 -1754.36 273.408 -1983.97C31.3272 -2101.15 -222.727 -2166.72 -455.536 -2186.92C-524.291 -2192.71 -531.208 -2288.71 -463.775 -2303.55C66.962 -2421.36 848.353 -2204.79 1283.6 -1893.11",
+  path5:
+    "M1282.49 -1892.66C1660.21 -1578.44 1794.98 -1275.87 1646.6 -354.424C1506.72 514.868 1367.34 1928.46 838.242 2012.26C523.517 2072.99 210.72 1836 -47.7117 1666.37C-215.358 1548.21 -363.379 1438.22 -529.548 1325.25C-583.891 1288.03 -547.54 1205.47 -482.108 1219.01C-140.607 1289.93 130.682 1278.68 386.707 1106.8C854.714 826.863 1076.08 -195.662 1073.33 -792.933C1081.27 -1425.92 719.826 -1754.36 273.408 -1983.97C31.3272 -2101.15 -222.727 -2166.72 -455.536 -2186.92C-524.291 -2192.71 -531.208 -2288.71 -463.775 -2303.55C66.962 -2421.36 848.353 -2204.79 1283.6 -1893.11",
 };
 
 export type ThemeKey =
-    | "blue"
-    | "green"
-    | "yellow"
-    | "purple"
-    | "white"
-    | "navy";
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";
 
 // Infers the union of keys from the svgPaths constant
 export type SvgPathKey = keyof typeof svgPaths;
 
 export type ShapeBackgroundWrapperProps = {
-    path?: SvgPathKey;
-    fill?: ThemeKey | string;
-    className?: string;
-    children?: React.ReactNode;
-    maxFit?: boolean;
-    background?: ThemeKey | string;
-    show?: boolean;
+  path?: SvgPathKey;
+  fill?: ThemeKey | string;
+  className?: string;
+  children?: React.ReactNode;
+  maxFit?: boolean;
+  background?: ThemeKey | string;
+  show?: boolean;
 };