@digital-b2c/coreui-kit 0.13.6 → 0.14.0

package/dist/index.cjs

@@ -2,19 +2,21 @@
 
 var clsx43 = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
-var React66 = require('react');
+var React67 = require('react');
 var gsap = require('gsap');
 var react = require('@gsap/react');
 var ScrollTrigger = require('gsap/ScrollTrigger');
 var react$1 = require('swiper/react');
 var modules = require('swiper/modules');
 require('swiper/css');
+var ReactPlayer = require('react-player');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var clsx43__default = /*#__PURE__*/_interopDefault(clsx43);
-var React66__default = /*#__PURE__*/_interopDefault(React66);
+var React67__default = /*#__PURE__*/_interopDefault(React67);
 var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+var ReactPlayer__default = /*#__PURE__*/_interopDefault(ReactPlayer);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -314,6 +316,11 @@ var SvgIconExternalLink = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", __sp
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.4784 15.1242C18.8387 14.3348 18.0226 13.6816 17.0853 13.2089C16.1481 12.7363 15.1117 12.4552 14.0464 12.3848C12.9812 12.3143 11.912 12.4562 10.9113 12.8008C9.91068 13.1453 9.00202 13.6845 8.24697 14.3817L3.77822 18.5067C2.42152 19.8034 1.67081 21.54 1.68778 23.3426C1.70475 25.1452 2.48804 26.8695 3.86894 28.1442C5.24985 29.4189 7.11788 30.1419 9.0707 30.1576C11.0235 30.1733 12.9049 29.4803 14.3096 28.228L16.8568 25.8767", stroke: "#949494", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" })
 ] }));
 var icon_external_link_default = SvgIconExternalLink;
