@axos-web-dev/shared-components 0.0.7 → 0.0.9

package/dist/Forms/RenderForm.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { FormProps } from ".";
 export interface renderFormProps extends FormProps, PropsWithChildren {
-    formName?: string;
+    form?: string;
 }
 export declare const renderSwitch: (form: string | undefined, props: FormProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RenderWebForm: (props: renderFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/RenderForm.js

@@ -11,7 +11,7 @@ const renderSwitch = (form = "Contact Form", props) => {
   }
 };
 const RenderWebForm = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: renderSwitch(props.formName, props) });
+  return /* @__PURE__ */ jsx(Fragment, { children: renderSwitch(props.form, props) });
 };
 export {
   RenderWebForm,

package/dist/Forms/ScheduleCall.d.ts

@@ -6,8 +6,8 @@ export interface FormProps extends PropsWithChildren {
         [index: string]: string;
     }) => void;
     icon?: boolean;
-    headline?: ReactNode;
-    disclosure?: ReactNode;
+    headline?: ReactNode | string;
+    disclosure?: ReactNode | string;
     variant?: QuaternaryTypes;
     validateEmail: (email: string) => Promise<boolean>;
     callToAction: Omit<ChevronProps, "targetUrl">;

package/dist/IconBillboard/IconBillboard.js

@@ -2,18 +2,20 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { BulletItem } from "../BulletItem/BulletItem.js";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
 import { Button } from "../Button/index.js";
 import { containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
 const IconBillboard = (props) => {
   const {
     callToActionRow,
-    variant,
+    variant: fullVariant = "primary",
     side = false,
     items,
     headline,
     body
   } = props;
-  return /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), children: [
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsxs("div", { className: clsx(containerIconBillboard({ variant }), "containment"), children: [
     /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
       /* @__PURE__ */ jsx("div", { className: billboard_icon, children: props.icon }),
       /* @__PURE__ */ jsxs("div", { className: content, children: [

package/dist/IconBillboard/IconBillboardSet.js

@@ -25,52 +25,61 @@ const IconBillboardSet = ({
       bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
     ] }),
     /* @__PURE__ */ jsx("div", { className: section_container, children: iconBillboards.map(
-      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), children: [
-        /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
-          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: icon == null ? void 0 : icon.src,
-              className: "img_fluid",
-              alt: icon == null ? void 0 : icon.alt
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: content, children: [
-            /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
-              /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
-              /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
+      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: containerIconBillboard({
+            variant: getVariant(variant)
+          }),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
+              icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: icon == null ? void 0 : icon.src,
+                  className: "img_fluid",
+                  alt: icon == null ? void 0 : icon.alt
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: content, children: [
+                /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+                  /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
+                  /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
-          ] })
-        ] }),
-        callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
-          ({
-            id: id2,
-            variant: variant2,
-            displayText,
-            targetUrl,
-            type
-          }) => type === "Button" ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              targetUrl,
-              color: getVariant(variant2),
-              size: "medium",
-              rounded: "medium",
-              children: displayText
-            },
-            id2
-          ) : /* @__PURE__ */ jsx(
-            Chevron,
-            {
-              targetUrl,
-              variant: getVariant(variant2),
-              children: displayText
-            },
-            id2
-          )
-        ) })
-      ] }, id)
+            callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
+              ({
+                id: id2,
+                variant: variant2,
+                displayText,
+                targetUrl,
+                type
+              }) => type === "Button" ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  targetUrl,
+                  color: getVariant(variant2),
+                  size: "medium",
+                  rounded: "medium",
+                  children: displayText
+                },
+                id2
+              ) : /* @__PURE__ */ jsx(
+                Chevron,
+                {
+                  targetUrl,
+                  variant: getVariant(variant2),
+                  children: displayText
+                },
+                id2
+              )
+            ) })
+          ]
+        },
+        id
+      )
     ) }),
     additionalDetails && /* @__PURE__ */ jsx("div", { className: section_text, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
   ] });

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -4,7 +4,7 @@
 /* empty css                                  */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var billboard = createRuntimeFn({ defaultClassName: "_1m7m2a0", variantClassNames: { variant: { primary: "_1m7m2a1", secondary: "_1m7m2a2", tertiary: "_1m7m2a3", quaternary: "_1m7m2a4" } }, defaultVariants: {}, compoundVariants: [] });
