@axos-web-dev/shared-components 1.0.100-dev.75 → 1.0.100-dev.76-feature-lp-logos

package/dist/Chatbot/ChatWindow.js

@@ -41,7 +41,9 @@ const ChatWindow = ({
     showThankyouMessage,
     displayThankyouMessage,
     toggleThankyouMessage,
-    hasEscalated
+    hasEscalated,
+    isBlockedInput,
+    isOpen
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -50,9 +52,6 @@ const ChatWindow = ({
   const [input, setInput] = React.useState("");
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
-  const isOpen = useOpenChat((state2) => state2.isOpen);
-  const isBlockedInput = useOpenChat((state2) => state2.isBlockedInput);
-  const blockInput = useOpenChat((state2) => state2.blockInput);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -60,10 +59,7 @@ const ChatWindow = ({
     e.preventDefault();
     const cleaned = cleanInput(input);
     if (isBlockedInput) return;
-    if (cleaned) {
-      if (!hasEscalated) {
-        blockInput?.();
-      }
+    if (cleaned != "") {
       onSend(cleaned);
       setInput("");
     }
@@ -457,7 +453,7 @@ const ChatWindow = ({
         style: {
           display: "flex",
           padding: "12px 16px",
-          background: "#ffffff",
+          background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
           borderRadius: 12
         },
         children: [

package/dist/Chatbot/Chatbot.js

@@ -22,7 +22,7 @@ const Chatbot = ({
     hasEscalated,
     endEscalation,
     unblockInput,
-    isBlockedInput
+    blockInput
   } = useOpenChat();
   const { addMessage, addMessages, clearMessages, messages } = useMessages();
   const clientRef = useRef(null);
@@ -99,31 +99,31 @@ const Chatbot = ({
   };
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
-    if (["system", "virtual_agent", "user"].includes(message.$userType) && message.event === void 0) {
-      console.log(message.$userType, "not end user");
+    const { event, $userType } = message;
+    if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
       addMessage(message);
-      if (!hasEscalated && isBlockedInput) {
+      if (!hasEscalated) {
         unblockInput?.();
       }
       return;
     }
-    const eventName = message?.event;
-    switch (eventName) {
+    switch (event) {
       case "escalationAccepted":
+      case "escalationStarted":
         setScalationStarted(true);
         startEscalation?.();
         addMessage(message);
         return;
-      case "escalationStarted":
-        setScalationStarted(true);
-        startEscalation?.();
+      case "escalationEnded":
+      case "escalationFailed": {
+        endEscalation?.();
         addMessage(message);
         return;
+      }
       default:
         addMessage(message);
         if (["end_user"].includes(message.$userType)) {
           if (!hasEscalated) {
-            console.log(message.$userType, "end user");
             addMessage(typingMessage);
           }
         }
@@ -294,7 +294,15 @@ const Chatbot = ({
   };
   const onSendMessage = async (msg) => {
     console.log("Sending message:", msg);
-    await clientRef.current?.sendTextMessage(msg);
+    try {
+      await clientRef.current?.sendTextMessage(msg);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      if (!hasEscalated) {
+        blockInput?.();
+      }
+    }
   };
   const onEndChat = async () => {
     console.log("Ending chat");

package/dist/Chatbot/ChatbotMessage.js

@@ -9,7 +9,7 @@ import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import
 /* empty css                               */
 /* empty css                                    */
 import clsx from "clsx";
-import { shimmerText, notificationStyle, endChatButtonStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button } from "./ChatWindow.css.js";
+import { shimmerText, notificationStyle, messageStyle, user_msg, agent_msg, inline_button_wrapper, inline_button, endChatButtonStyle } from "./ChatWindow.css.js";
 import { useOpenChat } from "./store/chat.js";
 function timeAgo(date) {
   const seconds = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / 1e3);
@@ -24,7 +24,6 @@ const ChatbotMessage = ({
   showAvatar,
   showName,
   virtualAgent,
-  onCancelEndChat,
   onEndChat,
   onSend
 }) => {
@@ -76,23 +75,20 @@ const ChatbotMessage = ({
       " ",
       msg.to_agent ? /* @__PURE__ */ jsx("strong", { children: msg?.to_agent?.name }) : "an agent"
     ] }, msg.$index),
-    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: notificationStyle,
-          style: { fontSize: 12 },
-          children: [
-            "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
-            " ",
-            /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
-            "."
-          ]
-        },
-        msg.$index
-      ),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onCancelEndChat, children: "End Chat" }) })
-    ] }),
+    msg.type == "noti" && msg.$userType == "virtual_agent" && msg.event == "escalationDeflected" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: notificationStyle,
+        style: { fontSize: 12 },
+        children: [
+          "Our chat team is available weekdays, 8am-5pm, except federal bank holidays. For immediate assistance you can reach out to us at",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "tel:1-888-502-2967", children: "1-888-502-2967" }),
+          "."
+        ]
+      },
+      msg.$index
+    ) }),
     ["text", "markdown_template", "markdown"].includes(msg.type) && /* @__PURE__ */ jsx(
       "div",
       {
@@ -181,7 +177,28 @@ const ChatbotMessage = ({
         index
       );
     }) }),
-    msg.event == "chatEnded" && /* @__PURE__ */ jsxs(Fragment, { children: [
+    " ",
+    msg.event == "chatEnded" && msg.status == "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          title: (/* @__PURE__ */ new Date()).toLocaleString(),
+          style: {
+            fontSize: 12,
+            color: "#888",
+            marginBottom: 4,
+            textAlign: "center"
+          },
+          children: [
+            "No team members are online at the moment.",
+            /* @__PURE__ */ jsx("br", {}),
+            " Please try again later."
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: 12 }, children: /* @__PURE__ */ jsx("button", { className: endChatButtonStyle, onClick: onEndChat, children: "End Chat" }) })
+    ] }),
+    msg.event == "chatEnded" && msg.status != "failed" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/LandingPageHeader/LandingPageHeader.css.d.ts

