@axos-web-dev/shared-components 0.0.17 → 0.0.19

package/dist/NavigationMenu/AxosFiduciary/NavBar.module.js

@@ -1,43 +1,43 @@
-const header = "_header_101h6_1";
-const wrapper = "_wrapper_101h6_5";
-const header_main_row = "_header_main_row_101h6_11";
-const mobile_header = "_mobile_header_101h6_12";
-const logo_wrap = "_logo_wrap_101h6_18";
-const primary_links = "_primary_links_101h6_22";
-const main_nav = "_main_nav_101h6_26";
-const main_nav_link = "_main_nav_link_101h6_33";
-const sub_nav_link = "_sub_nav_link_101h6_55";
-const signin_wrap = "_signin_wrap_101h6_57";
-const signin_btn = "_signin_btn_101h6_58";
-const sub_nav = "_sub_nav_101h6_55";
-const header_sub_row = "_header_sub_row_101h6_99";
-const shadow = "_shadow_101h6_115";
-const opacity = "_opacity_101h6_131";
-const fadeInDown = "_fadeInDown_101h6_1";
-const footer = "_footer_101h6_137";
-const open = "_open_101h6_153";
-const mt_8 = "_mt_8_101h6_161";
-const mt_16 = "_mt_16_101h6_165";
-const ml_8 = "_ml_8_101h6_169";
-const reversed_row = "_reversed_row_101h6_173";
-const nav_anchor = "_nav_anchor_101h6_177";
-const site_lists = "_site_lists_101h6_188";
-const hamburger = "_hamburger_101h6_192";
-const mobile_logo = "_mobile_logo_101h6_206";
-const mobile_nav = "_mobile_nav_101h6_229";
-const mobile_opened = "_mobile_opened_101h6_241";
-const mobile_nav_item = "_mobile_nav_item_101h6_245";
-const icon_wrap = "_icon_wrap_101h6_260";
-const mobile_footer = "_mobile_footer_101h6_265";
-const mobile_footer_content = "_mobile_footer_content_101h6_271";
-const mobile_footer_media = "_mobile_footer_media_101h6_285";
-const footer_cta = "_footer_cta_101h6_292";
-const inner_wrapper = "_inner_wrapper_101h6_324";
-const btn = "_btn_101h6_328";
-const sub_menu = "_sub_menu_101h6_333";
-const main = "_main_101h6_26";
-const desktop_only = "_desktop_only_101h6_362";
-const mobile_only = "_mobile_only_101h6_409";
+const header = "_header_1witk_1";
+const wrapper = "_wrapper_1witk_5";
+const header_main_row = "_header_main_row_1witk_11";
+const mobile_header = "_mobile_header_1witk_12";
+const logo_wrap = "_logo_wrap_1witk_18";
+const primary_links = "_primary_links_1witk_22";
+const main_nav = "_main_nav_1witk_26";
+const main_nav_link = "_main_nav_link_1witk_33";
+const sub_nav_link = "_sub_nav_link_1witk_55";
+const signin_wrap = "_signin_wrap_1witk_57";
+const signin_btn = "_signin_btn_1witk_58";
+const sub_nav = "_sub_nav_1witk_55";
+const header_sub_row = "_header_sub_row_1witk_99";
+const shadow = "_shadow_1witk_115";
+const opacity = "_opacity_1witk_131";
+const fadeInDown = "_fadeInDown_1witk_1";
+const footer = "_footer_1witk_137";
+const open = "_open_1witk_153";
+const mt_8 = "_mt_8_1witk_161";
+const mt_16 = "_mt_16_1witk_165";
+const ml_8 = "_ml_8_1witk_169";
+const reversed_row = "_reversed_row_1witk_173";
+const nav_anchor = "_nav_anchor_1witk_177";
+const site_lists = "_site_lists_1witk_188";
+const hamburger = "_hamburger_1witk_192";
+const mobile_logo = "_mobile_logo_1witk_206";
+const mobile_nav = "_mobile_nav_1witk_229";
+const mobile_opened = "_mobile_opened_1witk_241";
+const mobile_nav_item = "_mobile_nav_item_1witk_245";
+const icon_wrap = "_icon_wrap_1witk_260";
+const mobile_footer = "_mobile_footer_1witk_265";
+const mobile_footer_content = "_mobile_footer_content_1witk_271";
+const mobile_footer_media = "_mobile_footer_media_1witk_285";
+const footer_cta = "_footer_cta_1witk_292";
+const inner_wrapper = "_inner_wrapper_1witk_324";
+const btn = "_btn_1witk_328";
+const sub_menu = "_sub_menu_1witk_333";
+const main = "_main_1witk_26";
+const desktop_only = "_desktop_only_1witk_362";
+const mobile_only = "_mobile_only_1witk_409";
 const styles = {
   header,
   wrapper,

package/dist/NavigationMenu/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NavBarAXA } from "./AxosAdvisor";
-export { default as NavBarAFS } from "./AxosFiduciary";
+export { default as NavBarAXA } from './AxosAdvisor';
+export { default as NavBarAFS } from './AxosFiduciary';

