@axos-web-dev/shared-components 0.0.57 → 0.0.58

package/dist/Forms/SuccesForm.d.ts

@@ -1,6 +1,10 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 
-export declare function SuccesFormWrapper({ children, isSubmitted, variant: fullVariant, }: {
+export interface SuccessFormProps extends PropsWithChildren {
+    id?: string;
+    headline?: string;
+    bodyCopy?: ReactNode;
     isSubmitted: boolean;
     variant?: string;
-} & PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+}
+export declare function SuccesFormWrapper({ children, isSubmitted, variant: fullVariant, bodyCopy, headline, id, }: SuccessFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/Forms/SuccesForm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import "@hookform/resolvers/zod";
@@ -14,6 +14,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                */
@@ -28,6 +29,10 @@ import "../Accordion/Accordion.css.js";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 /* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
+/* empty css                                              */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 /* empty css                                                    */
@@ -59,68 +64,78 @@ import "next/script.js";
 function SuccesFormWrapper({
   children,
   isSubmitted,
-  variant: fullVariant = "primary"
+  variant: fullVariant = "primary",
+  bodyCopy,
+  headline,
+  id
 }) {
   const variant = getVariant(fullVariant);
-  return !isSubmitted ? /* @__PURE__ */ jsx("div", { children }) : /* @__PURE__ */ jsxs("div", { className: clsx(success_wrap({ variant }), "text_center"), children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        className: success_icon,
-        width: "90px",
-        height: "97px",
-        viewBox: "0 0 90 90",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg",
-        xmlnsXlink: "http://www.w3.org/1999/xlink",
-        xmlSpace: "preserve",
-        style: {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeMiterlimit: "1.5"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: "0",
-              y: "0",
-              width: "90",
-              height: "99",
-              style: { fill: "none" }
-            }
-          ),
-          /* @__PURE__ */ jsx("clipPath", { id: "_clip1", children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "90", height: "99" }) }),
-          /* @__PURE__ */ jsxs("g", { clipPath: "url(#_clip1)", children: [
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                className: success_circle({ variant }),
-                cx: "44.662",
-                cy: "44.662",
-                r: "42.662"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                className: succes_check_mark,
-                d: "M28.985,44.662l12.015,12.015l46.324,-54.677"
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("h1", { id: "submittedText", children: "Submitted!" }),
-    /* @__PURE__ */ jsxs("p", { id: "thankYouText", children: [
-      "Thank you!",
-      /* @__PURE__ */ jsx("br", {}),
-      "A Banking expert will be in contact with you shortly"
-    ] })
-  ] });
+  return !isSubmitted ? /* @__PURE__ */ jsx("div", { children }) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(success_wrap({ variant }), "text_center"),
+      id: id ?? void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: success_icon,
+            width: "90px",
+            height: "97px",
+            viewBox: "0 0 90 90",
+            version: "1.1",
+            xmlns: "http://www.w3.org/2000/svg",
+            xmlnsXlink: "http://www.w3.org/1999/xlink",
+            xmlSpace: "preserve",
+            style: {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeMiterlimit: "1.5"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "0",
+                  y: "0",
+                  width: "90",
+                  height: "99",
+                  style: { fill: "none" }
+                }
+              ),
+              /* @__PURE__ */ jsx("clipPath", { id: "_clip1", children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "90", height: "99" }) }),
+              /* @__PURE__ */ jsxs("g", { clipPath: "url(#_clip1)", children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: success_circle({ variant }),
+                    cx: "44.662",
+                    cy: "44.662",
+                    r: "42.662"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: succes_check_mark,
+                    d: "M28.985,44.662l12.015,12.015l46.324,-54.677"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("h1", { id: "submittedText", children: headline || "Submitted!" }),
+        /* @__PURE__ */ jsx("p", { id: "thankYouText", children: bodyCopy ? bodyCopy : /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Thank you!",
+          /* @__PURE__ */ jsx("br", {}),
+          "A Banking expert will be in contact with you shortly"
+        ] }) })
+      ]
+    }
+  );
 }
 export {
   SuccesFormWrapper

package/dist/Forms/index.d.ts

@@ -7,3 +7,5 @@ export * from './SalesforceFieldsForm';
 export * from './ScheduleCall';
 export * from './ScheduleCallPremier';
 export * from './SuccesForm';
+export * from './ContactCompany';
+export * from './DealerServices';

package/dist/Forms/index.js

@@ -7,9 +7,13 @@ import { SalesforceFieldsForm, SalesforceSchema } from "./SalesforceFieldsForm.j
 import { ScheduleCall } from "./ScheduleCall.js";
 import { ScheduleCallPremier } from "./ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./SuccesForm.js";
+import { ContactCompany } from "./ContactCompany.js";
+import { DealerServices } from "./DealerServices.js";
 export {
   ApplicationStart,
+  ContactCompany,
   ContactUsBusiness,
+  DealerServices,
   EmailOnly,
   RenderWebForm,
   SalesforceFieldsForm,

package/dist/Hyperlink/index.js

@@ -18,8 +18,12 @@ import "react";
 import "../Button/Button.css.js";
 import "react-use";
 /* empty css                                                */
-import "../IconBillboard/IconBillboard.css.js";
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
 /* empty css                                          */
+/* empty css                                              */
+import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
@@ -39,6 +43,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";

package/dist/ImageLink/ImageLink.js

@@ -18,6 +18,10 @@ import { isValidElement } from "react";
 import "../Button/Button.css.js";
 import "react-use";
 /* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
+/* empty css                                              */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -36,6 +40,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";

package/dist/ImageLink/ImageLinkSet.js

@@ -21,6 +21,10 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 /* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
+/* empty css                                              */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -39,6 +43,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";

package/dist/ImageLink/index.js

@@ -15,8 +15,12 @@ import "react";
 import "../Button/Button.css.js";
 import "react-use";
 /* empty css                                                */
-import "../IconBillboard/IconBillboard.css.js";
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
 /* empty css                                          */
+/* empty css                                              */
+import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
@@ -36,6 +40,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";

package/dist/Input/CurrencyInput.js

@@ -8,6 +8,7 @@ import "./Dropdown.js";
 import { Input } from "./Input.js";
 import "./Input.css.js";
 import "./InputPhone.js";
+import "./InputTextArea.js";
 const CurrencyInput = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(

package/dist/Input/InputPhone.js

@@ -8,6 +8,7 @@ import "./Dropdown.js";
 /* empty css                            */
 import { Input } from "./Input.js";
 import "./Input.css.js";
+import "./InputTextArea.js";
 const InputPhone = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(

package/dist/Input/InputTextArea.d.ts

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

package/dist/Input/InputTextArea.js

@@ -0,0 +1,48 @@
+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 InputTextArea = forwardRef((props, ref) => {
+  const {
+    disabled,
+    label,
+    iconLeft,
+    iconRight,
+    sizes,
+    error = false,
+    helperText: helper,
+    variant,
+    rows = 4,
+    maxLength = 512,
+    ...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(
+        "textarea",
+        {
+          ...rest,
+          ref,
+          className: clsx(props.className, input({ size: sizes })),
+          rows,
+          placeholder: props.placeholder,
+          maxLength
+        }
+      ),
+      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 {
+  InputTextArea
+};

package/dist/Input/index.d.ts

@@ -5,3 +5,4 @@ export * from './Dropdown.css';
 export * from './Input';
 export * from './Input.css';
 export * from './InputPhone';
+export * from './InputTextArea';

package/dist/Input/index.js

@@ -5,12 +5,14 @@ import { selectInput } from "./Dropdown.css.js";
 import { Input } from "./Input.js";
 import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input.css.js";
 import { InputPhone } from "./InputPhone.js";
+import { InputTextArea } from "./InputTextArea.js";
 export {
   Checkbox,
   CurrencyInput,
   Dropdown,
   Input,
   InputPhone,
+  InputTextArea,
   container,
   helperText,
   iconContainer,

package/dist/Modal/Modal.js

@@ -14,8 +14,12 @@ import "../Button/Button.css.js";
 import "react";
 import "react-use";
 /* empty css                                                */
-import "../IconBillboard/IconBillboard.css.js";
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
 /* empty css                                          */
+/* empty css                                              */
+import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
 import "clsx";
 /* empty css                                                    */
@@ -36,6 +40,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";

package/dist/SetContainer/SetContainer.js

@@ -18,6 +18,10 @@ import "react";
 import "../Button/Button.css.js";
 import "react-use";
 /* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                          */
+/* empty css                                              */
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
@@ -36,6 +40,7 @@ import "../Input/Dropdown.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";

package/dist/assets/Article/Article.css

@@ -0,0 +1,243 @@
+._1073cm80 .n5hj5p1 {
+  border: 1px solid #d4d4d4;
+}
+._1es6o1h0 .n5hj5p1 {
+  border: 1px solid #d4d4d4;
+}
+._1073cm80 .n5hj5p2 {
+  border: none;
+}
+._1es6o1h0 .n5hj5p2 {
+  border: none;
+}
+._1073cm80 .n5hj5p3 {
+  border: none;
+}
+._1es6o1h0 .n5hj5p3 {
+  border: none;
+}
+._1073cm80 .n5hj5p4 {
+  border: none;
+}
+._1es6o1h0 .n5hj5p4 {
+  border: none;
+}
+.n5hj5p5 {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  min-height: 179px;
+}
+.n5hj5p6 {
+  flex: 1 1 0%;
+  padding: 24px;
+}
+.n5hj5p7 {
+  font: 700 18px / 1.44 var(--main-font-family);
+  display: block;
+}
+._1073cm80 .n5hj5p8 {
+  color: var(--_1073cm83);
+}
+._1es6o1h0 .n5hj5p8 {
+  color: var(--_1073cm83);
+}
+._1073cm80 .n5hj5p9 {
+  color: var(--_1073cm8a);
+}
+._1es6o1h0 .n5hj5p9 {
+  color: var(--_1073cm8a);
+}
+._1073cm80 .n5hj5pa {
+  color: #FAA74A;
+}
+._1es6o1h0 .n5hj5pa {
+  color: #FAA74A;
+}
+._1073cm80 .n5hj5pb {
+  color: var(--_1073cm8o);
+}
+._1es6o1h0 .n5hj5pb {
+  color: var(--_1073cm8o);
+}
+.n5hj5pc {
+  font-size: 28px;
+}
+._1073cm80 .n5hj5pd {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm84);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 .n5hj5pd {
+  color: var(--_1073cm83);
+}
+._1073cm80 .n5hj5pe {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm8b);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 .n5hj5pe {
+  color: var(--_1073cm8a);
+}
+._1073cm80 .n5hj5pf {
+  color: var(--_1073cm8h);
+}
+._1es6o1h0 .n5hj5pf {
+  color: var(--_1073cm8h);
+}
+._1073cm80 .n5hj5pg {
+  color: var(--_1073cm8o);
+}
+._1es6o1h0 .n5hj5pg {
+  color: var(--_1073cm8o);
+}
+._1073cm80 .n5hj5pi {
+  color: var(--_1073cm82);
+  background: var(--_1073cm81);
+}
+._1es6o1h0 .n5hj5pi {
+  color: var(--_1073cm82);
+  background: var(--_1073cm81);
+}
+._1073cm80 .n5hj5pj {
+  color: var(--_1073cm89);
+  background: var(--_1073cm88);
+}
+._1es6o1h0 .n5hj5pj {
+  color: var(--_1073cm89);
+  background: var(--_1073cm88);
+}
+._1073cm80 .n5hj5pk {
+  color: var(--_1073cm8g);
+  background: var(--_1073cm8f);
+}
+._1es6o1h0 .n5hj5pk {
+  color: var(--_1073cm8g);
+  background: var(--_1073cm8f);
+}
+._1073cm80 .n5hj5pl {
+  color: var(--_1073cm8n);
+  background: var(--_1073cm8m);
+}
+._1es6o1h0 .n5hj5pl {
+  color: var(--_1073cm8n);
+  background: var(--_1073cm8m);
+}
+.n5hj5pm {
+  border: 2px solid transparent;
+  font-weight: 700;
+  margin-bottom: 0;
+  transition-duration: 0.15s;
+  transition-property: color , background-color , border-color;
+  transition-timing-function: linear;
+  text-decoration: none;
+  display: inline-block;
+  white-space: nowrap;
+  font-size: 18px;
+  opacity: 1;
+  cursor: pointer;
+  padding: 12px 64px;
+  border-radius: 8px;
+  line-height: 1.44;
+}
+.n5hj5pm:hover {
+  background-color: transparent;
+}
+._1073cm80 .n5hj5pn {
+  background: var(--_1073cm86);
+  color: var(--_1073cm85);
+}
+._1es6o1h0 .n5hj5pn {
+  background: var(--_1073cm86);
+  color: var(--_1073cm85);
+}
+._1073cm80 .n5hj5po {
+  background: var(--_1073cm8d);
+  color: var(--_1073cm8c);
+}
+._1es6o1h0 .n5hj5po {
+  background: var(--_1073cm8d);
+  color: var(--_1073cm8c);
+}
+._1073cm80 .n5hj5pp {
+  color: var(--_1073cm8j);
+  background-color: var(--_1073cm86);
+}
+._1es6o1h0 .n5hj5pp {
+  color: var(--_1073cm8j);
+  background-color: var(--_1073cm8k);
+}
+._1073cm80 .n5hj5pq {
+  color: var(--_1073cm8q);
+  background-color: var(--_1073cm8r);
+}
+._1es6o1h0 .n5hj5pq {
+  color: var(--_1073cm8q);
+  background-color: var(--_1073cm8r);
+}
+@media (max-width:1280px) {
+  .n5hj5p5 {
+    min-height: 146px;
+  }
+}
+@media (max-width:1023px) {
+  .n5hj5p5 {
+    min-height: 107px;
+  }
+}
+@media (max-width:768px) {
+  .n5hj5p5 {
+    min-height: 152px;
+  }
+}
+@media (max-width:1023px) and (min-width:769px) {
+  .n5hj5p7 {
+    font-size: 1rem;
+  }
+  .n5hj5pc {
+    font-size: 1.5rem;
+    line-height: 1.28;
+  }
+  options => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === 'boolean') {
+          // @ts-expect-error
+          selection = selection === true ? 'true' : 'false';
+        }
+        var selectionClassName =
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection];
+        if (selectionClassName) {
+          className += ' ' + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += ' ' + compoundClassName;
+      }
+    }
+    return className;
+  } > * {
+    font-size: 15px;
+    line-height: 1.4;
+  }
+  .n5hj5pm {
+    padding: 12px;
+    width: 100%;
+  }
+}
+@media (max-width:350px) {
+  .n5hj5pm {
+    padding: 12px;
+    width: 100%;
+  }
+}