@windstream/react-shared-components 0.1.54 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/next-image/index.tsx

@@ -1,13 +1,19 @@
 "use client";
 
 import { forwardRef } from "react";
-import NextJsImage, {
+import NextJsImageImport, {
   type ImageLoaderProps,
   type ImageProps as NextImageProps,
 } from "next/image";
 
 import { cx } from "@shared/utils";
 
+// Handle CJS/ESM interop: next/image default export may be wrapped as { default: ... }
+const NextJsImage =
+  typeof (NextJsImageImport as any).default === "function"
+    ? (NextJsImageImport as any).default
+    : NextJsImageImport;
+
 export interface NextImageComponentProps extends NextImageProps {
   className?: string;
 }

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

@@ -1,76 +1,76 @@
-import React from "react";
-import Button from "../button";
-import { BreadcrumbNavigationProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-
-export const BreadcrumbNavigation: React.FC<
-  BreadcrumbNavigationProps
-> = props => {
-  const { links = [], textColor = "dark", maxWidth = true } = props;
-  const color =
-    textColor === "dark"
-      ? "text-white xl:text-text"
-      : "text-text xl:text-white";
-  if (!links.length) return null;
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
-    >
-      <ol
-        className={
-          "relative right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 xl:absolute xl:mx-auto xl:flex-wrap xl:px-3"
-        }
-      >
-        {links.map((link, index) => {
-          const { image, ...linkProps } = link;
-          const imageSrc = image?.url
-            ? image.url.startsWith("//")
-              ? `https:${image.url}`
-              : image.url
-            : "";
-          const isLast = index === links.length - 1;
-          return !isLast ? (
-            <li key={index} className="flex flex-none items-center">
-              {imageSrc && (
-                <NextImage
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2"
-                />
-              )}
-              <Button
-                {...linkProps}
-                linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
-                linkVariant="unstyled"
-              />
-              <MaterialIcon name="chevron_right" className={`${color} `} />
-            </li>
-          ) : (
-            <li key={index} className="flex min-w-0 items-center">
-              {imageSrc && (
-                <NextImage
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2"
-                />
-              )}
-              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
-                {link.buttonLabel}
-              </Text>
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-export default BreadcrumbNavigation;
+import React from "react";
+import Button from "../button";
+import { BreadcrumbNavigationProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+
+export const BreadcrumbNavigation: React.FC<
+  BreadcrumbNavigationProps
+> = props => {
+  const { links = [], textColor = "dark", maxWidth = true } = props;
+  const color =
+    textColor === "dark"
+      ? "text-white xl:text-text"
+      : "text-text xl:text-white";
+  if (!links.length) return null;
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
+    >
+      <ol
+        className={
+          "relative right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 xl:absolute xl:mx-auto xl:flex-wrap xl:px-3"
+        }
+      >
+        {links.map((link, index) => {
+          const { image, ...linkProps } = link;
+          const imageSrc = image?.url
+            ? image.url.startsWith("//")
+              ? `https:${image.url}`
+              : image.url
+            : "";
+          const isLast = index === links.length - 1;
+          return !isLast ? (
+            <li key={index} className="flex flex-none items-center">
+              {imageSrc && (
+                <NextImage
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2"
+                />
+              )}
+              <Button
+                {...linkProps}
+                linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
+                linkVariant="unstyled"
+              />
+              <MaterialIcon name="chevron_right" className={`${color} `} />
+            </li>
+          ) : (
+            <li key={index} className="flex min-w-0 items-center">
+              {imageSrc && (
+                <NextImage
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2"
+                />
+              )}
+              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
+                {link.buttonLabel}
+              </Text>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default BreadcrumbNavigation;