@axos-web-dev/shared-components 1.0.77-patch.29 → 1.0.77-patch.31

package/dist/Chatbot/useHeadlessChat.js

@@ -0,0 +1,240 @@
+"use client";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useLocation } from "react-use";
+import { useMessages } from "./store/messages.js";
+const brandMap = /* @__PURE__ */ new Map([
+  ["axos", 1],
+  ["", 2],
+  ["ufb", 3]
+]);
+function useHeadlessChat({
+  companyId,
+  tenant,
+  host,
+  getToken,
+  projectId = "axos",
+  debug = false,
+  menuOption = "Support Virtual Agent"
+}) {
+  const { hostname } = useLocation();
+  const addMessage = useMessages((state) => state.addMessage);
+  const addMessages = useMessages((state) => state.addMessages);
+  const clearMessages = useMessages((state) => state.clearMessages);
+  const [showReconnect, setShowReconnect] = useState(false);
+  const [status, setStatus] = useState("idle");
+  const chatRef = useRef(null);
+  const clientRef = useRef(null);
+  const isMountedRef = useRef(true);
+  const hasLoadedBefore = useRef(true);
+  const menuRef = useRef({ menus: [] });
+  const sendMessage = useCallback(async (body) => {
+    if (chatRef.current) {
+      await clientRef.current?.sendTextMessage(body);
+    }
+  }, []);
+  const endChat = useCallback(async () => {
+    if (chatRef.current) {
+      await clientRef.current?.finishChat();
+      clearMessages();
+      clientRef.current?.createChat(
+        menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
+        {
+          custom_data: {
+            unsigned: {
+              facingBrandId: {
+                label: "facingBrandId",
+                value: `${brandMap.get(projectId) || 1}`
+              },
+              channel: {
+                label: "channel",
+                value: "in_web"
+              },
+              user_auth: {
+                label: "user_auth",
+                value: "false"
+              },
+              env: {
+                label: "env",
+                value: hostname?.includes("www") ? "prod" : hostname?.split(".")[1] ? hostname?.split(".")[1] : ""
+              }
+            }
+          }
+        }
+      );
+    }
+  }, [clearMessages, hostname, menuOption, projectId]);
+  useEffect(() => {
+    let messageHandler;
+    let chatReadyHandler;
+    let chatEndedHandler;
+    let chatConnectedHandler;
+    let chatDisconnectedHandler;
+    let memberLeftHandler;
+    let memberJoinedHandler;
+    let startTypingHandler;
+    let stopTypingHandler;
+    let chatTimeoutHandler;
+    async function init() {
+      setStatus("connecting");
+      const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
+      if (debug) Logger.addHandler(consoleLoggerHandler);
+      try {
+        clientRef.current = new Client({
+          companyId,
+          tenant,
+          host,
+          authenticate: getToken
+        });
+        if (debug) console.log("clientRef:", clientRef.current);
+      } catch (e) {
+        console.error("Error creating client:", e);
+        if (isMountedRef.current) setStatus("error");
+        return;
+      }
+      menuRef.current = await clientRef.current?.getMenus();
+      if (debug) console.log("channelId:", menuRef.current);
+      if (debug)
+        console.log(
+          "channelId:",
+          menuRef.current?.menus.find((menu) => menu.name === menuOption)?.id
+        );
+      const custom_data = {
+        unsigned: {
+          facingBrandId: {
+            label: "facingBrandId",
+            value: `${brandMap.get(projectId) || 1}`
+          },
+          channel: {
+            label: "channel",
+            value: "in_web"
+          },
+          user_auth: {
+            label: "user_auth",
+            value: "false"
+          },
+          env: {
+            label: "env",
+            value: hostname?.includes("www") ? "prod" : hostname?.split(".")[1] ? hostname?.split(".")[1] : ""
+          }
+        }
+      };
+      try {
+        chatRef.current = await clientRef.current?.loadOngoingChat();
+        if (chatRef.current != null) {
+          chatRef.current = await clientRef.current?.resumeChat(
+            chatRef.current?.state?.id
+          );
+          if (debug) console.log("Resumed chatRef:", chatRef.current);
+        } else {
+          chatRef.current = await clientRef.current?.createChat(
+            menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
+            {
+              custom_data
+            }
+          );
+          if (debug) console.log("chatRef:", chatRef.current);
+        }
+      } catch (error) {
+        console.error("Error creating chat:", error);
+      }
+      messageHandler = (msg) => {
+        if (debug) console.log("Received message:", msg);
+        addMessage(msg);
+      };
+      chatReadyHandler = () => {
+        console.log("Chat is ready");
+      };
+      chatEndedHandler = () => {
+        console.log("Chat has ended");
+        setStatus("finished");
+      };
+      chatConnectedHandler = async () => {
+        console.log("Chat connected");
+        setStatus("connected");
+        try {
+          const messagesFetched = await chatRef.current?.fetchMessages();
+          if (debug) console.log("[messages]:", messagesFetched);
+          addMessages(messagesFetched || []);
+        } catch (error) {
+          console.error("Error fetching messages:", error);
+        }
+      };
+      startTypingHandler = (identity) => {
+        console.log("start typing: ", identity);
+      };
+      stopTypingHandler = (identity) => {
+        console.log("stop typing: ", identity);
+      };
+      memberLeftHandler = (identity) => {
+        console.log("Member has left the chat:  ", identity);
+      };
+      memberJoinedHandler = (identity) => {
+        console.log("Member has joined the chat: ", identity);
+      };
+      chatDisconnectedHandler = () => {
+        console.log("Chat disconnected");
+        setStatus("idle");
+      };
+      chatTimeoutHandler = () => {
+        console.log("Chat timeout");
+      };
+      clientRef.current?.on("ready", chatReadyHandler);
+      clientRef.current?.on("chat.connected", chatConnectedHandler);
+      clientRef.current?.on("chat.message", messageHandler);
+      clientRef.current?.on("chat.memberLeft", memberLeftHandler);
+      clientRef.current?.on("chat.memberJoined", memberJoinedHandler);
+      clientRef.current?.on("chat.typingStarted", startTypingHandler);
+      clientRef.current?.on("chat.typingEnded", stopTypingHandler);
+      clientRef.current?.on("chat.disconnected", chatDisconnectedHandler);
+      clientRef.current?.on("chat.ended", chatEndedHandler);
+      clientRef.current?.on("chat.timeout", chatTimeoutHandler);
+    }
+    if (hasLoadedBefore.current) {
+      if (debug) console.log("Initializing chat...");
+      init();
+      hasLoadedBefore.current = false;
+    }
+    return () => {
+      isMountedRef.current = false;
+      if (debug)
+        console.log(
+          "Component unmounted. Cancelling pending async operations."
+        );
+      chatRef.current = null;
+      clientRef.current?.off("ready", chatReadyHandler);
+      clientRef.current?.off("chat.message", messageHandler);
+      clientRef.current?.off("chat.connected", chatConnectedHandler);
+      clientRef.current?.off("chat.ended", chatEndedHandler);
+      clientRef.current?.off("chat.memberLeft", memberLeftHandler);
+      clientRef.current?.off("chat.memberJoined", memberJoinedHandler);
+      clientRef.current?.off("chat.typingStarted", startTypingHandler);
+      clientRef.current?.off("chat.typingEnded", stopTypingHandler);
+      clientRef.current?.off("chat.disconnected", chatDisconnectedHandler);
+      clientRef.current?.off("chat.timeout", chatTimeoutHandler);
+      clientRef.current?.destroyChat();
+      clientRef.current = null;
+    };
+  }, [
+    companyId,
+    tenant,
+    host,
+    getToken,
+    addMessage,
+    addMessages,
+    debug,
+    projectId,
+    menuOption,
+    hostname
+  ]);
+  return {
+    status,
+    sendMessage,
+    showReconnect,
+    setShowReconnect,
+    endChat,
+    virtualAgent: chatRef.current?.state.virtual_agent
+  };
+}
+export {
+  useHeadlessChat
+};

