@axos-web-dev/shared-components 0.0.106 → 0.0.107

package/dist/assets/Forms/Forms.css

@@ -210,6 +210,35 @@
 .tfms6a1a {
   grid-column: 1 / -1;
 }
+.tfms6a1b {
+  width: 100%;
+  padding-bottom: 4px;
+}
+.tfms6a1c {
+  border-bottom: 1px solid var(--_1073cm82);
+}
+.tfms6a1d {
+  border-bottom: 1px solid var(--_1073cm89);
+}
+.tfms6a1e {
+  border-bottom: 1px solid var(--_1073cm8g);
+}
+.tfms6a1f {
+  border-bottom: 1px solid var(--_1073cm8n);
+}
+.tfms6a1c > h4, .tfms6a1d > h4 {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm83);
+  -webkit-text-fill-color: var(--_1073cm83);
+}
+.tfms6a1e > h4, .tfms6a1f > h4 {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm8h);
+  -webkit-text-fill-color: var(--_1073cm8h);
+}
+.tfms6a1g {
+  display: flex;
+}
 @media screen and (max-width:1023px) {
   .tfms6a0 {
     padding-inline: 0;
@@ -241,4 +270,14 @@
   .tfms6ax {
     max-width: 69px;
   }
+}
+@media screen and (max-width: 780px) {
+  .tfms6a1g {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1103px) {
+  .tfms6a1g ._18du0laf {
+    padding: 6px;
+  }
 }

package/dist/assets/Input/DatePicker.css

@@ -0,0 +1,95 @@
+.react-date-picker {
+  width: 100%;
+}
+.react-date-picker__wrapper {
+  border: none !important;
+}
+.react-calendar__month-view__weekdays__weekday {
+  width: 45px;
+  height: 22px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--main-font-family);
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  justify-content: center;
+}
+.react-calendar__month-view__weekdays__weekday {
+  font-size: 12px;
+  line-height: 16;
+  color: #2F5B88;
+}
+.react-calendar__month-view__weekdays__weekday > abbr {
+  text-decoration: none;
+}
+.react-calendar__month-view__days__day {
+  width: 49px;
+  height: 49px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-calendar__month-view__days__day > abbr {
+  font-family: var(--main-font-family) !important;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: #051A3F;
+}
+.react-date-picker__inputGroup__input, .react-date-picker__inputGroup__divider {
+  color: #5E6A74 !important;
+}
+.react-date-picker__clear-button {
+  display: none;
+}
+.react-calendar__navigation__label__labelText {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: 0.2px;
+  color: #1E3860;
+  font-family: var(--header-font-family);
+}
+.react-datepicker-popper {
+  transform: translateY(40px)!important;
+}
+.react-calendar__month-view__days__day--neighboringMonth {
+  background-color: #F4F4F4 !important;
+  opacity: 50%;
+}
+.react-calendar__month-view__days__day--neighboringMonth > abbr {
+  color: #5E6A74;
+}
+.react-calendar__tile--active > abbr {
+  color: white;
+}
+.react-calendar {
+  border: 12px solid #FFFFFF4D !important;
+  border-radius: 4px;
+}
+.react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
+  display: none;
+}
+.react-date-picker__calendar {
+  max-width: 100% !important;
+}
+.react-date-picker__inputGroup__input:focus-visible {
+  outline: none;
+}
+.react-date-picker__inputGroup__input:invalid {
+  background: transparent !important;
+}
+@media screen and (max-width:320px) {
+  .react-calendar__month-view__weekdays__weekday {
+    width: 43.5px;
+  }
+  .react-calendar__month-view__days__day {
+    width: 43.5px;
+  }
+}
+@media screen and (max-width:400px) {
+  .react-calendar__navigation .react-calendar__navigation__prev-button, .react-calendar__navigation .react-calendar__navigation__next-button {
+    min-width: auto;
+  }
+}

package/dist/assets/Input/InputDate.css

@@ -0,0 +1,39 @@
+.skzved0 {
+  position: relative;
+}
+.skzved1 {
+  position: relative;
+  top: 5px;
+  left: 5px;
+}
+.skzved2 {
+  width: 100px;
+  padding-left: 5px;
+  padding-right: 5px;
+  line-height: 28px;
+  font-size: 14pt;
+}
+.skzved3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.skzved4 {
+  display: block;
+  background: #FFFFFF;
+  width: 300px;
+  border: solid 1px #CCCCCC;
+  margin: 10px auto;
+  box-shadow: 0 0 15px 0 #C0C0C0;
+  font-size: 1.3rem;
+  text-align: center;
+  z-index: 999;
+}
+.skzved4 .skzved5 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  cursor: default;
+  font-weight: bold;
+}

