@windstream/react-shared-components 0.1.75 → 0.1.77

package/src/contentful/blocks/search-block/index.tsx

@@ -1,90 +1,90 @@
-import React, { useState } from "react";
-import { SearchBlockProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { Input } from "@shared/components/input";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-export const SearchBlock: React.FC<SearchBlockProps> = props => {
-  const {
-    anchorId = "SearchBlock",
-    title,
-    subTitle,
-    enableHeading,
-    searchDescription,
-    searchInputPlaceholder,
-    basicCaption,
-    caption,
-    backgroundColor,
-    color,
-    onSubmit,
-  } = props;
-  const [searchText, setSearchText] = useState("");
-  const themeColorClasses = {
-    supporting: "bg-bg-fill-brand-supporting",
-    white: "bg-bg",
-    brand: "bg-bg-fill-brand",
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onSubmit?.({ searchText });
-  };
-
-  return (
-    <div
-      className={`py-10 md:py-20 ${themeColorClasses[backgroundColor]} ${color == "dark" ? "text-text" : "text-white"}`}
-      id={anchorId}
-      data-testid="search-block"
-    >
-      <div className={"flex justify-center"}>
-        <div className="w-[1200px]">
-          <div className="mb-8 text-center">
-            <Text
-              as={enableHeading ? "h1" : "h2"}
-              className={cx("heading2 md:heading1")}
-            >
-              {title}
-            </Text>
-            {subTitle && (
-              <Text as="div" className={cx("subheading2 mt-2 md:subheading1")}>
-                {subTitle}
-              </Text>
-            )}
-          </div>
-          {searchDescription ? (
-            <Text className={`heading6 text-center`}>{searchDescription}</Text>
-          ) : null}
-
-          <span className="w-full">
-            <form
-              onSubmit={handleSubmit}
-              className="flex items-center rounded-md border bg-bg transition-colors focus-within:border-border-focus"
-            >
-              <Button type="submit" className="ml-2 inline-flex">
-                <MaterialIcon name="search" className="text-text" />
-              </Button>
-              <div className="flex-grow">
-                <Input
-                  value={searchText}
-                  onChange={(e: {
-                    target: { value: React.SetStateAction<string> };
-                  }) => setSearchText(e.target.value)}
-                  placeholder={searchInputPlaceholder}
-                  containerClassName="px-4 pl-0 rounded-md flex-grow border-none"
-                  className={"body3 rounded-md text-text"}
-                />
-              </div>
-            </form>
-          </span>
-          {caption ? caption : null}
-          {basicCaption}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SearchBlock;
+import React, { useState } from "react";
+import { SearchBlockProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { Input } from "@shared/components/input";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const SearchBlock: React.FC<SearchBlockProps> = props => {
+  const {
+    anchorId = "SearchBlock",
+    title,
+    subTitle,
+    enableHeading,
+    searchDescription,
+    searchInputPlaceholder,
+    basicCaption,
+    caption,
+    backgroundColor,
+    color,
+    onSubmit,
+  } = props;
+  const [searchText, setSearchText] = useState("");
+  const themeColorClasses = {
+    supporting: "bg-bg-fill-brand-supporting",
+    white: "bg-bg",
+    brand: "bg-bg-fill-brand",
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit?.({ searchText });
+  };
+
+  return (
+    <div
+      className={`py-10 md:py-20 ${themeColorClasses[backgroundColor]} ${color == "dark" ? "text-text" : "text-white"}`}
+      id={anchorId}
+      data-testid="search-block"
+    >
+      <div className={"flex justify-center"}>
+        <div className="w-[1200px]">
+          <div className="mb-8 text-center">
+            <Text
+              as={enableHeading ? "h1" : "h2"}
+              className={cx("heading2 md:heading1")}
+            >
+              {title}
+            </Text>
+            {subTitle && (
+              <Text as="div" className={cx("subheading2 mt-2 md:subheading1")}>
+                {subTitle}
+              </Text>
+            )}
+          </div>
+          {searchDescription ? (
+            <Text className={`heading6 text-center`}>{searchDescription}</Text>
+          ) : null}
+
+          <span className="w-full">
+            <form
+              onSubmit={handleSubmit}
+              className="flex items-center rounded-md border bg-bg transition-colors focus-within:border-border-focus"
+            >
+              <Button type="submit" className="ml-2 inline-flex">
+                <MaterialIcon name="search" className="text-text" />
+              </Button>
+              <div className="flex-grow">
+                <Input
+                  value={searchText}
+                  onChange={(e: {
+                    target: { value: React.SetStateAction<string> };
+                  }) => setSearchText(e.target.value)}
+                  placeholder={searchInputPlaceholder}
+                  containerClassName="px-4 pl-0 rounded-md flex-grow border-none"
+                  className={"body3 rounded-md text-text"}
+                />
+              </div>
+            </form>
+          </span>
+          {caption ? caption : null}
+          {basicCaption}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBlock;

package/src/contentful/blocks/search-block/types.ts

@@ -1,15 +1,15 @@
-import React from "react";
-
-export type SearchBlockProps = {
-  anchorId?: string;
-  title?: string;
-  subTitle?: string;
-  searchDescription?: string;
-  searchInputPlaceholder?: string;
-  caption?: React.ReactNode;
-  basicCaption?: React.ReactNode;
-  enableHeading?: boolean;
-  backgroundColor: "supporting" | "white" | "brand";
-  color: "light" | "dark";
-  onSubmit?: (values: { searchText: string }) => void;
-};
+import React from "react";
+
+export type SearchBlockProps = {
+  anchorId?: string;
+  title?: string;
+  subTitle?: string;
+  searchDescription?: string;
+  searchInputPlaceholder?: string;
+  caption?: React.ReactNode;
+  basicCaption?: React.ReactNode;
+  enableHeading?: boolean;
+  backgroundColor: "supporting" | "white" | "brand";
+  color: "light" | "dark";
+  onSubmit?: (values: { searchText: string }) => void;
+};

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

@@ -1,26 +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 = {};
+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,124 +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",
-}) => {
-  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 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 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>
-  );
-};
-
-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 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 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>
+  );
+};
+
+export default ShapeBackgroundWrapper;

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

@@ -1,36 +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",
-
-  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/Text.stories.tsx

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