@4alldigital/foundation-ui--gamma 1.40.0 → 1.41.1

package/dist/index.js

@@ -12,6 +12,7 @@ var reactHookForm = require('react-hook-form');
 var HoverVideoPlayer = require('react-hover-video-player');
 var ReactPlayer = require('react-player/youtube');
 var videojs = require('video.js');
+var parse = require('html-react-parser');
 var reactShare = require('react-share');
 var ROtpInput = require('react-otp-input');
 var ElasticSearchAPIConnector = require('@elastic/search-ui-elasticsearch-connector');
@@ -234,6 +235,11 @@ 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 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');
+    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" })] }));
+    }
     // Allow for non-next.js Application usage.
     try {
         // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -320,7 +326,7 @@ exports.COPY_TAG = void 0;
 
 var Copy = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.as, Tag = _c === void 0 ? exports.COPY_TAG.P : _c, size = _a.size, _d = _a.align, align = _d === void 0 ? exports.COPY_ALIGN.LEFT : _d, transform = _a.transform, id = _a.id, className = _a.className, testID = _a.testID;
+    var children = _a.children, _c = _a.as, Tag = _c === void 0 ? exports.COPY_TAG.P : _c, size = _a.size, align = _a.align, transform = _a.transform, id = _a.id, className = _a.className, testID = _a.testID;
     var classes = cx((_b = {}, _b["text-".concat(align)] = align, _b), { 'text-sm': size === 'small' }, { 'text-lg': size === 'large' }, { 'text-2xl': size === 'intro' }, { 'mb-3 leading-5 mt-0': Tag === 'p' }, { 'text-sm': Tag === 'small' }, 
     //'body-text',
     transform, className);
@@ -749,7 +755,6 @@ var Form = function (_a) {
     React.useEffect(function () {
         if (onChange && typeof onChange === 'function') {
             var subscription_1 = methods.watch(function (value, event) {
-                console.info('methods', methods.formState);
                 onChange(value, event);
             });
             return function () { return subscription_1.unsubscribe(); };
@@ -853,7 +858,6 @@ var FormField = function (_a) {
     // TODO: HELPER CLASSES : data-[invalid=true]:bg-error data-[valid]:bg-success
     var showLabel = label && type !== exports.FIELD_TYPES.CHECKBOX;
     var labelWithAsterisk = required || Boolean(validations.required) ? "".concat(label, " *") : label;
-    console.log('description', description);
     return (jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsxs("div", { "data-testid": "FormField", className: "mb-4", children: [showLabel && (jsxRuntime.jsx("div", { className: "flex items-baseline justify-between", children: jsxRuntime.jsx(Label, { id: name, children: labelWithAsterisk }) })), jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(reactHookForm.Controller
                     // https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro
                     , { 
@@ -934,7 +938,7 @@ var Authenticator = function (_a) {
         }
         fetchToken();
     }, []);
-    return (jsxRuntime.jsxs("div", { "data-testid": "Authenticator", className: 'w-full', children: [!showForgotPassword && (jsxRuntime.jsx(Tabs, { data: [
+    return (jsxRuntime.jsxs("div", { "data-testid": "Authenticator", className: "w-full", children: [!showForgotPassword && (jsxRuntime.jsx(Tabs, { data: [
                     {
                         title: 'Login',
                         content: (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx(LoginForm, { handleSubmit: loginSubmit, showSocialButtons: showSocialLogin }), jsxRuntime.jsx("div", { className: "mt-4", children: jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.LINK, onClick: function () { return setShowForgotPassword(!showForgotPassword); }, children: showForgotPassword ? 'Back to Login' : 'Forgot Password?' }) })] })),
@@ -1241,24 +1245,36 @@ var DisplayHeading = function (_a) {
     return (jsxRuntime.jsx("div", { "data-testid": "DisplayHeading", className: "relative", children: jsxRuntime.jsx(Heading, { tag: exports.HEADING_TAGS.H1, className: "", children: arrayOfWords.map(function (word, index) {
                 // if last word.
                 var isLastWord = index === arrayOfWords.length - 1;
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: cx({ 'display-heading relative font-heading': !isLastWord }, { 'inline-block relative font-heading': isLastWord }), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLastWord && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "display-heading--emphasis" }), jsxRuntime.jsx("span", { className: "display-heading--lastword", children: word })] })), !isLastWord && jsxRuntime.jsx("span", { children: word })] }) }, "".concat(word, "-").concat(index)), !isLastWord && ' '] }));
+                var dhKey = "".concat(word, "-").concat(index);
+                return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("span", { className: cx({ 'display-heading relative font-heading': !isLastWord }, { 'inline-block relative font-heading': isLastWord }), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLastWord && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "display-heading--emphasis" }), jsxRuntime.jsx("span", { className: "display-heading--lastword", children: word })] })), !isLastWord && jsxRuntime.jsx("span", { children: word })] }) }), !isLastWord && ' '] }, dhKey));
             }) }) }));
 };
 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;