package/dist/assets/SetContainer/SetContainer.css

@@ -52,7 +52,7 @@
   content: "";
   position: absolute;
   width: 100%;
-  height: 77%;
+  height: 90%;
   top: 0;
   left: 0;
   right: 0;

package/dist/assets/Table/Table.css

@@ -270,8 +270,8 @@ td:has(.flex.middle span.img_fluid) .img_fluid {
   min-width: 24px;
 }
 ._1nivbwe14 {
-  background-image: linear-gradient(0deg,#152d54,#27466f) !important;
-  color: var(--_1073cm8g) !important;
+  background-image: var(--_1073cm8z) !important;
+  color: var(--_1073cm810) !important;
 }
 @media screen and (max-width: 768px) {
   ._1nivbwed:first-child {

package/dist/assets/themes/axos.css

@@ -33,4 +33,6 @@
   --_1073cm8w: #F4F4F4;
   --_1073cm8x: #00805B;
   --_1073cm8y: #38D7A4;
+  --_1073cm8z: linear-gradient(0deg,#152d54,#27466f);
+  --_1073cm810: #FFFFFF;
 }

package/dist/assets/themes/premier.css

@@ -33,4 +33,6 @@
   --_1073cm8w: #F4F4F4;
   --_1073cm8x: #1E262F;
   --_1073cm8y: #FAA74A;
+  --_1073cm8z: linear-gradient(0deg, #2c3642, #1e262f);
+  --_1073cm810: #FAA74A;
 }

package/dist/icons/CheckCircle.d.ts

@@ -1,4 +1,5 @@
 import { SVGProps } from 'react';
+import { CheckColorVariant } from './CheckIcon/CheckIcon.css';
 
-declare const SvgCheckCircle: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+declare const SvgCheckCircle: (props: SVGProps<SVGSVGElement> & CheckColorVariant) => import("react/jsx-runtime").JSX.Element;
 export default SvgCheckCircle;

package/dist/icons/CheckCircle.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { checkColor } from "./CheckIcon/CheckIcon.css.js";
 const SvgCheckCircle = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -11,6 +12,7 @@ const SvgCheckCircle = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(
       "path",
       {
+        className: checkColor({ variant: props?.variant }),
         fillRule: "evenodd",
         clipRule: "evenodd",
         d: "M21 10.5C21 4.70101 16.299 0 10.5 0C4.70101 0 0 4.70101 0 10.5C0 16.299 4.70101 21 10.5 21C16.299 21 21 16.299 21 10.5ZM15.2196 6.96968L16.2803 8.03034L8.99996 15.3107L4.71964 11.0303L5.78029 9.96968L8.99996 13.1888L15.2196 6.96968Z",

package/dist/main.js

@@ -51,7 +51,8 @@ import { ContactUsNMLSId } from "./Forms/ContactUsNMLSId.js";
 import { DealerServices } from "./Forms/DealerServices.js";
 import { EmailOnly } from "./Forms/EmailOnly.js";
 import { EmailUs } from "./Forms/EmailUs.js";
-import { actions, descriptionField, disclosureForm, form, formContainer, formWrapper, fullRowForm, headerContainer, headerForm, iconForm, one_row, succes_check_mark, success_circle, success_icon, success_wrap } from "./Forms/Forms.css.js";
+import { actions, checkbox_group, descriptionField, disclosureForm, form, formContainer, formWrapper, fullRowForm, headerContainer, headerForm, iconForm, one_row, section_title, succes_check_mark, success_circle, success_icon, success_wrap } from "./Forms/Forms.css.js";
+import { QuickPricer } from "./Forms/QuickPricer.js";
 import { SalesforceFieldsForm, SalesforceSchema } from "./Forms/SalesforceFieldsForm.js";
 import { ScheduleCall } from "./Forms/ScheduleCall.js";
 import { ScheduleCallPremier } from "./Forms/ScheduleCallPremier.js";
@@ -103,6 +104,7 @@ import { Dropdown } from "./Input/Dropdown.js";
 import { selectInput } from "./Input/Dropdown.css.js";
 import { Input } from "./Input/Input.js";
 import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input/Input.css.js";
+import { InputAmount } from "./Input/InputAmount.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
 import { Interstitial } from "./Interstitial/Interstitial.js";
@@ -228,6 +230,7 @@ export {
   ImageBillboardSet,
   ImageLinkSet,
   Input,
+  InputAmount,
   InputPhone,
   InputTextArea,
   Interstitial,
@@ -247,6 +250,7 @@ export {
   default29 as NavBarAXC,
   PageNavItem,
   PageNavSet,
+  QuickPricer,
   default16 as QuoteIconGrey,
   default17 as QuoteIconWhite,
   default18 as QuoteIconYellow,
@@ -328,6 +332,7 @@ export {
   buttons,
   calculator_description,
   calculator_headline,
+  checkbox_group,
   comparison,
   comparison_buttons,
   comparison_container,
@@ -464,6 +469,7 @@ export {
   section_text,
   section_text_ImageBillboard,
   section_theme,
+  section_title,
   selectInput,
   selection_headline_text,
   selection_section,

package/dist/themes/axos.css.d.ts

@@ -49,4 +49,8 @@ export declare const axosTheme: string, vars: {
             secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
+    table: {
+        highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };

package/dist/themes/axos.css.js

@@ -1,6 +1,6 @@
 /* empty css                                    */
 var axosTheme = "_1073cm80";
-var vars = { colors: { primary: { background: "var(--_1073cm81)", body: "var(--_1073cm82)", headline: "var(--_1073cm83)", textGradient: "var(--_1073cm84)", textButton: "var(--_1073cm85)", backgroundButton: "var(--_1073cm86)", border: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", body: "var(--_1073cm89)", headline: "var(--_1073cm8a)", textGradient: "var(--_1073cm8b)", textButton: "var(--_1073cm8c)", backgroundButton: "var(--_1073cm8d)", border: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", body: "var(--_1073cm8g)", headline: "var(--_1073cm8h)", textGradient: "var(--_1073cm8i)", textButton: "var(--_1073cm8j)", backgroundButton: "var(--_1073cm8k)", border: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", body: "var(--_1073cm8n)", headline: "var(--_1073cm8o)", textGradient: "var(--_1073cm8p)", textButton: "var(--_1073cm8q)", backgroundButton: "var(--_1073cm8r)", border: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } } };
+var vars = { colors: { primary: { background: "var(--_1073cm81)", body: "var(--_1073cm82)", headline: "var(--_1073cm83)", textGradient: "var(--_1073cm84)", textButton: "var(--_1073cm85)", backgroundButton: "var(--_1073cm86)", border: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", body: "var(--_1073cm89)", headline: "var(--_1073cm8a)", textGradient: "var(--_1073cm8b)", textButton: "var(--_1073cm8c)", backgroundButton: "var(--_1073cm8d)", border: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", body: "var(--_1073cm8g)", headline: "var(--_1073cm8h)", textGradient: "var(--_1073cm8i)", textButton: "var(--_1073cm8j)", backgroundButton: "var(--_1073cm8k)", border: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", body: "var(--_1073cm8n)", headline: "var(--_1073cm8o)", textGradient: "var(--_1073cm8p)", textButton: "var(--_1073cm8q)", backgroundButton: "var(--_1073cm8r)", border: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" } };
 export {
   axosTheme,
   vars

package/package.json

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