@4alldigital/foundation-ui--gamma 1.29.0 → 1.31.0

package/dist/index.js

@@ -3,6 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('classnames');
 var react = require('@iconify/react');
+var Image$1 = require('next/image');
+var HoverVideoPlayer = require('react-hover-video-player');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 
@@ -13,79 +15,6 @@ var Blockquote = function (_a) {
 };
 Blockquote.displayName = 'Blockquote';
 
-exports.BTN_TYPES = void 0;
-(function (BTN_TYPES) {
-    BTN_TYPES["SUBMIT"] = "submit";
-    BTN_TYPES["RESET"] = "reset";
-    BTN_TYPES["BUTTON"] = "button";
-})(exports.BTN_TYPES || (exports.BTN_TYPES = {}));
-exports.BTN_VARIANTS = void 0;
-(function (BTN_VARIANTS) {
-    BTN_VARIANTS["PRIMARY"] = "primary";
-    BTN_VARIANTS["SECONDARY"] = "secondary";
-    BTN_VARIANTS["TERTIARY"] = "tertiary";
-})(exports.BTN_VARIANTS || (exports.BTN_VARIANTS = {}));
-exports.BTN_SIZES = void 0;
-(function (BTN_SIZES) {
-    BTN_SIZES["SMALL"] = "small";
-    BTN_SIZES["MEDIUM"] = "medium";
-    BTN_SIZES["LARGE"] = "large";
-})(exports.BTN_SIZES || (exports.BTN_SIZES = {}));
-
-/**
- * Icon component
- * List of supported icons can be found at https://icon-sets.iconify.design.
- */
-var Icon = function (_a) {
-    var name = _a.name, _b = _a.size, size = _b === void 0 ? 24 : _b, color = _a.color, id = _a.id, className = _a.className, testID = _a.testID;
-    if (color) {
-        return (jsxRuntime.jsx(react.Icon, { "data-testid": testID || id || 'Icon', icon: name, width: size, height: size, color: color, className: className, fill: color || 'currentColor' }));
-    }
-    return (jsxRuntime.jsx(react.Icon, { "data-testid": testID || id || 'Icon', icon: name, width: size, height: size }));
-};
-Icon.displayName = 'Icon';
-
-var Loader = function (_a) {
-    var color = _a.color, _b = _a.size, size = _b === void 0 ? 8 : _b, _c = _a.thickness, thickness = _c === void 0 ? 4 : _c;
-    var sizeClass = size ? "w-".concat(size, " h-").concat(size) : 'w-8 h-8';
-    return (jsxRuntime.jsx("div", { "data-testid": "Loader", className: 'mr-3 flex items-center justify-center', children: jsxRuntime.jsxs("div", { role: "status", className: 'flex items-center', children: [jsxRuntime.jsxs("svg", { className: "animate-spin ".concat(sizeClass, " text-white"), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: color || 'currentColor', strokeWidth: thickness }), jsxRuntime.jsx("path", { className: "opacity-75", fill: color || 'currentColor', d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })] }) }));
-};
-Loader.displayName = 'Loader';
-
-var Button = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? exports.BTN_VARIANTS.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? exports.BTN_SIZES.MEDIUM : _c, _d = _a.type, type = _d === void 0 ? exports.BTN_TYPES.BUTTON : _d, _e = _a.wide, wide = _e === void 0 ? true : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.raised, raised = _g === void 0 ? true : _g, uppercase = _a.uppercase, children = _a.children, id = _a.id, disabled = _a.disabled, ariaLabel = _a.ariaLabel, onClick = _a.onClick, icon = _a.icon, external = _a.external, iconFirst = _a.iconFirst, outline = _a.outline, testID = _a.testID, className = _a.className, isLoading = _a.isLoading;
-    var smallX = wide ? 'px-5' : 'px-3';
-    var mediumX = wide ? 'px-8' : 'px-4';
-    var largeX = wide ? 'px-11' : 'px-5';
-    var sizes = {
-        small: {
-            x: children ? smallX : 'px-1',
-            y: 'py-1',
-            space: 'space-x-2',
-            text: 'text-sm',
-            icon: 'w-4 h-4',
-        },
-        medium: {
-            x: children ? mediumX : 'px-2',
-            y: 'py-2',
-            space: 'space-x-3',
-            text: 'text-base',
-            icon: 'w-5 h-5',
-        },
-        large: {
-            x: children ? largeX : 'px-3',
-            y: 'py-3',
-            space: 'space-x-4',
-            text: 'text-lg',
-            icon: 'w-6 h-6',
-        },
-    };
-    var classes = cx('appearance-none font-body flex items-center transition-all duration-200 transform active:scale-95 justify-around border-solid border rounded cursor-pointer outline-none focus:outline-none focus-visible:outline-none', { 'text-white border-primary hover:bg-primary-darker': variant === 'primary' }, { 'text-white border-secondary hover:bg-secondary-darker': variant === 'secondary' }, { 'text-black border-tertiary hover:bg-tertiary-darker': variant === 'tertiary' }, { 'bg-primary': variant === 'primary' }, { 'bg-secondary': variant === 'secondary' }, { 'bg-tertiary': variant === 'tertiary' }, { 'border-primary300 dark:border-primary400 hover:border-primary400 dark:hover:border-primary500': outline }, { shadow: raised }, { uppercase: uppercase }, { 'auto-cols-auto grid-cols-2 gap-2': icon || external }, { 'rounded-full': rounded }, { 'flex-row-reverse': iconFirst }, { 'opacity-50 cursor-not-allowed': disabled }, "".concat(sizes[size].y, " ").concat(sizes[size].x, " ").concat(sizes[size].text), className);
-    var iconClasses = cx(sizes[size].icon);
-    return (jsxRuntime.jsx("button", { id: id, "data-testid": testID || id || 'Button', onClick: onClick, className: classes, type: type, disabled: disabled, "aria-label": ariaLabel, role: "button", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && (jsxRuntime.jsx("div", { className: "flex items-center", children: jsxRuntime.jsx(Loader, { size: 4 }) })), children, icon && !external && (jsxRuntime.jsx("span", { className: "flex items-center", children: jsxRuntime.jsx(Icon, { name: icon, className: iconClasses }) })), external && (jsxRuntime.jsx("span", { className: "flex items-center", children: jsxRuntime.jsx(Icon, { name: "carbon:launch", className: iconClasses }) }))] }) }));
-};
-Button.displayName = 'Button';
-
 exports.COPY_ALIGN = void 0;
 (function (COPY_ALIGN) {
     COPY_ALIGN["LEFT"] = "left";
@@ -163,26 +92,51 @@ var Heading = function (_a) {
     var fontSize = function () {
         switch (tag) {
             case 'h1':
-                return 'text-5xl';
+                return 'text-5xl md:text-5xl lg:text-5xl';
             case 'h2':
-                return 'text-4xl';
+                return 'text-4xl md:text-4xl lg:text-4xl';
             case 'h3':
-                return 'text-3xl';
+                return 'text-3xl md:text-3xl lg:text-3xl';
             case 'h4':
-                return 'text-2xl';
+                return 'text-2xl md:text-2xl lg:text-2xl';
             case 'h5':
-                return 'text-xl';
+                return 'text-lg md:text-lg lg:text-lg';
             default:
-                return 'text-2xl';
+                return 'text-2xl md:text-2xl lg:text-2xl';
         }
     };
     var size = fontSize();
     var Tag = tag;
-    var classes = cx("m-0 p-0 font-heading font-bold mb-2 ".concat(size), (_b = {}, _b["text-".concat(align)] = align, _b), { 'm-0': flush }, { 'whitespace-nowrap text-ellipsis overflow-hidden': singleLine }, transform, className);
+    var classes = cx("m-0 p-0 font-heading font-bold ".concat(size), (_b = {}, _b["text-".concat(align)] = align, _b), { 'mb-2': !flush }, { 'm-0': flush }, { 'whitespace-nowrap text-ellipsis overflow-hidden': singleLine }, transform, className);
     return (jsxRuntime.jsx(Tag, { "data-testid": testID || id || 'Heading', className: classes, children: children }));
 };
 Heading.displayName = 'Heading';
 
+/**
+ * Icon component
+ * List of supported icons can be found at https://icon-sets.iconify.design.
+ */
+var Icon = function (_a) {
+    // if (color) {
+    //   return (
+    //     <IconifyIcon
+    //       data-testid={testID || id || 'Icon'}
+    //       icon={name}
+    //       width={size}
+    //       height={size}
+    //       color={color}
+    //       className={className}
+    //       fill={color || 'currentColor'}
+    //     />
+    //   );
+    // }
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? 24 : _b, color = _a.color, id = _a.id, className = _a.className, testID = _a.testID;
+    return (jsxRuntime.jsx(react.Icon, { "data-testid": testID || id || 'Icon', icon: name, width: size, height: size, 
+        // color={color}
+        className: className, fill: color || 'currentColor' }));
+};
+Icon.displayName = 'Icon';
+
 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;
     var figureClasses = cx('m-0');
@@ -258,6 +212,13 @@ var Notice = function (_a) {
 };
 Notice.displayName = 'Notice';
 
+var Loader = function (_a) {
+    var color = _a.color, _b = _a.size, size = _b === void 0 ? 8 : _b, _c = _a.thickness, thickness = _c === void 0 ? 4 : _c;
+    var sizeClass = size ? "w-".concat(size, " h-").concat(size) : 'w-8 h-8';
+    return (jsxRuntime.jsx("div", { "data-testid": "Loader", className: 'mr-3 flex items-center justify-center', children: jsxRuntime.jsxs("div", { role: "status", className: 'flex items-center', children: [jsxRuntime.jsxs("svg", { className: "animate-spin ".concat(sizeClass, " text-white"), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: color || 'currentColor', strokeWidth: thickness }), jsxRuntime.jsx("path", { className: "opacity-75", fill: color || 'currentColor', d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })] }) }));
+};
+Loader.displayName = 'Loader';
+
 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 }, className);
