@axos-web-dev/shared-components 1.0.100-dev.86-videoPoster.3 → 1.0.100-dev.88

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.86-videoPoster.3",
-  "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.88",
+  "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"
+}

package/dist/HeroBanner/HeroVideoPoster.d.ts

@@ -1,5 +0,0 @@
-export interface HeroVideoPosterProps {
-    otherSource: string;
-    thumbnailImage?: string;
-}
-export declare const HeroVideoPoster: ({ otherSource, thumbnailImage, }: HeroVideoPosterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/HeroBanner/HeroVideoPoster.js

@@ -1,24 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { player } from "./LargeBanner.css.js";
-const HeroVideoPoster = ({
-  otherSource,
-  thumbnailImage
-}) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: player, children: /* @__PURE__ */ jsxs(
-    "video",
-    {
-      autoPlay: true,
-      loop: true,
-      muted: true,
-      playsInline: true,
-      ...thumbnailImage ? { poster: thumbnailImage } : {},
-      children: [
-        /* @__PURE__ */ jsx("source", { src: otherSource, type: "video/mp4" }),
-        "Your browser does not support the video tag."
-      ]
-    }
-  ) }) });
-};
-export {
-  HeroVideoPoster
-};

package/dist/HeroBanner/LargeHeroBanner.d.ts

