@axos-web-dev/shared-components 0.0.4 → 0.0.5

package/dist/Modal/index.js

@@ -22,14 +22,23 @@ import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "@hookform/resolvers/zod";
+import "../Input/index.js";
 import "clsx";
+import "react-hook-form";
 /* empty css                                              */
 import "../ImageBillboard/ImageBillboard.css.js";
-import "../Input/Input.css.js";
+import "react-use";
 import "../NavigationMenu/AxosAdvisor/NavBar.module.js";
 import "../NavigationMenu/AxosFiduciary/NavBar.module.js";
 /* empty css                                                    */
 import "../Table/Table.css.js";
+/* empty css                                        */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
 import { modal, modal_dialog, modal_content, modal_header, modal_title, modal_subtitle, solid, modal_body, site_link, modal_footer } from "./Modal.css.js";
 const Modal = ({
   headline,

package/dist/NavigationMenu/AxosAdvisor/index.js

@@ -5,6 +5,7 @@ import { useState, useRef } from "react";
 import { useClickAway } from "react-use";
 import styles from "./NavBar.module.js";
 import SubNavBar from "./SubNavBar.js";
+var define_process_env_default = {};
 function NavBar() {
   const [isOpenSignIn, setisOpenSignIn] = useState(false);
   const [isOpenMobile, setisOpenMobile] = useState(false);
@@ -75,7 +76,7 @@ function NavBar() {
         /* @__PURE__ */ jsx("div", { className: styles.mobile_only, children: /* @__PURE__ */ jsx(
           "a",
           {
-            href: `${process.env.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
+            href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
             className: "link",
             children: "Sign In"
           }
@@ -139,7 +140,7 @@ function NavBar() {
                           /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
                             "a",
                             {
-                              href: `${process.env.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
+                              href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
                               role: "menuitem",
                               children: "Account Login"
                             }
@@ -371,7 +372,7 @@ function NavBar() {
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: `${process.env.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
+                        href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
                         role: "menuitem",
                         children: "Account Login"
                       }

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

@@ -1,5 +1,8 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const container: string;
+export declare const table_container: string;
+export declare const table_container_text: string;
+export declare const table_headline: string;
+export declare const highlight_first_row: string;
+export declare const highlight_last_row: string;
 export declare const headerCell: string;
 export declare const headerVariants: Record<"primary" | "secondary" | "tertiary" | "quaternary", string>;
 export declare const bodyHeader: string;
@@ -8,13 +11,16 @@ export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
         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})`;
         };
         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})`;
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
                     background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -24,7 +30,7 @@ export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
                 "screen and (max-width: 768px)": {
                     selectors: {
                         "&:first-child": {
-                            background: "linear-gradient(90deg,#051A3F 14.64%, #1E3860 48.42%, #4D85B0 85.36%)";
+                            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                         };
                     };
                 };
@@ -32,6 +38,7 @@ export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
         };
         quaternary: {
             color: "#FFFFFF";
+            borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
                     background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -41,7 +48,7 @@ export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
                 "screen and (max-width: 768px)": {
                     selectors: {
                         "&:first-child": {
-                            background: "linear-gradient(90deg,#051A3F 14.64%, #1E3860 48.42%, #4D85B0 85.36%)";
+                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                         };
                     };
                 };
@@ -57,16 +64,20 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             color: "#4A5560";
+            borderBottom: "1px solid #D4D4D4";
         };
         secondary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
             color: "#4A5560";
+            borderBottom: "1px solid #D4D4D4";
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
                     background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string}) !important` | `var(--${string}, ${string}) !important` | `var(--${string}, ${number}) !important`;
                 };
             };
             "@media": {
@@ -81,9 +92,11 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
         };
         quaternary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
                     background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string}) !important` | `var(--${string}, ${string}) !important` | `var(--${string}, ${number}) !important`;
                 };
             };
             "@media": {
@@ -105,18 +118,19 @@ export declare const table: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
         secondary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
         tertiary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
         quaternary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
     };
 }>;
-export type TableVariants = RecipeVariants<typeof table>;
-export type TdVariants = RecipeVariants<typeof td>;
-export type ThVariants = RecipeVariants<typeof th>;

package/dist/Table/Table.css.js

@@ -2,19 +2,27 @@
 /* empty css                                   */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = "_1nivbwe0";
-var headerCell = "_1nivbwe1";
-var headerVariants = { primary: "_1nivbwe2 _1nivbwe1", secondary: "_1nivbwe3 _1nivbwe1", tertiary: "_1nivbwe4 _1nivbwe1", quaternary: "_1nivbwe5 _1nivbwe1" };
-var bodyHeader = "_1nivbwe6";
-var th = createRuntimeFn({ defaultClassName: "_1nivbwe7", variantClassNames: { variant: { primary: "_1nivbwe8", secondary: "_1nivbwe9", tertiary: "_1nivbwea", quaternary: "_1nivbweb" }, highlighted: { true: "_1nivbwec" } }, defaultVariants: {}, compoundVariants: [] });
-var td = createRuntimeFn({ defaultClassName: "_1nivbwed", variantClassNames: { variant: { primary: "_1nivbwee", secondary: "_1nivbwef", tertiary: "_1nivbweg", quaternary: "_1nivbweh" }, highlighted: { true: "_1nivbwei" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwej"], [{ highlighted: true, variant: "tertiary" }, "_1nivbwek"]] });
-var table = createRuntimeFn({ defaultClassName: "_1nivbwel", variantClassNames: { variant: { primary: "_1nivbwem", secondary: "_1nivbwen", tertiary: "_1nivbweo", quaternary: "_1nivbwep" } }, defaultVariants: {}, compoundVariants: [] });
+var table_container = "_1nivbwe0";
+var table_container_text = "_1nivbwe1";
+var table_headline = "_1nivbwe2";
+var highlight_first_row = "_1nivbwe3";
+var highlight_last_row = "_1nivbwe4";
+var headerCell = "_1nivbwe5";
+var headerVariants = { primary: "_1nivbwe6 _1nivbwe5", secondary: "_1nivbwe7 _1nivbwe5", tertiary: "_1nivbwe8 _1nivbwe5", quaternary: "_1nivbwe9 _1nivbwe5" };
+var bodyHeader = "_1nivbwea";
+var th = createRuntimeFn({ defaultClassName: "_1nivbweb", variantClassNames: { variant: { primary: "_1nivbwec", secondary: "_1nivbwed", tertiary: "_1nivbwee", quaternary: "_1nivbwef" }, highlighted: { true: "_1nivbweg" } }, defaultVariants: {}, compoundVariants: [] });
+var td = createRuntimeFn({ defaultClassName: "_1nivbweh", variantClassNames: { variant: { primary: "_1nivbwei", secondary: "_1nivbwej", tertiary: "_1nivbwek", quaternary: "_1nivbwel" }, highlighted: { true: "_1nivbwem" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwen"], [{ highlighted: true, variant: "tertiary" }, "_1nivbweo"]] });
+var table = createRuntimeFn({ defaultClassName: "_1nivbwep", variantClassNames: { variant: { primary: "_1nivbweq", secondary: "_1nivbwer", tertiary: "_1nivbwes", quaternary: "_1nivbwet" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bodyHeader,
-  container,
   headerCell,
   headerVariants,
+  highlight_first_row,
+  highlight_last_row,
   table,
+  table_container,
+  table_container_text,
+  table_headline,
   td,
   th
 };

package/dist/Table/Table.d.ts

@@ -1,12 +1,11 @@
-import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from "react";
-import { TableVariants, TdVariants, ThVariants } from "./Table.css";
-export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
-}
+import { PropsWithChildren } from "react";
+import { CellProps, RowProps, TableContainerProps, TableProps } from "./Table.interface";
+export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ variant, children, highlight, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
-export interface CellProps extends HtmlHTMLAttributes<HTMLTableCellElement>, PropsWithChildren {
-    as?: "td" | "th";
-}
-export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps & TdVariants & ThVariants) => import("react").DetailedReactHTMLElement<{
+export declare const TableHead: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps) => import("react").DetailedReactHTMLElement<{
     className: string;
     manifest?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -275,8 +274,3 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLTableCellElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTableCellElement> | undefined;
 }, HTMLElement>;
-export interface Table extends PropsWithChildren {
-    columns?: ReactNode;
-    rows?: ReactNode;
-}
-export declare const Table: (props: Table & TableVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.interface.d.ts

@@ -0,0 +1,18 @@
+import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from "react";
+export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
+}
+export interface CellProps extends HtmlHTMLAttributes<HTMLTableCellElement>, PropsWithChildren {
+    as?: "td" | "th";
+    variant: string;
+    highlighted?: boolean;
+}
+export interface TableProps extends PropsWithChildren {
+    variant: string;
+    highlight?: "First Row" | "Last Row" | "First and Last Row" | undefined;
+}
+export interface TableContainerProps extends PropsWithChildren {
+    variant: string;
+    tableTitle: ReactNode | string;
+    tableBody?: ReactNode | string;
+    tableFooter: ReactNode | string;
+}

package/dist/Table/Table.interface.js

@@ -0,0 +1 @@
+

package/dist/Table/Table.js

@@ -1,14 +1,50 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { td, th, container, table } from "./Table.css.js";
+import { table_container, table_container_text, table_headline, table, highlight_first_row, highlight_last_row, td, th } from "./Table.css.js";
+const TableContainer = ({
+  tableTitle,
+  tableBody,
+  tableFooter
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: clsx(table_container, "containment", "section_spacer"), children: [
+    tableTitle && /* @__PURE__ */ jsx("div", { className: table_container_text, children: /* @__PURE__ */ jsx("h1", { className: clsx("header_1", table_headline), children: tableTitle }) }),
+    tableBody,
+    tableFooter && /* @__PURE__ */ jsx("div", { className: clsx(table_container_text, "push_up_24"), children: tableFooter })
+  ] });
+};
+const Table = ({
+  variant = "primary",
+  children,
+  highlight
+}) => {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      className: clsx(
+        table({ variant: getVariant(variant) }),
+        highlight === "First Row" && highlight_first_row,
+        highlight === "Last Row" && highlight_last_row,
+        highlight === "First and Last Row" && `${highlight_first_row} ${highlight_last_row}`
+      ),
+      children
+    }
+  );
+};
 const TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx("tr", { ...props, children });
 };
+const TableHead = ({ children }) => {
+  return /* @__PURE__ */ jsx("thead", { children });
+};
+const TableBody = ({ children }) => {
+  return /* @__PURE__ */ jsx("tbody", { children });
+};
 const TableCell = ({
   children,
   as = "td",
-  variant,
+  variant = "primary",
   highlighted,
   ...props
 }) => {
@@ -17,22 +53,18 @@ const TableCell = ({
     {
       ...props,
       className: clsx(
-        as == "td" ? td({ variant, highlighted }) : th({ variant, highlighted }),
+        as == "td" ? td({ variant: getVariant(variant), highlighted }) : th({ variant: getVariant(variant), highlighted }),
         props == null ? void 0 : props.className
       )
     },
     children
   );
 };
-const Table = (props) => {
-  const { variant = "primary", rows, columns } = props;
-  return /* @__PURE__ */ jsx("div", { className: container, children: /* @__PURE__ */ jsxs("table", { className: table({ variant }), children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(TableRow, { children: columns }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rows })
-  ] }) });
-};
 export {
   Table,
+  TableBody,
   TableCell,
+  TableContainer,
+  TableHead,
   TableRow
 };

package/dist/Table/index.js

@@ -1,14 +1,21 @@
-import { Table, TableCell, TableRow } from "./Table.js";
-import { bodyHeader, container, headerCell, headerVariants, table, td, th } from "./Table.css.js";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table.js";
+import { bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, table_container, table_container_text, table_headline, td, th } from "./Table.css.js";
 export {
   Table,
+  TableBody,
   TableCell,
+  TableContainer,
+  TableHead,
   TableRow,
   bodyHeader,
-  container,
   headerCell,
   headerVariants,
+  highlight_first_row,
+  highlight_last_row,
   table,
+  table_container,
+  table_container_text,
+  table_headline,
   td,
   th
 };

package/dist/TextBlock/TextBlock.css.d.ts

@@ -0,0 +1,3 @@
+export declare const textBlockParagraph: string;
+export declare const textBlockHeader: string;
+export declare const textBlockList: string;

package/dist/TextBlock/TextBlock.css.js

@@ -0,0 +1,11 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                             */
+var textBlockParagraph = "_16g7rvn0";
+var textBlockHeader = "_16g7rvn1";
+var textBlockList = "_16g7rvn2";
+export {
+  textBlockHeader,
+  textBlockList,
+  textBlockParagraph
+};

package/dist/TextBlock/TextBlock.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface TextBlockProps {
+    bodyCopy: ReactNode | string;
+    headline: ReactNode | string;
+}
+export declare const TextBlock: (props: TextBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TextBlock/TextBlock.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { textBlockHeader } from "./TextBlock.css.js";
+const TextBlock = (props) => {
+  return /* @__PURE__ */ jsxs("div", { className: "containment section_spacer", children: [
+    /* @__PURE__ */ jsx("h2", { className: `header_2 text_center ${textBlockHeader}`, children: props.headline }),
+    /* @__PURE__ */ jsx("div", { children: props.bodyCopy })
+  ] });
+};
+export {
+  TextBlock
+};

package/dist/TextBlock/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextBlock";
+export * from "./TextBlock.css";

package/dist/TextBlock/index.js

@@ -0,0 +1,8 @@
+import { TextBlock } from "./TextBlock.js";
+import { textBlockHeader, textBlockList, textBlockParagraph } from "./TextBlock.css.js";
+export {
+  TextBlock,
+  textBlockHeader,
+  textBlockList,
+  textBlockParagraph
+};

package/dist/VideoTile/VideoInit.d.ts

@@ -0,0 +1 @@
+export declare const VideoInit: () => import("react/jsx-runtime").JSX.Element;

package/dist/VideoTile/VideoInit.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import Script from "next/script.js";
+const VideoInit = () => {
+  return /* @__PURE__ */ jsx(Script, { src: "https://play.vidyard.com/embed/v4.js" });
+};
+export {
+  VideoInit
+};

package/dist/VideoTile/VideoTile.css.d.ts

@@ -0,0 +1,13 @@
+export declare const show: string;
+export declare const video_title: string;
+export declare const transcript_btn: string;
+export declare const item: string;
+export declare const video_container: string;
+export declare const mb_8: string;
+export declare const toggle_container: string;
+export declare const expand_icon: string;
+export declare const transcript_container: string;
+export declare const w_100: string;
+export declare const transcript_content: string;
+export declare const vidyard_height: string;
+export declare const hide_transcript: string;

package/dist/VideoTile/VideoTile.css.js

@@ -0,0 +1,32 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                             */
+var show = "_16puo4g0";
+var video_title = "_16puo4g1";
+var transcript_btn = "_16puo4g2";
+var item = "_16puo4g3";
+var video_container = "_16puo4g4";
+var mb_8 = "_16puo4g5";
+var toggle_container = "_16puo4g6";
+var expand_icon = "_16puo4g7";
+var transcript_container = "_16puo4g8";
+var w_100 = "_16puo4g9";
+var transcript_content = "_16puo4ga";
+var vidyard_height = "_16puo4gb";
+var hide_transcript = "_16puo4gc";
+export {
+  expand_icon,
+  hide_transcript,
+  item,
+  mb_8,
+  show,
+  toggle_container,
+  transcript_btn,
+  transcript_container,
+  transcript_content,
+  video_container,
+  video_title,
+  vidyard_height,
+  w_100
+};

package/dist/VideoTile/VideoTile.d.ts

@@ -0,0 +1,3 @@
+import { VideoTileInterface } from "./VideoTile.interface";
+import { FC } from "react";
+export declare const VideoTile: FC<VideoTileInterface>;

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

@@ -0,0 +1,10 @@
+export interface VideoTileInterface {
+    id: string;
+    title: string;
+    videoId: string;
+    thumbnailImage: string;
+    displayType: string;
+    maxWidth: string | number;
+    videoPlayer: string;
+    transcript: string;
+}

package/dist/VideoTile/VideoTile.interface.js

@@ -0,0 +1 @@
+

package/dist/VideoTile/VideoTile.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import { useToggle } from "react-use";
+import "../icons/CheckIcon/CheckIcon.css.js";
+import SvgChevronDown from "../icons/ChevronDown.js";
+import SvgChevronUp from "../icons/ChevronUp.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+import { VideoInit } from "./VideoInit.js";
+import { video_container, w_100, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
+const VideoTile = ({
+  //   ariaLabel,
+  title,
+  videoId,
+  thumbnailImage,
+  // displayType,
+  maxWidth = "588px",
+  videoPlayer,
+  transcript
+}) => {
+  const [on, toggle] = useToggle(false);
+  const handleToggleClick = (event) => {
+    event.preventDefault();
+    toggle();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VideoInit, {}),
+    /* @__PURE__ */ jsxs("div", { className: `${video_container} ${w_100} flex flex_col`, children: [
+      /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title ? title : null }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: "",
+          className: `${mb_8} ${vidyard_height} vidyard-player-container rounded`,
+          "data-uuid": videoId,
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              style: {
+                width: "100%",
+                margin: "auto",
+                display: "block",
+                maxHeight: "304px",
+                maxWidth
+              },
+              alt: "",
+              className: "vidyard-player-embed",
+              src: thumbnailImage ? thumbnailImage : `https://play.vidyard.com/${videoId}.jpg`,
+              "data-uuid": videoId,
+              "data-v": "4",
+              "data-type": videoPlayer,
+              "data-width": maxWidth,
+              "data-height": "304px"
+            }
+          )
+        }
+      ),
+      /* @__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
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  VideoTile
+};

package/dist/VideoTile/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./VideoInit";
+export * from "./VideoTile";
+export * from "./VideoTile.css";
+export * from "./VideoTile.interface";

package/dist/VideoTile/index.js

@@ -0,0 +1,20 @@
+import { VideoInit } from "./VideoInit.js";
+import { VideoTile } from "./VideoTile.js";
+import { expand_icon, hide_transcript, item, mb_8, show, toggle_container, transcript_btn, transcript_container, transcript_content, video_container, video_title, vidyard_height, w_100 } from "./VideoTile.css.js";
+export {
+  VideoInit,
+  VideoTile,
+  expand_icon,
+  hide_transcript,
+  item,
+  mb_8,
+  show,
+  toggle_container,
+  transcript_btn,
+  transcript_container,
+  transcript_content,
+  video_container,
+  video_title,
+  vidyard_height,
+  w_100
+};

package/dist/VideoWrapper/VideoWrapper.css.d.ts

@@ -0,0 +1,2 @@
+export declare const grid_2: string;
+export declare const grid_3: string;

package/dist/VideoWrapper/VideoWrapper.css.js

@@ -0,0 +1,7 @@
+/* empty css                                */
+var grid_2 = "_2i5u4u0";
+var grid_3 = "_2i5u4u1";
+export {
+  grid_2,
+  grid_3
+};

package/dist/VideoWrapper/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { VideoTileInterface } from "../VideoTile";
+export interface VideoWrapperProps {
+    videoTiles: VideoTileInterface[];
+    backgroundColor?: string;
+    title: string;
+}
+export declare const VideoWrapper: FC<VideoWrapperProps>;