package/dist/SetContainer/SetContainer.d.ts

@@ -1,5 +1,6 @@
-import type { ImageBillboardSetProps } from '../ImageBillboard/ImageBillboard.interface';
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
+import { ImageBillboardSetProps } from '../ImageBillboard/ImageBillboard.interface';
+
 export interface SetContainerProps extends Omit<ImageBillboardSetProps, "imageBillboards">, PropsWithChildren {
 }
 export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/SetContainer/SetContainer.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { section_text, header_section } from "../IconBillboard/IconBillboard.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
@@ -27,16 +28,16 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
-import "../Input/index.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
 import "react-hook-form";
 import { inline_container } from "./SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../Chevron/Chevron.css.js";
 /* empty css                                */
 /* empty css                                                      */
-import "../NavigationMenu/AxosAdvisor/NavBar.module.js";
 /* empty css                                                         */
-import "../NavigationMenu/AxosFiduciary/NavBar.module.js";
 /* empty css                                                    */
 import "../Table/Table.css.js";
 /* empty css                                        */

package/dist/SetContainer/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./SetContainer";
-export * from "./SetContainer.css";
+export * from './SetContainer';
+export * from './SetContainer.css';

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

@@ -1,4 +1,14 @@
-export declare const table_container: string;
+export declare const table_container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        apy: {
+            background: "#f4f4f4";
+            padding: "2rem 0";
+        };
+        standard: {
+            background: "white";
+        };
+    };
+}>;
 export declare const table_container_text: string;
 export declare const table_headline: string;
 export declare const highlight_first_row: string;
@@ -6,7 +16,7 @@ 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;
-export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: "#4A5560";
@@ -59,7 +69,7 @@ export declare const th: import("@vanilla-extract/recipes").RuntimeFn<{
         true: {};
     };
 }>;
-export declare const td: 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})`;
@@ -114,7 +124,7 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
         true: {};
     };
 }>;
-export declare const tableWrapper: 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})`;
@@ -130,7 +140,7 @@ export declare const tableWrapper: import("@vanilla-extract/recipes").RuntimeFn<
         };
     };
 }>;