package/dist/Forms/CommercialDepositsNoLendingOption.d.ts

@@ -0,0 +1,16 @@
+import { FormProps } from './FormProps';
+
+export type CommercialDepositsNoLendingOptionInputs = {
+    first_name: string;
+    last_name: string;
+    company: string;
+    email: string;
+    phone: string;
+    Estimated_Gross_Annual_Revenue__c: string;
+    Banking__c: boolean;
+    Treasury_Management__c: boolean;
+    Others__c: boolean;
+    Others_Detail__c: string;
+    Product_and_servicing_needs__c: string;
+};
+export declare const CommercialDepositsNoLendingOption: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, onValidate, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/CommercialDepositsNoLendingOption.js

@@ -0,0 +1,330 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import { Checkbox } from "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import { Dropdown } from "../Input/Dropdown.js";
+import "../Input/Dropdown.css.js";
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import { InputPhone } from "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
+import "../Input/RadioButton.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+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                                                    */
+/* empty css                                                */
+import "../utils/allowedAxosDomains.js";
+import { associatedEmail } from "../utils/EverestValidity.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { iconForm, headerForm, form, descriptionField, headerContainer, x_input, fullRowForm, pl_label, formWrapper, disclosureForm, actions, formContainer } from "./Forms.css.js";
+import { honeyPotSchema, isValidHoneyPot, HoneyPot } from "./HoneyPot/index.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+const CommercialDepositsNoLendingOption = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  callToAction,
+  validateEmail,
+  onValidate,
+  id
+}) => {
+  const schema = z.object({
+    first_name: z.string({ message: "First Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "First Name is required."
+    }).trim().min(1, { message: "First Name is required." }),
+    last_name: z.string({ message: "Last Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Last Name is required."
+    }).trim().min(1, { message: "Last Name is required." }),
+    email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    phone: z.string({ message: "Business Phone is required." }).regex(/[\d-]{10}/, { message: "Business Phone is required." }).min(10, { message: "Business Phone is required." }).max(12, { message: "Business Phone is required." }).transform((val, ctx) => {
+      const removeDashes = val.replace(/-/gi, "");
+      if (removeDashes.length !== 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Business Phone must have at least 10 and no more than 10 characters."
+        });
+        return z.NEVER;
+      }
+      if (removeDashes.endsWith("00000") || removeDashes.startsWith("999") || removeDashes.length === 10 && /^[01]/.test(removeDashes)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid phone number."
+        });
+        return z.NEVER;
+      }
+      return removeDashes;
+    }),
+    company: z.string({ message: "Business Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Business Name is required"
+    }).trim().min(1, { message: "Business Name is required." }),
+    Estimated_Gross_Annual_Revenue__c: z.string({
+      message: "Estimated gross annual revenue is required"
+    }).min(1, { message: "Estimated gross annual revenue is required" }),
+    Banking__c: z.boolean(),
+    Treasury_Management__c: z.boolean(),
+    Others__c: z.boolean().optional(),
+    Others_Detail__c: z.string().optional(),
+    Product_and_servicing_needs__c: z.string()
+  });
+  const gen_schema = schema.merge(SalesforceSchema).merge(honeyPotSchema).superRefine((data, ctx) => {
+    if (!isValidHoneyPot(data)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "fields are not valid."
+      });
+    }
+  });
+  const methods = useForm({
+    resolver: zodResolver(gen_schema, {
+      async: true
+    }),
+    mode: "all"
+  });
+  const {
+    handleSubmit,
+    register,
+    watch,
+    formState: { errors, isValid, isSubmitting }
+  } = methods;
+  const othersChecked = watch("Others__c");
+  const submitForm = async (data) => {
+    const processData = {
+      ...data,
+      Banking__c: data.Banking__c ? true : false
+    };
+    await onSubmit(processData);
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: `id_${id}`,
+      className: clsx(formContainer({ variant })),
+      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(headerContainer, "text_center"), children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+          description && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                form,
+                descriptionField({ variant }),
+                "text_center"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: form,
+            onSubmit: async (e) => {
+              onValidate && onValidate(e);
+              await handleSubmit(submitForm)(e);
+              e.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "first_name",
+                    ...register("first_name", {
+                      required: "First Name is required"
+                    }),
+                    label: "First Name",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.first_name,
+                    helperText: errors.first_name?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "last_name",
+                    ...register("last_name", { required: true }),
+                    label: "Last Name",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.last_name,
+                    helperText: errors.last_name?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "company",
+                    ...register("company", { required: true }),
+                    label: "Business Name",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.company,
+                    helperText: errors.company?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "email",
+                    ...register("email", {
+                      required: true,
+                      validate: {
+                        isValid: associatedEmail
+                      }
+                    }),
+                    label: "Email",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.email,
+                    helperText: errors.email?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: x_input, children: /* @__PURE__ */ jsx(
+                  InputPhone,
+                  {
+                    id: "phone",
+                    ...register("phone", { required: true, maxLength: 12 }),
+                    label: "Business Phone",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.phone,
+                    helperText: errors.phone?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                  Dropdown,
+                  {
+                    id: "Estimated_Gross_Annual_Revenue__c",
+                    ...register("Estimated_Gross_Annual_Revenue__c", {
+                      required: true
+                    }),
+                    label: "Estimated Gross Annual Revenue",
+                    sizes: "medium",
+                    required: true,
+                    error: !!errors.Estimated_Gross_Annual_Revenue__c,
+                    helperText: errors.Estimated_Gross_Annual_Revenue__c?.message,
+                    variant,
+                    defaultValue: "",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { disabled: true, value: "", children: "Select Option" }),
+                      /* @__PURE__ */ jsx("option", { value: "Under $3MM", children: "Under $3MM" }),
+                      /* @__PURE__ */ jsx("option", { value: "$3MM - $10MM", children: "$3MM - $10MM" }),
+                      /* @__PURE__ */ jsx("option", { value: "$10MM - $100MM", children: "$10MM - $100MM" }),
+                      /* @__PURE__ */ jsx("option", { value: "Above $100MM", children: "Above $100MM" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: `${fullRowForm}`, children: [
+                  /* @__PURE__ */ jsx("div", { className: pl_label, children: "Which products or services apply to your request? Click all that apply." }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Banking__c",
+                      ...register("Banking__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Banking"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Treasury_Management__c",
+                      ...register("Treasury_Management__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Treasury Management"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "Others__c",
+                      ...register("Others__c"),
+                      sizes: "medium",
+                      variant,
+                      children: "Other"
+                    }
+                  ),
+                  othersChecked && /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "Others_Detail__c",
+                      ...register("Others_Detail__c", { required: false }),
+                      sizes: "medium",
+                      required: false,
+                      error: !!errors.Others_Detail__c,
+                      helperText: errors.Others_Detail__c?.message,
+                      variant
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "Product_and_servicing_needs__c",
+                    ...register("Product_and_servicing_needs__c", {
+                      required: false
+                    }),
+                    label: "Kindly describe your product and/or servicing needs.",
+                    sizes: "medium",
+                    required: false,
+                    error: !!errors.Product_and_servicing_needs__c,
+                    helperText: errors.Product_and_servicing_needs__c?.message,
+                    variant
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(HoneyPot, { register, variant })
+              ] }),
+              children,
+              /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+              /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  color: getVariant(callToAction?.variant),
+                  as: "button",
+                  type: "submit",
+                  disabled: !isValid || isSubmitting,
+                  children: callToAction?.displayText
+                }
+              ) })
+            ]
+          }
+        )
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  CommercialDepositsNoLendingOption
+};