@@ -301,6 +262,59 @@ var ContentRowsLayout = function (_a) {
 };
 ContentRowsLayout.displayName = 'ContentRowsLayout';
 
+exports.BTN_TYPES = void 0;
+(function (BTN_TYPES) {
+    BTN_TYPES["SUBMIT"] = "submit";
+    BTN_TYPES["RESET"] = "reset";
+    BTN_TYPES["BUTTON"] = "button";
+})(exports.BTN_TYPES || (exports.BTN_TYPES = {}));
+exports.BTN_VARIANTS = void 0;
+(function (BTN_VARIANTS) {
+    BTN_VARIANTS["PRIMARY"] = "primary";
+    BTN_VARIANTS["SECONDARY"] = "secondary";
+    BTN_VARIANTS["TERTIARY"] = "tertiary";
+})(exports.BTN_VARIANTS || (exports.BTN_VARIANTS = {}));
+exports.BTN_SIZES = void 0;
+(function (BTN_SIZES) {
+    BTN_SIZES["SMALL"] = "small";
+    BTN_SIZES["MEDIUM"] = "medium";
+    BTN_SIZES["LARGE"] = "large";
+})(exports.BTN_SIZES || (exports.BTN_SIZES = {}));
+
+var Button = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? exports.BTN_VARIANTS.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? exports.BTN_SIZES.MEDIUM : _c, _d = _a.type, type = _d === void 0 ? exports.BTN_TYPES.BUTTON : _d, _e = _a.wide, wide = _e === void 0 ? true : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.raised, raised = _g === void 0 ? true : _g, uppercase = _a.uppercase, children = _a.children, id = _a.id, disabled = _a.disabled, ariaLabel = _a.ariaLabel, onClick = _a.onClick, icon = _a.icon, external = _a.external, iconFirst = _a.iconFirst, outline = _a.outline, testID = _a.testID, className = _a.className, isLoading = _a.isLoading;
+    var smallX = wide ? 'px-5' : 'px-3';
+    var mediumX = wide ? 'px-8' : 'px-4';
+    var largeX = wide ? 'px-11' : 'px-5';
+    var sizes = {
+        small: {
+            x: children ? smallX : 'px-1',
+            y: 'py-1',
+            space: 'space-x-2',
+            text: 'text-sm',
+            icon: 'w-3 h-3',
+        },
+        medium: {
+            x: children ? mediumX : 'px-2',
+            y: 'py-2',
+            space: 'space-x-3',
+            text: 'text-base',
+            icon: 'w-5 h-5',
+        },
+        large: {
+            x: children ? largeX : 'px-3',
+            y: 'py-3',
+            space: 'space-x-4',
+            text: 'text-lg',
+            icon: 'w-6 h-6',
+        },
+    };
+    var classes = cx('appearance-none font-body flex items-center transition-all duration-200 transform active:scale-95 justify-around border-solid border rounded cursor-pointer outline-none focus:outline-none focus-visible:outline-none', { 'text-white border-primary hover:bg-primary-darker': variant === 'primary' }, { 'text-white border-secondary hover:bg-secondary-darker': variant === 'secondary' }, { 'text-black border-tertiary hover:bg-tertiary-darker': variant === 'tertiary' }, { 'bg-primary': variant === 'primary' }, { 'bg-secondary': variant === 'secondary' }, { 'bg-tertiary': variant === 'tertiary' }, { 'border-primary300 dark:border-primary400 hover:border-primary400 dark:hover:border-primary500': outline }, { shadow: raised }, { uppercase: uppercase }, { 'auto-cols-auto grid-cols-2 gap-2': icon || external }, { 'rounded-full': rounded }, { 'flex-row-reverse': iconFirst }, { 'opacity-50 cursor-not-allowed': disabled }, "".concat(sizes[size].y, " ").concat(sizes[size].x, " ").concat(sizes[size].text), className);
+    var iconClasses = cx(sizes[size].icon);
+    return (jsxRuntime.jsx("button", { id: id, "data-testid": testID || id || 'Button', onClick: onClick, className: classes, type: type, disabled: disabled, "aria-label": ariaLabel, role: "button", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && (jsxRuntime.jsx("div", { className: "flex items-center", children: jsxRuntime.jsx(Loader, { size: 4 }) })), children, icon && !external && (jsxRuntime.jsx("span", { className: "flex items-center", children: jsxRuntime.jsx(Icon, { name: icon, className: iconClasses }) })), external && (jsxRuntime.jsx("span", { className: "flex items-center", children: jsxRuntime.jsx(Icon, { name: "carbon:launch", className: iconClasses }) }))] }) }));
+};
+Button.displayName = 'Button';
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -346,6 +360,217 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var CardBasic = function (_a) {
+    var id = _a.id, title = _a.title, description = _a.description, image = _a.image, className = _a.className, metaData = _a.metaData, actions = _a.actions, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
+    return (jsxRuntime.jsxs("div", { id: id, "data-testid": "CardBasic", className: cx('relative rounded-lg overflow-hidden transition duration-300 ease-in-out cursor-pointer hover:scale-105 shadow hover:shadow-lg bg-primary-lighter hover:bg-primary hover:text-body-text-inverted', className), onClick: onClick, children: [image && (jsxRuntime.jsx("div", { className: "card-image relative w-full min-h-40", children: jsxRuntime.jsx(Image$1, { fill: true, src: image === null || image === void 0 ? void 0 : image.src, width: 0, height: 0, sizes: "100vh", alt: image === null || image === void 0 ? void 0 : image.alt, className: "object-cover" }) })), jsxRuntime.jsxs("div", { className: "w-full p-3 flex flex-col gap-1", children: [jsxRuntime.jsx("div", { children: title && (jsxRuntime.jsx(Heading, { tag: exports.HEADING_TAGS.H5, singleLine: true, flush: true, children: title })) }), jsxRuntime.jsx("div", { children: description && jsxRuntime.jsx(Copy, { children: description }) }), jsxRuntime.jsxs("div", { className: "flex items-center  justify-between gap-2", children: [metaData && (jsxRuntime.jsx("div", { className: "flex shrink-0", children: metaData.map(function (meta, index) {
+                                    if (index === 0) {
+                                        return (jsxRuntime.jsxs(Copy, { className: "text-xs", as: exports.COPY_TAG.SMALL, children: [meta, "\u00A0\u00B7"] }, meta));
+                                    }
+                                    if (index === metaData.length - 1) {
+                                        return (jsxRuntime.jsxs(Copy, { className: "text-xs", as: exports.COPY_TAG.SMALL, children: ["\u00A0", meta] }, meta));
+                                    }
+                                    return (jsxRuntime.jsxs(Copy, { className: "text-xs", as: exports.COPY_TAG.SMALL, children: ["\u00A0", meta, "\u00A0\u00B7"] }, meta));
+                                }) })), actions && (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [actions.like && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.like.isActive ? 'mdi:like' : 'mdi:like-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.like) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.like.onClick === 'function') {
+                                                actions.like.onClick({ id: id });
+                                            }
+                                        } })), actions.share && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.share.isActive ? 'mdi:share' : 'mdi:share-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.share) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.share.onClick === 'function') {
+                                                actions.share.onClick({ id: id });
+                                            }
+                                        } })), actions.save && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.save.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.save) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.save.onClick === 'function') {
+                                                actions.save.onClick({ id: id });
+                                            }
+                                        } })), actions.comment && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.comment.isActive ? 'mdi:comment' : 'mdi:comment-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.comment) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.comment.onClick === 'function') {
+                                                actions.comment.onClick({ id: id });
+                                            }
+                                        } })), actions.bookmark && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.bookmark.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.bookmark) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.bookmark.onClick === 'function') {
+                                                actions.bookmark.onClick({ id: id });
+                                            }
+                                        } })), actions.report && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.report.isActive ? 'mdi:flag' : 'mdi:flag-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.report) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.report.onClick === 'function') {
+                                                actions.report.onClick({ id: id });
+                                            }
+                                        } })), actions.follow && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.follow.isActive ? 'mdi:account-plus' : 'mdi:account-plus-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.follow) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.follow.onClick === 'function') {
+                                                actions.follow.onClick({ id: id });
+                                            }
+                                        } })), actions.download && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.download.isActive ? 'mdi:download' : 'mdi:download-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.download) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.download.onClick === 'function') {
+                                                actions.download.onClick({ id: id });
+                                            }
+                                        } })), actions.edit && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.edit.isActive ? 'mdi:pencil' : 'mdi:pencil-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.edit) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.edit.onClick === 'function') {
+                                                actions.edit.onClick({ id: id });
+                                            }
+                                        } })), actions.delete && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.delete.isActive ? 'mdi:delete' : 'mdi:delete-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.delete) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.delete.onClick === 'function') {
+                                                actions.delete.onClick({ id: id });
+                                            }
+                                        } }))] }))] })] })] }));
+};
+CardBasic.displayName = 'CardBasic';
+
+var CardMedia = function (_a) {
+    var className = _a.className;
+    return (jsxRuntime.jsx("div", { "data-testid": "CardMedia", className: cx('relative', className), children: "CardMedia" }));
+};
+CardMedia.displayName = 'CardMedia';
+
+//   title,
+//   uuid,
+//   image,
+//   date,
+//   video,
+//   isMuted = false,
+//   withStyles = true,
+//   promoCards = false,
+//   isOriginal = false,
+//   customPath,
+var CardVideo = function (_a) {
+    var video = _a.video, _b = _a.isMuted, isMuted = _b === void 0 ? true : _b, id = _a.id, title = _a.title, description = _a.description, image = _a.image, className = _a.className, metaData = _a.metaData, actions = _a.actions, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c;
+    // console.log('title', title);
+    console.log('isMuted', isMuted);
+    // console.log('image', image);
+    return (jsxRuntime.jsxs("div", { id: id, "data-testid": "CardBasic", className: cx('relative rounded-lg overflow-hidden transition duration-300 ease-in-out cursor-pointer hover:scale-105 shadow hover:shadow-lg bg-white text-black-lighter hover:bg-white-darker dark:bg-primary-lighter dark:hover:bg-primary-lighter dark:text-white-darker', className), onClick: onClick, children: [image && (jsxRuntime.jsx("div", { className: "card-image relative w-full min-h-40", children: jsxRuntime.jsx(HoverVideoPlayer, { videoId: "video--".concat(id), 
+                    // videoSrc={[
+                    //   {
+                    //     type: 'video/mp4',
+                    //     src: mp4Video,
+                    //   },
+                    // ]}
+                    playbackStartDelay: 1000, videoSrc: jsxRuntime.jsx("source", { src: video, type: "video/mp4" }), videoClassName: cx('hls-hover-video w-full min-h-40'), sizingMode: "overlay", preload: "none", loop: false, muted: isMuted, className: "w-full min-h-40", pausedOverlay: 
+                    // <FadeImage
+                    //   src={image || PLACEHOLDER_CARD_IMAGE_DARK}
+                    //   overlaySrc={PLACEHOLDER_CARD_IMAGE_DARK}
+                    //   alt={title || 'Image'}
+                    //   title={title || 'Image'}
+                    //   className={styles.cardMedia}
+                    // />
+                    jsxRuntime.jsx("div", { className: "w-full min-h-40", children: jsxRuntime.jsx(Image$1
+                        // src={image?.src || ''}
+                        // width={200}
+                        // height={200}
+                        // sizes="100vh"
+                        // alt={image?.alt || ''}
+                        // className="object-cover"
+                        , { 
+                            // src={image?.src || ''}
+                            // width={200}
+                            // height={200}
+                            // sizes="100vh"
+                            // alt={image?.alt || ''}
+                            // className="object-cover"
+                            fill: true, src: image === null || image === void 0 ? void 0 : image.src, width: 0, height: 0, sizes: "100vh", alt: image === null || image === void 0 ? void 0 : image.alt, className: "object-cover" }) }), loadingOverlay: jsxRuntime.jsx("div", { className: "w-full min-h-40 flex items-center justify-center", children: jsxRuntime.jsx("div", { className: "", children: jsxRuntime.jsx(Loader, {}) }) }) }, "".concat(id, "--card")) })), jsxRuntime.jsxs("div", { className: "w-full p-3 flex flex-col gap-1", children: [jsxRuntime.jsx("div", { children: title && (jsxRuntime.jsx(Heading, { tag: exports.HEADING_TAGS.H5, singleLine: true, flush: true, children: title })) }), jsxRuntime.jsx("div", { children: description && jsxRuntime.jsx(Copy, { children: description }) }), jsxRuntime.jsxs("div", { className: "flex items-center  justify-between gap-2", children: [metaData && (jsxRuntime.jsx("div", { className: "flex shrink-0", children: metaData.map(function (meta, index) {
+                                    if (index === 0) {
+                                        return (jsxRuntime.jsxs(Copy, { className: "text-xs", as: exports.COPY_TAG.SMALL, children: [meta, "\u00A0\u00B7"] }, meta));
+                                    }
+                                    if (index === metaData.length - 1) {
+                                        return (jsxRuntime.jsxs(Copy, { className: "text-xs", as: exports.COPY_TAG.SMALL, children: ["\u00A0", meta] }, meta));
+                                    }
+                                    return (jsxRuntime.jsxs(Copy, { className: "text-xs", as: exports.COPY_TAG.SMALL, children: ["\u00A0", meta, "\u00A0\u00B7"] }, meta));
+                                }) })), actions && (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [actions.like && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.like.isActive ? 'mdi:like' : 'mdi:like-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.like) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.like.onClick === 'function') {
+                                                actions.like.onClick({ id: id });
+                                            }
+                                        } })), actions.share && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.share.isActive ? 'mdi:share' : 'mdi:share-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.share) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.share.onClick === 'function') {
+                                                actions.share.onClick({ id: id });
+                                            }
+                                        } })), actions.save && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.save.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.save) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.save.onClick === 'function') {
+                                                actions.save.onClick({ id: id });
+                                            }
+                                        } })), actions.comment && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.comment.isActive ? 'mdi:comment' : 'mdi:comment-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.comment) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.comment.onClick === 'function') {
+                                                actions.comment.onClick({ id: id });
+                                            }
+                                        } })), actions.bookmark && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.bookmark.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.bookmark) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.bookmark.onClick === 'function') {
+                                                actions.bookmark.onClick({ id: id });
+                                            }
+                                        } })), actions.report && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.report.isActive ? 'mdi:flag' : 'mdi:flag-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.report) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.report.onClick === 'function') {
+                                                actions.report.onClick({ id: id });
+                                            }
+                                        } })), actions.follow && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.follow.isActive ? 'mdi:account-plus' : 'mdi:account-plus-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.follow) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.follow.onClick === 'function') {
+                                                actions.follow.onClick({ id: id });
+                                            }
+                                        } })), actions.download && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.download.isActive ? 'mdi:download' : 'mdi:download-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.download) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.download.onClick === 'function') {
+                                                actions.download.onClick({ id: id });
+                                            }
+                                        } })), actions.edit && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.edit.isActive ? 'mdi:pencil' : 'mdi:pencil-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.edit) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.edit.onClick === 'function') {
+                                                actions.edit.onClick({ id: id });
+                                            }
+                                        } })), actions.delete && (jsxRuntime.jsx(Button, { variant: exports.BTN_VARIANTS.PRIMARY, icon: actions.delete.isActive ? 'mdi:delete' : 'mdi:delete-outline', size: exports.BTN_SIZES.SMALL, onClick: function (event) {
+                                            var _a;
+                                            event.stopPropagation();
+                                            if (((_a = actions === null || actions === void 0 ? void 0 : actions.delete) === null || _a === void 0 ? void 0 : _a.onClick) && typeof actions.delete.onClick === 'function') {
+                                                actions.delete.onClick({ id: id });
+                                            }
+                                        } }))] }))] })] })] }));
+};
+CardVideo.displayName = 'CardVideo';
+
+var Card = function (_a) {
+    var variant = _a.variant, className = _a.className, data = _a.data, rest = __rest(_a, ["variant", "className", "data"]);
+    switch (variant) {
+        case 'basic':
+            return jsxRuntime.jsx(CardBasic, __assign({ className: className }, data, rest));
+        case 'media':
+            return jsxRuntime.jsx(CardMedia, __assign({ className: className }, data, rest));
+        case 'video':
+            return jsxRuntime.jsx(CardVideo, __assign({ className: className }, data, rest));
+        default:
+            return jsxRuntime.jsx(CardBasic, __assign({ className: className }, data, rest));
+    }
+};
+Card.displayName = 'Card';
+
 var Form = function (_a) {
     var children = _a.children, className = _a.className, submit = _a.submit, _b = _a.onSubmit, onSubmit = _b === void 0 ? function () { } : _b, onChange = _a.onChange, hideSubmit = _a.hideSubmit, ariaSubmitLabel = _a.ariaSubmitLabel, submitID = _a.submitID, _c = _a.submitVariant, submitVariant = _c === void 0 ? exports.BTN_VARIANTS.PRIMARY : _c, _d = _a.initialValues, initialValues = _d === void 0 ? {} : _d, _e = _a.isBoxed, isBoxed = _e === void 0 ? false : _e;
     var methods = reactHookForm.useForm({
@@ -520,6 +745,7 @@ FormField.displayName = 'FormField';
 
 exports.Blockquote = Blockquote;
 exports.Button = Button;
+exports.Card = Card;
 exports.Container = Container;
 exports.ContentPageLayout = ContentPageLayout;
 exports.ContentRowsLayout = ContentRowsLayout;

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

@@ -18,7 +18,7 @@ export interface Props {
     variant?: BTN_VARIANTS;
     size?: BTN_SIZES;
     uppercase?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     type?: BTN_TYPES;
     disabled?: boolean;
     ariaLabel?: string;

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

@@ -10,6 +10,23 @@ export interface ImageData {
     width?: number;
     height?: number;
 }
+type ActionItem = {
+    count?: number;
+    isActive: boolean;
+    onClick: (event: any) => void;
+};
+export interface Actions {
+    like?: ActionItem;
+    share?: ActionItem;
+    save?: ActionItem;
+    comment?: ActionItem;
+    bookmark?: ActionItem;
+    report?: ActionItem;
+    follow?: ActionItem;
+    download?: ActionItem;
+    edit?: ActionItem;
+    delete?: ActionItem;
+}
 export interface CardData {
     id: string;
     title: string;
@@ -20,10 +37,12 @@ export interface CardData {
     tags?: string[];
     moreTitle?: string;
     metaData?: string[];
-    onClick?: () => void;
+    actions?: Actions;
+    onClick?: (data: any) => void;
 }
 export interface Props {
     variant?: CardVariant;
     className?: string;
     data: CardData;
 }
+export {};

package/dist/types/fui/components/Card/types/CardBasic/CardBasic.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './CardBasic.types';
 declare const CardBasic: {
-    ({ id, title, description, image, className, onClick }: Props): React.ReactElement;
+    ({ id, title, description, image, className, metaData, actions, onClick, }: Props): React.ReactElement;
     displayName: string;
 };
 export default CardBasic;

package/dist/types/fui/components/Card/types/CardVideo/CardVideo.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Props } from './CardVideo.types';
 declare const CardVideo: {
-    ({ className }: Props): React.ReactElement;
+    ({ video, isMuted, id, title, description, image, className, metaData, actions, onClick, }: Props): React.ReactElement;
     displayName: string;
 };
 export default CardVideo;

package/dist/types/fui/components/Card/types/CardVideo/CardVideo.types.d.ts

@@ -1,4 +1,6 @@
 import { CardData } from '../../Card.types';
 export interface Props extends CardData {
     className?: string;
+    video?: string;
+    isMuted?: boolean;
 }

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

@@ -1,5 +1,4 @@
 export { default as Blockquote } from './Blockquote';
-export { default as Button } from './Button';
 export { default as Copy } from './Copy';
 export { default as Hr } from './Hr';
 export { default as Heading } from './Heading';
@@ -13,6 +12,8 @@ export { default as Loader } from './Loader';
 export { default as Container } from './Container';
 export { default as ContentPageLayout } from './ContentPageLayout';
 export { default as ContentRowsLayout } from './ContentRowsLayout';
+export { default as Button } from './Button';
+export { default as Card } from './Card';
 export { default as Form } from './Form';
 export { default as FormField } from './FormField';
 export type { Props as BlockquoteProps } from './Blockquote/Blockquote.types';
@@ -38,3 +39,4 @@ export { CRL_SIZE } from './ContentRowsLayout/ContentRowsLayout.types';
 export type { Props as FormProps } from './Form/Form.types';
 export type { Props as FormFieldProps } from './FormField/FormField.types';
 export { FIELD_TYPES } from './FormField/FormField.types';
+export type { Props as CardProps } from './Card/Card.types';

package/dist/types/fui/features/Search/Search.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '@elastic/eui/dist/eui_theme_light.css';
 import '@elastic/react-search-ui-views/lib/styles/styles.css';
 import { Props } from './Search.types';
-export default function Search({ showOptions, resultAs, ResultFieldMap, }: Props): React.ReactElement;
+export default function Search({ showOptions, resultAs, ResultFieldMap, config, facetDisplay, noSidebar, }: Props): React.ReactElement;

package/dist/types/fui/features/Search/Search.types.d.ts

@@ -1,12 +1,27 @@
-import { cardMap } from "./views/Result/Result.types";
+/// <reference types="react" />
+import { cardMap } from './views/Result/Result.types';
 export declare enum ResultAsTypes {
     cardBasic = "cardBasic",
     cardMedia = "cardMedia",
     cardVideo = "cardVideo"
 }
+interface FacetDisplay {
+    field: string;
+    label: string;
+    view: React.FC<any>;
+}
 export interface Props {
     custom: string;
     showOptions: number[];
     resultAs: ResultAsTypes;
     ResultFieldMap?: cardMap;
+    config: {
+        searchFields: any;
+        filters: any[];
+        facets: any;
+        resultsFields: any;
+    };
+    facetDisplay: FacetDisplay[];
+    noSidebar: boolean;
 }
+export {};

package/dist/types/fui/features/Search/views/Layout/Layout.types.d.ts

@@ -7,4 +7,5 @@ export interface Props {
     bodyFooter?: React.ReactNode;
     bodyHeader?: React.ReactNode;
     sideContent?: React.ReactNode;
+    noSidebar?: boolean;
 }

package/dist/types/fui/features/Search/views/Result/Result.d.ts

@@ -1,5 +1,5 @@
 import { Props } from './Result.types';
-declare function Result({ className, result, onClickLink, as, cardMap, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Result({ className, result, as, cardMap, }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Result {
     var displayName: string;
 }