@axos-web-dev/shared-components 0.0.16 → 0.0.18

package/dist/HeroBanner/HeroBanner.css.js

@@ -3,15 +3,16 @@
 /* empty css                                   */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var hero_banner = createRuntimeFn({ defaultClassName: "_1ye8k3f0", variantClassNames: { variant: { primary: "_1ye8k3f1", secondary: "_1ye8k3f2", tertiary: "_1ye8k3f3", quaternary: "_1ye8k3f4" } }, defaultVariants: {}, compoundVariants: [] });
-var hero_content = "_1ye8k3f5";
-var reversed = "_1ye8k3f6";
-var hero_text = "_1ye8k3f7";
-var hero_img = "_1ye8k3f8";
-var logout = "_1ye8k3f9";
-var supertag = createRuntimeFn({ defaultClassName: "_1ye8k3fa", variantClassNames: { variant: { primary: "_1ye8k3fb", secondary: "_1ye8k3fc", tertiary: "_1ye8k3fd", quaternary: "_1ye8k3fe" } }, defaultVariants: {}, compoundVariants: [] });
-var headline_text = createRuntimeFn({ defaultClassName: "_1ye8k3ff", variantClassNames: { variant: { primary: "_1ye8k3fg", secondary: "_1ye8k3fh", tertiary: "_1ye8k3fi", quaternary: "_1ye8k3fj" } }, defaultVariants: {}, compoundVariants: [] });
-var hero_btns = "_1ye8k3fk";
+var logout = "_1ye8k3f0";
+var hero_banner = createRuntimeFn({ defaultClassName: "_1ye8k3f1", variantClassNames: { variant: { primary: "_1ye8k3f2", secondary: "_1ye8k3f3", tertiary: "_1ye8k3f4", quaternary: "_1ye8k3f5" } }, defaultVariants: {}, compoundVariants: [] });
+var hero_content = "_1ye8k3f6";
+var reversed = "_1ye8k3f7";
+var hero_text = "_1ye8k3f8";
+var hero_wrapper = "_1ye8k3f9";
+var hero_img = "_1ye8k3fa";
+var supertag = createRuntimeFn({ defaultClassName: "_1ye8k3fb", variantClassNames: { variant: { primary: "_1ye8k3fc", secondary: "_1ye8k3fd", tertiary: "_1ye8k3fe", quaternary: "_1ye8k3ff" } }, defaultVariants: {}, compoundVariants: [] });
+var headline_text = createRuntimeFn({ defaultClassName: "_1ye8k3fg", variantClassNames: { variant: { primary: "_1ye8k3fh", secondary: "_1ye8k3fi", tertiary: "_1ye8k3fj", quaternary: "_1ye8k3fk" } }, defaultVariants: {}, compoundVariants: [] });
+var hero_btns = "_1ye8k3fl";
 export {
   headline_text,
   hero_banner,
@@ -19,6 +20,7 @@ export {
   hero_content,
   hero_img,
   hero_text,
+  hero_wrapper,
   logout,
   reversed,
   supertag

package/dist/HeroBanner/HeroBanner.interface.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from "react";
+
 export interface ImageInterface {
     src: string;
     alt?: string;

package/dist/HeroBanner/index.d.ts

@@ -1,2 +1,3 @@
-import { HeroBannerInterface } from "./HeroBanner.interface";
+import { HeroBannerInterface } from './HeroBanner.interface';
+
 export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/HeroBanner/index.js

@@ -5,7 +5,7 @@ import "react";
 import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import { logout, hero_banner, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
+import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
 const HeroBanner = ({
   id,
   eyebrow,
@@ -21,7 +21,7 @@ const HeroBanner = ({
     "section",
     {
       className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
-      children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
@@ -30,7 +30,7 @@ const HeroBanner = ({
               eyebrow && /* @__PURE__ */ jsx("h1", { className: supertag({ variant: getVariant(variant) }), children: eyebrow }),
               eyebrow ? /* @__PURE__ */ jsx("h2", { className: headline_text({ variant: getVariant(variant) }), children: headline }) : /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
               /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
-              callToActionRow && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
+              callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
                 ({
                   id: id2,
                   variant: variant2,

package/dist/Hyperlink/Hyperlink.interface.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from 'react';
+
 export interface HyperlinkProps extends PropsWithChildren {
     /**
      * react node to add as a children

package/dist/Hyperlink/index.d.ts

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

package/dist/Hyperlink/index.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
@@ -30,7 +31,9 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
-import "../Input/index.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
 import "react-hook-form";
 /* empty css                                              */
 import "../ImageBillboard/ImageBillboard.css.js";

package/dist/IconBillboard/IconBillboard.css.d.ts

@@ -1,5 +1,6 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const containerIconBillboard: import("@vanilla-extract/recipes").RuntimeFn<{
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+export declare const containerIconBillboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -18,7 +19,7 @@ export declare const containerIconBillboard: import("@vanilla-extract/recipes").
         };
     };
 }>;
-export declare const layout: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const layout: import('@vanilla-extract/recipes').RuntimeFn<{
     side: {
         true: {
             flexDirection: "row";
@@ -27,7 +28,7 @@ export declare const layout: import("@vanilla-extract/recipes").RuntimeFn<{
 }>;
 export declare const billboard_icon: string;
 export declare const headerIconBillboard: string;
-export declare const title: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             selectors: {
@@ -72,7 +73,7 @@ export declare const list: string;
 export declare const listItem: string;
 export declare const buttons: string;
 export declare const section_text: string;
-export declare const header_section: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const header_section: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/IconBillboard/IconBillboard.d.ts

@@ -1,7 +1,8 @@
+import { ContainerVariants, LayoutVariants } from './IconBillboard.css';
+import { ImageInterface } from '.';
+import { ReactNode } from 'react';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ReactNode } from "react";
-import { ImageInterface } from ".";
-import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
+
 export interface FocusProps {
     icon?: ImageInterface;
     headline?: ReactNode | undefined;

package/dist/IconBillboard/IconBillboard.interface.d.ts

@@ -1,7 +1,8 @@
-import { BulletItemProps } from '../BulletItem';
-import { ChevronProps } from '../Chevron/Chevron.interface';
+import { ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
-import { ReactNode } from "react";
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { BulletItemProps } from '../BulletItem';
+
 export interface IconBillboardSet {
     id: string;
     headline: ReactNode | string;

package/dist/IconBillboard/IconBillboard.js

@@ -36,7 +36,7 @@ const IconBillboard = (props) => {
               /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
               /* @__PURE__ */ jsx("div", { children: body })
             ] }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
+            items && (items == null ? void 0 : items.length) > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
           ] })
         ] }),
         callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(

package/dist/IconBillboard/IconBillboardSet.d.ts

@@ -1,2 +1,3 @@
-import type { IconBillboardSet as Props } from "./IconBillboard.interface";
+import { Props } from './IconBillboard.interface';
+
 export declare const IconBillboardSet: ({ variant, side, iconBillboards, headline, bodyCopy, additionalDetails, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./IconBillboard";
-export * from "./IconBillboard.css";
-export type { IconBillboardSet, ImageInterface, } from "./IconBillboard.interface";
-export * from "./IconBillboardSet";
+export * from './IconBillboard';
+export * from './IconBillboard.css';
+export type { IconBillboardSet, ImageInterface, } from './IconBillboard.interface';
+export * from './IconBillboardSet';

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -1,4 +1,4 @@
-export declare const billboard: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const billboard: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -18,7 +18,7 @@ export declare const billboard: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const imagePlacement: import('@vanilla-extract/recipes').RuntimeFn<{
     position: {
         left: {
             selectors: {
@@ -37,7 +37,7 @@ export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeF
         };
     };
 }>;
-export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             selectors: {
@@ -77,7 +77,7 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const header: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             selectors: {

package/dist/ImageBillboard/ImageBillboard.d.ts

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

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -1,8 +1,9 @@
-import { BulletItemProps } from '../BulletItem';
-import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ImageInterface } from '../IconBillboard';
+import { ReactNode } from 'react';
 import { QuaternaryTypes } from '../utils/variant.types';
-import { ReactNode } from "react";
+import { ImageInterface } from '../IconBillboard';
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { BulletItemProps } from '../BulletItem';
+
 export interface ImageBillboardSetProps {
     id: string;
     headline?: string | ReactNode;

package/dist/ImageBillboard/ImageBillboard.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Chevron } from "../Chevron/index.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgCheckIcon from "../icons/CheckIcon/index.js";
 /* empty css                                */
 /* empty css                                   */

package/dist/ImageBillboard/ImageBillboardSet.d.ts

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

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -4,6 +4,7 @@ import "../Button/Button.css.js";
 import "react";
 import "react-use";
 import { Chevron } from "../Chevron/index.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgCheckIcon from "../icons/CheckIcon/index.js";
 /* empty css                                */
 /* empty css                                   */

package/dist/ImageBillboard/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./ImageBillboard";
-export * from "./ImageBillboard.css";
-export type * from "./ImageBillboard.interface";
-export * from "./ImageBillboardSet";
+export * from './ImageBillboard';
+export * from './ImageBillboard.css';
+export type * from './ImageBillboard.interface';
+export * from './ImageBillboardSet';

package/dist/Input/Input.css.d.ts

@@ -1,4 +1,4 @@
-export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const iconInput: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             width: number;
@@ -14,7 +14,7 @@ export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const labelClassName: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {};
         secondary: {};
@@ -39,7 +39,7 @@ export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeF
 }>;
 export declare const iconContainerBase: string;
 export declare const iconContainer: Record<"left" | "right", string>;
-export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             paddingTop: number;
@@ -73,7 +73,7 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             fontSize: number;
@@ -129,12 +129,12 @@ export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     [x: string]: {
         [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
     };
 }>;
-export declare const helperText: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const helperText: import('@vanilla-extract/recipes').RuntimeFn<{
     disabled: {
         true: {
             color: "#5E6A74";

package/dist/Input/Input.css.js

@@ -2,7 +2,7 @@
 /* empty css                                   */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = createRuntimeFn({ defaultClassName: "_18du0la0", variantClassNames: { size: { small: "_18du0la1", medium: "_18du0la2", large: "_18du0la3" } }, defaultVariants: {}, compoundVariants: [] });
+var iconInput = createRuntimeFn({ defaultClassName: "_18du0la0", variantClassNames: { size: { small: "_18du0la1", medium: "_18du0la2", large: "_18du0la3" } }, defaultVariants: {}, compoundVariants: [] });
 var labelClassName = createRuntimeFn({ defaultClassName: "_18du0la4", variantClassNames: { variant: { primary: "_18du0la5", secondary: "_18du0la6", tertiary: "_18du0la7", quaternary: "_18du0la8" }, error: { true: "_18du0la9" }, disabled: { true: "_18du0laa" } }, defaultVariants: {}, compoundVariants: [] });
 var iconContainerBase = "_18du0lab";
 var iconContainer = { left: "_18du0lac _18du0lab", right: "_18du0lad _18du0lab" };
@@ -13,9 +13,9 @@ var helperText = createRuntimeFn({ defaultClassName: "_18du0lar", variantClassNa
 export {
   container,
   helperText,
-  icon,
   iconContainer,
   iconContainerBase,
+  iconInput,
   input,
   labelClassName,
   wrapper

package/dist/Input/Input.d.ts

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { QuaternaryTypes } from '../utils';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: ReactNode;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    sizes?: "small" | "medium" | "large" | undefined;
+    error?: boolean | undefined;
+    skeleton?: boolean | undefined;
+    helperText?: ReactNode;
+    variant?: QuaternaryTypes;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input/Input.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { wrapper, labelClassName, container, iconContainer, iconInput, input, helperText } from "./Input.css.js";
+const Input = forwardRef((props, ref) => {
+  const {
+    disabled,
+    label,
+    iconLeft,
+    iconRight,
+    sizes,
+    error = false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    skeleton = false,
+    helperText: helper,
+    variant,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: labelClassName({ error, variant }),
+        htmlFor: props.name,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
+      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          ref,
+          className: clsx(props.className, input({ size: sizes }))
+        }
+      ),
+      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
+  ] });
+});
+export {
+  Input
+};

package/dist/Input/InputPhone.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from '.';
+
+export declare const InputPhone: import('react').ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input/InputPhone.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { InputMask } from "@react-input/mask";
+import { forwardRef } from "react";
+import { Input } from "./Input.js";
+import "./Input.css.js";
+const InputPhone = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(
+      InputMask,
+      {
+        ref,
+        ...props,
+        component: Input,
+        mask: "___-___-____",
+        replacement: {
+          _: /\d/
+        }
+      }
+    );
+  }
+);
+export {
+  InputPhone
+};

package/dist/Input/index.d.ts

@@ -1,13 +1,3 @@
-import { QuaternaryTypes } from '../utils';
-import { InputHTMLAttributes, ReactNode } from "react";
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    label?: ReactNode;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
-    sizes?: "small" | "medium" | "large" | undefined;
-    error?: boolean | undefined;
-    skeleton?: boolean | undefined;
-    helperText?: ReactNode;
-    variant?: QuaternaryTypes;
-}
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export * from './Input';
+export * from './Input.css';
+export * from './InputPhone';

package/dist/Input/index.js

@@ -1,45 +1,15 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { wrapper, labelClassName, container, iconContainer, icon, input, helperText } from "./Input.css.js";
-const Input = forwardRef((props, ref) => {
-  const {
-    disabled,
-    label,
-    iconLeft,
-    iconRight,
-    sizes,
-    error = false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    skeleton = false,
-    helperText: helper,
-    variant,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
-    label && /* @__PURE__ */ jsx(
-      "label",
-      {
-        className: labelClassName({ error, variant }),
-        htmlFor: props.name,
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
-      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: icon({ size: sizes }), children: iconLeft }) }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ...rest,
-          ref,
-          className: clsx(props.className, input({ size: sizes }))
-        }
-      ),
-      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: icon({ size: sizes }), children: iconRight }) })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
-  ] });
-});
+import { Input } from "./Input.js";
+import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input.css.js";
+import { InputPhone } from "./InputPhone.js";
 export {
-  Input
+  Input,
+  InputPhone,
+  container,
+  helperText,
+  iconContainer,
+  iconContainerBase,
+  iconInput,
+  input,
+  labelClassName,
+  wrapper
 };

package/dist/Inputs/Input.css.d.ts

@@ -1,4 +1,4 @@
-export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             width: number;
@@ -14,7 +14,7 @@ export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const labelClassName: import('@vanilla-extract/recipes').RuntimeFn<{
     error: {
         true: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -29,7 +29,7 @@ export declare const labelClassName: import("@vanilla-extract/recipes").RuntimeF
 }>;
 export declare const iconContainerBase: string;
 export declare const iconContainer: Record<"left" | "right", string>;
-export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             paddingTop: number;
@@ -63,7 +63,7 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
     size: {
         small: {
             fontSize: number;
@@ -119,12 +119,12 @@ export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const wrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     [x: string]: {
         [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
     };
 }>;
-export declare const helperText: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const helperText: import('@vanilla-extract/recipes').RuntimeFn<{
     disabled: {
         true: {
             color: "#5E6A74";

package/dist/MainHTML/index.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
+
 export interface BodyProps extends PropsWithChildren {
     theme: "Axos" | "Premier";
 }

package/dist/MainHTML/index.js

@@ -2,7 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { axosTheme } from "../themes/axos.css.js";
 import { premierTheme } from "../themes/premier.css.js";
 const MainHTML = ({ theme = "Axos", children }) => {
-  return /* @__PURE__ */ jsx("body", { className: theme === "Premier" ? premierTheme : axosTheme, children: /* @__PURE__ */ jsx("main", { children }, "main-body") });
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      className: theme === "Premier" ? premierTheme : axosTheme,
+      id: "main-body",
+      children
+    }
+  );
 };
 export {
   MainHTML

package/dist/Modal/Modal.d.ts

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

package/dist/Modal/Modal.js

@@ -2,6 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { chevron } from "../Chevron/Chevron.css.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
 /* empty css                                   */
@@ -27,7 +28,9 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
-import "../Input/index.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
 import "react-hook-form";
 /* empty css                                              */
 import "../ImageBillboard/ImageBillboard.css.js";