@4alldigital/foundation-ui--gamma 1.41.0 → 1.41.2

package/dist/index.esm.js

@@ -1,8 +1,7 @@
-'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
 import cx from 'classnames';
-import { useInView, useIsomorphicLayoutEffect, animate, motion, motionValue } from 'framer-motion';
+import { useInView, useIsomorphicLayoutEffect, animate, motion, motionValue, useAnimation } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
 import { Icon as Icon$1 } from '@iconify/react';
 import { Tabs as Tabs$1, TabList, Tab, TabPanel } from 'react-tabs';
@@ -231,10 +230,10 @@ var Checkbox = React.forwardRef(function MyInput(_a, ref) {
 Checkbox.displayName = 'Checkbox';
 
 var Link = function (_a) {
-    var href = _a.href, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { return console.log('Link clicked'); } : _b, history = _a.history, target = _a.target, id = _a.id, testID = _a.testID, className = _a.className, prefetch = _a.prefetch;
+    var href = _a.href, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { return console.log('Link clicked'); } : _b, history = _a.history, target = _a.target, id = _a.id, testID = _a.testID, className = _a.className, prefetch = _a.prefetch, _c = _a.hideExternalIcon, hideExternalIcon = _c === void 0 ? false : _c;
     var linkClasses = cx('link cursor-pointer no-underline text-body-text dark:text-dark-body-text', className);
     // Check if link is external
-    var isExternal = href && href.startsWith('http');
+    var isExternal = !hideExternalIcon && href && href.startsWith('http');
     if (isExternal) {
         return (jsxs("span", { children: [jsx("a", { "data-testid": testID || id || 'Link', className: cx(linkClasses), href: href, target: "_blank", rel: "noopener noreferrer", children: children }), jsx(Icon, { name: "mdi:external-link", className: "inline-block w-4 h-4 ml-1 mb-0" })] }));
     }
@@ -252,7 +251,7 @@ var Link = function (_a) {
             prefetch: prefetch || false,
         }, children);
     }
-    catch (_c) {
+    catch (_d) {
         console.log('Not using Next Link.');
         var handleClick = function (event) {
             if (onClick) {
@@ -407,16 +406,17 @@ var Hr = function (_a) {
 Hr.displayName = 'Hr';
 
 var Image = function (_a) {
-    var src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, _b = _a.figure, figure = _b === void 0 ? false : _b, onLoad = _a.onLoad, id = _a.id, className = _a.className, testID = _a.testID, rest = __rest(_a, ["src", "alt", "title", "caption", "figure", "onLoad", "id", "className", "testID"]);
+    var src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, _b = _a.figure, figure = _b === void 0 ? false : _b, onLoad = _a.onLoad, id = _a.id, className = _a.className, _c = _a.sizes, sizes = _c === void 0 ? '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' : _c, testID = _a.testID, rest = __rest(_a, ["src", "alt", "title", "caption", "figure", "onLoad", "id", "className", "sizes", "testID"]);
     try {
         // eslint-disable-next-line @typescript-eslint/no-var-requires
         var nextImage = require('next/image').default;
         if (!nextImage)
             throw new Error('Next.js Image not found');
         var hasFill = !rest.width ? true : false;
-        return React.createElement(nextImage, __assign({ src: typeof src === 'string' ? src : src, alt: alt, title: title, fill: hasFill, onLoad: onLoad, className: className }, rest));
+        var useSizes = hasFill ? { sizes: sizes } : {};
+        return React.createElement(nextImage, __assign(__assign({ src: typeof src === 'string' ? src : src, alt: alt, title: title, fill: hasFill, onLoad: onLoad, className: className }, useSizes), rest));
     }
-    catch (_c) {
+    catch (_d) {
         var figureClasses = cx('m-0');
         var classes = cx('w-full h-full', className);
         /**
@@ -1249,14 +1249,6 @@ var DisplayHeading = function (_a) {
 };
 DisplayHeading.displayName = 'DisplayHeading';
 
-var Container = function (_a) {
-    var children = _a.children, className = _a.className, spacing = _a.spacing, padded = _a.padded, isNarrow = _a.isNarrow, isCentered = _a.isCentered, isFlush = _a.isFlush;
-    var classes = twMerge(cx('container mx-auto my-0', { 'px-4': padded }, { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, { 'max-w-3xl': isNarrow }, { 'flex items-center justify-center flex-col': isCentered }, { 'px-0 max-w-full mx-0': isFlush }));
-    var contentClasses = cx('mx-4 md:mx-0 w-full', className);
-    return (jsx("div", { "data-testid": "Container", className: classes, children: jsx("div", { className: contentClasses, children: children }) }));
-};
-Container.displayName = 'Container';
-
 var SPACING;
 (function (SPACING) {
     SPACING["NONE"] = "py-0";
@@ -1269,17 +1261,27 @@ var SPACING;
 })(SPACING || (SPACING = {}));
 
 var PanelCards = function (_a) {
-    var testID = _a.testID, cardData = _a.cardData, title = _a.title, description = _a.description, withSeparators = _a.withSeparators, _b = _a.spacing, spacing = _b === void 0 ? SPACING.COMPONENT : _b;
+    var testID = _a.testID, cardData = _a.cardData, title = _a.title, description = _a.description, withSeparators = _a.withSeparators, _b = _a.spacing, spacing = _b === void 0 ? SPACING.MODULE : _b;
     var ref = useRef(null);
     var isInView = useInView(ref, { once: true });
-    return (jsx("div", { "data-testid": testID || 'PanelCards', className: spacing, children: jsxs(Container, { children: [jsxs("div", { className: "relative text-center py-8", children: [title && jsx(DisplayHeading, { text: title }), description && jsx(Copy, { align: COPY_ALIGN.CENTER, children: description })] }), jsx("div", { ref: ref, "data-testid": "PanelCards", className: "flex gap-8 justify-between", children: cardData === null || cardData === void 0 ? void 0 : cardData.map(function (card, index) { return (jsxs(Fragment, { children: [jsx("div", { className: cx('relative flex flex-1 items-center justify-center', { '': withSeparators }), style: {
-                                    transform: isInView ? 'none' : 'translateY(200px)',
-                                    opacity: isInView ? 1 : 0,
-                                    transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ".concat(0.1 * index, "s"),
-                                }, children: jsx(Card, __assign({}, card)) }, index), withSeparators && index < cardData.length - 1 && (jsx("div", { className: "w-1 h-10 border-0 border-r border-solid border-primary500" }, "separator-".concat(index)))] })); }) })] }) }));
+    return (jsxs("div", { ref: ref, "data-testid": testID || 'PanelCards', className: spacing, children: [(title || description) && (jsxs("div", { className: "relative text-center py-8", children: [title && jsx(DisplayHeading, { text: title }), description && jsx(Copy, { align: COPY_ALIGN.CENTER, children: description })] })), jsx("div", { className: "flex gap-8", children: cardData === null || cardData === void 0 ? void 0 : cardData.map(function (card, index) { return (jsxs("span", { className: "flex gap-8 justify-between", children: [jsx("div", { className: cx('relative flex flex-1 items-center justify-center', { '': withSeparators }), style: {
+                                transform: isInView ? 'none' : 'translateY(200px)',
+                                opacity: isInView ? 1 : 0,
+                                transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ".concat(0.1 * index, "s"),
+                            }, children: jsx(Card, __assign({}, card)) }), withSeparators && index < cardData.length - 1 && (jsx("div", { className: "w-1 h-10 border-0 border-r border-solid border-primary500" }, "separator-".concat(index)))] }, "card-".concat(index))); }) })] }));
 };
 PanelCards.displayName = 'PanelCards';
 
+var Container = function (_a) {
+    var children = _a.children, className = _a.className, spacing = _a.spacing, padded = _a.padded, isNarrow = _a.isNarrow, isCentered = _a.isCentered, isFlush = _a.isFlush;
+    var classes = twMerge(cx('container mx-auto my-0', { 'px-4': padded }, { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, { 'max-w-3xl': isNarrow }, { 'flex items-center justify-center flex-col': isCentered }, { 'px-0 max-w-full mx-0': isFlush }));
+    var contentClasses = cx('mx-4 md:mx-0', {
+        'w-full': !isCentered,
+    }, className);
+    return (jsx("div", { "data-testid": "Container", className: classes, children: jsx("div", { className: contentClasses, children: children }) }));
+};
+Container.displayName = 'Container';
+
 var PanelFeature = function (_a) {
     var testID = _a.testID, title = _a.title, description = _a.description, inversed = _a.inversed, assets = _a.assets, buttonData = _a.buttonData, _b = _a.withBg, withBg = _b === void 0 ? true : _b, _c = _a.spacing, spacing = _c === void 0 ? SPACING.DEFAULT : _c;
     return (jsxs("div", { "data-testid": testID || 'PanelFeature', className: cx("relative m-auto w-full flex flex-none flex-nowrap", spacing), children: [withBg && (jsx("div", { className: "rounded-full blur-[250px] flex flex-none aspect-1 absolute -top-24 -left-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter" })), jsx(Container, { children: jsxs("div", { className: cx('relative flex sm:flex-col md:flex-row flex-nowrap w-full h-min justify-between overflow-visible p-0 items-center gap-16', {
@@ -1431,8 +1433,26 @@ var PanelHero = function (_a) {
     var testID = _a.testID, title = _a.title, description = _a.description, image = _a.image, _b = _a.buttonData, buttonData = _b === void 0 ? {
         variant: BTN_VARIANTS.PRIMARY,
         size: BTN_SIZES.LARGE,
-    } : _b, _c = _a.inversed, inversed = _c === void 0 ? false : _c, _d = _a.withBg, withBg = _d === void 0 ? true : _d, _e = _a.spacing, spacing = _e === void 0 ? SPACING.ELEMENT : _e, video = _a.video;
+    } : _b, _c = _a.inversed, inversed = _c === void 0 ? false : _c, _d = _a.withBg, withBg = _d === void 0 ? true : _d, _e = _a.spacing, spacing = _e === void 0 ? SPACING.MODULE : _e, video = _a.video;
+    var controls = useAnimation();
     var ref = useRef(null);
+    var isInView = useInView(ref);
+    var defaultAnimation = {
+        damping: 30,
+        delay: 0,
+        mass: 1.2,
+        stiffness: 200,
+        type: 'spring',
+        duration: 0.5,
+    };
+    useEffect(function () {
+        if (isInView) {
+            controls.start(function (i) { return ({
+                transform: 'none',
+                transition: __assign(__assign({}, defaultAnimation), { delay: i * 0.1 }),
+            }); });
+        }
+    }, [controls, isInView]);
     var aspectRatioClass = useMemo(function () {
         switch (video === null || video === void 0 ? void 0 : video.aspectRatioValue) {
             case '4/3':
@@ -1452,7 +1472,6 @@ var PanelHero = function (_a) {
         }
     }, [video]);
     var translateX = inversed ? 'translateX(100px)' : 'translateX(-100px)';
-    var defaultAnimation = { damping: 30, delay: 0, mass: 1.2, stiffness: 200, type: 'spring' };
     return (jsxs("div", { "data-testid": testID || 'PanelHero', className: cx('relative m-auto w-full flex flex-none flex-nowrap', spacing), children: [withBg && (jsx("div", { className: cx('rounded-full blur-[200px] flex flex-none aspect-1 absolute w-[700px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter z-0', {
                     '-bottom-24 right-0': !inversed,
                     '-top-24 left-0': inversed,
@@ -1464,20 +1483,11 @@ var PanelHero = function (_a) {
                                     'text-left bg-gradient-to-r': inversed,
                                 }), children: [jsx(motion.div, { initial: {
                                             transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: __assign({}, defaultAnimation),
-                                        }, transition: { duration: 0.5 }, children: jsx(DisplayHeading, { text: title }) }), jsx(motion.div, { initial: {
+                                        }, custom: 0, animate: controls, children: jsx(DisplayHeading, { text: title }) }), jsx(motion.div, { initial: {
                                             transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: __assign(__assign({}, defaultAnimation), { delay: 0.1 }),
-                                        }, transition: { duration: 0.5 }, children: jsx(HtmlContent, { className: "mb-0", align: inversed ? COPY_ALIGN.LEFT : COPY_ALIGN.RIGHT, data: description }) }), jsx(motion.div, { initial: {
+                                        }, custom: 1, animate: controls, children: jsx(HtmlContent, { className: "mb-0", align: inversed ? COPY_ALIGN.LEFT : COPY_ALIGN.RIGHT, data: description }) }), jsx(motion.div, { initial: {
                                             transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: __assign(__assign({}, defaultAnimation), { delay: 0.2 }),
-                                        }, transition: { duration: 0.5 }, children: jsx("div", { className: cx('flex items-center', {
+                                        }, custom: 2, animate: controls, children: jsx("div", { className: cx('flex items-center', {
                                                 'justify-end': !inversed,
                                                 'justify-start': inversed,
                                             }), children: jsx(Button, __assign({}, buttonData)) }) })] }) }), jsx("div", { className: "relative w-1/2 z-0", children: jsxs("div", { className: cx('relative scale-[1.35] rounded overflow-hidden shadow', aspectRatioClass), children: [image && jsx(Image, { src: image, alt: title, fill: true }), video && (jsx(Video, { sources: video.sources, options: {
@@ -1489,21 +1499,16 @@ var PanelHero = function (_a) {
 PanelHero.displayName = 'PanelHero';
 
 var PanelProduct = function (_a) {
-    var testID = _a.testID, title = _a.title, description = _a.description, image1 = _a.image1, image2 = _a.image2, _b = _a.iosLink, iosLink = _b === void 0 ? '#' : _b, _c = _a.androidLink, androidLink = _c === void 0 ? '#' : _c, _d = _a.inversed, inversed = _d === void 0 ? false : _d, _e = _a.withBg, withBg = _e === void 0 ? true : _e, _f = _a.spacing, spacing = _f === void 0 ? SPACING.DEFAULT : _f;
-    return (jsxs("div", { "data-testid": testID || 'PanelFeature', className: cx('relative py-8 m-auto w-full flex flex-none flex-nowrap', spacing), children: [withBg && (jsx("div", { className: "rounded-full blur-[250px] flex flex-none aspect-1 absolute -bottom-24 -right-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter" })), jsx(Container, { children: jsxs("div", { className: cx('relative flex flex-col md:flex-row flex-nowrap w-full h-full overflow-visible gap-16 border border-solid border-primary bg-primary bg-opacity-10 backdrop-blur-lg rounded border-opacityDark20 p-8', {
+    var testID = _a.testID, title = _a.title, description = _a.description, image1 = _a.image1, image2 = _a.image2, _b = _a.iosLink, iosLink = _b === void 0 ? '#' : _b, _c = _a.androidLink, androidLink = _c === void 0 ? '#' : _c, _d = _a.inversed, inversed = _d === void 0 ? false : _d, _e = _a.withBg, withBg = _e === void 0 ? true : _e, _f = _a.spacing, spacing = _f === void 0 ? SPACING.MODULE : _f;
+    return (jsxs("div", { "data-testid": testID || 'PanelFeature', className: cx('relative m-auto w-full flex flex-none flex-nowrap', spacing), children: [withBg && (jsx("div", { className: "rounded-full blur-[250px] flex flex-none aspect-1 absolute -bottom-24 -right-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter" })), jsx(Container, { children: jsxs("div", { className: cx('relative flex flex-col md:flex-row flex-nowrap w-full h-full overflow-visible gap-16 border border-solid border-primary bg-primary bg-opacity-10 backdrop-blur-lg rounded border-opacityDark20 p-8', {
                         'flex-row-reverse': inversed,
-                    }), children: [jsxs("div", { className: "w-full md:w-1/2 top-0 relative", children: [jsx("div", { className: "absolute aspect-[8/17] -rotate-12 w-[135px] left-1/3 top-4 md:w-[180px] md:left-1/3 md:top-4 lg:w-[210px] lg:left-1/2 lg:-top-1/3", children: jsx(Image, { src: image2, alt: title }) }), jsx("div", { className: "relative md:absolute aspect-[8/17] -rotate-0 w-[150px] left-0 top-0 md:w-[220px] md:left-0 md:-top-6 lg:w-[250px] lg:left-1/4 lg:-top-1/2", children: jsx(Image, { src: image1, alt: title }) })] }), jsxs("div", { className: "w-full md:w-1/2", children: [jsx("div", { children: jsx(DisplayHeading, { text: title }) }), jsx("div", { children: jsx(Copy, { children: description }) }), jsxs("div", { className: "flex items-center justify-start gap-4", children: [jsx("div", { className: "relative w-[150px] h-[50px]", children: jsx(Link, { href: iosLink, target: "_blank", children: jsx(Image, { src: "https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us", alt: "App Store" }) }) }), jsx("div", { className: "relative w-[190px] h-[75px]", children: jsx(Link, { href: androidLink, target: "_blank", children: jsx(Image, { src: "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png", alt: "Google Play" }) }) })] })] })] }) })] }));
+                    }), children: [jsxs("div", { className: "w-full md:w-1/2 top-0 relative", children: [jsx("div", { className: "absolute aspect-[8/17] -rotate-12 w-[135px] left-1/3 top-4 md:w-[180px] md:left-1/3 md:top-4 lg:w-[210px] lg:left-1/2 lg:-top-1/3", children: jsx(Image, { src: image2, alt: title }) }), jsx("div", { className: "relative md:absolute aspect-[8/17] -rotate-0 w-[150px] left-0 top-0 md:w-[220px] md:left-0 md:-top-6 lg:w-[250px] lg:left-1/4 lg:-top-1/2", children: jsx(Image, { src: image1, alt: title }) })] }), jsxs("div", { className: "w-full md:w-1/2", children: [jsx("div", { children: jsx(DisplayHeading, { text: title }) }), jsx("div", { children: jsx(Copy, { children: description }) }), jsxs("div", { className: "flex items-center justify-start gap-4", children: [jsx("div", { className: "relative w-[150px] h-[50px]", children: jsx(Link, { href: iosLink, target: "_blank", hideExternalIcon: true, children: jsx(Image, { src: "https://apple-resources.s3.amazonaws.com/media-badges/download-on-the-app-store/black/en-us.svg", alt: "App Store" }) }) }), jsx("div", { className: "relative w-[190px] h-[75px]", children: jsx(Link, { href: androidLink, target: "_blank", hideExternalIcon: true, children: jsx(Image, { src: "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png", alt: "Google Play" }) }) })] })] })] }) })] }));
 };
 PanelProduct.displayName = 'PanelProduct';
 
 var PanelVideo = function (_a) {
-    var testID = _a.testID, sources = _a.sources, className = _a.className, title = _a.title, description = _a.description, _b = _a.spacing, spacing = _b === void 0 ? SPACING.NONE : _b;
-    return (jsxs("div", { "data-testid": testID || '"PanelVideo"', className: cx('relative m-auto w-full flex flex-none flex-nowrap aspect-[16/6.6]', spacing, className), children: [jsx(Video, { rounded: false, sources: sources, options: {
-                    autoplay: true,
-                    muted: true,
-                    controls: false,
-                    loop: true,
-                } }), jsxs("div", { className: "absolute top-0 left-0 w-full h-full z-10", children: [jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent to-black opacity-50" }), jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex flex-col items-end justify-center pr-24 invert", children: [title && (jsx(motion.div, { initial: {
+    var testID = _a.testID, className = _a.className, title = _a.title, description = _a.description, _b = _a.spacing, spacing = _b === void 0 ? SPACING.NONE : _b, videoProps = _a.videoProps;
+    return (jsxs("div", { "data-testid": testID || '"PanelVideo"', className: cx('relative m-auto w-full flex flex-none flex-nowrap aspect-[16/6.6]', spacing, className), children: [jsx(Video, { rounded: false, options: __assign({ autoplay: true, muted: true, controls: false, loop: true }, videoProps === null || videoProps === void 0 ? void 0 : videoProps.options), sources: videoProps === null || videoProps === void 0 ? void 0 : videoProps.sources }), jsxs("div", { className: "absolute top-0 left-0 w-full h-full z-10", children: [jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent to-black opacity-50" }), jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex flex-col items-end justify-center pr-24 invert", children: [title && (jsx(motion.div, { initial: {
                                     transform: 'translateX(25px)',
                                 }, animate: {
                                     transform: 'none',

package/dist/index.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -233,10 +232,10 @@ var Checkbox = React.forwardRef(function MyInput(_a, ref) {
 Checkbox.displayName = 'Checkbox';
 
 var Link = function (_a) {
-    var href = _a.href, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { return console.log('Link clicked'); } : _b, history = _a.history, target = _a.target, id = _a.id, testID = _a.testID, className = _a.className, prefetch = _a.prefetch;
+    var href = _a.href, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { return console.log('Link clicked'); } : _b, history = _a.history, target = _a.target, id = _a.id, testID = _a.testID, className = _a.className, prefetch = _a.prefetch, _c = _a.hideExternalIcon, hideExternalIcon = _c === void 0 ? false : _c;
     var linkClasses = cx('link cursor-pointer no-underline text-body-text dark:text-dark-body-text', className);
     // Check if link is external
-    var isExternal = href && href.startsWith('http');
+    var isExternal = !hideExternalIcon && href && href.startsWith('http');
     if (isExternal) {
         return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("a", { "data-testid": testID || id || 'Link', className: cx(linkClasses), href: href, target: "_blank", rel: "noopener noreferrer", children: children }), jsxRuntime.jsx(Icon, { name: "mdi:external-link", className: "inline-block w-4 h-4 ml-1 mb-0" })] }));
     }
@@ -254,7 +253,7 @@ var Link = function (_a) {
             prefetch: prefetch || false,
         }, children);
     }
-    catch (_c) {
+    catch (_d) {
         console.log('Not using Next Link.');
         var handleClick = function (event) {
             if (onClick) {
@@ -409,16 +408,17 @@ var Hr = function (_a) {
 Hr.displayName = 'Hr';
 
 var Image = function (_a) {
-    var src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, _b = _a.figure, figure = _b === void 0 ? false : _b, onLoad = _a.onLoad, id = _a.id, className = _a.className, testID = _a.testID, rest = __rest(_a, ["src", "alt", "title", "caption", "figure", "onLoad", "id", "className", "testID"]);
+    var src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, _b = _a.figure, figure = _b === void 0 ? false : _b, onLoad = _a.onLoad, id = _a.id, className = _a.className, _c = _a.sizes, sizes = _c === void 0 ? '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' : _c, testID = _a.testID, rest = __rest(_a, ["src", "alt", "title", "caption", "figure", "onLoad", "id", "className", "sizes", "testID"]);
     try {
         // eslint-disable-next-line @typescript-eslint/no-var-requires
         var nextImage = require('next/image').default;
         if (!nextImage)
             throw new Error('Next.js Image not found');
         var hasFill = !rest.width ? true : false;
-        return React.createElement(nextImage, __assign({ src: typeof src === 'string' ? src : src, alt: alt, title: title, fill: hasFill, onLoad: onLoad, className: className }, rest));
+        var useSizes = hasFill ? { sizes: sizes } : {};
+        return React.createElement(nextImage, __assign(__assign({ src: typeof src === 'string' ? src : src, alt: alt, title: title, fill: hasFill, onLoad: onLoad, className: className }, useSizes), rest));
     }
-    catch (_c) {
+    catch (_d) {
         var figureClasses = cx('m-0');
         var classes = cx('w-full h-full', className);
         /**
@@ -1251,14 +1251,6 @@ var DisplayHeading = function (_a) {
 };
 DisplayHeading.displayName = 'DisplayHeading';
 
-var Container = function (_a) {
-    var children = _a.children, className = _a.className, spacing = _a.spacing, padded = _a.padded, isNarrow = _a.isNarrow, isCentered = _a.isCentered, isFlush = _a.isFlush;
-    var classes = tailwindMerge.twMerge(cx('container mx-auto my-0', { 'px-4': padded }, { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, { 'max-w-3xl': isNarrow }, { 'flex items-center justify-center flex-col': isCentered }, { 'px-0 max-w-full mx-0': isFlush }));
-    var contentClasses = cx('mx-4 md:mx-0 w-full', className);
-    return (jsxRuntime.jsx("div", { "data-testid": "Container", className: classes, children: jsxRuntime.jsx("div", { className: contentClasses, children: children }) }));
-};
-Container.displayName = 'Container';
-
 var SPACING;
 (function (SPACING) {
     SPACING["NONE"] = "py-0";
@@ -1271,17 +1263,27 @@ var SPACING;
 })(SPACING || (SPACING = {}));
 
 var PanelCards = function (_a) {
-    var testID = _a.testID, cardData = _a.cardData, title = _a.title, description = _a.description, withSeparators = _a.withSeparators, _b = _a.spacing, spacing = _b === void 0 ? SPACING.COMPONENT : _b;
+    var testID = _a.testID, cardData = _a.cardData, title = _a.title, description = _a.description, withSeparators = _a.withSeparators, _b = _a.spacing, spacing = _b === void 0 ? SPACING.MODULE : _b;
     var ref = React.useRef(null);
     var isInView = framerMotion.useInView(ref, { once: true });
-    return (jsxRuntime.jsx("div", { "data-testid": testID || 'PanelCards', className: spacing, children: jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs("div", { className: "relative text-center py-8", children: [title && jsxRuntime.jsx(DisplayHeading, { text: title }), description && jsxRuntime.jsx(Copy, { align: exports.COPY_ALIGN.CENTER, children: description })] }), jsxRuntime.jsx("div", { ref: ref, "data-testid": "PanelCards", className: "flex gap-8 justify-between", children: cardData === null || cardData === void 0 ? void 0 : cardData.map(function (card, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx('relative flex flex-1 items-center justify-center', { '': withSeparators }), style: {
-                                    transform: isInView ? 'none' : 'translateY(200px)',
-                                    opacity: isInView ? 1 : 0,
-                                    transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ".concat(0.1 * index, "s"),
-                                }, children: jsxRuntime.jsx(Card, __assign({}, card)) }, index), withSeparators && index < cardData.length - 1 && (jsxRuntime.jsx("div", { className: "w-1 h-10 border-0 border-r border-solid border-primary500" }, "separator-".concat(index)))] })); }) })] }) }));
+    return (jsxRuntime.jsxs("div", { ref: ref, "data-testid": testID || 'PanelCards', className: spacing, children: [(title || description) && (jsxRuntime.jsxs("div", { className: "relative text-center py-8", children: [title && jsxRuntime.jsx(DisplayHeading, { text: title }), description && jsxRuntime.jsx(Copy, { align: exports.COPY_ALIGN.CENTER, children: description })] })), jsxRuntime.jsx("div", { className: "flex gap-8", children: cardData === null || cardData === void 0 ? void 0 : cardData.map(function (card, index) { return (jsxRuntime.jsxs("span", { className: "flex gap-8 justify-between", children: [jsxRuntime.jsx("div", { className: cx('relative flex flex-1 items-center justify-center', { '': withSeparators }), style: {
+                                transform: isInView ? 'none' : 'translateY(200px)',
+                                opacity: isInView ? 1 : 0,
+                                transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) ".concat(0.1 * index, "s"),
+                            }, children: jsxRuntime.jsx(Card, __assign({}, card)) }), withSeparators && index < cardData.length - 1 && (jsxRuntime.jsx("div", { className: "w-1 h-10 border-0 border-r border-solid border-primary500" }, "separator-".concat(index)))] }, "card-".concat(index))); }) })] }));
 };
 PanelCards.displayName = 'PanelCards';
 
+var Container = function (_a) {
+    var children = _a.children, className = _a.className, spacing = _a.spacing, padded = _a.padded, isNarrow = _a.isNarrow, isCentered = _a.isCentered, isFlush = _a.isFlush;
+    var classes = tailwindMerge.twMerge(cx('container mx-auto my-0', { 'px-4': padded }, { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, { 'max-w-3xl': isNarrow }, { 'flex items-center justify-center flex-col': isCentered }, { 'px-0 max-w-full mx-0': isFlush }));
+    var contentClasses = cx('mx-4 md:mx-0', {
+        'w-full': !isCentered,
+    }, className);
+    return (jsxRuntime.jsx("div", { "data-testid": "Container", className: classes, children: jsxRuntime.jsx("div", { className: contentClasses, children: children }) }));
+};
+Container.displayName = 'Container';
+
 var PanelFeature = function (_a) {
     var testID = _a.testID, title = _a.title, description = _a.description, inversed = _a.inversed, assets = _a.assets, buttonData = _a.buttonData, _b = _a.withBg, withBg = _b === void 0 ? true : _b, _c = _a.spacing, spacing = _c === void 0 ? SPACING.DEFAULT : _c;
     return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelFeature', className: cx("relative m-auto w-full flex flex-none flex-nowrap", spacing), children: [withBg && (jsxRuntime.jsx("div", { className: "rounded-full blur-[250px] flex flex-none aspect-1 absolute -top-24 -left-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter" })), jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { className: cx('relative flex sm:flex-col md:flex-row flex-nowrap w-full h-min justify-between overflow-visible p-0 items-center gap-16', {
@@ -1433,8 +1435,26 @@ var PanelHero = function (_a) {
     var testID = _a.testID, title = _a.title, description = _a.description, image = _a.image, _b = _a.buttonData, buttonData = _b === void 0 ? {
         variant: exports.BTN_VARIANTS.PRIMARY,
         size: exports.BTN_SIZES.LARGE,
-    } : _b, _c = _a.inversed, inversed = _c === void 0 ? false : _c, _d = _a.withBg, withBg = _d === void 0 ? true : _d, _e = _a.spacing, spacing = _e === void 0 ? SPACING.ELEMENT : _e, video = _a.video;
+    } : _b, _c = _a.inversed, inversed = _c === void 0 ? false : _c, _d = _a.withBg, withBg = _d === void 0 ? true : _d, _e = _a.spacing, spacing = _e === void 0 ? SPACING.MODULE : _e, video = _a.video;
+    var controls = framerMotion.useAnimation();
     var ref = React.useRef(null);
+    var isInView = framerMotion.useInView(ref);
+    var defaultAnimation = {
+        damping: 30,
+        delay: 0,
+        mass: 1.2,
+        stiffness: 200,
+        type: 'spring',
+        duration: 0.5,
+    };
+    React.useEffect(function () {
+        if (isInView) {
+            controls.start(function (i) { return ({
+                transform: 'none',
+                transition: __assign(__assign({}, defaultAnimation), { delay: i * 0.1 }),
+            }); });
+        }
+    }, [controls, isInView]);
     var aspectRatioClass = React.useMemo(function () {
         switch (video === null || video === void 0 ? void 0 : video.aspectRatioValue) {
             case '4/3':
@@ -1454,7 +1474,6 @@ var PanelHero = function (_a) {
         }
     }, [video]);
     var translateX = inversed ? 'translateX(100px)' : 'translateX(-100px)';
-    var defaultAnimation = { damping: 30, delay: 0, mass: 1.2, stiffness: 200, type: 'spring' };
     return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelHero', className: cx('relative m-auto w-full flex flex-none flex-nowrap', spacing), children: [withBg && (jsxRuntime.jsx("div", { className: cx('rounded-full blur-[200px] flex flex-none aspect-1 absolute w-[700px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter z-0', {
                     '-bottom-24 right-0': !inversed,
                     '-top-24 left-0': inversed,
@@ -1466,20 +1485,11 @@ var PanelHero = function (_a) {
                                     'text-left bg-gradient-to-r': inversed,
                                 }), children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: {
                                             transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: __assign({}, defaultAnimation),
-                                        }, transition: { duration: 0.5 }, children: jsxRuntime.jsx(DisplayHeading, { text: title }) }), jsxRuntime.jsx(framerMotion.motion.div, { initial: {
+                                        }, custom: 0, animate: controls, children: jsxRuntime.jsx(DisplayHeading, { text: title }) }), jsxRuntime.jsx(framerMotion.motion.div, { initial: {
                                             transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: __assign(__assign({}, defaultAnimation), { delay: 0.1 }),
-                                        }, transition: { duration: 0.5 }, children: jsxRuntime.jsx(HtmlContent, { className: "mb-0", align: inversed ? exports.COPY_ALIGN.LEFT : exports.COPY_ALIGN.RIGHT, data: description }) }), jsxRuntime.jsx(framerMotion.motion.div, { initial: {
+                                        }, custom: 1, animate: controls, children: jsxRuntime.jsx(HtmlContent, { className: "mb-0", align: inversed ? exports.COPY_ALIGN.LEFT : exports.COPY_ALIGN.RIGHT, data: description }) }), jsxRuntime.jsx(framerMotion.motion.div, { initial: {
                                             transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: __assign(__assign({}, defaultAnimation), { delay: 0.2 }),
-                                        }, transition: { duration: 0.5 }, children: jsxRuntime.jsx("div", { className: cx('flex items-center', {
+                                        }, custom: 2, animate: controls, children: jsxRuntime.jsx("div", { className: cx('flex items-center', {
                                                 'justify-end': !inversed,
                                                 'justify-start': inversed,
                                             }), children: jsxRuntime.jsx(Button, __assign({}, buttonData)) }) })] }) }), jsxRuntime.jsx("div", { className: "relative w-1/2 z-0", children: jsxRuntime.jsxs("div", { className: cx('relative scale-[1.35] rounded overflow-hidden shadow', aspectRatioClass), children: [image && jsxRuntime.jsx(Image, { src: image, alt: title, fill: true }), video && (jsxRuntime.jsx(Video, { sources: video.sources, options: {
@@ -1491,21 +1501,16 @@ var PanelHero = function (_a) {
 PanelHero.displayName = 'PanelHero';
 
 var PanelProduct = function (_a) {
-    var testID = _a.testID, title = _a.title, description = _a.description, image1 = _a.image1, image2 = _a.image2, _b = _a.iosLink, iosLink = _b === void 0 ? '#' : _b, _c = _a.androidLink, androidLink = _c === void 0 ? '#' : _c, _d = _a.inversed, inversed = _d === void 0 ? false : _d, _e = _a.withBg, withBg = _e === void 0 ? true : _e, _f = _a.spacing, spacing = _f === void 0 ? SPACING.DEFAULT : _f;
-    return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelFeature', className: cx('relative py-8 m-auto w-full flex flex-none flex-nowrap', spacing), children: [withBg && (jsxRuntime.jsx("div", { className: "rounded-full blur-[250px] flex flex-none aspect-1 absolute -bottom-24 -right-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter" })), jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { className: cx('relative flex flex-col md:flex-row flex-nowrap w-full h-full overflow-visible gap-16 border border-solid border-primary bg-primary bg-opacity-10 backdrop-blur-lg rounded border-opacityDark20 p-8', {
+    var testID = _a.testID, title = _a.title, description = _a.description, image1 = _a.image1, image2 = _a.image2, _b = _a.iosLink, iosLink = _b === void 0 ? '#' : _b, _c = _a.androidLink, androidLink = _c === void 0 ? '#' : _c, _d = _a.inversed, inversed = _d === void 0 ? false : _d, _e = _a.withBg, withBg = _e === void 0 ? true : _e, _f = _a.spacing, spacing = _f === void 0 ? SPACING.MODULE : _f;
+    return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelFeature', className: cx('relative m-auto w-full flex flex-none flex-nowrap', spacing), children: [withBg && (jsxRuntime.jsx("div", { className: "rounded-full blur-[250px] flex flex-none aspect-1 absolute -bottom-24 -right-48 w-[500px] opacity-20 bg-gradient-to-r from-primary-darker to-primary-lighter" })), jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { className: cx('relative flex flex-col md:flex-row flex-nowrap w-full h-full overflow-visible gap-16 border border-solid border-primary bg-primary bg-opacity-10 backdrop-blur-lg rounded border-opacityDark20 p-8', {
                         'flex-row-reverse': inversed,
-                    }), children: [jsxRuntime.jsxs("div", { className: "w-full md:w-1/2 top-0 relative", children: [jsxRuntime.jsx("div", { className: "absolute aspect-[8/17] -rotate-12 w-[135px] left-1/3 top-4 md:w-[180px] md:left-1/3 md:top-4 lg:w-[210px] lg:left-1/2 lg:-top-1/3", children: jsxRuntime.jsx(Image, { src: image2, alt: title }) }), jsxRuntime.jsx("div", { className: "relative md:absolute aspect-[8/17] -rotate-0 w-[150px] left-0 top-0 md:w-[220px] md:left-0 md:-top-6 lg:w-[250px] lg:left-1/4 lg:-top-1/2", children: jsxRuntime.jsx(Image, { src: image1, alt: title }) })] }), jsxRuntime.jsxs("div", { className: "w-full md:w-1/2", children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(DisplayHeading, { text: title }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Copy, { children: description }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-start gap-4", children: [jsxRuntime.jsx("div", { className: "relative w-[150px] h-[50px]", children: jsxRuntime.jsx(Link, { href: iosLink, target: "_blank", children: jsxRuntime.jsx(Image, { src: "https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us", alt: "App Store" }) }) }), jsxRuntime.jsx("div", { className: "relative w-[190px] h-[75px]", children: jsxRuntime.jsx(Link, { href: androidLink, target: "_blank", children: jsxRuntime.jsx(Image, { src: "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png", alt: "Google Play" }) }) })] })] })] }) })] }));
+                    }), children: [jsxRuntime.jsxs("div", { className: "w-full md:w-1/2 top-0 relative", children: [jsxRuntime.jsx("div", { className: "absolute aspect-[8/17] -rotate-12 w-[135px] left-1/3 top-4 md:w-[180px] md:left-1/3 md:top-4 lg:w-[210px] lg:left-1/2 lg:-top-1/3", children: jsxRuntime.jsx(Image, { src: image2, alt: title }) }), jsxRuntime.jsx("div", { className: "relative md:absolute aspect-[8/17] -rotate-0 w-[150px] left-0 top-0 md:w-[220px] md:left-0 md:-top-6 lg:w-[250px] lg:left-1/4 lg:-top-1/2", children: jsxRuntime.jsx(Image, { src: image1, alt: title }) })] }), jsxRuntime.jsxs("div", { className: "w-full md:w-1/2", children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(DisplayHeading, { text: title }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Copy, { children: description }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-start gap-4", children: [jsxRuntime.jsx("div", { className: "relative w-[150px] h-[50px]", children: jsxRuntime.jsx(Link, { href: iosLink, target: "_blank", hideExternalIcon: true, children: jsxRuntime.jsx(Image, { src: "https://apple-resources.s3.amazonaws.com/media-badges/download-on-the-app-store/black/en-us.svg", alt: "App Store" }) }) }), jsxRuntime.jsx("div", { className: "relative w-[190px] h-[75px]", children: jsxRuntime.jsx(Link, { href: androidLink, target: "_blank", hideExternalIcon: true, children: jsxRuntime.jsx(Image, { src: "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png", alt: "Google Play" }) }) })] })] })] }) })] }));
 };
 PanelProduct.displayName = 'PanelProduct';
 
 var PanelVideo = function (_a) {
-    var testID = _a.testID, sources = _a.sources, className = _a.className, title = _a.title, description = _a.description, _b = _a.spacing, spacing = _b === void 0 ? SPACING.NONE : _b;
-    return (jsxRuntime.jsxs("div", { "data-testid": testID || '"PanelVideo"', className: cx('relative m-auto w-full flex flex-none flex-nowrap aspect-[16/6.6]', spacing, className), children: [jsxRuntime.jsx(Video, { rounded: false, sources: sources, options: {
-                    autoplay: true,
-                    muted: true,
-                    controls: false,
-                    loop: true,
-                } }), jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 w-full h-full z-10", children: [jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent to-black opacity-50" }), jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex flex-col items-end justify-center pr-24 invert", children: [title && (jsxRuntime.jsx(framerMotion.motion.div, { initial: {
+    var testID = _a.testID, className = _a.className, title = _a.title, description = _a.description, _b = _a.spacing, spacing = _b === void 0 ? SPACING.NONE : _b, videoProps = _a.videoProps;
+    return (jsxRuntime.jsxs("div", { "data-testid": testID || '"PanelVideo"', className: cx('relative m-auto w-full flex flex-none flex-nowrap aspect-[16/6.6]', spacing, className), children: [jsxRuntime.jsx(Video, { rounded: false, options: __assign({ autoplay: true, muted: true, controls: false, loop: true }, videoProps === null || videoProps === void 0 ? void 0 : videoProps.options), sources: videoProps === null || videoProps === void 0 ? void 0 : videoProps.sources }), jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 w-full h-full z-10", children: [jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent to-black opacity-50" }), jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex flex-col items-end justify-center pr-24 invert", children: [title && (jsxRuntime.jsx(framerMotion.motion.div, { initial: {
                                     transform: 'translateX(25px)',
                                 }, animate: {
                                     transform: 'none',

package/dist/types/fui/components/Image/Image.d.ts

@@ -1,7 +1,7 @@
 import { Props } from './Image.types';
 import React from 'react';
 declare const Image: {
-    ({ src, alt, title, caption, figure, onLoad, id, className, testID, ...rest }: Props): React.ReactElement;
+    ({ src, alt, title, caption, figure, onLoad, id, className, sizes, testID, ...rest }: Props): React.ReactElement;
     displayName: string;
 };
 export default Image;

package/dist/types/fui/components/Image/Image.types.d.ts

@@ -10,6 +10,8 @@ export interface Props extends ImageProps {
     figure?: boolean;
     /** The image will take up the entire width of the container. */
     fluid?: boolean;
+    /** The next/image sizes attribute. */
+    sizes?: string;
     crossOrigin?: 'anonymous' | 'use-credentials';
     id?: string;
     testID?: string;

package/dist/types/fui/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import { Props } from './Link.types';
 import React from 'react';
 declare const Link: {
-    ({ href, children, onClick, history, target, id, testID, className, prefetch, }: Props): React.ReactElement;
+    ({ href, children, onClick, history, target, id, testID, className, prefetch, hideExternalIcon, }: Props): React.ReactElement;
     displayName: string;
 };
 export default Link;

package/dist/types/fui/components/Link/Link.types.d.ts

@@ -10,4 +10,5 @@ export interface Props {
     testID?: string;
     className?: string;
     prefetch?: boolean;
+    hideExternalIcon?: boolean;
 }

package/dist/types/fui/components/PanelCards/PanelCards.types.d.ts

@@ -3,8 +3,8 @@ import { SPACING } from '../Hero/Hero.types';
 export interface Props {
     testID?: string;
     cardData: CardProps[];
-    title: string;
-    description: string;
+    title?: string;
+    description?: string;
     withSeparators?: boolean;
     spacing?: SPACING;
 }

package/dist/types/fui/components/PanelVideo/PanelVideo.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './PanelVideo.types';
 declare const PanelVideo: {
-    ({ testID, sources, className, title, description, spacing, }: Props): React.ReactElement;
+    ({ testID, className, title, description, spacing, videoProps, }: Props): React.ReactElement;
     displayName: string;
 };
 export default PanelVideo;

package/dist/types/fui/components/PanelVideo/PanelVideo.types.d.ts

@@ -1,12 +1,10 @@
-import { SPACING } from "../Hero/Hero.types";
+import { SPACING } from '../Hero/Hero.types';
+import { Props as videoProps } from '../Video/Video.types';
 export interface Props {
     testID?: string;
-    sources: {
-        src: string;
-        type?: string;
-    }[];
     className?: string;
     title?: string;
     description?: string;
     spacing?: SPACING;
+    videoProps: videoProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--gamma",
-  "version": "1.41.0",
+  "version": "1.41.2",
   "description": "Foundation UI Component library with GAMMA theme. ",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -39,7 +39,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d846244764894ce56f92722a0502cc8a89762ce7",
+  "gitHead": "8e67d387a0b23b11b2ccab353e9c3bc6ffcd2d26",
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
     "@elastic/react-search-ui": "^1.21.1",
@@ -61,6 +61,7 @@
     "filter-invalid-dom-props": "^3.0.1",
     "framer-motion": "^11.1.9",
     "history": "^5.3.0",
+    "html-react-parser": "^5.1.10",
     "next": "^14.1.4",
     "rc-pagination": "^4.0.4",
     "react": "^18.2.0",