@@ -9,10 +9,28 @@ export declare const lp_theme: import('@vanilla-extract/recipes').RuntimeFn<{
         tertiary: {
             background: `var(--${string})`;
         };
+        quaternary: {
+            background: `var(--${string})`;
+        };
     };
 }>;
 export declare const lp_container: string;
 export declare const spb_container: string;
 export declare const lp_hover: string;
 export declare const spb_hover: string;
-export declare const svg_fill: string;
+export declare const svg_fill: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            fill: `var(--${string})`;
+        };
+        secondary: {
+            fill: `var(--${string})`;
+        };
+        tertiary: {
+            fill: `var(--${string})`;
+        };
+        quaternary: {
+            fill: `var(--${string})`;
+        };
+    };
+}>;

package/dist/LandingPageHeader/LandingPageHeader.css.js

@@ -4,12 +4,12 @@ import '../assets/LandingPageHeader/LandingPageHeader.css';import '../assets/the
 /* empty css                                    */
 /* empty css                                     */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var lp_theme = createRuntimeFn({ defaultClassName: "_1o1hxre0", variantClassNames: { variant: { primary: "_1o1hxre1", secondary: "_1o1hxre2", tertiary: "_1o1hxre3" } }, defaultVariants: {}, compoundVariants: [] });
-var lp_container = "_1o1hxre4";
-var spb_container = "_1o1hxre5";
-var lp_hover = "_1o1hxre6";
-var spb_hover = "_1o1hxre7";
-var svg_fill = "_1o1hxre8";
+var lp_theme = createRuntimeFn({ defaultClassName: "_1o1hxre0", variantClassNames: { variant: { primary: "_1o1hxre1", secondary: "_1o1hxre2", tertiary: "_1o1hxre3", quaternary: "_1o1hxre4" } }, defaultVariants: {}, compoundVariants: [] });
+var lp_container = "_1o1hxre5";
+var spb_container = "_1o1hxre6";
+var lp_hover = "_1o1hxre7";
+var spb_hover = "_1o1hxre8";
+var svg_fill = createRuntimeFn({ defaultClassName: "_1o1hxre9", variantClassNames: { variant: { primary: "_1o1hxrea", secondary: "_1o1hxreb", tertiary: "_1o1hxrec", quaternary: "_1o1hxred" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   lp_container,
   lp_hover,

package/dist/LandingPageHeader/LandingPageHeader.d.ts

@@ -1,9 +1,11 @@
 import { QuaternaryTypes } from '../utils/variant.types';
+import { ImageInterface } from '../main';
 
 export interface LandingPageHeaderProps {
     id: string;
     variant: QuaternaryTypes;
     project?: string;
     alt?: string;
+    logo?: ImageInterface;
 }
-export declare const LandingPageHeader: ({ id, variant: fullVariant, project, alt, }: LandingPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LandingPageHeader: ({ id, variant: fullVariant, project, alt, logo, }: LandingPageHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/LandingPageHeader/LandingPageHeader.js

@@ -13,28 +13,45 @@ import SvgComponent from "../icons/Logos/AXA.js";
 import SvgComponent$2 from "../icons/Logos/AXC.js";
 import SvgComponent$4 from "../icons/Logos/AXI.js";
 import SvgComponent$5 from "../icons/Logos/AXOS.js";
-import SvgComponent$7 from "../icons/Logos/GBLVF.js";
-import SvgComponent$6 from "../icons/Logos/LVF.js";
-import SvgComponent$8 from "../icons/Logos/SPB.js";
+import SvgComponent$6 from "../icons/Logos/GBLVF.js";
+import SvgComponent$7 from "../icons/Logos/SPB.js";
 import { getVariant } from "../utils/getVariant.js";
-import { lp_theme, spb_container, lp_container, spb_hover, lp_hover, svg_fill } from "./LandingPageHeader.css.js";
+import { svg_fill, lp_theme, spb_container, lp_container, spb_hover, lp_hover } from "./LandingPageHeader.css.js";
 const LandingPageHeader = ({
   id,
   variant: fullVariant = "primary",
   project = "AXB",
-  alt
+  alt,
+  logo
 }) => {
   const variant = getVariant(fullVariant);
   const website = /* @__PURE__ */ new Map([
-    ["AXA", /* @__PURE__ */ jsx(SvgComponent, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AFS", /* @__PURE__ */ jsx(SvgComponent$1, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AXC", /* @__PURE__ */ jsx(SvgComponent$2, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AAS", /* @__PURE__ */ jsx(SvgComponent$3, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AXI", /* @__PURE__ */ jsx(SvgComponent$4, { classNameFill: svg_fill, height: 36, width: 120 })],
-    ["AXB", /* @__PURE__ */ jsx(SvgComponent$5, { height: 30, width: 120, classNameFill: svg_fill })],
-    ["LVF", /* @__PURE__ */ jsx(SvgComponent$6, { height: 30, width: 120, classNameFill: `${svg_fill}` })],
-    ["GBLVF", /* @__PURE__ */ jsx(SvgComponent$7, { height: 60, width: 220 })],
-    ["SPB", /* @__PURE__ */ jsx(SvgComponent$8, { height: "100%", width: "100%" })]
+    [
+      "AXA",
+      /* @__PURE__ */ jsx(SvgComponent, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AFS",
+      /* @__PURE__ */ jsx(SvgComponent$1, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AXC",
+      /* @__PURE__ */ jsx(SvgComponent$2, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AAS",
+      /* @__PURE__ */ jsx(SvgComponent$3, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AXI",
+      /* @__PURE__ */ jsx(SvgComponent$4, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
+    ],
+    [
+      "AXB",
+      /* @__PURE__ */ jsx(SvgComponent$5, { height: 30, width: 120, classNameFill: svg_fill({ variant }) })
+    ],
+    ["GBLVF", /* @__PURE__ */ jsx(SvgComponent$6, { height: 60, width: 220 })],
+    ["SPB", /* @__PURE__ */ jsx(SvgComponent$7, { height: "100%", width: "100%" })]
   ]);
   const isSPBPage = project === "SPB";
   return /* @__PURE__ */ jsx("header", { className: `${lp_theme({ variant })}`, id: `id_${id}`, children: /* @__PURE__ */ jsx(
@@ -46,8 +63,17 @@ const LandingPageHeader = ({
         {
           href: project == "AXI" ? "/invest" : "/",
           className: isSPBPage ? spb_hover : lp_hover,
-          "aria-label": alt ?? "axos logo, return to homepage",
-          children: website.get(project)
+          "aria-label": alt ?? "return to homepage",
+          children: logo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: logo.src,
+              alt: logo.alt ?? "",
+              height: Number(logo.height),
+              width: Number(logo.width),
+              className: "img_fluid"
+            }
+          ) : website.get(project)
         }
       )
     }

package/dist/assets/Chatbot/ChatWindow.css

@@ -93,6 +93,7 @@ button:has(span:hover) ._13n1jqk6 {
   font-size: 16px;
   opacity: 0.7;
   outline: none;
+  background: transparent;
   resize: none;
 }
 ._13n1jqk9::placeholder {
@@ -101,21 +102,23 @@ button:has(span:hover) ._13n1jqk6 {
 ._1hpv6vm1 ._13n1jqk9::placeholder {
   color: rgba(31,31,31,.58);
 }
+._13n1jqk9:disabled {
+  cursor: not-allowed;
+}
 ._13n1jqka {
   overflow-y: hidden;
   min-height: 20px;
 }
 ._13n1jqkb {
   padding-inline: 20px;
-  background: #ffffff;
+  background: transparent;
   border: none;
 }
 ._13n1jqkb:hover {
-  background: #ffffff;
   cursor: pointer;
 }
-._1hpv6vm1 ._13n1jqkb:hover {
-  background: #eae8e8;
+._13n1jqkb:disabled {
+  cursor: not-allowed;
 }
 ._13n1jqkb svg {
   fill: rgba(31,31,31,.38);

package/dist/assets/LandingPageHeader/LandingPageHeader.css

@@ -2,56 +2,68 @@
   background: var(--_1073cm81);
 }
 ._1o1hxre2 {
-  background: var(--_1073cm81);
+  background: var(--_1073cm88);
 }
 ._1o1hxre3 {
-  background: var(--_1073cm81);
+  background: var(--_1073cm8f);
 }
 ._1o1hxre4 {
-  padding: 0 24px;
-  min-height: 59px;
+  background: var(--_1073cm8m);
 }
 ._1o1hxre5 {
-  padding: 32px 24px;
+  padding: 7px 24px;
   min-height: 59px;
 }
 ._1o1hxre6 {
+  padding: 32px 24px;
+  min-height: 59px;
+}
+._1o1hxre7 {
   transition: opacity 0.35s ease;
 }
-._1o1hxre6:hover {
+._1o1hxre7:hover {
   opacity: 0.6;
 }
-._1o1hxre6:active {
+._1o1hxre7:active {
   opacity: 1;
 }
-._1o1hxre7 {
+._1o1hxre8 {
   transition: opacity 0.35s ease;
   width: 568px;
   height: 78px;
 }
-._1o1hxre7:hover {
+._1o1hxre8:hover {
   opacity: 0.6;
 }
-._1o1hxre7:active {
+._1o1hxre8:active {
   opacity: 1;
 }
-._1o1hxre8 {
+._1o1hxrea {
   fill: var(--_1073cm85);
 }
+._1o1hxreb {
+  fill: var(--_1073cm8c);
+}
+._1o1hxrec {
+  fill: var(--_1073cm8j);
+}
+._1o1hxred {
+  fill: var(--_1073cm8q);
+}
 @media screen and (max-width: 1023px) {
-  ._1o1hxre5 {
+  ._1o1hxre6 {
     padding: 28px 24px;
   }
-  ._1o1hxre7 {
+  ._1o1hxre8 {
     width: 454px;
     height: 62px;
   }
 }
 @media screen and (max-width: 768px) {
-  ._1o1hxre5 {
+  ._1o1hxre6 {
     padding: 24px 24px;
   }
-  ._1o1hxre7 {
+  ._1o1hxre8 {
     width: 340px;
     height: 46px;
   }

package/package.json

@@ -1,136 +1,136 @@
-{
-  "name": "@axos-web-dev/shared-components",
-  "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.75",
-  "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "dist/assets/**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig.build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "check-types": "tsc --pretty --noEmit",
-    "check-format": "prettier --check .",
-    "check-lint": "eslint . --ext ts --ext tsx --ext js",
-    "format": "prettier --write .",
-    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "npm:link": "npm run build && npm link"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@hookform/resolvers": "^3.10.0",
-    "@next-safe-action/adapter-react-hook-form": "^2.0.0",
-    "@react-input/mask": "^1.2.15",
-    "@react-input/number-format": "^1.1.3",
-    "@storybook/icons": "^1.3.0",
-    "@storybook/preview-api": "^8.4.7",
-    "@ts-stack/markdown": "^1.5.0",
-    "@types/iframe-resizer": "3.5.13",
-    "@ujet/websdk-headless": "^3.41.4",
-    "@vanilla-extract/css": "^1.16.1",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "antd": "^5.22.5",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.9.2",
-    "iframe-resizer": "^3.6.6",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "next-safe-action": "^8.0.2",
-    "react-date-picker": "^11.0.0",
-    "react-date-range": "^2.0.1",
-    "react-hook-form": "^7.54.2",
-    "react-markdown": "^9.1.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "react-use": "^17.6.0",
-    "react-wrap-balancer": "^1.1.1",
-    "remark-gfm": "^4.0.1",
-    "rsuite": "^5.75.0",
-    "slick-carousel": "^1.8.1",
-    "typed-css-modules": "^0.9.1",
-    "vite-plugin-svgr": "^4.3.0",
-    "zod": "^3.24.1",
-    "zustand": "^4.5.5"
-  },
-  "peerDependencies": {
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^4.0.3",
-    "next": "^14.1.4",
-    "react": "^18.2.0",
-    "react-date-range": "^2.0.1",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-mdx-gfm": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.6.14",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-prettier": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
-    "@types/lodash": "^4.17.17",
-    "@types/node": "^20.19.0",
-    "@types/react": "^18.3.23",
-    "@types/react-date-range": "^1.4.9",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.3.7",
-    "@types/react-slick": "^0.23.13",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/recipes": "^0.5.5",
-    "@vanilla-extract/vite-plugin": "^4.0.18",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "esbuild-vanilla-image-loader": "^0.1.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.4.5",
-    "husky": "^9.1.7",
-    "next": "^14.1.4",
-    "prettier": "3.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-svg-import": "^3.0.0",
-    "rollup-plugin-svgo": "^2.0.0",
-    "storybook": "^8.4.7",
-    "typescript": "^5.7.2",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-setting-css-module": "^1.1.4",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
-  "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "author": "axos-web-dev",
-  "license": "ISC"
-}
+{
+  "name": "@axos-web-dev/shared-components",
+  "description": "Axos shared components library for web.",
+  "version": "1.0.100-dev.76-feature-lp-logos",
+  "type": "module",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "dist/assets/**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "check-types": "tsc --pretty --noEmit",
+    "check-format": "prettier --check .",
+    "check-lint": "eslint . --ext ts --ext tsx --ext js",
+    "format": "prettier --write .",
+    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "npm:link": "npm run build && npm link"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.10.0",
+    "@next-safe-action/adapter-react-hook-form": "^2.0.0",
+    "@react-input/mask": "^1.2.15",
+    "@react-input/number-format": "^1.1.3",
+    "@storybook/icons": "^1.3.0",
+    "@storybook/preview-api": "^8.4.7",
+    "@ts-stack/markdown": "^1.5.0",
+    "@types/iframe-resizer": "3.5.13",
+    "@ujet/websdk-headless": "^3.41.4",
+    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "antd": "^5.22.5",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.9.2",
+    "iframe-resizer": "^3.6.6",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "next-safe-action": "^8.0.2",
+    "react-date-picker": "^11.0.0",
+    "react-date-range": "^2.0.1",
+    "react-hook-form": "^7.54.2",
+    "react-markdown": "^9.1.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "react-use": "^17.6.0",
+    "react-wrap-balancer": "^1.1.1",
+    "remark-gfm": "^4.0.1",
+    "rsuite": "^5.75.0",
+    "slick-carousel": "^1.8.1",
+    "typed-css-modules": "^0.9.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "zod": "^3.24.1",
+    "zustand": "^4.5.5"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
+    "next": "^14.1.4",
+    "react": "^18.2.0",
+    "react-date-range": "^2.0.1",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.6.14",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^20.19.0",
+    "@types/react": "^18.3.23",
+    "@types/react-date-range": "^1.4.9",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/vite-plugin": "^4.0.18",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "esbuild-vanilla-image-loader": "^0.1.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.4.5",
+    "husky": "^9.1.7",
+    "next": "^14.1.4",
+    "prettier": "3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-svg-import": "^3.0.0",
+    "rollup-plugin-svgo": "^2.0.0",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-setting-css-module": "^1.1.4",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "author": "axos-web-dev",
+  "license": "ISC"
+}