@axos-web-dev/shared-components 0.0.108 → 0.0.109

package/dist/ATMLocator/ATMLocator.js

@@ -58,6 +58,8 @@ import { iconForm } from "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 /* empty css                                                  */
 /* empty css                                                          */

package/dist/Accordion/Accordion.css.d.ts

@@ -4,39 +4,39 @@ export declare const accordion: import('@vanilla-extract/recipes').RuntimeFn<{
     width: {
         "1/2": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "50%";
         };
         "1/3": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "33.333333333333336%";
         };
         "2/3": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "66.66666666666667%";
         };
         "1/4": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "25%";
         };
         "3/4": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "75%";
         };
         "1/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "20%";
         };
         "2/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "40%";
         };
         "3/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "60%";
         };
         "4/5": {
             display: "flex";
-            flexBasis: `${number}%`;
+            flexBasis: "80%";
         };
     };
 }>;

package/dist/Button/Button.js

@@ -40,6 +40,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Calculators/Calculator.js

@@ -97,6 +97,8 @@ import "react-hook-form";
 import { iconForm } from "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import { iframeResizer } from "iframe-resizer";
 import { calculators } from "./calculators.js";
 const Calculator = (props) => {

package/dist/Carousel/index.js

@@ -46,6 +46,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Chevron/index.js

@@ -43,6 +43,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Comparison/Comparison.js

@@ -41,6 +41,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -41,6 +41,8 @@ import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                       */

package/dist/Forms/ClearingForm.d.ts

@@ -0,0 +1,14 @@
+import { FormProps } from './FormProps';
+
+export type ClearingInputs = {
+    first_name: string;
+    last_name: string;
+    email: string;
+    phone: string;
+    company: string;
+    Business_Type__c: string;
+    Current_Assets_Under_Management__c: string;
+    Memo__c: string;
+    business_type_selection: string;
+};
+export declare const ClearingForm: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/ClearingForm.js

@@ -0,0 +1,334 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import { useState } from "react";
+import "react-use";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import { Dropdown } from "../Input/Dropdown.js";
+/* empty css                                              */
+/* empty css                                       */
+import { Input } from "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import { InputPhone } from "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgAxosX from "../icons/AxosX/index.js";
+import SvgComponent from "../icons/AxosX/Blue.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                    */
+/* empty css                                       */
+/* empty css                                                        */
+/* empty css                                                    */
+import { associatedEmail } from "../utils/EverestValidity.js";
+import "../utils/allowedAxosDomains.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { useForm, FormProvider } from "react-hook-form";
+import * as z from "zod";
+import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, fullRowForm, disclosureForm, actions } from "./Forms.css.js";
+import { SalesforceSchema } from "./SalesforceFieldsForm.js";
+import CheckboxGroup from "../Input/CheckboxGroup.js";
+const options = [
+  { label: "Active Trading", value: "Active Trading" },
+  { label: "FinTech", value: "FinTech" },
+  { label: "Foreign", value: "Foreign" },
+  { label: "Hybrid (RIA and BD)", value: "Hybrid (RIA and BD)" },
+  { label: "Independent Contractor", value: "Independent Contractor" },
+  { label: "IPOs", value: "IPOs" },
+  { label: "Institutional Fixed Income", value: "Institutional Fixed Income" },
+  { label: "Institutional Equity", value: "Institutional Equity" },
+  { label: "Prime Services", value: "Prime Services" },
+  { label: "Retail", value: "Retail" },
+  { label: "Retail/Institutional", value: "Retail/Institutional" },
+  { label: "RIA", value: "RIA" },
+  { label: "Self-Directed", value: "Self-Directed" }
+];
+const ClearingForm = ({
+  icon = false,
+  children,
+  onSubmit = (values) => {
+    console.log(values);
+  },
+  disclosure,
+  variant: fullVariant = "primary",
+  headline,
+  description,
+  callToAction,
+  validateEmail,
+  id
+}) => {
+  const schema = z.object({
+    first_name: z.string({ message: "First name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "First name is required."
+    }).trim().min(1, { message: "First Name is required." }),
+    last_name: z.string({ message: "Last Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Last Name is required."
+    }).trim().min(1, { message: "Last Name is required." }),
+    email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
+    phone: z.string({ message: "Phone is required." }).regex(/[\d-]{10}/, { message: "Phone is required." }).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
+      const removeDashes = val.replace(/-/gi, "");
+      if (removeDashes.length !== 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Phone must have at least 10 and no more than 10 characters."
+        });
+        return z.NEVER;
+      }
+      return removeDashes;
+    }),
+    company: z.string({ message: "Broker-Dealer Name is required." }).regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g, {
+      message: "Broker-Dealer Name is required"
+    }).trim().min(1, { message: "Broker-Dealer Name is required." }),
+    Business_Type__c: z.string({ message: "Type of Business is required." }).trim().min(1, { message: "Type of Business is required." }).refine((val) => val.trim().length > 0, {
+      message: "Type of Business is required."
+    }),
+    Current_Assets_Under_Management__c: z.string().trim().min(1, { message: "Assets Under Management is required." }),
+    Memo__c: z.string().trim()
+  });
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [showBusinessTypes, setShowBusinessTypes] = useState(false);
+  const [requiredAUM, setRequiredAUM] = useState(false);
+  const [requiredTOB, setRequiredTOB] = useState(false);
+  const handleShowBusinessType = () => {
+    setShowBusinessTypes(true);
+  };
+  let formattedValues = "";
+  const handleBusinessTypeChange = (updatedValues) => {
+    setSelectedValues(updatedValues);
+    formattedValues = updatedValues.join(";");
+    setValue("Business_Type__c", formattedValues);
+    handleTOBerrors();
+  };
+  const methods = useForm({
+    resolver: zodResolver(schema.merge(SalesforceSchema), {
+      async: true
+    }),
+    mode: "all",
+    defaultValues: {
+      email: "",
+      Business_Type__c: "FinTech"
+      // Set default value as empty array
+    }
+  });
+  const {
+    handleSubmit,
+    register,
+    setValue,
+    setError,
+    clearErrors,
+    formState: { errors, isValid, isSubmitting }
+  } = methods;
+  const submitForm = async (data) => {
+    await onSubmit(data);
+  };
+  const handleTOBerrors = () => {
+    if (!formattedValues.length) {
+      setError("Business_Type__c", {
+        type: "manual",
+        message: "Type of Business is required."
+      });
+      return;
+    } else {
+      clearErrors("Business_Type__c");
+      setRequiredTOB(true);
+    }
+  };
+  const handleDropdownChange = (event) => {
+    const value = event.target.value;
+    setValue("Current_Assets_Under_Management__c", value);
+    if (value) setRequiredAUM(true);
+  };
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id: `id_${id}`,
+      className: clsx(formContainer({ variant })),
+      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(headerContainer, "text_center"), children: [
+          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+          description && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                form,
+                descriptionField({ variant }),
+                "text_center"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "first_name",
+                ...register("first_name", {
+                  required: "First Name is required"
+                }),
+                label: "First Name",
+                sizes: "medium",
+                required: true,
+                error: !!errors.first_name,
+                helperText: errors.first_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "last_name",
+                ...register("last_name", { required: true }),
+                label: "Last Name",
+                sizes: "medium",
+                required: true,
+                error: !!errors.last_name,
+                helperText: errors.last_name?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "email",
+                ...register("email", {
+                  required: true,
+                  validate: {
+                    isValid: associatedEmail
+                  }
+                }),
+                label: "Email",
+                sizes: "medium",
+                required: true,
+                error: !!errors.email,
+                helperText: errors.email?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              InputPhone,
+              {
+                id: "phone",
+                ...register("phone", { required: true, maxLength: 12 }),
+                label: "Phone",
+                sizes: "medium",
+                required: true,
+                error: !!errors.phone,
+                helperText: errors.phone?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "company",
+                ...register("company", { required: true }),
+                label: "Broker-Dealer Name",
+                sizes: "medium",
+                required: true,
+                error: !!errors.company,
+                helperText: errors.company?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Dropdown,
+              {
+                id: "Current_Assets_Under_Management__c",
+                ...register("Current_Assets_Under_Management__c", {
+                  required: true
+                }),
+                label: "Assets Under Management",
+                sizes: "medium",
+                required: true,
+                error: !!errors.Current_Assets_Under_Management__c,
+                helperText: errors.Current_Assets_Under_Management__c?.message,
+                variant,
+                defaultValue: "Select option",
+                onChange: handleDropdownChange,
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "Select option", disabled: true, children: "Select Option" }),
+                  /* @__PURE__ */ jsx("option", { value: "$0 - $100MM", children: "$0 - $100MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$101MM - $200MM", children: "$101MM - $200MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$201MM - $500MM", children: "$201MM - $500MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$501MM - $750MM", children: "$501MM - $750MM" }),
+                  /* @__PURE__ */ jsx("option", { value: "$751MM - $1B", children: "$751MM - $1B" }),
+                  /* @__PURE__ */ jsx("option", { value: "$1B -$2B", children: "$1B -$2B" }),
+                  /* @__PURE__ */ jsx("option", { value: "$2B+", children: "$2B+" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: `${fullRowForm}`, children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "business_type_selection",
+                  label: "Type of Business",
+                  onFocus: handleShowBusinessType,
+                  onBlur: handleTOBerrors,
+                  sizes: "medium",
+                  placeholder: "Select All That Apply",
+                  error: !!errors.Business_Type__c,
+                  disabled: true
+                }
+              ),
+              showBusinessTypes && /* @__PURE__ */ jsx(
+                CheckboxGroup,
+                {
+                  options,
+                  selectedValues,
+                  onChange: handleBusinessTypeChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "Memo__c",
+                ...register("Memo__c", { required: false }),
+                label: "Please provide additional details about your clearing need (optional)",
+                sizes: "medium",
+                required: false,
+                error: !!errors.Memo__c,
+                helperText: errors.Memo__c?.message,
+                variant
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "hidden",
+                ...register("Lead_Source_Detail_SFDC2__c", {
+                  value: "Axos Clearing"
+                })
+              }
+            )
+          ] }),
+          children,
+          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: getVariant(callToAction?.variant),
+              as: "button",
+              type: "submit",
+              disabled: !isValid || isSubmitting || !requiredAUM || !requiredTOB,
+              children: callToAction?.displayText
+            }
+          ) })
+        ] })
+      ] }) })
+    },
+    id
+  );
+};
+export {
+  ClearingForm
+};