package/dist/Forms/index.d.ts

@@ -3,6 +3,7 @@ export * from './ApplyNow';
 export * from './applynow-utils';
 export * from './ClearingForm';
 export * from './CommercialDeposits';
+export * from './CommercialDepositsNoLendingOption';
 export * from './CommercialLending';
 export * from './CommercialPremiumFinance';
 export * from './ContactCompany';

package/dist/Forms/index.js

@@ -4,6 +4,7 @@ import { ApplyNow } from "./ApplyNow.js";
 import { getLink } from "./applynow-utils.js";
 import { ClearingForm } from "./ClearingForm.js";
 import { CommercialDeposits } from "./CommercialDeposits.js";
+import { CommercialDepositsNoLendingOption } from "./CommercialDepositsNoLendingOption.js";
 import { CommercialLending } from "./CommercialLending.js";
 import { CommercialPremiumFinance } from "./CommercialPremiumFinance.js";
 import { ContactCompany } from "./ContactCompany.js";
@@ -44,6 +45,7 @@ export {
   ApplyNow,
   ClearingForm,
   CommercialDeposits,
+  CommercialDepositsNoLendingOption,
   CommercialLending,
   CommercialPremiumFinance,
   ContactCompany,

package/dist/StepItemSet/StepItemSet.css.d.ts

@@ -83,6 +83,7 @@ export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const sec_subtitle: string;
 export declare const tablet_col: string;
 export declare const bs_image: string;
+export declare const bs_video: string;
 export declare const steps_wrapper: string;
 export declare const ol: string;
 export declare const bs_btns: string;

package/dist/StepItemSet/StepItemSet.css.js

@@ -1,6 +1,8 @@
-import '../assets/StepItemSet/StepItemSet.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/StepItemSet/StepItemSet.css';import '../assets/VideoTile/VideoTile.css';import '../assets/Typography/Typography.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                                    */
+/* empty css                                          */
+/* empty css                                        */
 /* empty css                               */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var bs_section = createRuntimeFn({ defaultClassName: "_18par6f0", variantClassNames: { variant: { primary: "_18par6f1", secondary: "_18par6f2", tertiary: "_18par6f3", quaternary: "_18par6f4" } }, defaultVariants: {}, compoundVariants: [] });
@@ -11,15 +13,17 @@ var sec_title = createRuntimeFn({ defaultClassName: "_18par6fc", variantClassNam
 var sec_subtitle = "_18par6fh";
 var tablet_col = "_18par6fi";
 var bs_image = "_18par6fj";
-var steps_wrapper = "_18par6fk";
-var ol = "_18par6fl";
-var bs_btns = "_18par6fm";
-var bs_add_details = "_18par6fn";
+var bs_video = "_18par6fk";
+var steps_wrapper = "_18par6fl";
+var ol = "_18par6fm";
+var bs_btns = "_18par6fn";
+var bs_add_details = "_18par6fo";
 export {
   bs_add_details,
   bs_btns,
   bs_image,
   bs_section,
+  bs_video,
   bs_wrapper,
   modifier,
   ol,

package/dist/StepItemSet/StepItemSet.d.ts

@@ -13,5 +13,11 @@ export interface StepItemSetProps {
     stepItems?: StepItemProps[];
     callToActionRow?: boolean | ChevronProps[];
     additionalDetails?: string | ReactNode;
+    video?: {
+        videoId: string;
+        videoPlayer: string;
+        thubnailImage: string;
+        transcript?: string;
+    };
 }
 export declare const StepItemSet: FC<StepItemSetProps>;