@@ -1,5 +0,0 @@
-import { HeroBannerInterface } from './HeroBanner.interface';
-
-type LargeHeroBannerProps = Pick<HeroBannerInterface, "id" | "eyebrow" | "headline" | "bodyCopy" | "bullets" | "callToActionRow" | "image" | "imagePlacement" | "variant" | "video" | "bannerType" | "videoTextPosition">;
-export declare const LargeHeroBanner: ({ id, eyebrow, headline, bodyCopy, bullets, callToActionRow, image, imagePlacement, variant, video, bannerType, videoTextPosition, }: LargeHeroBannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/HeroBanner/LargeHeroBanner.js

@@ -1,223 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import clsx from "clsx";
-import Image from "next/image.js";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react";
-import "react-use";
-import { Chevron } from "../Chevron/index.js";
-import "../icons/ArrowIcon/ArrowIcon.css.js";
-import "../icons/CheckIcon/CheckIcon.css.js";
-import SvgCheckIcon from "../icons/CheckIcon/index.js";
-import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
-/* empty css                                   */
-/* empty css                               */
-/* empty css                                    */
-/* empty css                                                    */
-/* empty css                                                */
-import { getVariant } from "../utils/getVariant.js";
-import { HeroVideoPoster } from "./HeroVideoPoster.js";
-import { getPosition } from "../utils/getPosition.js";
-import { hero_wrapper, hero_bullet_item, hero_sub_bullets, hero_btns, img_contents, reversed_lg_image, reversed } from "./HeroBanner.css.js";
-import { lg_hero_container, content_display_lg, lg_hero_eyebrow, lg_headline_text, lg_hero_text, placement, lg_hero_content_mobile, lg_hero_sizing, lg_hero_img, lg_hero_content, video_wrapper, lg_hero_banner, video_bg } from "./LargeBanner.css.js";
-const LargeHeroBanner = ({
-  id,
-  eyebrow,
-  headline,
-  bodyCopy,
-  bullets,
-  callToActionRow,
-  image,
-  imagePlacement = "Right",
-  variant,
-  video,
-  bannerType,
-  videoTextPosition = "default"
-}) => {
-  const textPosition = getPosition(videoTextPosition);
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: clsx(
-        lg_hero_banner({ variant: getVariant(variant) }),
-        bannerType === "Video Poster" ? video_bg : ""
-      ),
-      id,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment ${lg_hero_container}`, children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              lg_hero_content,
-              imagePlacement !== "Right" ? reversed : "",
-              "flex",
-              "between",
-              "middle"
-            ),
-            style: {
-              position: textPosition !== "default" ? "static" : "relative"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    lg_hero_text({ variant: getVariant(variant) }),
-                    "rounded",
-                    textPosition !== "default" ? placement({ position: textPosition }) : "",
-                    lg_hero_content_mobile
-                  ),
-                  children: /* @__PURE__ */ jsxs("div", { className: `containment ${content_display_lg}`, children: [
-                    eyebrow && /* @__PURE__ */ jsx(
-                      "h1",
-                      {
-                        className: lg_hero_eyebrow({
-                          variant: getVariant(variant)
-                        }),
-                        children: eyebrow
-                      }
-                    ),
-                    eyebrow ? /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        className: lg_headline_text({
-                          variant: getVariant(variant)
-                        }),
-                        children: headline
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "h1",
-                      {
-                        className: lg_headline_text({
-                          variant: getVariant(variant)
-                        }),
-                        children: headline
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "push_up", children: [
-                      /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
-                      bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up_24", children: bullets.map(
-                        ({ id: id2, icon, copy, subBullet }) => !subBullet ? /* @__PURE__ */ jsxs(
-                          "li",
-                          {
-                            className: `list_item flex ${hero_bullet_item}`,
-                            children: [
-                              /* @__PURE__ */ jsx("div", { className: "img_item", children: getVariant(variant) ? /* @__PURE__ */ jsx(
-                                SvgCheckIcon,
-                                {
-                                  variant: getVariant(variant) === "primary" || getVariant(variant) === "secondary" ? "secondary" : "primary"
-                                }
-                              ) : /* @__PURE__ */ jsx("img", { src: icon?.src, alt: icon?.altText }) }),
-                              /* @__PURE__ */ jsx("span", { children: copy })
-                            ]
-                          },
-                          id2
-                        ) : /* @__PURE__ */ jsx(
-                          "ul",
-                          {
-                            className: clsx(hero_sub_bullets, "mb_0", "push_up"),
-                            children: /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
-                              /* @__PURE__ */ jsx("div", { className: "img_item", children: /* @__PURE__ */ jsx(
-                                "img",
-                                {
-                                  style: { maxWidth: "max-content" },
-                                  src: icon?.src,
-                                  alt: icon?.altText
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsx("span", { children: copy })
-                            ] })
-                          },
-                          id2
-                        )
-                      ) })
-                    ] }),
-                    callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
-                      ({
-                        id: id2,
-                        variant: variant2,
-                        displayText,
-                        targetUrl,
-                        type,
-                        newTab
-                      }) => type === "Button" ? /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          targetUrl,
-                          color: getVariant(variant2),
-                          size: "large",
-                          rounded: "medium",
-                          newTab,
-                          children: displayText
-                        },
-                        id2
-                      ) : /* @__PURE__ */ jsx(
-                        Chevron,
-                        {
-                          targetUrl,
-                          variant: getVariant(variant2),
-                          newTab,
-                          children: displayText
-                        },
-                        id2
-                      )
-                    ) })
-                  ] })
-                }
-              ),
-              bannerType === "Large" && image && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    lg_hero_img,
-                    imagePlacement !== "Right" ? reversed_lg_image : "",
-                    "rounded",
-                    lg_hero_content_mobile
-                  ),
-                  role: "presentation",
-                  children: /* @__PURE__ */ jsxs("picture", { className: img_contents, children: [
-                    /* @__PURE__ */ jsx(
-                      "source",
-                      {
-                        srcSet: `https:${image?.src}?fm=avif`,
-                        type: "image/avif"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "source",
-                      {
-                        srcSet: `https:${image?.src}?fm=webp`,
-                        type: "image/webp"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Image,
-                      {
-                        src: `https:${image?.src}?q=90`,
-                        className: lg_hero_sizing,
-                        alt: "",
-                        height: 600,
-                        width: 792,
-                        priority: true
-                      }
-                    )
-                  ] })
-                }
-              )
-            ]
-          }
-        ) }),
-        bannerType === "Video Poster" && video && /* @__PURE__ */ jsx("div", { className: video_wrapper, "aria-hidden": "true", inert: true, children: /* @__PURE__ */ jsx(
-          HeroVideoPoster,
-          {
-            otherSource: video.otherSource,
-            thumbnailImage: video.thumbnailImage
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  LargeHeroBanner
-};

package/dist/utils/getPosition.d.ts

@@ -1 +0,0 @@
-export declare const getPosition: (text: string | undefined) => "default" | "top left" | "top right" | "bottom left" | "bottom right";

package/dist/utils/getPosition.js

@@ -1,17 +0,0 @@
-const getPosition = (text) => {
-  switch (text) {
-    case "top left":
-      return "top left";
-    case "top right":
-      return "top right";
-    case "bottom left":
-      return "bottom left";
-    case "bottom right":
-      return "bottom right";
-    default:
-      return "default";
-  }
-};
-export {
-  getPosition
-};