@windstream/react-shared-components 0.0.10 → 0.0.11

package/src/components/view-cart-button/index.tsx

@@ -1,39 +1,39 @@
-import { cx } from "@shared/utils";
-import { Button } from "../button";
-import { MaterialIcon } from "../material-icon";
-import { Text } from "../text";
-import { ViewCartButtonProps } from "./types";
-const baseClasses =
-  "btn-medium rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
-export const ViewCartButton: React.FC<ViewCartButtonProps> = (props) => {
-  const { cartTotalText, onClick, isOpen, ...rest } = props;
-  return (
-    <Button
-      className={cx(baseClasses, "btn-small w-full border-border pl-6 pr-4 md:btn-medium")}
-      onClick={onClick}
-      {...rest}
-    >
-      <div className="flex w-full items-center justify-center gap-2">
-        <div className="flex flex-col items-center justify-center">
-          <Text className="footnote -mb-1 text-text-secondary sm:body3">
-            View cart
-          </Text>
-          <Text className="body3 font-bold md:body1" data-testid="cart-total">
-            {cartTotalText}
-          </Text>
-        </div>
-        <MaterialIcon
-          name="keyboard_arrow_up"
-          size={24}
-          fill={0}
-          className={cx(
-            "h-6 w-6 transition-transform",
-            isOpen ? "rotate-180" : "rotate-0"
-          )}
-        />
-      </div>
-    </Button>
-  )
-}
-
+import { cx } from "@shared/utils";
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { Text } from "../text";
+import { ViewCartButtonProps } from "./types";
+const baseClasses =
+  "btn-medium rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
+export const ViewCartButton: React.FC<ViewCartButtonProps> = (props) => {
+  const { cartTotalText, onClick, isOpen, ...rest } = props;
+  return (
+    <Button
+      className={cx(baseClasses, "btn-small w-full border-border pl-6 pr-4 md:btn-medium")}
+      onClick={onClick}
+      {...rest}
+    >
+      <div className="flex w-full items-center justify-center gap-2">
+        <div className="flex flex-col items-center justify-center">
+          <Text className="footnote -mb-1 text-text-secondary sm:body3">
+            View cart
+          </Text>
+          <Text className="body3 font-bold md:body1" data-testid="cart-total">
+            {cartTotalText}
+          </Text>
+        </div>
+        <MaterialIcon
+          name="keyboard_arrow_up"
+          size={24}
+          fill={0}
+          className={cx(
+            "h-6 w-6 transition-transform",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        />
+      </div>
+    </Button>
+  )
+}
+
 export type { ViewCartButtonProps } from "./types";

package/src/components/view-cart-button/types.ts

@@ -1,5 +1,5 @@
-export type ViewCartButtonProps = {
-  cartTotalText: string;
-  onClick: () => void;
-  isOpen: boolean;
+export type ViewCartButtonProps = {
+  cartTotalText: string;
+  onClick: () => void;
+  isOpen: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>

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

@@ -1,7 +1,7 @@
-import { AccordionProps } from "./types";
-
-export const Accordion: React.FC<{ fields: AccordionProps }> = ({ fields }) => {
-  return <div>Accordion</div>;
-};
-
-export default Accordion;
+import { AccordionProps } from "./types";
+
+export const Accordion: React.FC<{ fields: AccordionProps }> = ({ fields }) => {
+  return <div>Accordion</div>;
+};
+
+export default Accordion;

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

@@ -1,6 +1,6 @@
-import { ButtonProps } from "./types";
-
-export const Button: React.FC<{ fields: ButtonProps }> = ({ fields }) => {
-  return <div>Button Block</div>;
-};
+import { ButtonProps } from "./types";
+
+export const Button: React.FC<{ fields: ButtonProps }> = ({ fields }) => {
+  return <div>Button Block</div>;
+};
 export default Button;

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

@@ -1,7 +1,7 @@
-import { CalloutProps } from "./types";
-
-export const Callout: React.FC<{ fields: CalloutProps }> = ({ fields }) => {
-  return <div>Callout</div>;
-};
-
-export default Callout;
+import { CalloutProps } from "./types";
+
+export const Callout: React.FC<{ fields: CalloutProps }> = ({ fields }) => {
+  return <div>Callout</div>;
+};
+
+export default Callout;

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

@@ -1,7 +1,7 @@
-import { CardsProps } from "./types";
-
-export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
-  return <div>Cards</div>;
-};
-
-export default Cards;
+import { CardsProps } from "./types";
+
+export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
+  return <div>Cards</div>;
+};
+
+export default Cards;

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

@@ -1,7 +1,7 @@
-import { CarouselProps } from "./types";
-
-export const Carousel: React.FC<{ fields: CarouselProps }> = ({ fields }) => {
-  return <div>Carousel</div>;
-};
-
-export default Carousel;
+import { CarouselProps } from "./types";
+
+export const Carousel: React.FC<{ fields: CarouselProps }> = ({ fields }) => {
+  return <div>Carousel</div>;
+};
+
+export default Carousel;

package/src/contentful/blocks/cta-callout/index.tsx

@@ -0,0 +1,6 @@
+import { CtaCalloutProps } from "./types";
+
+export const CtaCallout: React.FC<CtaCalloutProps> = ({fields}) => {
+  return <div>CTA Callout Block</div>;
+};
+export default CtaCallout;

package/src/contentful/blocks/cta-callout/types.ts

@@ -0,0 +1 @@
+export type CtaCalloutProps = {};

package/src/contentful/blocks/floating-banner/index.tsx

@@ -1,7 +1,7 @@
-import { FloatingBannerProps } from "./types";
-
-export const FloatingBanner: React.FC<{fields: FloatingBannerProps}> = ({ fields }) => {
-  return <div>FloatingBanner</div>;
-};
-
-export default FloatingBanner;
+import { FloatingBannerProps } from "./types";
+
+export const FloatingBanner: React.FC<{fields: FloatingBannerProps}> = ({ fields }) => {
+  return <div>FloatingBanner</div>;
+};
+
+export default FloatingBanner;

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

@@ -1,7 +1,7 @@
-import { FooterProps } from "./types";
-
-export const Footer: React.FC<{ fields: FooterProps }> = ({ fields }) => {
-  return <div>Footer component</div>;
-};
-
-export default Footer;
+import { FooterProps } from "./types";
+
+export const Footer: React.FC<{ fields: FooterProps }> = ({ fields }) => {
+  return <div>Footer component</div>;
+};
+
+export default Footer;

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

@@ -1,7 +1,7 @@
-import { ImagePromoBarProps } from "./types";
-
-export const ImagePromoBar: React.FC<{ fields: ImagePromoBarProps }> = ({ fields }) => {
-  return <div>Image Promo Bar</div>;
-};
-
-export default ImagePromoBar;
+import { ImagePromoBarProps } from "./types";
+
+export const ImagePromoBar: React.FC<{ fields: ImagePromoBarProps }> = ({ fields }) => {
+  return <div>Image Promo Bar</div>;
+};
+
+export default ImagePromoBar;

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { PrimaryHeroProps } from "./types";
-
-export const PrimaryHero: React.FC<{ fields: PrimaryHeroProps }> = ({ fields }) => {
-  return <div>Primary Hero</div>;
-};
-
-export default PrimaryHero;
+import { PrimaryHeroProps } from "./types";
+
+export const PrimaryHero: React.FC<{ fields: PrimaryHeroProps }> = ({ fields }) => {
+  return <div>Primary Hero</div>;
+};
+
+export default PrimaryHero;

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

@@ -1,123 +1,123 @@
-// 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",
-}) => {
-    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 bgColorClasses: Record<ThemeKey, string> = {
-        blue: "bg-[#07B2E2]",
-        green: "bg-[#26B170]",
-        yellow: "bg-[#F5FF1E]",
-        purple: "bg-[#931D69]",
-        white: "bg-white",
-        navy: "bg-[#00002D]",
-    };
-
-    const isThemeKey =
-        typeof background === "string" && background in bgColorClasses;
-
-    const bgClass = isThemeKey
-        ? bgColorClasses[background as ThemeKey]
-        : undefined;
-    const bgStyle = background && !isThemeKey ? { background } : undefined;
-
-    const fillClass =
-        fill in textColorClasses
-            ? textColorClasses[fill as ThemeKey]
-            : "text-[#F5FF1E]";
-
-    if (!show) {
-        return (
-            <div className={className} style={bgStyle}>
-                {children}
-            </div>
-        );
-    }
-
-    return (
-        <div
-            className={`shape-bg ${className ?? ""} ${maxFit ? "max-content" : ""} ${bgClass ?? (!bgStyle ? "bg-white" : "")
-                }`}
-            style={bgStyle}
-        >
-            {path === "path1" && (
-                <svg
-                    className={`shape-bg-svg ${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 ${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 ${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 ${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">{children}</div>
-        </div>
-    );
-};
-
-export default ShapeBackgroundWrapper;
+// 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",
+}) => {
+    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 bgColorClasses: Record<ThemeKey, string> = {
+        blue: "bg-[#07B2E2]",
+        green: "bg-[#26B170]",
+        yellow: "bg-[#F5FF1E]",
+        purple: "bg-[#931D69]",
+        white: "bg-white",
+        navy: "bg-[#00002D]",
+    };
+
+    const isThemeKey =
+        typeof background === "string" && background in bgColorClasses;
+
+    const bgClass = isThemeKey
+        ? bgColorClasses[background as ThemeKey]
+        : undefined;
+    const bgStyle = background && !isThemeKey ? { background } : undefined;
+
+    const fillClass =
+        fill in textColorClasses
+            ? textColorClasses[fill as ThemeKey]
+            : "text-[#F5FF1E]";
+
+    if (!show) {
+        return (
+            <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 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>
+            )}
+
+            <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,35 @@
-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",
-
-    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";
-
-// 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;
-};
+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",
+
+    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";
+
+// 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;
+};

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

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

package/src/contentful/index.ts

@@ -36,4 +36,7 @@ export { Modal } from "./blocks/modal";
 export type { ModalProps } from "./blocks/modal/types";
 
 export { ShapeBackgroundWrapper } from "./blocks/shape-background-wrapper";
-export type { ShapeBackgroundWrapperProps } from "./blocks/shape-background-wrapper/types";
+export type { ShapeBackgroundWrapperProps } from "./blocks/shape-background-wrapper/types";
+
+export { CtaCallout } from "./blocks/cta-callout";
+export type { CtaCalloutProps } from "./blocks/cta-callout/types";