package/dist/Forms/ContactUsBusiness.js

@@ -43,6 +43,8 @@ import { formContainer, iconForm, headerContainer, headerForm, form, description
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Forms/ContactUsNMLSId.js

@@ -43,6 +43,8 @@ import { formContainer, iconForm, headerContainer, headerForm, form, description
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Forms/EmailOnly.js

@@ -44,6 +44,8 @@ import { formContainer, iconForm, headerContainer, headerForm, form, description
 import { SalesforceSchema } from "./SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Forms/SalesforceFieldsForm.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as z from "zod";
 export interface SalesforceFields {
     brand: string;

package/dist/Forms/SuccesForm.js

@@ -93,6 +93,8 @@ import "react-hook-form";
 import { success_wrap, success_icon, success_circle, succes_check_mark } from "./Forms.css.js";
 import "./SalesforceFieldsForm.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 function SuccesFormWrapper({
   children,
   isSubmitted,

package/dist/Forms/index.d.ts

@@ -16,3 +16,4 @@ export * from './ScheduleCall';
 export * from './ScheduleCallPremier';
 export * from './SuccesForm';
 export * from './WcplSurvey';
+export * from './ClearingForm';

package/dist/Forms/index.js

@@ -15,8 +15,10 @@ import { ScheduleCall } from "./ScheduleCall.js";
 import { ScheduleCallPremier } from "./ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./SuccesForm.js";
 import { WCPLSurvey } from "./WcplSurvey.js";
+import { ClearingForm } from "./ClearingForm.js";
 export {
   ApplicationStart,
+  ClearingForm,
   CommercialLending,
   ContactCompany,
   ContactUs,

package/dist/Hyperlink/index.js

@@ -43,6 +43,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/ImageLink/ImageLink.js

@@ -38,6 +38,8 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/ImageLink/ImageLinkSet.js

@@ -42,6 +42,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/ImageLink/index.js

@@ -41,6 +41,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

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

@@ -8,3 +8,5 @@ export declare const checkbox: import('@vanilla-extract/recipes').RuntimeFn<{
         [x: string]: string | import('@vanilla-extract/css').ComplexStyleRule;
     };
 }>;
+export declare const checkbox_group_container: string;
+export declare const no_borders: string;

package/dist/Input/Checkbox.css.js

@@ -2,7 +2,11 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkboxContainer = createRuntimeFn({ defaultClassName: "_3tjom70", variantClassNames: { disabled: { true: "_3tjom71" } }, defaultVariants: {}, compoundVariants: [] });
 var checkbox = createRuntimeFn({ defaultClassName: "_3tjom72", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+var checkbox_group_container = "_3tjom73";
+var no_borders = "_3tjom74";
 export {
   checkbox,
-  checkboxContainer
+  checkboxContainer,
+  checkbox_group_container,
+  no_borders
 };

package/dist/Input/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from './InputProps';
 
 export declare const Checkbox: import('react').ForwardRefExoticComponent<InputProps & {
-    children?: import('react').ReactNode;
+    children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLInputElement>>;

package/dist/Input/CheckboxGroup.d.ts

@@ -0,0 +1,20 @@
+import { default as React, ReactNode } from 'react';
+
+interface CheckboxOption {
+    label: string;
+    value: string;
+}
+interface CheckboxGroupProps {
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    variant?: string;
+    helperText?: string;
+    options: CheckboxOption[];
+    selectedValues: string[];
+    onChange: (selectedValues: string[]) => void;
+    direction?: "row" | "column";
+    iconLeft?: ReactNode;
+}
+declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export default CheckboxGroup;

package/dist/Input/CheckboxGroup.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Checkbox } from "./Checkbox.js";
+import { labelClassName } from "./Input.css.js";
+import { fieldset_wrapper, fieldset_container, fieldset } from "./RadioButton.css.js";
+import { checkbox_group_container } from "./Checkbox.css.js";
+const CheckboxGroup = ({
+  error = false,
+  label,
+  options,
+  selectedValues,
+  onChange,
+  direction = "column"
+}) => {
+  const handleCheckboxChange = (e) => {
+    const value = e.target.value;
+    const isChecked = e.target.checked;
+    const updatedValues = isChecked ? [...selectedValues, value] : selectedValues.filter((item) => item !== value);
+    onChange(updatedValues);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: fieldset_wrapper, children: [
+    label && /* @__PURE__ */ jsx("label", { className: labelClassName({ error }), children: label }),
+    /* @__PURE__ */ jsx("div", { className: `${fieldset_container} ${checkbox_group_container}`, children: /* @__PURE__ */ jsx("fieldset", { className: fieldset({ direction }), children: options.map((option) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        name: option.value,
+        value: option.value,
+        checked: selectedValues.includes(option.value),
+        onChange: handleCheckboxChange,
+        sizes: "medium",
+        children: option.label
+      },
+      option.value
+    )) }) }),
+    error && /* @__PURE__ */ jsx("span", { className: "error-text", children: "Error message here" })
+  ] });
+};
+export {
+  CheckboxGroup as default
+};

package/dist/Insight/Featured/CategorySelector.js

@@ -41,6 +41,8 @@ import "../../Forms/SalesforceFieldsForm.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../../Input/RadioButton.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                       */

package/dist/Insight/Featured/Featured.js

@@ -43,6 +43,8 @@ import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                       */

package/dist/Modal/Modal.js

@@ -38,6 +38,8 @@ import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -42,6 +42,8 @@ import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                       */

package/dist/SetContainer/SetContainer.js

@@ -40,6 +40,8 @@ import "../Forms/SalesforceFieldsForm.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Input/RadioButton.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                    */

package/dist/Table/Table.d.ts

@@ -9,14 +9,14 @@ export declare const TableBody: ({ children }: PropsWithChildren) => import("rea
 export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps) => import('react').DetailedReactHTMLElement<{
     className: string;
     manifest?: string | undefined;
-    amp?: string | undefined;
+    amp?: string;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
@@ -29,7 +29,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     style?: import('react').CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
-    translate?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import('react').AriaRole | undefined;
     about?: string | undefined;
@@ -54,38 +54,38 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     itemRef?: string | undefined;
     results?: number | undefined;
     security?: string | undefined;
-    unselectable?: "off" | "on" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
     popover?: "" | "auto" | "manual" | undefined;
-    popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     onToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;
     onBeforeToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;
     inert?: boolean | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -100,9 +100,9 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "false" | "true") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;

package/dist/assets/Input/Checkbox.css

@@ -3,4 +3,11 @@
   height: 20px;
   border: 2px solid #8F8F8F;
   border-radius: 2px;
+}
+._3tjom73 {
+  border: 1px solid #d4d4d4;
+  border-radius: 4px;
+}
+._3tjom74 {
+  border: none;
 }

package/dist/main.js

@@ -58,6 +58,7 @@ import { ScheduleCall } from "./Forms/ScheduleCall.js";
 import { ScheduleCallPremier } from "./Forms/ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
 import { WCPLSurvey } from "./Forms/WcplSurvey.js";
+import { ClearingForm } from "./Forms/ClearingForm.js";
 import { HeroBanner } from "./HeroBanner/HeroBanner.js";
 import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
 import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./HeroBanner/SelectionBanner.css.js";
@@ -196,6 +197,7 @@ export {
   Chevron,
   default8 as ChevronDown,
   default9 as ChevronUp,
+  ClearingForm,
   default19 as ClockIcon,
   default10 as CloseIcon,
   CollectInformationAlert,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.108",
+  "version": "0.0.109",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",