+var SvgIconPlay = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", __spreadProps(__spreadValues({ xmlns: "http://www.w3.org/2000/svg", width: 134, height: 134, viewBox: "0 0 134 134", fill: "none" }, props), { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 38, y: 40, width: 58, height: 53, fill: "white" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M53.4617 90.7285L90.7305 66.9993L53.4617 43.2702V90.7285ZM67.0013 122.833C59.3707 122.833 52.1589 121.367 45.3659 118.436C38.5728 115.505 32.6405 111.503 27.569 106.432C22.4975 101.36 18.4961 95.4278 15.5648 88.6348C12.6336 81.8417 11.168 74.6299 11.168 66.9993C11.168 59.2757 12.6336 52.0174 15.5648 45.2243C18.4961 38.4313 22.4975 32.5223 27.569 27.4973C32.6405 22.4723 38.5728 18.4941 45.3659 15.5629C52.1589 12.6316 59.3707 11.166 67.0013 11.166C74.7249 11.166 81.9833 12.6316 88.7763 15.5629C95.5694 18.4941 101.478 22.4723 106.503 27.4973C111.528 32.5223 115.507 38.4313 118.438 45.2243C121.369 52.0174 122.835 59.2757 122.835 66.9993C122.835 74.6299 121.369 81.8417 118.438 88.6348C115.507 95.4278 111.528 101.36 106.503 106.432C101.478 111.503 95.5694 115.505 88.7763 118.436C81.9833 121.367 74.7249 122.833 67.0013 122.833Z", fill: "#080808" })
+] }));
+var icon_play_default = SvgIconPlay;
 var svgs = {
   /* Card */
   ads: icon_ads_default,
@@ -337,6 +344,7 @@ var svgs = {
   pdf: icon_pdf_default,
   externalLink: icon_external_link_default,
   newIcon: icon_new_default,
+  play: icon_play_default,
   /* Button */
   blankCheckbox: icon_blank_checkbox_default,
   blankCheckboxWhite: icon_blank_checkbox_white_default,
@@ -382,7 +390,7 @@ var svgs = {
   xBlack: icon_x_black_default,
   xWhite: icon_x_white_default
 };
-var Icon = React66__default.default.memo(
+var Icon = React67__default.default.memo(
   (_a) => {
     var _b = _a, { type, size } = _b, props = __objRest(_b, ["type", "size"]);
     if (type) {
@@ -496,21 +504,21 @@ var getDeviceType = (width) => {
   return "desktop";
 };
 var useViewPort = () => {
-  const [device, setDevice] = React66.useState(
+  const [device, setDevice] = React67.useState(
     () => typeof window !== "undefined" ? getDeviceType(window.innerWidth) : "desktop"
   );
-  const getOtherDevices = React66.useCallback(
+  const getOtherDevices = React67.useCallback(
     (list, what, includeSelf = false) => {
       const deviceIndex = list.indexOf(what) + (!includeSelf ? 1 : 0);
       return [...list].slice(deviceIndex);
     },
     []
   );
-  const onWindowResize = React66.useCallback(() => {
+  const onWindowResize = React67.useCallback(() => {
     setDevice(getDeviceType(window.innerWidth));
   }, []);
   const onWindowResizeDebounce = useDebounce_default(onWindowResize, 100);
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     window.addEventListener("resize", onWindowResizeDebounce);
     return () => window.removeEventListener("resize", onWindowResizeDebounce);
   }, [onWindowResizeDebounce]);
@@ -563,13 +571,13 @@ var BrandsStrip = ({
   cta,
   size
 }) => {
-  const [show, setShow] = React66.useState(false);
-  const [shouldAnimate, setShouldAnimate] = React66.useState(false);
+  const [show, setShow] = React67.useState(false);
+  const [shouldAnimate, setShouldAnimate] = React67.useState(false);
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  const containerRef = React66.useRef(null);
-  const marqueeRef = React66.useRef(null);
-  const timeline = React66.useRef(null);
+  const containerRef = React67.useRef(null);
+  const marqueeRef = React67.useRef(null);
+  const timeline = React67.useRef(null);
   const horizontalLoop = (items, config) => {
     const itemsArray = gsap__default.default.utils.toArray(items);
     const cfg = config || {};
@@ -663,7 +671,7 @@ var BrandsStrip = ({
       timeline.current.play();
     }
   };
-  const duplicatedLogos = React66.useMemo(() => {
+  const duplicatedLogos = React67.useMemo(() => {
     if (logos.length === 0) return [];
     if (!shouldAnimate) return [...logos];
     return [...logos, ...logos];
@@ -716,8 +724,8 @@ var CardSubtitle = ({ children }) => {
 };
 function resolveCompoundSlots(children, slots) {
   const resolved = {};
-  React66.Children.forEach(children, (child) => {
-    if (!React66.isValidElement(child)) return;
+  React67.Children.forEach(children, (child) => {
+    if (!React67.isValidElement(child)) return;
     Object.entries(slots).forEach(([key, Component]) => {
       if (child.type === Component) {
         resolved[key] = child.props.children;
@@ -731,7 +739,7 @@ function resolveCompoundSlots(children, slots) {
 var Container_module_default = {
   container: "Container_module_container"
 };
-var Container = React66.forwardRef(
+var Container = React67.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className: clsx43__default.default(Container_module_default.container, className) }, props), { children }));
@@ -872,11 +880,11 @@ function FilterBar({
   searchValue,
   onSearchChange
 }) {
-  const [openDropdown, setOpenDropdown] = React66.useState(null);
-  const [searchState, setSearchState] = React66.useState("closed");
-  const filterRef = React66.useRef(null);
-  const sortRef = React66.useRef(null);
-  const searchInputRef = React66.useRef(null);
+  const [openDropdown, setOpenDropdown] = React67.useState(null);
+  const [searchState, setSearchState] = React67.useState("closed");
+  const filterRef = React67.useRef(null);
+  const sortRef = React67.useRef(null);
+  const searchInputRef = React67.useRef(null);
   const closeSearch = () => {
     setSearchState("closing");
     onSearchChange("");
@@ -886,7 +894,7 @@ function FilterBar({
     onSearchChange("");
     (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   };
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     const handleMouseDown = (e) => {
       var _a, _b;
       const target = e.target;
@@ -896,7 +904,7 @@ function FilterBar({
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, []);
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     var _a;
     if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   }, [searchState]);
@@ -1172,7 +1180,7 @@ var Pagination = ({
   hidePagesBorder = false,
   renderLink
 }) => {
-  const [activePage, setActivePage] = React66.useState(currentPage);
+  const [activePage, setActivePage] = React67.useState(currentPage);
   const goToPage = (page) => {
     if (page < 1 || page > totalPages) return;
     setActivePage(page);
@@ -1231,7 +1239,7 @@ var Pagination = ({
         [Pagination_module_default.number]: hasNumber,
         [Pagination_module_default["no-border"]]: hidePagesBorder
       });
-      return renderLink ? /* @__PURE__ */ jsxRuntime.jsx(React66.Fragment, { children: renderLink({
+      return renderLink ? /* @__PURE__ */ jsxRuntime.jsx(React67.Fragment, { children: renderLink({
         page,
         className: pageClassName,
         "aria-label": `Go to page ${page}`,
@@ -1541,7 +1549,7 @@ var Badge_module_default = {
   icon: "Badge_module_icon",
   iconOnly: "Badge_module_iconOnly"
 };
-var Badge = React66.forwardRef(
+var Badge = React67.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1615,7 +1623,7 @@ var Input_module_default = {
   error: "Input_module_error",
   "input-field--error": "Input_module_input-field--error",
   "input-field--disabled": "Input_module_input-field--disabled"};
-var Input = React66.forwardRef(
+var Input = React67.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       id,
@@ -1646,7 +1654,7 @@ var Input = React66.forwardRef(
       "hideLabel",
       "type"
     ]);
-    const generatedId = React66.useId();
+    const generatedId = React67.useId();
     const inputId = id || generatedId;
     const helperTextId = `${inputId}-helper`;
     const errorId = `${inputId}-error`;
@@ -1851,10 +1859,10 @@ var CardCollection = ({
   children
 }) => {
   var _a, _b;
-  const container = React66.useRef(null);
-  const revealWrapper = React66.useRef(null);
-  const extraCard = React66.useRef(null);
-  const [isExpanded, setIsExpanded] = React66.useState(false);
+  const container = React67.useRef(null);
+  const revealWrapper = React67.useRef(null);
+  const extraCard = React67.useRef(null);
+  const [isExpanded, setIsExpanded] = React67.useState(false);
   const slots = resolveCompoundSlots(children, {
     title: CardCollectionTitle,
     subtitle: CardCollectionSubtitle
@@ -1865,7 +1873,7 @@ var CardCollection = ({
   const visibleCards = isExamCard ? cards.slice(0, 8) : cards;
   const hiddenCards = isExamCard ? cards.slice(8) : [];
   const { contextSafe } = react.useGSAP({ scope: container });
-  const handleShowMore = React66.useCallback(() => {
+  const handleShowMore = React67.useCallback(() => {
     contextSafe(() => {
       setIsExpanded(true);
       const tl = gsap__default.default.timeline({ defaults: { ease: "power3.inOut" } });
@@ -1969,8 +1977,8 @@ var ContactModule = ({
   animateBlur = true
 }) => {
   var _a, _b;
-  const containerRef = React66.useRef(null);
-  const blurRef = React66.useRef(null);
+  const containerRef = React67.useRef(null);
+  const blurRef = React67.useRef(null);
   const slots = resolveCompoundSlots(children, {
     title: ContactModuleTitle,
     subtitle: ContactModuleSubtitle
@@ -2309,8 +2317,8 @@ var HeroBannerCarousel = ({
 }) => {
   const { is } = useViewPort_default();
   const isMobile = is("tablet", "below");
-  const [swiperInstance, setSwiperInstance] = React66.useState(null);
-  const [activeIndex, setActiveIndex] = React66.useState(0);
+  const [swiperInstance, setSwiperInstance] = React67.useState(null);
+  const [activeIndex, setActiveIndex] = React67.useState(0);
   if (!items.length) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx43__default.default(HeroBannerCarousel_module_default.heroBannerCarousel, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBannerCarousel_module_default.inner, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBannerCarousel_module_default.swiperContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2399,16 +2407,16 @@ var AccordionItem = ({
   onToggle,
   className
 }) => {
-  const contentRef = React66.useRef(null);
-  const contentInnerRef = React66.useRef(null);
-  const timelineRef = React66.useRef(null);
-  const [contentHeight, setContentHeight] = React66.useState(0);
-  React66.useEffect(() => {
+  const contentRef = React67.useRef(null);
+  const contentInnerRef = React67.useRef(null);
+  const timelineRef = React67.useRef(null);
+  const [contentHeight, setContentHeight] = React67.useState(0);
+  React67.useEffect(() => {
     if (contentInnerRef.current) {
       setContentHeight(contentInnerRef.current.scrollHeight);
     }
   }, [children]);
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     if (contentRef.current && contentHeight > 0) {
       if (timelineRef.current) {
         timelineRef.current.kill();
@@ -2493,7 +2501,7 @@ var Accordion = ({
   allowMultiple = false,
   onItemToggle
 }) => {
-  const [openIds, setOpenIds] = React66.useState(defaultOpenIds);
+  const [openIds, setOpenIds] = React67.useState(defaultOpenIds);
   const handleToggle = (id) => {
     setOpenIds((prev) => {
       let newOpenIds;
@@ -2554,10 +2562,10 @@ var InternalBrandsTab_module_default = {
 var InternalBrandsTab = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
   const { title, subTitle, className, tabs } = props;
-  const [activeIndex, setActiveIndex] = React66.useState(0);
+  const [activeIndex, setActiveIndex] = React67.useState(0);
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  const accordionItems = React66.useMemo(() => {
+  const accordionItems = React67.useMemo(() => {
     return (tabs == null ? void 0 : tabs.map((tab, index) => {
       var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
       return {
@@ -2682,7 +2690,8 @@ var MiniBanner_module_default = {
   title: "MiniBanner_module_title",
   ctaContainer: "MiniBanner_module_ctaContainer",
   miniBannerNoBG: "MiniBanner_module_miniBannerNoBG",
-  miniBannerTextLeft: "MiniBanner_module_miniBannerTextLeft"
+  miniBannerTextLeft: "MiniBanner_module_miniBannerTextLeft",
+  container: "MiniBanner_module_container"
 };
 var MiniBannerPreTitle = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
@@ -2718,12 +2727,12 @@ var MiniBanner = ({
   const goBackNode = slots == null ? void 0 : slots.goBack;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx43__default.default(MiniBanner_module_default.minibanner, MiniBanner_module_default[variant], className), children: [
     ((background == null ? void 0 : background.src) || ((_d = background == null ? void 0 : background.desktop) == null ? void 0 : _d.src) || ((_e = background == null ? void 0 : background.mobile) == null ? void 0 : _e.src)) && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: MiniBanner_module_default.background }, background)),
-    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniBanner_module_default.wrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { className: clsx43__default.default(goBackNode && MiniBanner_module_default.container), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniBanner_module_default.wrapper, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniBanner_module_default.textContainer, children: [
         (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
         pretitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx43__default.default(MiniBanner_module_default.pretitle, "small"), children: pretitleNode }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniBanner_module_default.headingWrapper, children: [
-          goBackNode ? React66__default.default.cloneElement(goBackNode, {
+          goBackNode ? React67__default.default.cloneElement(goBackNode, {
             className: clsx43__default.default("back-button", MiniBanner_module_default["back-button"])
           }) : null,
           titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx43__default.default(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode })
@@ -2841,13 +2850,13 @@ function useIntersectionObserver({
   animateOnce = false,
   options = {}
 } = {}) {
-  const observeRef = React66.useRef(null);
-  const [isVisible, setIsVisible] = React66.useState(false);
+  const observeRef = React67.useRef(null);
+  const [isVisible, setIsVisible] = React67.useState(false);
   if (typeof IntersectionObserver === "undefined") {
     console.warn("IntersectionObserver is not supported in this browser.");
     return { observeRef, isVisible: true };
   }
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     const currentRef = observeRef.current;
     if (!currentRef) return;
     const observer = new IntersectionObserver((entries) => {
@@ -2866,8 +2875,8 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 var useIsAtTop = () => {
-  const [isAtTop, setIsAtTop] = React66.useState(true);
-  React66.useEffect(() => {
+  const [isAtTop, setIsAtTop] = React67.useState(true);
+  React67.useEffect(() => {
     const handleScroll = () => setIsAtTop(window.scrollY === 0);
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
@@ -2923,10 +2932,10 @@ var NavigationDesktop = ({
   onDropdownOpenChange
 }) => {
   var _a;
-  const [activeDropdown, setActiveDropdown] = React66.useState(null);
-  const closeTimer = React66.useRef(null);
-  const dropdownWrapperRefs = React66.useRef([]);
-  const baseId = React66.useId();
+  const [activeDropdown, setActiveDropdown] = React67.useState(null);
+  const closeTimer = React67.useRef(null);
+  const dropdownWrapperRefs = React67.useRef([]);
+  const baseId = React67.useId();
   const setDropdown = (index) => {
     setActiveDropdown(index);
     onDropdownOpenChange == null ? void 0 : onDropdownOpenChange(index !== null);
@@ -3061,8 +3070,8 @@ var NavigationMobile = ({
   onClose
 }) => {
   var _a;
-  const [expanded, setExpanded] = React66.useState([]);
-  const baseId = React66.useId();
+  const [expanded, setExpanded] = React67.useState([]);
+  const baseId = React67.useId();
   const toggleExpanded = (index) => {
     setExpanded((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
   };
@@ -3164,15 +3173,15 @@ var NavigationMobile = ({
 };
 var Navigation2 = (props) => {
   const { className, variant, homeCta, loginCta, mainLogo, rightButton, navigationItems } = props;
-  const [isHovered, setIsHovered] = React66.useState(false);
-  const [hasOpenDropdown, setHasOpenDropdown] = React66.useState(false);
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = React66.useState(false);
+  const [isHovered, setIsHovered] = React67.useState(false);
+  const [hasOpenDropdown, setHasOpenDropdown] = React67.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React67.useState(false);
   const isAtTop = useIsAtTop();
   const { is } = useViewPort_default();
-  const mobileMenuId = React66.useId();
+  const mobileMenuId = React67.useId();
   const isTabletBelow = is("tablet", "below");
   const isTransparent = variant === "transparent" && isAtTop && !isHovered && !hasOpenDropdown;
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     document.body.style.overflow = isMobileMenuOpen ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
@@ -3771,17 +3780,17 @@ var ResourcesGridList = ({
   defaultSort = "latest"
 }) => {
   var _a;
-  const [view, setView] = React66.useState(defaultView);
-  const [isSidebarOpen, setIsSidebarOpen] = React66.useState(false);
-  const [filterValue, setFilterValue] = React66.useState(defaultFilter);
-  const [sortValue, setSortValue] = React66.useState(defaultSort);
-  const [searchQuery, setSearchQuery] = React66.useState("");
-  const [currentPage, setCurrentPage] = React66.useState(1);
-  const [selectedCategory, setSelectedCategory] = React66.useState(() => {
+  const [view, setView] = React67.useState(defaultView);
+  const [isSidebarOpen, setIsSidebarOpen] = React67.useState(false);
+  const [filterValue, setFilterValue] = React67.useState(defaultFilter);
+  const [sortValue, setSortValue] = React67.useState(defaultSort);
+  const [searchQuery, setSearchQuery] = React67.useState("");
+  const [currentPage, setCurrentPage] = React67.useState(1);
+  const [selectedCategory, setSelectedCategory] = React67.useState(() => {
     const activeIndex = categories.findIndex((cat) => cat.active);
     return activeIndex === -1 ? 0 : activeIndex;
   });
-  const widgetRef = React66.useRef(null);
+  const widgetRef = React67.useRef(null);
   const { is } = useViewPort_default();
   const isMobile = is("tablet", "below");
   const selectedValue = (_a = categories[selectedCategory]) == null ? void 0 : _a.value;
@@ -4244,7 +4253,7 @@ var NewsCardList = ({
             /* @__PURE__ */ jsxRuntime.jsx(BlogCardGrid2, { items: cards, hasContainer: false, renderLink })
           ] })
         ] }),
-        paginationNode ? React66__default.default.cloneElement(paginationNode, {
+        paginationNode ? React67__default.default.cloneElement(paginationNode, {
           className: clsx43__default.default("pagination", NewsCardList_module_default["pagination"])
         }) : null
       ] })
@@ -4360,7 +4369,7 @@ var BlogSearchResultsList = ({
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
   const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx43__default.default("search-results-list", BlogSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: clsx43__default.default("container", BlogSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx43__default.default("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React66__default.default.isValidElement(searchNode) ? React66__default.default.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx43__default.default("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React67__default.default.isValidElement(searchNode) ? React67__default.default.cloneElement(searchNode, {
       className: clsx43__default.default("search-result", BlogSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx43__default.default("wrapper", BlogSearchResultsList_module_default["wrapper"]), children: [
@@ -4388,7 +4397,7 @@ var BlogSearchResultsList = ({
       ),
       /* @__PURE__ */ jsxRuntime.jsx(BlogCardGrid2, { items, hasContainer: false, renderLink })
     ] }),
-    paginationNode ? React66__default.default.cloneElement(paginationNode, {
+    paginationNode ? React67__default.default.cloneElement(paginationNode, {
       className: clsx43__default.default("pagination", BlogSearchResultsList_module_default["pagination"])
     }) : null
   ] }) });
@@ -4431,7 +4440,7 @@ var GlobalSearchResultsList = ({
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
   const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx43__default.default("search-results-list", GlobalSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: clsx43__default.default("container", GlobalSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx43__default.default("search-result", GlobalSearchResultsList_module_default["search-result"]), children: searchNode }) : React66__default.default.isValidElement(searchNode) ? React66__default.default.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx43__default.default("search-result", GlobalSearchResultsList_module_default["search-result"]), children: searchNode }) : React67__default.default.isValidElement(searchNode) ? React67__default.default.cloneElement(searchNode, {
       className: clsx43__default.default("search-result", GlobalSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx43__default.default("wrapper", GlobalSearchResultsList_module_default["wrapper"]), children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { role: "list", columns: 3, children: items.map((item, index) => {
@@ -4446,7 +4455,7 @@ var GlobalSearchResultsList = ({
         }
       ) }, (_a2 = item.title) != null ? _a2 : index);
     }) }) }),
-    paginationNode ? React66__default.default.cloneElement(paginationNode, {
+    paginationNode ? React67__default.default.cloneElement(paginationNode, {
       className: clsx43__default.default("pagination", GlobalSearchResultsList_module_default["pagination"])
     }) : null
   ] }) });
@@ -4458,6 +4467,94 @@ var GlobalSearchResultsList2 = Object.assign(GlobalSearchResultsList, {
   Pagination: GlobalSearchResultsListPagination
 });
 
+// src/widgets/TextCenterWithMedia/TextCenterWithMedia.module.scss
+var TextCenterWithMedia_module_default = {
+  textCenterWithMedia: "TextCenterWithMedia_module_textCenterWithMedia",
+  thumbnailWrapper: "TextCenterWithMedia_module_thumbnailWrapper",
+  thumbnail: "TextCenterWithMedia_module_thumbnail",
+  playButton: "TextCenterWithMedia_module_playButton",
+  modal: "TextCenterWithMedia_module_modal",
+  modalInner: "TextCenterWithMedia_module_modalInner",
+  modalHeader: "TextCenterWithMedia_module_modalHeader",
+  closeButton: "TextCenterWithMedia_module_closeButton",
+  video: "TextCenterWithMedia_module_video"
+};
+var TextCenterWithMediaTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var TextCenterWithMedia = ({
+  className,
+  title,
+  thumbnail,
+  videoUrl,
+  loop = false,
+  mute = false,
+  hideControl = false,
+  autoPlay = false,
+  children
+}) => {
+  var _a;
+  const [isOpen, setIsOpen] = React67.useState(false);
+  const dialogRef = React67.useRef(null);
+  const videoRef = React67.useRef(null);
+  React67.useEffect(() => {
+    var _a2, _b;
+    if (isOpen) {
+      (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
+    } else {
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
+    }
+  }, [isOpen]);
+  const handleClose = () => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+    setIsOpen(false);
+  };
+  const slots = resolveCompoundSlots(children, { title: TextCenterWithMediaTitle });
+  const titleNode = (_a = slots.title) != null ? _a : title;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx43__default.default(TextCenterWithMedia_module_default.textCenterWithMedia, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+      titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "h2", children: titleNode }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: TextCenterWithMedia_module_default.thumbnailWrapper, children: thumbnail && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Picture, { src: thumbnail, alt: "Video thumbnail", className: TextCenterWithMedia_module_default.thumbnail }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: TextCenterWithMedia_module_default.playButton,
+            onClick: () => setIsOpen(true),
+            "aria-label": "Play video",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "play", size: 90 })
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref: dialogRef, className: TextCenterWithMedia_module_default.modal, onClose: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TextCenterWithMedia_module_default.modalInner, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: TextCenterWithMedia_module_default.modalHeader, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: TextCenterWithMedia_module_default.closeButton, onClick: handleClose, "aria-label": "Close video", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "xBlack", size: 30 }) }) }),
+      videoUrl && isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        ReactPlayer__default.default,
+        {
+          ref: videoRef,
+          src: videoUrl,
+          playing: autoPlay,
+          loop,
+          muted: mute,
+          controls: !hideControl,
+          className: TextCenterWithMedia_module_default.video,
+          width: "100%",
+          height: "100%"
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/widgets/TextCenterWithMedia/index.ts
+var TextCenterWithMedia2 = Object.assign(TextCenterWithMedia, {
+  Title: TextCenterWithMediaTitle
+});
+
 exports.Anchor = Anchor;
 exports.Badge = Badge;
 exports.BlogCardGrid = BlogCardGrid2;
@@ -4499,6 +4596,7 @@ exports.Teaser5050With3Text = Teaser5050With3Text2;
 exports.Teaser5050WithCta = Teaser5050WithCta2;
 exports.TextBody = TextBody2;
 exports.TextCenterCtaInBottom = TextCenterCtaInBottom2;
+exports.TextCenterWithMedia = TextCenterWithMedia2;
 exports.TextEvent = TextEvent2;
 exports.UpcomingEventCard = UpcomingEventCard;
 exports.resolveCompoundSlots = resolveCompoundSlots;