-    var classes = 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 });
+    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";
+    SPACING["ATOM"] = "py-8";
+    SPACING["DEFAULT"] = "py-16";
+    SPACING["ELEMENT"] = "py-24";
+    SPACING["COMPONENT"] = "py-32";
+    SPACING["MODULE"] = "py-40";
+    SPACING["FEATURE"] = "py-64";
+})(SPACING || (SPACING = {}));
+
 var PanelCards = function (_a) {
-    var testID = _a.testID, cardData = _a.cardData, title = _a.title, description = _a.description, withSeparators = _a.withSeparators;
+    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 ref = React.useRef(null);
     var isInView = framerMotion.useInView(ref, { once: true });
-    return (jsxRuntime.jsx("div", { "data-testid": testID || 'PanelFeature', 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: {
+    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"),
@@ -1267,77 +1283,65 @@ var PanelCards = function (_a) {
 PanelCards.displayName = 'PanelCards';
 
 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;
-    var ref = React.useRef(null);
-    var isInView = framerMotion.useInView(ref, { once: true });
-    console.log('isInView', isInView);
-    return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelFeature', className: "relative py-8 m-auto w-full flex flex-none flex-nowrap", 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', {
+    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', {
                         'flex-row-reverse': inversed,
                     }), children: [jsxRuntime.jsxs("div", { className: "w-1/2 flex flex-col items-start justify-center", children: [jsxRuntime.jsxs("div", { className: "relative text-left", children: [jsxRuntime.jsx(DisplayHeading, { text: title }), jsxRuntime.jsx(Copy, { className: "mb-0", children: description })] }), jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2 my-8", children: [jsxRuntime.jsx(Chip, { rounded: true, text: "New", variant: "info" }), jsxRuntime.jsx(Chip, { rounded: true, text: "Trending", variant: "info" }), jsxRuntime.jsx(Chip, { rounded: true, text: "Popular", variant: "info" })] }), jsxRuntime.jsx("div", { className: "", children: jsxRuntime.jsx(Button, __assign({}, buttonData)) })] }), jsxRuntime.jsx("div", { className: "w-1/2 flex items-center justify-center", children: jsxRuntime.jsx("div", { className: "w-full aspect-[1/1] flex items-center justify-center", children: jsxRuntime.jsx(AnimationSet1, { bgAsset: assets.bgAsset, focalAsset1: assets.focalAsset1, focalAsset2: assets.focalAsset2, focalAsset3: assets.focalAsset3 }) }) })] }) })] }));
 };
 PanelFeature.displayName = 'PanelFeature';
 
-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;
-    var ref = React.useRef(null);
-    var translateX = inversed ? 'translateX(100px)' : 'translateX(-100px)';
-    return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelHero', className: "relative py-8 m-auto w-full flex flex-none flex-nowrap", 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,
-                }) })), 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', {
-                        'md:flex-row-reverse': inversed,
-                    }), children: [jsxRuntime.jsx("div", { ref: ref, className: "w-1/2 flex flex-col items-start justify-center z-10", children: jsxRuntime.jsxs("div", { className: cx('relative flex flex-col gap-4', {
-                                    'text-right': !inversed,
-                                }, {
-                                    'text-left': inversed,
-                                }), children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: {
-                                            transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: { damping: 60, delay: 0, mass: 1.2, stiffness: 300, type: 'spring' },
-                                        }, transition: { duration: 0.5 }, children: jsxRuntime.jsx(DisplayHeading, { text: title }) }), jsxRuntime.jsx(framerMotion.motion.div, { initial: {
-                                            transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: { damping: 60, delay: 0.3, mass: 1.2, stiffness: 300, type: 'spring' },
-                                        }, transition: { duration: 0.5 }, children: jsxRuntime.jsx(Copy, { className: "mb-0", align: inversed ? exports.COPY_ALIGN.LEFT : exports.COPY_ALIGN.RIGHT, children: description }) }), jsxRuntime.jsx(framerMotion.motion.div, { initial: {
-                                            transform: translateX,
-                                        }, animate: {
-                                            transform: 'none',
-                                            transition: { damping: 60, delay: 0.6, mass: 1.2, stiffness: 300, type: 'spring' },
-                                        }, transition: { duration: 0.5 }, 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.jsx("div", { className: "relative aspect-[16/9] scale-[1.35] rounded overflow-hidden shadow", children: jsxRuntime.jsx(Image, { src: image, alt: title, fill: true }) }) })] }) })] }));
-};
-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;
-    return (jsxRuntime.jsxs("div", { "data-testid": testID || 'PanelFeature', className: "relative py-8 m-auto w-full flex flex-none flex-nowrap", 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" }) }) })] })] })] }) })] }));
-};
-PanelProduct.displayName = 'PanelProduct';
-
 // VideoJS CSS.
 // import 'video.js/dist/video-js.css';
 var Video = function (_a) {
-    var url = _a.url, sources = _a.sources, onReady = _a.onReady, className = _a.className, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.isYoutube, isYoutube = _c === void 0 ? false : _c, _d = _a.defaultAudioTrack, defaultAudioTrack = _d === void 0 ? 'No Music' : _d, _e = _a.rounded, rounded = _e === void 0 ? true : _e;
+    var url = _a.url, sources = _a.sources, onReady = _a.onReady, className = _a.className, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.isYoutube, isYoutube = _c === void 0 ? false : _c, _d = _a.defaultAudioTrack, defaultAudioTrack = _d === void 0 ? 'No Music' : _d, _e = _a.rounded, rounded = _e === void 0 ? true : _e, aspectRatioValue = _a.aspectRatioValue;
     var reactPlayerRef = React.useRef(null);
     var videoRef = React.useRef(null);
     var playerRef = React.useRef(null);
+    var aspectRatioConfig = React.useMemo(function () {
+        switch (aspectRatioValue) {
+            case '4/3':
+                return {
+                    aspectRatio: '4:3',
+                    className: 'aspect-[4/3]',
+                };
+            case '1/1':
+                return {
+                    aspectRatio: '1:1',
+                    className: 'aspect-[1/1]',
+                };
+            case '3/4':
+                return {
+                    aspectRatio: '3:4',
+                    className: 'aspect-[3/4]',
+                };
+            case '9/16':
+                return {
+                    aspectRatio: '9:16',
+                    className: 'aspect-[9/16]',
+                };
+            case '16/7':
+                return {
+                    aspectRatio: '16:7',
+                    className: 'aspect-[16/7]',
+                };
+            case '16/5':
+                return {
+                    aspectRatio: '16:5',
+                    className: 'aspect-[16/5]',
+                };
+            default:
+                return {
+                    aspectRatio: '16:9',
+                    className: 'aspect-[16/9]',
+                };
+        }
+    }, [aspectRatioValue]);
     React.useEffect(function () {
         var _a;
         // Do not initialize Video.js player if it's a YouTube video
         if (isYoutube)
             return;
-        var videoOptions = __assign(__assign({ autoplay: true, controls: true, muted: false, responsive: true, fill: true, fluid: true, 
-            // aspectRatio: '16:9',
-            controlBar: {
+        var videoOptions = __assign(__assign({ autoplay: true, controls: true, muted: false, responsive: true, fill: true, fluid: true, aspectRatio: aspectRatioConfig.aspectRatio || '16:9', controlBar: {
                 skipButtons: {
                     forward: 30,
                     backward: 30,
@@ -1350,7 +1354,6 @@ var Video = function (_a) {
                     enableLowInitialPlaylist: true, // Optional configuration for better HLS performance
                 },
             } }, options), { sources: sources });
-        console.log('videoOptions', videoOptions);
         // Make sure Video.js player is only initialized once
         if (!playerRef.current) {
             // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
@@ -1391,15 +1394,113 @@ var Video = function (_a) {
     if (isYoutube && url) {
         return (jsxRuntime.jsx("div", { "data-testid": "Video", className: cx('relative w-full h-full aspect-[16/9]', className), children: jsxRuntime.jsx(ReactPlayer, { ref: reactPlayerRef, className: "react-player", url: url, width: "100%", height: "100%", controls: true, onReady: onReady }) }));
     }
-    return (jsxRuntime.jsx("div", { className: cx('relative w-full overflow-hidden h-full bg-[blue]', {
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cx('relative w-full overflow-hidden h-full aspect-[16/9] bg-black object-cover', {
             rouded: rounded,
-        }, className), children: jsxRuntime.jsx("div", { "data-vjs-player": true, children: jsxRuntime.jsx("div", { ref: videoRef }) }) }));
+        }, aspectRatioConfig.className, className)), children: jsxRuntime.jsx("div", { "data-vjs-player": true, children: jsxRuntime.jsx("div", { ref: videoRef, className: "object-cover" }) }) }));
 };
 Video.displayName = 'Video';
 
+var options = {
+    replace: function (domNode) {
+        // Handle a tag links.
+        if (domNode.name === 'a') {
+            var props = parse.attributesToProps(domNode.attribs);
+            return jsxRuntime.jsx(Link, __assign({}, props, { children: parse.domToReact(domNode.children, options) }));
+        }
+        // Handle p tag copy.
+        if (domNode.attribs && domNode.name === 'p') {
+            var props = parse.attributesToProps(domNode.attribs);
+            return jsxRuntime.jsx(Copy, __assign({}, props, { children: parse.domToReact(domNode.children, options) }));
+        }
+        // Handle default.
+        return domNode;
+    },
+};
+
+var HtmlContent = function (_a) {
+    var testID = _a.testID, data = _a.data, align = _a.align, className = _a.className;
+    return (jsxRuntime.jsx("span", { "data-testid": testID || '"HtmlContent"', className: cx('relative', {
+            'text-right': align === 'right',
+        }, {
+            'text-center': align === 'center',
+        }, {
+            'text-left': align === 'left',
+        }, className), children: parse(data, options) }));
+};
+HtmlContent.displayName = 'HtmlContent';
+
+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;
+    var ref = React.useRef(null);
+    var aspectRatioClass = React.useMemo(function () {
+        switch (video === null || video === void 0 ? void 0 : video.aspectRatioValue) {
+            case '4/3':
+                return 'aspect-[4/3]';
+            case '1/1':
+                return 'aspect-[1/1]';
+            case '3/4':
+                return 'aspect-[3/4]';
+            case '9/16':
+                return 'aspect-[9/16]';
+            case '16/7':
+                return 'aspect-[16/7]';
+            case '16/5':
+                return 'aspect-[16/5]';
+            default:
+                return 'aspect-[16/9]';
+        }
+    }, [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,
+                }) })), 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', {
+                        'md:flex-row-reverse': inversed,
+                    }), children: [jsxRuntime.jsx("div", { ref: ref, className: "w-1/2 flex flex-col items-start justify-center z-10", children: jsxRuntime.jsxs("div", { className: cx('relative flex flex-col gap-4 from-body-background p-4 rounded', {
+                                    'text-right bg-gradient-to-l': !inversed,
+                                }, {
+                                    '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: {
+                                            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: {
+                                            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', {
+                                                '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: {
+                                            autoplay: true,
+                                            muted: true,
+                                            controls: false,
+                                        }, aspectRatioValue: video.aspectRatioValue }))] }) })] }) })] }));
+};
+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', {
+                        '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" }) }) })] })] })] }) })] }));
+};
+PanelProduct.displayName = 'PanelProduct';
+
 var PanelVideo = function (_a) {
-    var testID = _a.testID, sources = _a.sources, className = _a.className, title = _a.title, description = _a.description;
-    return (jsxRuntime.jsxs("div", { "data-testid": testID || '"PanelVideo"', className: cx('relative m-auto w-full flex flex-none flex-nowrap aspect-[16/6.6]', className), children: [jsxRuntime.jsx(Video, { rounded: false, sources: sources, options: {
+    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,
@@ -1513,7 +1614,7 @@ var Footer = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     var testID = _a.testID, className = _a.className, _q = _a.logoAspectRatio, logoAspectRatio = _q === void 0 ? 'aspect-[16/9]' : _q;
     var context = React.useContext(AppContext);
-    return (jsxRuntime.jsxs("footer", { className: cx('w-full md:max-w-screen-lg lg:max-w-screen-xl m-auto', className), children: [jsxRuntime.jsxs("div", { "data-testid": testID || '"Footer"', className: "footer flex flex-col md:flex-row py-8 gap-8", children: [jsxRuntime.jsxs("div", { className: "relative w-full md:w-1/3 flex flex-col gap-4 items-center md:items-start", children: [((_b = context === null || context === void 0 ? void 0 : context.brand) === null || _b === void 0 ? void 0 : _b.logo) && (jsxRuntime.jsx("div", { className: "relative w-24", children: jsxRuntime.jsx(Logo, { logo: (_c = context === null || context === void 0 ? void 0 : context.brand) === null || _c === void 0 ? void 0 : _c.logo, aspectRatioClass: logoAspectRatio }) })), ((_d = context.footer) === null || _d === void 0 ? void 0 : _d.about) && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Copy, { children: context.footer.about }) })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(VisitUs, { facebook: (_f = (_e = context.footer) === null || _e === void 0 ? void 0 : _e.visitUs) === null || _f === void 0 ? void 0 : _f.facebook, twitter: (_h = (_g = context.footer) === null || _g === void 0 ? void 0 : _g.visitUs) === null || _h === void 0 ? void 0 : _h.twitter, instagram: (_k = (_j = context.footer) === null || _j === void 0 ? void 0 : _j.visitUs) === null || _k === void 0 ? void 0 : _k.instagram, linkedin: (_m = (_l = context.footer) === null || _l === void 0 ? void 0 : _l.visitUs) === null || _m === void 0 ? void 0 : _m.linkedin }) })] }), ((_o = context.footer) === null || _o === void 0 ? void 0 : _o.menus) && (jsxRuntime.jsx("div", { className: "flex gap-4 flex-1 flex-col md:flex-row items-center md:items-start", children: context.footer.menus.map(function (menu, index) { return (jsxRuntime.jsx("div", { className: "flex flex-1", children: jsxRuntime.jsx(Menu, { title: menu.title, links: menu.links, inline: false }) }, "".concat(menu.title, "--").concat(index))); }) }))] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-center flex-col", children: [jsxRuntime.jsxs(Copy, { align: exports.COPY_ALIGN.CENTER, as: exports.COPY_TAG.SMALL, children: ["\u00A9 ", new Date().getFullYear(), " ", en.UI.COPYRIGHT, " ", (_p = context.brand) === null || _p === void 0 ? void 0 : _p.name] }), jsxRuntime.jsx(Copy, { align: exports.COPY_ALIGN.CENTER, as: exports.COPY_TAG.SMALL, children: en.UI.ALL_RIGHTS_RESERVED })] })] }));
+    return (jsxRuntime.jsxs("footer", { className: cx('w-full md:max-w-screen-lg lg:max-w-screen-xl m-auto pt-16 pb-8', className), children: [jsxRuntime.jsxs("div", { "data-testid": testID || '"Footer"', className: "footer flex flex-col md:flex-row py-8 gap-8", children: [jsxRuntime.jsxs("div", { className: "relative w-full md:w-1/3 flex flex-col gap-4 items-center md:items-start", children: [((_b = context === null || context === void 0 ? void 0 : context.brand) === null || _b === void 0 ? void 0 : _b.logo) && (jsxRuntime.jsx("div", { className: "relative w-24", children: jsxRuntime.jsx(Logo, { logo: (_c = context === null || context === void 0 ? void 0 : context.brand) === null || _c === void 0 ? void 0 : _c.logo, aspectRatioClass: logoAspectRatio }) })), ((_d = context.footer) === null || _d === void 0 ? void 0 : _d.about) && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Copy, { children: context.footer.about }) })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(VisitUs, { facebook: (_f = (_e = context.footer) === null || _e === void 0 ? void 0 : _e.visitUs) === null || _f === void 0 ? void 0 : _f.facebook, twitter: (_h = (_g = context.footer) === null || _g === void 0 ? void 0 : _g.visitUs) === null || _h === void 0 ? void 0 : _h.twitter, instagram: (_k = (_j = context.footer) === null || _j === void 0 ? void 0 : _j.visitUs) === null || _k === void 0 ? void 0 : _k.instagram, linkedin: (_m = (_l = context.footer) === null || _l === void 0 ? void 0 : _l.visitUs) === null || _m === void 0 ? void 0 : _m.linkedin }) })] }), ((_o = context.footer) === null || _o === void 0 ? void 0 : _o.menus) && (jsxRuntime.jsx("div", { className: "flex gap-4 flex-1 flex-col md:flex-row items-center md:items-start", children: context.footer.menus.map(function (menu, index) { return (jsxRuntime.jsx("div", { className: "flex flex-1", children: jsxRuntime.jsx(Menu, { title: menu.title, links: menu.links, inline: false }) }, "".concat(menu.title, "--").concat(index))); }) }))] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-center flex-col", children: [jsxRuntime.jsxs(Copy, { align: exports.COPY_ALIGN.CENTER, as: exports.COPY_TAG.SMALL, children: ["\u00A9 ", new Date().getFullYear(), " ", en.UI.COPYRIGHT, " ", (_p = context.brand) === null || _p === void 0 ? void 0 : _p.name] }), jsxRuntime.jsx(Copy, { align: exports.COPY_ALIGN.CENTER, as: exports.COPY_TAG.SMALL, children: en.UI.ALL_RIGHTS_RESERVED })] })] }));
 };
 Footer.displayName = 'Footer';
 
@@ -1914,6 +2015,7 @@ exports.Header = Header;
 exports.Heading = Heading;
 exports.Hero = Hero;
 exports.Hr = Hr;
+exports.HtmlContent = HtmlContent;
 exports.Icon = Icon;
 exports.Image = Image;
 exports.Label = Label;

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

@@ -1,6 +1,6 @@
 import { Props } from './Container.types';
 declare const Container: {
-    ({ children, className, spacing, padded, isNarrow, isCentered }: Props): React.ReactElement;
+    ({ children, className, spacing, padded, isNarrow, isCentered, isFlush, }: Props): React.ReactElement;
     displayName: string;
 };
 export default Container;

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

@@ -6,4 +6,5 @@ export interface Props {
     padded?: boolean;
     isNarrow?: boolean;
     isCentered?: boolean;
+    isFlush?: boolean;
 }

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

@@ -1,7 +1,17 @@
 /// <reference types="react" />
+export declare enum SPACING {
+    NONE = "py-0",
+    ATOM = "py-8",
+    DEFAULT = "py-16",
+    ELEMENT = "py-24",
+    COMPONENT = "py-32",
+    MODULE = "py-40",
+    FEATURE = "py-64"
+}
 export interface Props {
     testID?: string;
     children: React.ReactNode;
     withBg?: boolean;
     inversed?: boolean;
+    spacing: SPACING;
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Props } from './HtmlContent.types';
+declare const HtmlContent: {
+    ({ testID, data, align, className }: Props): React.ReactElement;
+    displayName: string;
+};
+export default HtmlContent;
+export type { Props };

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

@@ -0,0 +1,6 @@
+export interface Props {
+    testID?: string;
+    data: string;
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+}

package/dist/types/fui/components/HtmlContent/index.d.ts

@@ -0,0 +1 @@
+export { default } from './HtmlContent';

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

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

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './PanelFeature.types';
 declare const PanelFeature: {
-    ({ testID, title, description, inversed, assets, buttonData, withBg, }: Props): React.ReactElement;
+    ({ testID, title, description, inversed, assets, buttonData, withBg, spacing, }: Props): React.ReactElement;
     displayName: string;
 };
 export default PanelFeature;

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

@@ -1,11 +1,12 @@
 import { Props as ButtonProps } from '../Button/Button.types';
 import { Asset } from '../AnimationSet1/AnimationSet1.types';
+import { SPACING } from '../Hero/Hero.types';
 export interface Props {
     testID?: string;
     inversed?: boolean;
     title: string;
     description: string;
-    meta: any[];
+    meta?: any[];
     buttonData: ButtonProps;
     assets: {
         bgAsset?: Asset;
@@ -14,4 +15,5 @@ export interface Props {
         focalAsset3?: Asset;
     };
     withBg?: boolean;
+    spacing?: SPACING;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './PanelHero.types';
 declare const PanelHero: {
-    ({ testID, title, description, image, buttonData, inversed, withBg, }: Props): React.ReactElement;
+    ({ testID, title, description, image, buttonData, inversed, withBg, spacing, video, }: Props): React.ReactElement;
     displayName: string;
 };
 export default PanelHero;

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

@@ -1,10 +1,14 @@
 import { Props as ButtonProps } from '../Button/Button.types';
+import { Props as VideoProps } from '../Video/Video.types';
+import { SPACING } from '../Hero/Hero.types';
 export interface Props {
     testID?: string;
     inversed?: boolean;
     title: string;
     description: string;
     buttonData: ButtonProps;
-    image: string;
+    image?: string;
+    video?: VideoProps;
     withBg?: boolean;
+    spacing?: SPACING;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './PanelProduct.types';
 declare const PanelProduct: {
-    ({ testID, title, description, image1, image2, iosLink, androidLink, inversed, withBg, }: Props): React.ReactElement;
+    ({ testID, title, description, image1, image2, iosLink, androidLink, inversed, withBg, spacing, }: Props): React.ReactElement;
     displayName: string;
 };
 export default PanelProduct;

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

@@ -1,3 +1,4 @@
+import { SPACING } from "../Hero/Hero.types";
 export interface Props {
     testID?: string;
     title: string;
@@ -8,4 +9,5 @@ export interface Props {
     androidLink: string;
     inversed?: boolean;
     withBg?: 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 }: Props): React.ReactElement;
+    ({ testID, sources, className, title, description, spacing, }: Props): React.ReactElement;
     displayName: string;
 };
 export default PanelVideo;

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

@@ -1,3 +1,4 @@
+import { SPACING } from "../Hero/Hero.types";
 export interface Props {
     testID?: string;
     sources: {
@@ -7,4 +8,5 @@ export interface Props {
     className?: string;
     title?: string;
     description?: string;
+    spacing?: SPACING;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './Video.types';
 declare const Video: {
-    ({ url, sources, onReady, className, options, isYoutube, defaultAudioTrack, rounded, }: Props): React.ReactElement;
+    ({ url, sources, onReady, className, options, isYoutube, defaultAudioTrack, rounded, aspectRatioValue, }: Props): React.ReactElement;
     displayName: string;
 };
 export default Video;

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

@@ -14,4 +14,5 @@ export interface Props {
     onReady?: (player: any) => void;
     defaultAudioTrack?: string;
     rounded?: boolean;
+    aspectRatioValue?: '16/9' | '4/3' | '1/1' | '3/4' | '9/16' | '16/7' | '16/5';
 }

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

@@ -36,6 +36,7 @@ export { default as Tabs } from './Tabs';
 export { default as VisitUs } from './VisitUs';
 export { default as Menu } from './Menu';
 export { default as Hero } from './Hero';
+export { default as HtmlContent } from './HtmlContent';
 export { default as Container } from './Container';
 export { default as ContentPageLayout } from './ContentPageLayout';
 export { default as ContentRowsLayout } from './ContentRowsLayout';
@@ -97,3 +98,4 @@ export type { Props as ChipProps } from './Chip/Chip.types';
 export type { Props as AvatarProps } from './Avatar/Avatar.types';
 export type { Props as OTPInputProps } from './OTPInput/OTPInput.types';
 export type { Props as HeroProps } from './Hero/Hero.types';
+export type { Props as HtmlContentProps } from './HtmlContent/HtmlContent.types';

package/dist/types/fui/utils/htmlParser/index.d.ts

@@ -0,0 +1,3 @@
+export declare const options: {
+    replace(domNode: any): any;
+};

package/dist/types/packages/alpha/theme/styles/settings/settings.themes.d.ts

@@ -140,6 +140,16 @@ declare const settings: {
         grey700: string;
         grey800: string;
         grey900: string;
+        purple50: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
     };
     screens: {
         sm: string;