-export declare const table: 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})`;
@@ -147,3 +157,4 @@ export declare const table: import("@vanilla-extract/recipes").RuntimeFn<{
     };
 }>;
 export declare const alternate_color_rows: string;
+export declare const apy_table: string;

package/dist/Table/Table.css.js

@@ -2,21 +2,23 @@
 /* empty css                                   */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-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 tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwep", variantClassNames: { variant: { primary: "_1nivbweq", secondary: "_1nivbwer", tertiary: "_1nivbwes", quaternary: "_1nivbwet" } }, defaultVariants: {}, compoundVariants: [] });
-var table = createRuntimeFn({ defaultClassName: "_1nivbweu", variantClassNames: { variant: { primary: "_1nivbwev", secondary: "_1nivbwew", tertiary: "_1nivbwex", quaternary: "_1nivbwey" } }, defaultVariants: {}, compoundVariants: [] });
-var alternate_color_rows = "_1nivbwez";
+var table_container = createRuntimeFn({ defaultClassName: "_1nivbwe0", variantClassNames: { variant: { apy: "_1nivbwe1", standard: "_1nivbwe2" } }, defaultVariants: {}, compoundVariants: [] });
+var table_container_text = "_1nivbwe3";
+var table_headline = "_1nivbwe4";
+var highlight_first_row = "_1nivbwe5";
+var highlight_last_row = "_1nivbwe6";
+var headerCell = "_1nivbwe7";
+var headerVariants = { primary: "_1nivbwe8 _1nivbwe7", secondary: "_1nivbwe9 _1nivbwe7", tertiary: "_1nivbwea _1nivbwe7", quaternary: "_1nivbweb _1nivbwe7" };
+var bodyHeader = "_1nivbwec";
+var th = createRuntimeFn({ defaultClassName: "_1nivbwed", variantClassNames: { variant: { primary: "_1nivbwee", secondary: "_1nivbwef", tertiary: "_1nivbweg", quaternary: "_1nivbweh" }, highlighted: { true: "_1nivbwei" } }, defaultVariants: {}, compoundVariants: [] });
+var td = createRuntimeFn({ defaultClassName: "_1nivbwej", variantClassNames: { variant: { primary: "_1nivbwek", secondary: "_1nivbwel", tertiary: "_1nivbwem", quaternary: "_1nivbwen" }, highlighted: { true: "_1nivbweo" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwep"], [{ highlighted: true, variant: "tertiary" }, "_1nivbweq"]] });
+var tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwer", variantClassNames: { variant: { primary: "_1nivbwes", secondary: "_1nivbwet", tertiary: "_1nivbweu", quaternary: "_1nivbwev" } }, defaultVariants: {}, compoundVariants: [] });
+var table = createRuntimeFn({ defaultClassName: "_1nivbwew", variantClassNames: { variant: { primary: "_1nivbwex", secondary: "_1nivbwey", tertiary: "_1nivbwez", quaternary: "_1nivbwe10" } }, defaultVariants: {}, compoundVariants: [] });
+var alternate_color_rows = "_1nivbwe11";
+var apy_table = "_1nivbwe12";
 export {
   alternate_color_rows,
+  apy_table,
   bodyHeader,
   headerCell,
   headerVariants,

package/dist/Table/Table.d.ts

@@ -1,11 +1,12 @@
-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;
+import { CellProps, RowProps, TableContainerProps, TableProps } from './Table.interface';
+import { PropsWithChildren } from 'react';
+
+export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, tableType, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
 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<{
+export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps) => import('react').DetailedReactHTMLElement<{
     className: string;
     manifest?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -53,7 +54,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
@@ -67,7 +68,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -77,7 +78,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -94,7 +95,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
     "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "false" | "true") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;

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

@@ -1,4 +1,5 @@
-import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+
 export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
 }
 export interface CellProps extends HtmlHTMLAttributes<HTMLTableCellElement>, PropsWithChildren {
@@ -17,4 +18,5 @@ export interface TableContainerProps extends PropsWithChildren {
     tableTitle: ReactNode | string;
     tableBody?: ReactNode | string;
     tableFooter: ReactNode | string;
+    tableType?: string;
 }

package/dist/Table/Table.js

@@ -2,38 +2,56 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { table_container, table_container_text, table_headline, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, td, th } from "./Table.css.js";
+import { table_container, table_container_text, table_headline, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,
-  tableFooter
+  tableFooter,
+  tableType = "Standard"
 }) => {
-  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 })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        tableType === "Rate" ? table_container({ variant: "apy" }) : table_container({ variant: "standard" }),
+        "containment"
+      ),
+      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,
-  tableType,
+  tableType = "Standard",
   alternateColorRows = false
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: tableWrapper({ variant: getVariant(variant) }), children: /* @__PURE__ */ jsx(
-    "table",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      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}`,
-        alternateColorRows || tableType === "Rate" ? alternate_color_rows : ""
-      ),
-      children
+      className: tableWrapper({ variant: getVariant(variant) }),
+      style: tableType === "Rate" ? { width: "90%", border: "none" } : {},
+      children: /* @__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}`,
+            alternateColorRows || tableType === "Rate" ? alternate_color_rows : "",
+            tableType === "Rate" ? apy_table : ""
+          ),
+          children
+        }
+      )
     }
-  ) });
+  );
 };
 const TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx("tr", { ...props, children });

package/dist/Table/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Table";
-export * from "./Table.css";
+export * from './Table';
+export * from './Table.css';

package/dist/Table/index.js

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table.js";
-import { alternate_color_rows, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_headline, td, th } from "./Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_headline, td, th } from "./Table.css.js";
 export {
   Table,
   TableBody,
@@ -8,6 +8,7 @@ export {
   TableHead,
   TableRow,
   alternate_color_rows,
+  apy_table,
   bodyHeader,
   headerCell,
   headerVariants,

package/dist/TextBlock/TextBlock.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
+
 export interface TextBlockProps {
     bodyCopy: ReactNode | string;
     headline: ReactNode | string;

package/dist/TextBlock/index.d.ts

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

package/dist/Typography/Typography.css.d.ts

@@ -1,4 +1,5 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
 /**
  * Encode font
  */
@@ -8,7 +9,7 @@ export declare const headerCssVariable = "var(--header-font-family)";
  */
 export declare const mainCssVariable = "var(--main-font-family)";
 export declare const header: string;
