@axos-web-dev/shared-components 0.0.50 → 0.0.52

package/dist/Input/CurrencyInput.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { InputNumberFormat } from "@react-input/number-format";
+import { forwardRef } from "react";
+import "./Checkbox.js";
+import "./Dropdown.js";
+/* empty css                                          */
+/* empty css                            */
+import { Input } from "./Input.js";
+import "./Input.css.js";
+import "./InputPhone.js";
+const CurrencyInput = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(
+      InputNumberFormat,
+      {
+        component: Input,
+        ref,
+        format: "currency",
+        currency: "USD",
+        ...props
+      }
+    );
+  }
+);
+export {
+  CurrencyInput
+};

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

@@ -0,0 +1 @@
+export declare const selectInput: string;

package/dist/Input/Dropdown.css.js

@@ -0,0 +1,6 @@
+/* empty css                                          */
+/* empty css                            */
+var selectInput = "_1vzv2cd0";
+export {
+  selectInput
+};

package/dist/Input/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import { DropdownProps } from './InputProps';
+
+export declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<HTMLSelectElement>>;

package/dist/Input/Dropdown.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { selectInput } from "./Dropdown.css.js";
+import { wrapper, labelClassName, container, iconContainer, iconInput, input, helperText } from "./Input.css.js";
+const Dropdown = forwardRef(
+  (props, ref) => {
+    const {
+      disabled,
+      label,
+      iconLeft,
+      iconRight,
+      sizes,
+      error = false,
+      helperText: helper,
+      variant,
+      children,
+      ...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__ */ jsxs(
+          "select",
+          {
+            ...rest,
+            className: clsx(
+              props.className,
+              input({ size: sizes }),
+              selectInput
+            ),
+            ref,
+            children: [
+              props.options && props.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.text })),
+              children
+            ]
+          }
+        ),
+        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 {
+  Dropdown
+};

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

@@ -36,6 +36,13 @@ export declare const labelClassName: import('@vanilla-extract/recipes').RuntimeF
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
+    isCheckbox: {
+        true: {
+            display: "grid";
+            gridTemplateColumns: "24px auto";
+            gap: ".5rem";
+        };
+    };
 }>;
 export declare const iconContainerBase: string;
 export declare const iconContainer: Record<"left" | "right", string>;

package/dist/Input/Input.css.js

@@ -1,15 +1,16 @@
+/* empty css                            */
 /* empty css                                */
 /* empty css                                   */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 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" };