-var imagePlacement = createRuntimeFn({ defaultClassName: "_1m7m2a5", variantClassNames: { position: { left: "_1m7m2a6", right: "_1m7m2a7" } }, defaultVariants: {}, compoundVariants: [] });
+var imagePlacement = createRuntimeFn({ defaultClassName: "_1m7m2a5", variantClassNames: { position: { left: "_1m7m2a6", right: "_1m7m2a7" } }, defaultVariants: { position: "left" }, compoundVariants: [] });
 var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames: { variant: { primary: "_1m7m2a9", secondary: "_1m7m2aa", tertiary: "_1m7m2ab", quaternary: "_1m7m2ac" } }, defaultVariants: {}, compoundVariants: [] });
 var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
 var billboard_container = "_1m7m2ai";

package/dist/ImageBillboard/ImageBillboard.d.ts

@@ -1,2 +1,2 @@
 import type { ImageBillboardSetProps as Props } from "./ImageBillboard.interface";
-export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboard.js

@@ -9,7 +9,7 @@ import clsx from "clsx";
 import { Button } from "../Button/index.js";
 import { inline_container } from "../SetContainer/SetContainer.css.js";
 import { section_text_ImageBillboard, header, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
-const ImageBillboardSet = ({
+const ImageBillboard = ({
   id,
   variant,
   headline,
@@ -128,5 +128,5 @@ const ImageBillboardSet = ({
   ] }, id);
 };
 export {
-  ImageBillboardSet
+  ImageBillboard
 };

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -1,2 +1,2 @@
 import { ImageBillboardInterface } from "./ImageBillboard.interface";
-export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -8,7 +8,7 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { billboard, imagePlacement, billboard_img, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
-const ImageBillboard = ({
+const ImageBillboardSet = ({
   id,
   variant,
   headline,
@@ -18,7 +18,7 @@ const ImageBillboard = ({
   callToActionRow,
   eyebrow,
   image,
-  imagePlacement: position
+  imagePlacement: position = "left"
 }) => {
   const billboard_variant = getVariant(variant);
   return /* @__PURE__ */ jsxs(
@@ -28,7 +28,8 @@ const ImageBillboard = ({
         billboard({ variant: billboard_variant }),
         `rounded flex`,
         bordered ? "bordered" : "",
-        imagePlacement({ position })
+        imagePlacement({ position: position == null ? void 0 : position.toLowerCase() }),
+        "containment"
       ),
       children: [
         /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: /* @__PURE__ */ jsx("img", { src: image.src, className: "img_fluid", alt: image.alt }) }),
@@ -101,5 +102,5 @@ const ImageBillboard = ({
   );
 };
 export {
-  ImageBillboard
+  ImageBillboardSet
 };

package/dist/ImageBillboard/index.js

@@ -1,6 +1,6 @@
-import { ImageBillboardSet } from "./ImageBillboard.js";
+import { ImageBillboard } from "./ImageBillboard.js";
 import { billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_img, body, header, imagePlacement, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline } from "./ImageBillboard.css.js";
-import { ImageBillboard } from "./ImageBillboardSet.js";
+import { ImageBillboardSet } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
   ImageBillboardSet,

package/dist/SetContainer/SetContainer.js

@@ -8,6 +8,7 @@ import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                          */
 import { getVariant } from "../utils/getVariant.js";
 import "../Chevron/Chevron.css.js";
+import "clsx";
 import "react";
 import "../Button/Button.css.js";
 import { inline_container } from "./SetContainer.css.js";

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -86,7 +86,6 @@
   object-fit: cover;
   aspect-ratio: 1 / 1;
   min-width: 600px;
-  max-height: 480px;
 }
 ._1m7m2an {
   padding: 32px 28px;

package/dist/main.js

@@ -22,9 +22,9 @@ import { HeroBanner } from "./HeroBanner/index.js";
 import { IconBillboard } from "./IconBillboard/IconBillboard.js";
 import { billboard_icon, buttons, containerIconBillboard, content, headerIconBillboard, header_section, layout, list, listItem, section_container, section_text, title } from "./IconBillboard/IconBillboard.css.js";
 import { IconBillboardSet } from "./IconBillboard/IconBillboardSet.js";
-import { ImageBillboardSet } from "./ImageBillboard/ImageBillboard.js";
+import { ImageBillboard } from "./ImageBillboard/ImageBillboard.js";
 import { billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_img, body, header, imagePlacement, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline } from "./ImageBillboard/ImageBillboard.css.js";
-import { ImageBillboard } from "./ImageBillboard/ImageBillboardSet.js";
+import { ImageBillboardSet } from "./ImageBillboard/ImageBillboardSet.js";
 import { Input } from "./Input/index.js";
 import { MainHTML } from "./MainHTML/index.js";
 import { Modal } from "./Modal/index.js";

package/dist/utils/variant.types.d.ts

@@ -2,3 +2,4 @@ export type CallToActionTypes = "primary" | "secondary" | "tertiary";
 export type PrimaryAndTertiaryTypes = "primary" | "tertiary";
 export type SecondaryTypes = "primary" | "secondary";
 export type QuaternaryTypes = "primary" | "secondary" | "tertiary" | "quaternary";
+export type SideProps = "left" | "right";

package/package.json

@@ -1,105 +1,105 @@
-{
-  "name": "@axos-web-dev/shared-components",
-  "description": "Axos shared components library for web.",
-  "version": "0.0.7",
-  "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 install",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "npm:link": "npm run build && npm link"
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
-    "@storybook/builder-vite": "^7.6.13",
-    "@storybook/preview-api": "^7.6.16",
-    "@vanilla-extract/css": "^1.14.1",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "clsx": "^2.1.0",
-    "react-hook-form": "^7.51.1",
-    "react-markdown": "^9.0.1",
-    "react-use": "^17.5.0",
-    "typed-css-modules": "^0.9.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
-  },
-  "peerDependencies": {
-    "@vanilla-extract/css": "^1.14.1",
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^4.0.3",
-    "next": "14.0.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-alias": "^5.1.0",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/addon-themes": "^7.6.10",
-    "@storybook/blocks": "^7.6.13",
-    "@storybook/react": "^7.6.13",
-    "@storybook/react-vite": "^7.6.13",
-    "@storybook/test": "^7.6.13",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-prettier": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^4.0.3",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "esbuild-vanilla-image-loader": "^0.1.3",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
-    "glob": "^10.3.10",
-    "husky": "^8.0.0",
-    "prettier": "3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-svg-import": "^3.0.0",
-    "rollup-plugin-svgo": "^2.0.0",
-    "storybook": "^7.6.13",
-    "typescript": "^5.2.2",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.7.3",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "vite-plugin-setting-css-module": "^1.1.4",
-    "vite-tsconfig-paths": "^4.3.1"
-  },
-  "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": "0.0.9",
+  "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 install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "npm:link": "npm run build && npm link"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@storybook/builder-vite": "^7.6.13",
+    "@storybook/preview-api": "^7.6.16",
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "clsx": "^2.1.0",
+    "react-hook-form": "^7.51.1",
+    "react-markdown": "^9.0.1",
+    "react-use": "^17.5.0",
+    "typed-css-modules": "^0.9.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "zod": "^3.22.4",
+    "zustand": "^4.5.0"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
+    "next": "14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.0",
+    "@storybook/addon-essentials": "^7.6.13",
+    "@storybook/addon-interactions": "^7.6.13",
+    "@storybook/addon-links": "^7.6.13",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-themes": "^7.6.10",
+    "@storybook/blocks": "^7.6.13",
+    "@storybook/react": "^7.6.13",
+    "@storybook/react-vite": "^7.6.13",
+    "@storybook/test": "^7.6.13",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "esbuild-vanilla-image-loader": "^0.1.3",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.6.15",
+    "glob": "^10.3.10",
+    "husky": "^8.0.0",
+    "prettier": "3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-svg-import": "^3.0.0",
+    "rollup-plugin-svgo": "^2.0.0",
+    "storybook": "^7.6.13",
+    "typescript": "^5.2.2",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-lib-inject-css": "^1.3.0",
+    "vite-plugin-setting-css-module": "^1.1.4",
+    "vite-tsconfig-paths": "^4.3.1"
+  },
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "author": "axos-web-dev",
+  "license": "ISC"
+}