-export declare const sizes: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const sizes: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         xs: {
             fontSize: number;
@@ -30,7 +31,7 @@ export declare const sizes: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const typography: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const typography: import('@vanilla-extract/recipes').RuntimeFn<{
     type: {
         h1: {
             fontFamily: "var(--header-font-family)";

package/dist/Typography/Typography.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { TypographySizeVariants, TypographyVariants } from ".";
+import { TypographySizeVariants, TypographyVariants } from '.';
+import { default as React } from 'react';
+
 type AsType = "body1" | "body2" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | string;
 export interface Props extends React.PropsWithChildren {
     as?: AsType;

package/dist/Typography/index.d.ts

@@ -1 +1 @@
-export * from "./Typography.css";
+export * from './Typography.css';

package/dist/VideoTile/VideoTile.css.js

@@ -1,6 +1,6 @@
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
-/* empty css                                          */
 /* empty css                             */
 var show = "_16puo4g0";
 var video_title = "_16puo4g1";

package/dist/VideoTile/VideoTile.d.ts

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

package/dist/VideoTile/VideoTile.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";
@@ -9,7 +10,7 @@ import SvgChevronUp from "../icons/ChevronUp.js";
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 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";
+import { 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";
 const VideoTile = ({
   //   ariaLabel,
   title,
@@ -28,13 +29,13 @@ const VideoTile = ({
   };
   return /* @__PURE__ */ jsxs("div", { id: `id_${id}`, className: `flex center`, children: [
     /* @__PURE__ */ jsx(VideoInit, {}),
-    /* @__PURE__ */ jsxs("div", { className: `${video_container} ${w_100} flex flex_col`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `containment ${video_container} flex_col`, children: [
       title && /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title }),
       /* @__PURE__ */ jsx(
         "div",
         {
           id: "",
-          className: `${mb_8} ${vidyard_height} vidyard-player-container rounded`,
+          className: `${mb_8} ${vidyard_height} vidyard-player-container rounded bordered`,
           "data-uuid": videoId,
           children: /* @__PURE__ */ jsx(
             "img",

package/dist/VideoTile/index.d.ts

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

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

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

package/dist/VideoWrapper/VideoWrapper.css.js

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

package/dist/VideoWrapper/index.d.ts

@@ -1,5 +1,6 @@
-import { FC } from "react";
-import { VideoTileInterface } from "../VideoTile";
+import { VideoTileInterface } from '../VideoTile';
+import { FC } from 'react';
+
 export interface VideoWrapperProps {
     videoTiles: VideoTileInterface[];
     backgroundColor?: string;

package/dist/VideoWrapper/index.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "next/script.js";
 import { VideoTile } from "../VideoTile/VideoTile.js";
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
-/* empty css                                          */
 /* empty css                                        */
-import { grid_3, grid_2 } from "./VideoWrapper.css.js";
+import { grid_wrapper, grid_3, grid_2 } from "./VideoWrapper.css.js";
 const VideoWrapper = ({
   title,
   videoTiles,
@@ -17,23 +17,29 @@ const VideoWrapper = ({
     {
       id: `id_${id}`,
       style: backgroundColor ? { backgroundColor } : {},
-      children: /* @__PURE__ */ jsxs("section", { children: [
+      children: /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
         /* @__PURE__ */ jsx("div", { className: "section_header", children: /* @__PURE__ */ jsx("h2", { className: "header_1", children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: `${videoTiles.length % 3 === 0 ? grid_3 : grid_2}`, children: videoTiles == null ? void 0 : videoTiles.map((videoItem, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-          VideoTile,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            id: videoItem.id,
-            title: videoItem == null ? void 0 : videoItem.title,
-            videoId: videoItem == null ? void 0 : videoItem.videoId,
-            thumbnailImage: videoItem == null ? void 0 : videoItem.thumbnailImage,
-            displayType: videoItem == null ? void 0 : videoItem.displayType,
-            maxWidth: (videoItem == null ? void 0 : videoItem.maxWidth) || "588px",
-            videoPlayer: videoItem.displayType,
-            transcript: videoItem == null ? void 0 : videoItem.transcript
-          },
-          index
-        ) })) })
-      ] })
+            className: `${grid_wrapper} ${videoTiles.length % 3 === 0 ? grid_3 : grid_2}`,
+            children: videoTiles == null ? void 0 : videoTiles.map((videoItem, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+              VideoTile,
+              {
+                id: videoItem.id,
+                title: videoItem == null ? void 0 : videoItem.title,
+                videoId: videoItem == null ? void 0 : videoItem.videoId,
+                thumbnailImage: videoItem == null ? void 0 : videoItem.thumbnailImage,
+                displayType: videoItem == null ? void 0 : videoItem.displayType,
+                maxWidth: (videoItem == null ? void 0 : videoItem.maxWidth) || "588px",
+                videoPlayer: videoItem.displayType,
+                transcript: videoItem == null ? void 0 : videoItem.transcript
+              },
+              index
+            ) }))
+          }
+        )
+      ] }) })
     },
     id
   );