@axos-web-dev/shared-components 0.0.13 → 0.0.15

package/dist/HeroBanner/HeroBanner.css.d.ts

@@ -1,4 +1,4 @@
-export declare const hero_banner: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const hero_banner: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -23,7 +23,7 @@ export declare const reversed: string;
 export declare const hero_text: string;
 export declare const hero_img: string;
 export declare const logout: string;
-export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const supertag: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -43,7 +43,7 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const headline_text: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const headline_text: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

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

@@ -20,16 +20,15 @@ const HeroBanner = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
-      className: `${bannerType !== "Hero" ? logout : ""} 
-      ${hero_banner({ variant: getVariant(variant) })}`,
+      className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
       children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
           children: [
             /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
-              /* @__PURE__ */ jsx("span", { className: supertag({ variant: getVariant(variant) }), children: eyebrow }),
-              /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
+              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(
                 ({

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/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})`;
@@ -17,7 +18,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";
@@ -26,7 +27,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: {
@@ -71,7 +72,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/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: {
@@ -127,3 +127,11 @@ export declare const single_container: string;
 export declare const two_inline: string;
 export declare const three_inline: string;
 export declare const section_text_ImageBillboard: string;
+export declare const billboard_image: string;
+export declare const mh_330: string;
+export declare const image_background: string;
+export declare const rate_container: string;
+export declare const rate_pad: string;
+export declare const up_to: string;
+export declare const rate_billboard: string;
+export declare const apy_billboard: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -1,4 +1,5 @@
 /* empty css                                              */
+/* empty css                                          */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                  */
@@ -17,19 +18,35 @@ var single_container = "_1m7m2ao";
 var two_inline = "_1m7m2ap";
 var three_inline = "_1m7m2aq";
 var section_text_ImageBillboard = "_1m7m2ar";
+var billboard_image = "_1m7m2as";
+var mh_330 = "_1m7m2at";
+var image_background = "_1m7m2au";
+var rate_container = "_1m7m2av";
+var rate_pad = "_1m7m2aw";
+var up_to = "_1m7m2ax";
+var rate_billboard = "_1m7m2ay";
+var apy_billboard = "_1m7m2az";
 export {
+  apy_billboard,
   billboard,
   billboard_body,
   billboard_container,
   billboard_ctas,
   billboard_header_section,
+  billboard_image,
   billboard_img,
   body,
   header,
   imagePlacement,
+  image_background,
+  mh_330,
+  rate_billboard,
+  rate_container,
+  rate_pad,
   section_text_ImageBillboard,
   single_container,
   supertag,
   three_inline,
-  two_inline
+  two_inline,
+  up_to
 };

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;
@@ -15,15 +16,18 @@ export interface ImageBillboardSetProps {
 }
 export interface ImageBillboardInterface {
     id: string;
+    headline: string | ReactNode;
+    bodyCopy: string | ReactNode;
     bordered: boolean;
     imagePlacement: "right" | "left";
     className?: string;
     variant: QuaternaryTypes;
     eyebrow: string | ReactNode;
-    headline: string | ReactNode;
-    bodyCopy: string | ReactNode;
     bullets: BulletItemProps[];
-    image: ImageInterface;
+    image?: ImageInterface;
     callToActionRow: ChevronProps[];
     set?: boolean;
+    textImageLineOneSmall?: ReactNode | string;
+    textImageLineTwoBig?: ReactNode | string;
+    textImageLineThreeSmall?: ReactNode | string;
 }

package/dist/ImageBillboard/ImageBillboard.js

@@ -5,13 +5,12 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
 /* empty css                                   */
 /* empty css                                                    */
 import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
 import "react";
 import "react-use";
 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";
+import { section_text_ImageBillboard, header, billboard, billboard_container, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
 const ImageBillboardSet = ({
   id,
   variant,
@@ -51,14 +50,7 @@ const ImageBillboardSet = ({
               ${billboard({ variant: billboard_variant })} ${inline ? "" : billboard_container} 
               rounded flex ${inline ? "flex_col" : "flex_row"} ${bordered ? "bordered" : ""} ${imagePlacement.toLowerCase() === "left" && !inline ? "reversed" : ""}`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: image == null ? void 0 : image.src,
-                className: clsx("img_fluid", billboard_img),
-                alt: image.alt
-              }
-            ) }),
+            /* @__PURE__ */ jsx("div", { "background-image": image == null ? void 0 : image.src, "aria-label": image == null ? void 0 : image.alt }),
             /* @__PURE__ */ jsxs("div", { className: body, children: [
               /* @__PURE__ */ jsxs("div", { className: billboard_body, children: [
                 /* @__PURE__ */ jsxs("div", { className: `${billboard_header_section}`, children: [

package/dist/ImageBillboard/ImageBillboardSet.d.ts

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

@@ -10,19 +10,22 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
 /* empty css                                                    */
 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";
+import { billboard, imagePlacement, billboard_img, image_background, rate_container, rate_pad, up_to, rate_billboard, apy_billboard, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
 const ImageBillboard = ({
   id,
   variant,
   headline,
   bodyCopy,
-  bordered,
+  bordered = false,
   bullets,
   callToActionRow,
   eyebrow,
   image,
   imagePlacement: position = "left",
-  set
+  set,
+  textImageLineOneSmall,
+  textImageLineTwoBig,
+  textImageLineThreeSmall
 }) => {
   const billboard_variant = getVariant(variant);
   position = position == null ? void 0 : position.toLocaleLowerCase();
@@ -41,7 +44,29 @@ const ImageBillboard = ({
         imagePlacement({ position: position == null ? void 0 : position.toLowerCase() })
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: /* @__PURE__ */ jsx("img", { src: image.src, className: "img_fluid", alt: image.alt }) }),
+        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: image_background,
+            style: { backgroundImage: `url(${image.src})` },
+            "aria-label": image.alt
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              billboard_img,
+              rate_container,
+              "flex_row middle center"
+            ),
+            role: "presentation",
+            children: /* @__PURE__ */ jsxs("div", { className: clsx(rate_pad, "text_center", "flex", "flex_col"), children: [
+              /* @__PURE__ */ jsx("span", { className: up_to, children: textImageLineOneSmall }),
+              /* @__PURE__ */ jsx("span", { className: rate_billboard, children: textImageLineTwoBig }),
+              /* @__PURE__ */ jsx("span", { className: clsx(apy_billboard, "push_up"), children: textImageLineThreeSmall })
+            ] })
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: body, children: [
           /* @__PURE__ */ jsxs("div", { className: billboard_body, children: [
             /* @__PURE__ */ jsxs("div", { className: `${billboard_header_section}`, children: [
@@ -71,7 +96,7 @@ const ImageBillboard = ({
               /* @__PURE__ */ jsx("span", { children: copy })
             ] }, id2)) })
           ] }),
-          callToActionRow && /* @__PURE__ */ jsx(
+          callToActionRow.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(

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/ImageBillboard/index.js

@@ -1,21 +1,29 @@
 import { ImageBillboardSet } 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 { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, header, imagePlacement, image_background, mh_330, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
   ImageBillboardSet,
+  apy_billboard,
   billboard,
   billboard_body,
   billboard_container,
   billboard_ctas,
   billboard_header_section,
+  billboard_image,
   billboard_img,
   body,
   header,
   imagePlacement,
+  image_background,
+  mh_330,
+  rate_billboard,
+  rate_container,
+  rate_pad,
   section_text_ImageBillboard,
   single_container,
   supertag,
   three_inline,
-  two_inline
+  two_inline,
+  up_to
 };

package/dist/Input/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,17 @@ 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: {};
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
     error: {
         true: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -29,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;
@@ -63,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;
@@ -119,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

@@ -3,13 +3,13 @@
 /* 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 labelClassName = createRuntimeFn({ defaultClassName: "_18du0la4", variantClassNames: { error: { true: "_18du0la5" }, disabled: { true: "_18du0la6" } }, defaultVariants: {}, compoundVariants: [] });
-var iconContainerBase = "_18du0la7";
-var iconContainer = { left: "_18du0la8 _18du0la7", right: "_18du0la9 _18du0la7" };
-var container = createRuntimeFn({ defaultClassName: "_18du0laa", variantClassNames: { size: { small: "_18du0lab", medium: "_18du0lac", large: "_18du0lad" }, error: { true: "_18du0lae" }, disabled: { true: "_18du0laf" } }, defaultVariants: {}, compoundVariants: [] });
-var input = createRuntimeFn({ defaultClassName: "_18du0lag", variantClassNames: { size: { small: "_18du0lah", medium: "_18du0lai", large: "_18du0laj" }, error: { true: "_18du0lak" }, disabled: { true: "_18du0lal" } }, defaultVariants: {}, compoundVariants: [] });
-var wrapper = createRuntimeFn({ defaultClassName: "_18du0lam", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
-var helperText = createRuntimeFn({ defaultClassName: "_18du0lan", variantClassNames: { disabled: { true: "_18du0lao" }, error: { true: "_18du0lap" } }, 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" };
+var container = createRuntimeFn({ defaultClassName: "_18du0lae", variantClassNames: { size: { small: "_18du0laf", medium: "_18du0lag", large: "_18du0lah" }, error: { true: "_18du0lai" }, disabled: { true: "_18du0laj" } }, defaultVariants: {}, compoundVariants: [] });
+var input = createRuntimeFn({ defaultClassName: "_18du0lak", variantClassNames: { size: { small: "_18du0lal", medium: "_18du0lam", large: "_18du0lan" }, error: { true: "_18du0lao" }, disabled: { true: "_18du0lap" } }, defaultVariants: {}, compoundVariants: [] });
+var wrapper = createRuntimeFn({ defaultClassName: "_18du0laq", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+var helperText = createRuntimeFn({ defaultClassName: "_18du0lar", variantClassNames: { disabled: { true: "_18du0las" }, error: { true: "_18du0lat" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   container,
   helperText,

package/dist/Input/index.d.ts

@@ -1,4 +1,6 @@
-import { InputHTMLAttributes, ReactNode } from "react";
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { QuaternaryTypes } from '../utils';
+
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: ReactNode;
     iconLeft?: ReactNode;
@@ -7,5 +9,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     error?: boolean | undefined;
     skeleton?: boolean | undefined;
     helperText?: ReactNode;
+    variant?: QuaternaryTypes;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input/index.js

@@ -13,10 +13,18 @@ const Input = forwardRef((props, ref) => {
     // 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 }), htmlFor: props.name, children: label }),
+    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(

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/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/contextApi/store.d.ts

@@ -1,10 +1,11 @@
-import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+import { Dispatch, PropsWithChildren, SetStateAction } from 'react';
+
 export interface ContextProps {
     targetLinkUrl: string;
     setTargetLinkUrl: Dispatch<SetStateAction<string>>;
     openModal: boolean;
     setOpenModal: Dispatch<SetStateAction<boolean>>;
 }
-export declare const GlobalContext: import("react").Context<ContextProps>;
+export declare const GlobalContext: import('react').Context<ContextProps>;
 export declare const GlobalContextProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const useGlobalContext: () => ContextProps;