@axos-web-dev/shared-components 0.0.168 → 0.0.169

package/dist/assets/globals.css

@@ -1,17 +1,17 @@
 @keyframes _5fvzn90 {
   0% {
-    right: -10px;
+    left: 4px;
   }
   to {
-    right: -4px;
+    left: 0px;
   }
 }
 @keyframes _5fvzn91 {
   0% {
-    right: -4px;
+    left: 0px;
   }
   to {
-    right: -10px;
+    left: 4px;
   }
 }
 * {
@@ -21,8 +21,8 @@
 a {
   box-sizing: border-box;
   color: inherit;
-  padding: 0;
   margin: 0;
+  padding: 0;
 }
 a:not([class]):hover {
   opacity: 0.8;
@@ -30,34 +30,24 @@ a:not([class]):hover {
 body {
   font-family: var(--main-font-family);
   font-size: 16px;
-  line-height: 1.39;
   letter-spacing: 0.2px;
+  line-height: 1.39;
 }
 p {
   margin-bottom: 10px;
 }
-li p {
-  margin-bottom: 0;
-}
-p:last-child {
-  margin-bottom: 0;
-}
-p:only-child {
+li p, p:last-child, p:only-child {
   margin-bottom: 0;
 }
 .containment {
-  width: min(1200px, calc(100% - 4rem));
   box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
+  width: min(1200px, calc(100% - 4rem));
 }
 .section_spacer {
   margin-top: 3.5rem;
 }
-.flex {
-  display: flex;
-}
-[class*='flex_'] {
+.flex, [class*='flex_'] {
   display: flex;
 }
 .flex_row {
@@ -125,7 +115,7 @@ p:only-child {
 .expand {
   max-height: 20rem !important;
 }
-.p_small {
+.p_small, .fs_16 {
   font-size: 1rem;
   line-height: 1.5;
 }
@@ -142,12 +132,11 @@ p:only-child {
   padding: 48px 56px;
 }
 .supertag {
-  font-weight: 700;
+  display: flex;
+  font-family: var(--main-font-family);
   font-size: 14px;
+  font-weight: 700;
   line-height: 26px;
-  letter-spacing: 0.2px;
-  font-family: var(--main-font-family);
-  display: flex;
 }
 h1, h2, h3, h4, h5, h6, es_font {
   font-family: var(--header-font-family);
@@ -161,16 +150,14 @@ h1, h2, h3, h4, h5, h6, es_font {
   line-height: 1.25;
 }
 .header_3 {
-  font-weight: 600;
   font-size: 28px;
+  font-weight: 600;
   line-height: 36px;
-  letter-spacing: 0.2px;
 }
 .header_4 {
-  font-weight: 600;
   font-size: 20px;
+  font-weight: 600;
   line-height: 28px;
-  letter-spacing: 0.2px;
 }
 .gradient_text {
   background: linear-gradient(3deg, #051A3F 14.64%, #1E3860 48.42%, #4D85B0 85.36%);
@@ -188,7 +175,6 @@ h1, h2, h3, h4, h5, h6, es_font {
 .list_item {
   font-size: 1rem;
   line-height: 1.5rem;
-  letter-spacing: 0.2px;
   -webkit-box-align: start;
   align-items: flex-start;
 }
@@ -201,19 +187,18 @@ h1, h2, h3, h4, h5, h6, es_font {
   margin-top: 2px;
 }
 .btn_link {
-  font-weight: 600;
-  color: #323339;
-  letter-spacing: 0.2px;
-  padding: 0;
   background-color: transparent;
   border: 0;
-  text-transform: initial;
+  color: #323339;
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 600;
+  opacity: 1;
+  padding: 0;
   position: relative;
   text-decoration: none;
-  display: inline-block;
+  text-transform: initial;
   white-space: nowrap;
-  opacity: 1;
-  font-size: 16px;
 }
 .btn__secondary:hover {
   opacity: 1;
@@ -221,18 +206,18 @@ h1, h2, h3, h4, h5, h6, es_font {
 .sc__btn:hover {
   text-decoration: underline;
 }
-.sc__btn:hover > .arrow, .sc__btn:focus > .arrow {
-  animation: _5fvzn91 0.1s linear 0s 1 normal forwards;
-}
-.sc__btn:hover > .arrow {
+.sc__btn > .arrow {
   position: relative;
+  animation: _5fvzn90 0.1s linear 0s 1 normal forwards;
+}
+.sc__btn:hover > .arrow, .arrow, .sc__btn:focus-within > .arrow {
   transition: 0.3s;
-  animation: _5fvzn90 0.3s ease-out 0s 1 normal forwards;
+  animation: _5fvzn91 0.3s ease-out 0s 1 normal forwards;
 }
 .link {
   word-break: break-word;
 }
-.p_16 {
+.p_16, .fs_16 {
   font-size: 1rem;
   line-height: 1.5;
 }
@@ -246,9 +231,8 @@ a {
   display: none !important;
 }
 .section_header {
-  margin-left: auto;
-  margin-right: auto;
   margin-bottom: 2.5rem;
+  margin-inline: auto;
   max-width: 49.5rem;
   text-align: center;
 }
@@ -260,10 +244,7 @@ sup {
   position: relative;
   top: -0.5em;
 }
-p:empty {
-  display: none;
-}
-ul:empty {
+p:empty, ul:empty {
   display: none;
 }
 .margin_block {

package/dist/globals.css.js

@@ -1,2 +1,2 @@
-/* empty css                                             */
-/* empty css                               */
+/* empty css                                         */
+/* empty css                           */

package/dist/icons/ArrowIcon/ArrowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                     */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                             */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Arrow = createRuntimeFn({ defaultClassName: "_1pwixiv0", variantClassNames: { variant: { primary: "_1pwixiv1", secondary: "_1pwixiv2", tertiary: "_1pwixiv3" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/CheckIcon/CheckIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                     */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                             */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkColor = createRuntimeFn({ defaultClassName: "_1xajnqu0", variantClassNames: { variant: { primary: "_1xajnqu1", secondary: "_1xajnqu2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/DownloadIcon/DownloadIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                           */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                */
 var DownloadColor = "_1r03g400";
 export {
   DownloadColor

package/dist/icons/FollowIcon/FollowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                       */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                              */
 var FollowColor = "_1wjdwci0";
 export {
   FollowColor

package/dist/icons/Star/Star.css.js

@@ -1,4 +1,4 @@
-/* empty css                                           */
+/* empty css                        */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Star = createRuntimeFn({ defaultClassName: "mi4mae0", variantClassNames: { variant: { gold: "mi4mae1", gray: "mi4mae2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/index.css.js

@@ -1,3 +1,3 @@
-/* empty css                                             */
-/* empty css                               */
-/* empty css                             */
+/* empty css                                         */
+/* empty css                           */
+/* empty css                         */

package/dist/main.js

@@ -113,7 +113,6 @@ import "react";
 import { ImageLinkSet } from "./ImageLink/ImageLinkSet.js";
 import { Checkbox } from "./Input/Checkbox.js";
 import { CurrencyInput } from "./Input/CurrencyInput.js";
-import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { Dropdown } from "./Input/Dropdown.js";
 import { dp_input, selectInput } from "./Input/Dropdown.css.js";
 import { Input } from "./Input/Input.js";
@@ -121,6 +120,7 @@ import { container, helperText, iconContainer, iconContainerBase, iconInput, inp
 import { InputAmount } from "./Input/InputAmount.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
+import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
 import { featured_center_vertical, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";

package/dist/themes/axos.css.js

@@ -1,4 +1,4 @@
-/* empty css                                    */
+/* 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)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" }, footer: { link: { color: "var(--_1073cm811)" } } };
 export {

package/dist/themes/premier.css.js

@@ -1,5 +1,5 @@
-/* empty css                                    */
-/* empty css                                       */
+/* empty css                        */
+/* empty css                           */
 var premierTheme = "_1es6o1h0";
 export {
   premierTheme

package/package.json

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

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

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

package/dist/Input/DatePicker.css.js

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

package/dist/Input/DatePicker2.d.ts

@@ -1,21 +0,0 @@
-import { SyntheticEvent } from 'react';
-
-type TClasses = {
-    inputDateField?: string;
-};
-type TProps = {
-    classes?: TClasses;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    locale?: Locale;
-    maxDate?: Date | null;
-    minDate?: Date | null;
-    onChange: (value: Date | null) => void;
-    onFieldClear?: (event: SyntheticEvent) => void;
-    placeholder?: string;
-    subTitle?: string;
-    title?: string;
-    value: Date | null;
-};
-export declare const InputDateField: import('react').NamedExoticComponent<TProps>;
-export {};

package/dist/Input/DatePicker2.js

@@ -1,103 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverButton, Transition, PopoverPanel, TransitionChild } from "@headlessui/react";
-import clsx from "clsx";
-import { format } from "date-fns";
-import isNil from "lodash/isNil.js";
-import { memo, createRef, Fragment } from "react";
-import { FORMAT_DATE } from "../utils/constants/format.js";
-import { POPOVER_POSITION_STYLES } from "../utils/constants/popper.js";
-import { usePopover } from "../utils/hooks/usePopover.js";
-import { DatePicker } from "./DatePickerComponents/DatePicker.js";
-import { InputDate } from "./DatePickerComponents/InputDate.js";
-const InputDateFieldComponent = (props) => {
-  const {
-    classes,
-    isDisabled,
-    isInvalid,
-    locale,
-    maxDate,
-    minDate,
-    onChange,
-    onFieldClear,
-    placeholder,
-    subTitle,
-    title,
-    value
-  } = props;
-  const triggerRef = createRef();
-  const formattedValue = !isNil(value) ? format(value, FORMAT_DATE, { locale }) : null;
-  const date = !isNil(value) ? value : void 0;
-  const maxDateValue = !isNil(maxDate) ? maxDate : void 0;
-  const minDateValue = !isNil(minDate) ? minDate : void 0;
-  const {
-    attributes,
-    onPopperElement,
-    onReferenceElement,
-    popoverPosition,
-    styles
-  } = usePopover({
-    triggerRef
-  });
-  return /* @__PURE__ */ jsx("div", { className: clsx("InputDateField", classes?.inputDateField), children: /* @__PURE__ */ jsxs(Popover, { className: "HeadlessPopover", children: [
-    /* @__PURE__ */ jsx(
-      PopoverButton,
-      {
-        className: "HeadlessPopover-Button",
-        ref: onReferenceElement,
-        children: /* @__PURE__ */ jsx("div", { className: "HeadlessPopover-Trigger", ref: triggerRef, children: /* @__PURE__ */ jsx(
-          InputDate,
-          {
-            isDisabled,
-            isInvalid,
-            onFieldClear,
-            placeholder,
-            subTitle,
-            title,
-            value: formattedValue
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx(Transition, { as: Fragment, children: /* @__PURE__ */ jsx(
-      PopoverPanel,
-      {
-        className: clsx(
-          "HeadlessPopover-Panel",
-          `HeadlessPopover-Panel__${POPOVER_POSITION_STYLES[popoverPosition]}`
-        ),
-        ref: onPopperElement,
-        style: styles.popper,
-        ...attributes.popper,
-        children: ({ close }) => /* @__PURE__ */ jsx(
-          TransitionChild,
-          {
-            enter: "HeadlessPopover-Transition__enter",
-            enterFrom: "HeadlessPopover-Transition__enterFrom",
-            enterTo: "HeadlessPopover-Transition__enterTo",
-            leave: "HeadlessPopover-Transition__leave",
-            leaveFrom: "HeadlessPopover-Transition__leaveFrom",
-            leaveTo: "HeadlessPopover-Transition__leaveTo",
-            children: /* @__PURE__ */ jsx("div", { className: "HeadlessPopover-PanelContent", children: /* @__PURE__ */ jsx(
-              DatePicker,
-              {
-                locale,
-                maxDate: maxDateValue,
-                minDate: minDateValue,
-                onChange: (date2) => {
-                  onChange(date2);
-                  close();
-                },
-                value: date
-              }
-            ) })
-          }
-        )
-      }
-    ) })
-  ] }) });
-};
-const InputDateField = memo(InputDateFieldComponent);
-export {
-  InputDateField
-};

package/dist/Input/DatePickerComponents/DatePicker.d.ts

@@ -1,11 +0,0 @@
-import { CalendarProps } from 'react-date-range';
-
-type TProps = {
-    locale?: Locale;
-    maxDate?: Date;
-    minDate?: Date;
-    onChange?: (date: Date) => void;
-    value?: Date;
-} & CalendarProps;
-export declare const DatePicker: import('react').NamedExoticComponent<TProps>;
-export {};

package/dist/Input/DatePickerComponents/DatePicker.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { Calendar } from "react-date-range";
-/* empty css                                                  */
-/* empty css                                                         */
-const DatePickerComponent = (props) => {
-  const { locale, onChange, value } = props;
-  return /* @__PURE__ */ jsx(Calendar, { ...props, date: value, locale, onChange });
-};
-const DatePicker = memo(DatePickerComponent);
-export {
-  DatePicker
-};

package/dist/Input/DatePickerComponents/InputDate.d.ts

@@ -1,15 +0,0 @@
-import { SyntheticEvent } from 'react';
-
-type TProps = {
-    className?: string;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    onClick?: (event: SyntheticEvent) => void;
-    onFieldClear?: (event: SyntheticEvent) => void;
-    placeholder?: string;
-    subTitle?: string;
-    title?: string;
-    value?: string | null;
-};
-export declare const InputDate: import('react').NamedExoticComponent<TProps>;
-export {};

package/dist/Input/DatePickerComponents/InputDate.js

@@ -1,66 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { CalendarIcon } from "../../icons/CalendarIcon/CalendarIcon.js";
-import clsx from "clsx";
-import { memo } from "react";
-const InputDateComponent = (props) => {
-  const {
-    className,
-    isDisabled,
-    isInvalid,
-    onClick,
-    onFieldClear,
-    placeholder,
-    subTitle,
-    title,
-    value
-  } = props;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx("InputDate", className, {
-        InputDate__isDisabled: isDisabled,
-        InputDate__isInvalid: isInvalid && !isDisabled
-      }),
-      onClick: !isDisabled ? onClick : void 0,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "InputDate-Inner", children: [
-          /* @__PURE__ */ jsxs("div", { className: "InputDate-Title", children: [
-            title,
-            " "
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: clsx("InputDate-IconWrapper", {
-                "InputDate-IconWrapper__isFocusable": !isDisabled
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx("InputDate-Text", {
-                      "InputDate-Text__isFilled": value && !isDisabled,
-                      "InputDate-Text__isPlaceholder": !value
-                    }),
-                    children: value ?? placeholder
-                  }
-                ),
-                value && /* @__PURE__ */ jsx("div", { className: "InputDate-PostIcon", onClick: onFieldClear }),
-                /* @__PURE__ */ jsx("div", { className: "InputDate-DatePickerIcon", children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "InputDate-Text__isInvalid" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "InputDate-SubTitle", children: [
-          subTitle,
-          " "
-        ] })
-      ]
-    }
-  );
-};
-const InputDate = memo(InputDateComponent);
-export {
-  InputDate
-};

package/dist/Input/DatePickerComponents/index.d.ts

@@ -1,2 +0,0 @@
-export * from './DatePicker';
-export * from './InputDate';

package/dist/Input/DatePickerComponents/index.js

@@ -1,6 +0,0 @@
-import { DatePicker } from "./DatePicker.js";
-import { InputDate } from "./InputDate.js";
-export {
-  DatePicker,
-  InputDate
-};

package/dist/Input/Datepicker.d.ts

@@ -1,3 +0,0 @@
-import { DatepickerInputProps } from './InputProps';
-
-export declare const DatePickerInput: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/Datepicker.js

@@ -1,47 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import DatePicker from "react-date-picker";
-import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
-const DatePickerInput = (props) => {
-  const {
-    disabled,
-    label,
-    iconLeft,
-    iconRight,
-    sizes,
-    error = false,
-    helperText: helper,
-    variant
-  } = props;
-  const [value, onChange] = useState();
-  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(
-        DatePicker,
-        {
-          dayPlaceholder: "dd",
-          monthPlaceholder: "mm",
-          yearPlaceholder: "yyyy",
-          minDate: /* @__PURE__ */ new Date(),
-          onChange,
-          value
-        }
-      ),
-      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 {
-  DatePickerInput
-};

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

@@ -1,6 +0,0 @@
-export declare const calendarContainer: string;
-export declare const calendarIcon: string;
-export declare const inputDate: string;
-export declare const verticalCenter: string;
-export declare const calendar: string;
-export declare const headerCalendar: string;

package/dist/Input/InputDate.css.js

@@ -1,15 +0,0 @@
-/* empty css                                        */
-var calendarContainer = "skzved0";
-var calendarIcon = "skzved1";
-var inputDate = "skzved2";
-var verticalCenter = "skzved3";
-var calendar = "skzved4";
-var headerCalendar = "skzved5";
-export {
-  calendar,
-  calendarContainer,
-  calendarIcon,
-  headerCalendar,
-  inputDate,
-  verticalCenter
-};

package/dist/Input/InputDate.d.ts

@@ -1,3 +0,0 @@
-import { DatepickerInputProps } from './InputProps';
-
-export declare const InputDate: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;