@axos-web-dev/shared-components 1.0.7 → 1.0.9-9.dev.1

package/dist/Table/Table.css.d.ts

@@ -21,27 +21,27 @@ export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: "#4A5560";
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            borderBottom: `1px solid var(--${string})`;
         };
         secondary: {
             color: "#4A5560";
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            background: `var(--${string})`;
+            borderBottom: `1px solid var(--${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 768px)": {
                     selectors: {
                         "&:first-child": {
-                            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            background: `var(--${string})`;
                         };
                     };
                 };
@@ -52,14 +52,14 @@ export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 768px)": {
                     selectors: {
                         "&:first-child": {
-                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundImage: `var(--${string})`;
                         };
                     };
                 };
@@ -73,48 +73,48 @@ export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const td: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             color: "#4A5560";
             borderBottom: "1px solid #D4D4D4";
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
             color: "#4A5560";
             borderBottom: "1px solid #D4D4D4";
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})`;
+                    color: `var(--${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 327px)": {
                     selectors: {
                         "&:first-child": {
-                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundImage: `var(--${string})`;
                         };
                     };
                 };
             };
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})`;
+                    color: `var(--${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 327px)": {
                     selectors: {
                         "&:first-child": {
-                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundImage: `var(--${string})`;
                         };
                     };
                 };
@@ -128,10 +128,10 @@ export declare const td: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const tableWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            border: `1px solid var(--${string})`;
         };
         secondary: {
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            border: `1px solid var(--${string})`;
         };
         tertiary: {
             border: "none";
@@ -144,16 +144,16 @@ export declare const tableWrapper: import('@vanilla-extract/recipes').RuntimeFn<
 export declare const table: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         };
     };
 }>;

package/dist/Table/Table.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/Table/Table.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                         */

package/dist/Table/Table.d.ts

@@ -59,6 +59,8 @@ export declare const TableCell: ({ children, as, variant, highlighted, colSpan,
     unselectable?: "on" | "off" | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
     popover?: "" | "auto" | "manual" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
@@ -139,7 +141,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, colSpan,
     onBlurCapture?: import('react').FocusEventHandler<HTMLTableCellElement> | undefined;
     onChange?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
     onChangeCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
-    onBeforeInput?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
+    onBeforeInput?: import('react').InputEventHandler<HTMLTableCellElement> | undefined;
     onBeforeInputCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
     onInput?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
     onInputCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
@@ -189,8 +191,6 @@ export declare const TableCell: ({ children, as, variant, highlighted, colSpan,
     onProgressCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onRateChange?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onRateChangeCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
-    onResize?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
-    onResizeCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onSeeked?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onSeekedCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onSeeking?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;

package/dist/Table/Table.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                */
+import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */

package/dist/TextBlock/TextBlock.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/TextBlock/TextBlock.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                             */

package/dist/Topic/Topic.css.d.ts

@@ -0,0 +1,4 @@
+export declare const topic_container: string;
+export declare const topic_columns: string;
+export declare const topic_header: string;
+export declare const topic_item: string;

package/dist/Topic/Topic.css.js

@@ -0,0 +1,12 @@
+import '../assets/Topic/Topic.css';import '../assets/Typography/Typography.css';/* empty css                                          */
+/* empty css                         */
+var topic_container = "un906l0";
+var topic_columns = "un906l1";
+var topic_header = "un906l2";
+var topic_item = "un906l3";
+export {
+  topic_columns,
+  topic_container,
+  topic_header,
+  topic_item
+};

package/dist/Topic/Topic.d.ts

@@ -0,0 +1,19 @@
+import { default as React, PropsWithChildren } from 'react';
+
+export type Topic = PropsWithChildren;
+export declare const Topic: ({ children }: Topic) => import("react/jsx-runtime").JSX.Element;
+export type TopicHeader = {
+    As?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "a";
+    title?: React.ReactNode;
+} & PropsWithChildren;
+export declare const TopicHeader: (props: TopicHeader) => import("react/jsx-runtime").JSX.Element;
+export declare const TopicContent: (props: {
+    url?: string;
+    title?: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TopicItem: (props: {
+    url?: string;
+    title?: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Topic/Topic.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { topic_container, topic_header, topic_columns, topic_item } from "./Topic.css.js";
+const Topic = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(topic_container), children });
+};
+const TopicHeader = (props) => {
+  const { As = "h2", title = void 0, children } = props;
+  return /* @__PURE__ */ jsx(As, { className: clsx(topic_header), children: title || children });
+};
+const TopicContent = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx(topic_columns), children });
+};
+const TopicItem = (props) => {
+  const { children, url, title } = props;
+  return /* @__PURE__ */ jsx("a", { className: clsx(topic_item), href: url, children: title || children });
+};
+export {
+  Topic,
+  TopicContent,
+  TopicHeader,
+  TopicItem
+};

package/dist/Topic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Topic';
+export * from './Topic.css';

package/dist/Topic/index.js

@@ -0,0 +1,12 @@
+import { Topic, TopicContent, TopicHeader, TopicItem } from "./Topic.js";
+import { topic_columns, topic_container, topic_header, topic_item } from "./Topic.css.js";
+export {
+  Topic,
+  TopicContent,
+  TopicHeader,
+  TopicItem,
+  topic_columns,
+  topic_container,
+  topic_header,
+  topic_item
+};

package/dist/TopicalNavItem/TopicalNavItem.css.js

@@ -1,4 +1,4 @@
-/* empty css                                  */
+import '../assets/TopicalNavItem/TopicalNavItem.css';/* empty css                                  */
 var picker_navItem = "dmebjx0";
 var picker_itemProduct = "dmebjx1";
 var picker_arrow = "dmebjx2";

package/dist/TopicalNavSet/TopicalNavSet.css.js

@@ -1,4 +1,4 @@
-/* empty css                                 */
+import '../assets/TopicalNavSet/TopicalNavSet.css';/* empty css                                 */
 var picker_section = "xbzzeo0";
 var picker_container = "xbzzeo1";
 var picker_orient = "xbzzeo2";

package/dist/Typography/Typography.css.js

@@ -1,4 +1,4 @@
-/* empty css                              */
+import '../assets/Typography/Typography.css';/* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var headerCssVariable = "var(--header-font-family)";
 var mainCssVariable = "var(--main-font-family)";

package/dist/VideoTile/VideoTile.css.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+import '../assets/VideoTile/VideoTile.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';import '../assets/Typography/Typography.css';/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                    */

package/dist/VideoTile/VideoTile.interface.d.ts

@@ -2,13 +2,14 @@ import { ReactNode } from 'react';
 
 export interface VideoTileInterface {
     id: string;
-    title: string;
+    title?: string;
     videoId: string;
     thumbnailImage: string;
     displayType: string;
-    maxWidth: string | number;
+    maxWidth?: string | number;
     videoPlayer: string;
-    transcript: string;
+    transcript?: string;
     description?: string | ReactNode;
     internalName?: string;
+    enableModal?: boolean;
 }

package/dist/VideoTile/VideoTile.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import "../icons/ArrowIcon/ArrowIcon.css.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import SvgArrowIcon from "../icons/ArrowIcon/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";
-/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
 /* empty css                                                    */
@@ -12,7 +12,121 @@ import SvgChevronUp from "../icons/ChevronUp.js";
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 import { VideoInit } from "./VideoInit.js";
-import { video_tile, video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
+import { video_tile, video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, transcript_content, expand_icon, show, hide_transcript } from "./VideoTile.css.js";
+import { ModalWrapper } from "../ImageBillboard/ExitIntentModal/ModalWrapper.js";
+import { useRef } from "react";
+import { IconBillboard } from "../IconBillboard/IconBillboard.js";
+import "../IconBillboard/IconBillboard.css.js";
+import "../utils/allowedAxosDomains.js";
+import "clsx";
+/* empty css                                          */
+/* empty css                                          */
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
+import "../Article/Article.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Chevron/Chevron.css.js";
+/* empty css                                */
+import "../Modal/contextApi/store.js";
+import "../Button/Button.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+import "../Calculators/calculator.css.js";
+import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import "../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+import "../Input/Dropdown.css.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
+import "../Input/RadioButton.js";
+import "react-hook-form";
+import "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Inputs/Input.css.js";
+/* empty css                                                         */
+import "../Hyperlink/Hyperlink.css.js";
+/* empty css                                                      */
+import "iframe-resizer";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
+import "../Input/PercentageInput.js";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+/* empty css                                    */
+import "react-dom";
+/* empty css                                */
+import "../Auth/SignInPassword.js";
+/* empty css                                              */
+/* empty css                                          */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
+import "next/image.js";
+import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                          */
+/* empty css                                                         */
+/* empty css                                            */
+import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
+/* empty css                                              */
+/* empty css                                                      */
+/* empty css                                            */
+/* empty css                                    */
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                                      */
+import "next/navigation.js";
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+import "next/link.js";
+import "../NavigationMenu/AxosBank/MobileMenu/MobileNavData.js";
+/* empty css                                                   */
+import "../NavigationMenu/AxosBank/NavData.js";
+/* empty css                                                      */
+/* empty css                                                       */
+import "../NavigationMenu/AxosALTS/NavData.js";
+/* empty css                                                   */
+/* empty css                                                     */
+import "../NavigationMenu/LaVictoire/NavData.js";
+import "../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* empty css                                                 */
+/* empty css                                          */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+/* empty css                                        */
+/* empty css                                */
+/* empty css                                                  */
+/* empty css                                                */
+/* empty css                                              */
 const VideoTile = ({
   //   ariaLabel,
   title,
@@ -24,13 +138,76 @@ const VideoTile = ({
   transcript,
   id,
   description,
-  internalName
+  internalName,
+  enableModal = false
 }) => {
   const [on, toggle] = useToggle(false);
+  const modalRef = useRef(null);
   const handleToggleClick = (event) => {
     event.preventDefault();
     toggle();
   };
+  let transcriptSection = null;
+  if (transcript) {
+    if (enableModal) {
+      transcriptSection = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: `${transcript_container}`, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: `${toggle_container}`,
+            "aria-expanded": on,
+            href: "#",
+            "aria-label": "",
+            onClick: handleToggleClick,
+            children: /* @__PURE__ */ jsxs("span", { className: `${transcript_btn}`, children: [
+              "Review transcript ",
+              /* @__PURE__ */ jsx(SvgArrowIcon, { variant: "primary" })
+            ] })
+          }
+        ) }),
+        on && /* @__PURE__ */ jsx(ModalWrapper, { onClose: () => toggle(), modalRef, children: /* @__PURE__ */ jsx(
+          IconBillboard,
+          {
+            body: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  maxHeight: "80vh",
+                  overflowY: "auto",
+                  textAlign: "left"
+                },
+                children: /* @__PURE__ */ jsx(ReactMarkdown, { className: `${transcript_content}`, children: transcript })
+              }
+            )
+          }
+        ) })
+      ] });
+    } else {
+      transcriptSection = /* @__PURE__ */ jsxs("div", { className: `${transcript_container}`, children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            className: `${toggle_container}`,
+            "aria-expanded": on,
+            href: "#",
+            "aria-label": "",
+            onClick: handleToggleClick,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `${transcript_btn}`, children: "Review transcript" }),
+              /* @__PURE__ */ jsx("span", { className: expand_icon, "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            className: `${transcript_content} ${on ? show : hide_transcript}`,
+            children: transcript
+          }
+        ) })
+      ] });
+    }
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -68,29 +245,7 @@ const VideoTile = ({
               )
             }
           ),
-          transcript && /* @__PURE__ */ jsxs("div", { className: `${transcript_container}`, children: [
-            /* @__PURE__ */ jsxs(
-              "a",
-              {
-                className: `${toggle_container}`,
-                "aria-expanded": on,
-                href: "#",
-                "aria-label": "",
-                onClick: handleToggleClick,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: `${transcript_btn}`, children: "Review transcript" }),
-                  /* @__PURE__ */ jsx("span", { className: expand_icon, "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              ReactMarkdown,
-              {
-                className: `${transcript_content} ${on ? show : hide_transcript}`,
-                children: transcript
-              }
-            ) })
-          ] })
+          transcriptSection
         ] })
       ]
     },

package/dist/VideoWrapper/VideoWrapper.css.js

@@ -1,4 +1,4 @@
-/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';/* empty css                                */
 var video_tile_set = "_2i5u4u0";
 var grid_wrapper = "_2i5u4u1";
 var grid_2 = "_2i5u4u2";