-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: [] });
+var labelClassName = createRuntimeFn({ defaultClassName: "_18du0la4", variantClassNames: { variant: { primary: "_18du0la5", secondary: "_18du0la6", tertiary: "_18du0la7", quaternary: "_18du0la8" }, error: { true: "_18du0la9" }, disabled: { true: "_18du0laa" }, isCheckbox: { true: "_18du0lab" } }, defaultVariants: {}, compoundVariants: [] });
+var iconContainerBase = "_18du0lac";
+var iconContainer = { left: "_18du0lad _18du0lac", right: "_18du0lae _18du0lac" };
+var container = createRuntimeFn({ defaultClassName: "_18du0laf", variantClassNames: { size: { small: "_18du0lag", medium: "_18du0lah", large: "_18du0lai" }, error: { true: "_18du0laj" }, disabled: { true: "_18du0lak" } }, defaultVariants: {}, compoundVariants: [] });
+var input = createRuntimeFn({ defaultClassName: "_18du0lal", variantClassNames: { size: { small: "_18du0lam", medium: "_18du0lan", large: "_18du0lao" }, error: { true: "_18du0lap" }, disabled: { true: "_18du0laq" } }, defaultVariants: {}, compoundVariants: [] });
+var wrapper = createRuntimeFn({ defaultClassName: "_18du0lar", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+var helperText = createRuntimeFn({ defaultClassName: "_18du0las", variantClassNames: { disabled: { true: "_18du0lat" }, error: { true: "_18du0lau" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   container,
   helperText,

package/dist/Input/InputPhone.js

@@ -1,6 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { InputMask } from "@react-input/mask";
 import { forwardRef } from "react";
+import "./Checkbox.js";
+import "./CurrencyInput.js";
+import "./Dropdown.js";
+/* empty css                                          */
+/* empty css                            */
 import { Input } from "./Input.js";
 import "./Input.css.js";
 const InputPhone = forwardRef(

package/dist/Input/InputProps.d.ts

@@ -0,0 +1,29 @@
+import { InputHTMLAttributes, PropsWithChildren, ReactNode, SelectHTMLAttributes } 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;
+    type?: string;
+}
+export interface DropdownProps extends SelectHTMLAttributes<HTMLSelectElement>, PropsWithChildren {
+    label?: ReactNode;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    sizes?: "small" | "medium" | "large" | undefined;
+    error?: boolean | undefined;
+    skeleton?: boolean | undefined;
+    helperText?: ReactNode;
+    variant?: QuaternaryTypes;
+    type?: string;
+    options?: {
+        value: string | number;
+        text: string;
+    }[];
+}

package/dist/Input/InputProps.js

@@ -0,0 +1 @@
+

package/dist/Input/index.d.ts

@@ -1,3 +1,7 @@
+export * from './Checkbox';
+export * from './CurrencyInput';
+export * from './Dropdown';
+export * from './Dropdown.css';
 export * from './Input';
 export * from './Input.css';
 export * from './InputPhone';

package/dist/Input/index.js

@@ -1,7 +1,14 @@
+import { Checkbox } from "./Checkbox.js";
+import { CurrencyInput } from "./CurrencyInput.js";
+import { Dropdown } from "./Dropdown.js";
+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";
 export {
+  Checkbox,
+  CurrencyInput,
+  Dropdown,
   Input,
   InputPhone,
   container,
@@ -11,5 +18,6 @@ export {
   iconInput,
   input,
   labelClassName,
+  selectInput,
   wrapper
 };

package/dist/Modal/Modal.js

@@ -28,13 +28,17 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import "../Forms/Forms.css.js";
-import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                   */
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "react-hook-form";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/NavigationMenu/AxosAdvisor/SubNavBar.js

@@ -4,6 +4,7 @@ import { Button } from "../../Button/Button.js";
 import "../../Button/Button.css.js";
 import { useRef, useState, useEffect } from "react";
 import { useLocation } from "react-use";
+import clsx from "clsx";
 import styles from "./NavBar.module.js";
 import { sub_nav, absoule, dd_media, dd_media_btn } from "./SubNavbar.css.js";
 function SubNavBar() {
@@ -21,18 +22,18 @@ function SubNavBar() {
     setIsMouseOver(!isMouseOver);
   };
   useEffect(() => {
-    (pathname == null ? void 0 : pathname.includes("/products")) ? setIsrender(true) : setIsrender(false);
-  }, [render]);
+    pathname?.includes("/products") ? setIsrender(true) : setIsrender(false);
+  }, [pathname]);
   const date = /* @__PURE__ */ new Date();
   const day = date.getDate();
   const month = date.getMonth() + 1;
   const year = date.getFullYear();
   const currentDate = `${month}/${day}/${year}`;
-  return /* @__PURE__ */ jsx(Fragment, { children: render && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: `${styles.sub_nav} ${sub_nav} ${styles.desktop_only}`,
+        className: `${styles.sub_nav} ${sub_nav} ${styles.desktop_only} ${clsx(!render && "hide")}`,
         children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsx("div", { className: styles.header_sub_row, children: /* @__PURE__ */ jsx("div", { className: "list_unstyled flex_row middle", children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", children: [
           /* @__PURE__ */ jsx("li", { className: styles.sub_nav_link, children: /* @__PURE__ */ jsxs(
             "a",

package/dist/NavigationMenu/AxosAdvisor/index.js

@@ -37,8 +37,7 @@ function NavBar() {
     setLastNavItem(navItems[navItems.length - 1]);
   }, [navItems]);
   useClickAway(ref, (e) => {
-    var _a;
-    if (((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.tagName) !== "A") {
+    if (e?.target?.tagName !== "A") {
       setisOpenSignIn(false);
     }
   });

package/dist/SecondaryFooter/index.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { secondary_footer, footer_items_wrapper, footer_item, footer_link } from "./SecondaryFooter.css.js";
 const SecondaryFooter = (props) => {
   const { items } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx(secondary_footer, "containment section_spacer"), children: /* @__PURE__ */ jsx("div", { className: footer_items_wrapper, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx("div", { className: footer_item, children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: item.targetURL, className: footer_link, children: item.displayText }) }, item.id)) }) });
+  return /* @__PURE__ */ jsx("div", { className: clsx(secondary_footer, "containment section_spacer"), children: /* @__PURE__ */ jsx("div", { className: footer_items_wrapper, children: items?.map((item) => /* @__PURE__ */ jsx("div", { className: footer_item, children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: item.targetURL, className: footer_link, children: item.displayText }) }, item.id)) }) });
 };
 export {
   SecondaryFooter

package/dist/SetContainer/SetContainer.js

@@ -28,13 +28,17 @@ import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import "../Forms/Forms.css.js";
-import "../Forms/SalesforceFieldsForm.js";
 import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                   */
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "react-hook-form";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
 import { set_container, inline_container } from "./SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -63,7 +67,7 @@ const SetContainer = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
-      id: internalName ? internalName == null ? void 0 : internalName.replace(/ /g, "-") : "",
+      id: internalName ? internalName?.replace(/ /g, "-") : "",
       className: clsx(set_container({ variant: getVariant(variant) })),
       children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
         (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [

package/dist/StepItems/StepItemsSet.js

@@ -57,7 +57,7 @@ const StepItemsSet = ({
         "div",
         {
           className: bs_image,
-          style: { backgroundImage: `url(${image == null ? void 0 : image.src})` },
+          style: { backgroundImage: `url(${image?.src})` },
           children: " "
         }
       ),

package/dist/Table/Table.js

@@ -12,7 +12,7 @@ const TableContainer = ({
   internalName,
   id
 }) => {
-  return /* @__PURE__ */ jsx("section", { id: internalName == null ? void 0 : internalName.replace(/ /g, "-"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("section", { id: internalName?.replace(/ /g, "-"), children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
@@ -79,7 +79,7 @@ const TableCell = ({
       ...props,
       className: clsx(
         as == "td" ? td({ variant: getVariant(variant), highlighted }) : th({ variant: getVariant(variant), highlighted }),
-        props == null ? void 0 : props.className
+        props?.className
       )
     },
     children

package/dist/VideoWrapper/index.js

@@ -23,17 +23,17 @@ const VideoWrapper = ({
           "div",
           {
             className: `${grid_wrapper} ${videoTiles.length % 3 === 0 ? grid_3 : grid_2}`,
-            children: videoTiles == null ? void 0 : videoTiles.map((videoItem, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            children: videoTiles?.map((videoItem, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
               VideoTile,
               {
                 id: videoItem.id,
-                title: videoItem == null ? void 0 : videoItem.title,
-                videoId: videoItem == null ? void 0 : videoItem.videoId,
-                thumbnailImage: videoItem == null ? void 0 : videoItem.thumbnailImage,
-                displayType: videoItem == null ? void 0 : videoItem.displayType,
-                maxWidth: (videoItem == null ? void 0 : videoItem.maxWidth) || "588px",
+                title: videoItem?.title,
+                videoId: videoItem?.videoId,
+                thumbnailImage: videoItem?.thumbnailImage,
+                displayType: videoItem?.displayType,
+                maxWidth: videoItem?.maxWidth || "588px",
                 videoPlayer: videoItem.displayType,
-                transcript: videoItem == null ? void 0 : videoItem.transcript
+                transcript: videoItem?.transcript
               },
               index
             ) }))

package/dist/assets/Button/Button.css

@@ -32,7 +32,7 @@
 }
 ._13pdpuj1:active {
   background-color: var(--_1073cm86);
-  color: var(--_1073cm86);
+  color: var(--_1073cm85);
 }
 ._13pdpuj2 {
   background: var(--_1073cm8k);

package/dist/assets/Forms/Forms.css

@@ -1,4 +1,4 @@
-@keyframes tfms6ao {
+@keyframes tfms6ap {
   from {
     stroke-dashoffset: 1;
   }
@@ -6,7 +6,7 @@
     opacity: 100;
   }
 }
-@keyframes tfms6ap {
+@keyframes tfms6aq {
   0% {
     stroke-dashoffset: -1000;
   }
@@ -86,48 +86,51 @@
   color: var(--_1073cm8n);
 }
 .tfms6ah {
+  grid-template-columns: 1fr;
+}
+.tfms6ai {
   margin-top: 1.5rem;
   text-align: center;
 }
-.tfms6ai {
+.tfms6aj {
   margin-top: 16px;
 }
-.tfms6aj {
+.tfms6ak {
   color: var(--_1073cm82);
 }
-.tfms6ak {
+.tfms6al {
   color: var(--_1073cm89);
 }
-.tfms6al {
+.tfms6am {
   color: var(--_1073cm8g);
 }
-.tfms6am {
+.tfms6an {
   color: var(--_1073cm8n);
 }
-.tfms6an {
+.tfms6ao {
   max-width: 860px;
   margin-inline: auto;
 }
-.tfms6aq {
+.tfms6ar {
   padding: 2.5rem 0;
 }
-.tfms6ar {
+.tfms6as {
   color: var(--_1073cm83);
   background: var(--_1073cm81);
 }
-.tfms6as {
+.tfms6at {
   color: var(--_1073cm8a);
   background: var(--_1073cm88);
 }
-.tfms6at {
+.tfms6au {
   color: var(--_1073cm8g);
   background: var(--_1073cm8f);
 }
-.tfms6au {
+.tfms6av {
   color: var(--_1073cm8n);
   background: var(--_1073cm8m);
 }
-.tfms6aq h1 {
+.tfms6ar h1 {
   font-size: 43px;
   font-weight: 600;
   letter-spacing: 1px;
@@ -135,29 +138,29 @@
   margin-bottom: 0.7rem;
   font-family: var(--header-font-family);
 }
-.tfms6aq p {
+.tfms6ar p {
   margin-bottom: 0;
 }
-.tfms6av {
+.tfms6aw {
   margin: 0 auto;
   display: block;
 }
-.tfms6aw {
+.tfms6ax {
   fill: none;
   stroke: #faa74a;
   stroke-width: 4;
   stroke-dasharray: 100px;
   stroke-dashoffset: 100;
-  animation: tfms6ao 0.5s ease-in-out forwards reverse;
+  animation: tfms6ap 0.5s ease-in-out forwards reverse;
   -webkit-animation-delay: 0.7s;
 }
-.tfms6ax {
+.tfms6ay {
   fill: none;
   stroke-width: 4;
   stroke-dasharray: 1000px;
   stroke-dashoffset: 1000;
-  -webkit-animation: tfms6ap 0.8s ease-in-out forwards;
-  animation: tfms6ap 0.8s ease-in-out forwards;
+  -webkit-animation: tfms6aq 0.8s ease-in-out forwards;
+  animation: tfms6aq 0.8s ease-in-out forwards;
   -webkit-transform-origin: center;
   -ms-transform-origin: center;
   transform-origin: center;
@@ -165,21 +168,37 @@
   -ms-transform: rotate(-40deg);
   transform: rotate(-40deg);
 }
-.tfms6ay {
+.tfms6az {
   stroke: var(--_1073cm83);
 }
-.tfms6az {
+.tfms6a10 {
   stroke: var(--_1073cm8a);
 }
-.tfms6a10 {
+.tfms6a11 {
   stroke: var(--_1073cm8g);
 }
-.tfms6a11 {
+.tfms6a12 {
   stroke: var(--_1073cm8n);
 }
-.tfms6a12 {
+.tfms6a13 {
   margin-top: 1rem;
 }
+.tfms6a14 {
+  color: var(--_1073cm82);
+}
+.tfms6a15 {
+  color: var(--_1073cm89);
+}
+.tfms6a16 {
+  color: var(--_1073cm8g);
+}
+.tfms6a17 {
+  color: var(--_1073cm8n);
+}
+.tfms6ac .tfms6a18 {
+  grid-column-start: 1;
+  grid-column-end: 3;
+}
 @media screen and (max-width:1023px) {
   .tfms6a0 {
     padding-inline: 0;
@@ -189,22 +208,26 @@
   .tfms6ac {
     grid-template-columns: 1fr;
   }
+  .tfms6ac .tfms6a18 {
+    grid-column-start: 1;
+    grid-column-end: 2;
+  }
 }
 @media screen and (max-width: 992px) {
-  .tfms6aq h1 {
+  .tfms6ar h1 {
     font-size: 37px;
     line-height: 1.29;
     margin-bottom: 0.4rem;
   }
 }
 @media screen and (maxwidth: 767px) {
-  .tfms6aq h1 {
+  .tfms6ar h1 {
     font-size: 32px;
     font-weight: 600;
     margin-top: 0;
     margin-bottom: 0.4rem;
   }
-  .tfms6av {
+  .tfms6aw {
     max-width: 69px;
   }
 }

package/dist/assets/Input/Checkbox.css

@@ -0,0 +1,6 @@
+._3tjom72 {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #8F8F8F;
+  border-radius: 2px;
+}

package/dist/assets/Input/Dropdown.css

@@ -0,0 +1,10 @@
+._1vzv2cd0 {
+  background: white;
+  scrollbar-width: thin;
+  font-family: var(--main-font-family);
+  height: 26px;
+  padding: 1px 2px;
+}
+option {
+  font-family: var(--main-font-family);
+}