@axos-web-dev/shared-components 0.0.213 → 0.0.215

package/dist/ImageLink/ImageLinkSet.js

@@ -2,16 +2,16 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { buttons } from "../IconBillboard/IconBillboard.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/VideoTile.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Modal/Modal.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
-/* empty css                                   */
 /* empty css                                    */
+/* empty css                                       */
+/* empty css                                        */
+/* empty css                                                        */
 /* empty css                                                    */
-/* empty css                                                */
 import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
 import "clsx";
-/* empty css                                          */
-/* empty css                                          */
+/* empty css                                              */
+/* empty css                                              */
 import { Chevron } from "../Chevron/index.js";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
@@ -51,69 +51,69 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Chevron/Chevron.css.js";
 import "../Interstitial/Interstitial-variants.css.js";
 import "../Inputs/Input.css.js";
-/* empty css                                                         */
+/* empty css                                                             */
 import "../Hyperlink/Hyperlink.css.js";
-/* empty css                                                      */
+/* empty css                                                          */
 import "iframe-resizer";
-/* empty css                                                                                */
+/* empty css                                                                                    */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+/* empty css                                                  */
 /* empty css                                              */
-/* empty css                                          */
-/* empty css                                                    */
+/* empty css                                                        */
 import "../Carousel/index.js";
-/* empty css                                                                    */
+/* empty css                                                                        */
 import "../Comparison/Comparison.css.js";
 import "../Tab/Tab.css.js";
 import "../icons/Star/Star.css.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
+/* empty css                                                  */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                          */
-/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                             */
 import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import ImageLink from "./ImageLink.js";
-/* empty css                                              */
-/* empty css                                                      */
-/* empty css                                            */
-/* empty css                                    */
+/* empty css                                                  */
+/* empty css                                                          */
+/* empty css                                                */
+/* empty css                                        */
 import "../LandingPageHeader/LandingPageHeader.css.js";
-/* empty css                                */
+/* empty css                                    */
 import "../Modal/contextApi/store.js";
-/* empty css                                                      */
-/* empty css                                                         */
-/* empty css                                                              */
-/* empty css                                                                 */
-/* empty css                                                   */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                                  */
+/* empty css                                                                     */
+/* empty css                                                       */
 import "../NavigationMenu/AxosBank/NavData.js";
 import "next/image.js";
 import "next/link.js";
 import "next/navigation.js";
-/* empty css                                                      */
-/* empty css                                                       */
+/* empty css                                                          */
+/* empty css                                                           */
 import "../NavigationMenu/AxosALTS/NavData.js";
-/* empty css                                                   */
-/* empty css                                                     */
+/* empty css                                                       */
+/* empty css                                                         */
 import "../NavigationMenu/LaVictoire/NavData.js";
 import "../PageNavItem/PageNavItem.css.js";
 import "react-slick";
-/* empty css                                                 */
-/* empty css                                          */
-/* empty css                                                    */
-/* empty css                                                  */
+/* empty css                                                     */
+/* empty css                                              */
+/* empty css                                                        */
+/* empty css                                                      */
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
-/* empty css                                        */
-/* empty css                                                  */
-/* empty css                                                */
+/* empty css                                            */
+/* empty css                                                      */
+/* empty css                                                    */
 import "next/script.js";
-/* empty css                                        */
-/* empty css                                              */
+/* empty css                                            */
+/* empty css                                                  */
 import { image_link_set } from "./ImageLink.css.js";
 const ImageLinkSet = (props) => {
   const { callToActionRow, icon } = props;

package/dist/ImageLink/index.js

@@ -3,11 +3,11 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/VideoTile.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/Modal/Modal.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
-/* empty css                                   */
 /* empty css                                    */
+/* empty css                                       */
+/* empty css                                        */
+/* empty css                                                        */
 /* empty css                                                    */
-/* empty css                                                */
 import "clsx";
 import "react";
 import "../Chevron/Chevron.css.js";
@@ -15,10 +15,10 @@ import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
-/* empty css                                          */
-/* empty css                                          */
+/* empty css                                              */
+/* empty css                                              */
 import "../Interstitial/Interstitial-variants.css.js";
-/* empty css                                */
+/* empty css                                    */
 import "../Modal/contextApi/store.js";
 import "../Button/Button.css.js";
 import "react-use";
@@ -48,17 +48,17 @@ import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Inputs/Input.css.js";
-/* empty css                                                         */
-/* empty css                                                      */
+/* empty css                                                             */
+/* empty css                                                          */
 import "iframe-resizer";
-/* empty css                                                                                */
+/* empty css                                                                                    */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+/* empty css                                                  */
 /* empty css                                              */
-/* empty css                                          */
-/* empty css                                                    */
+/* empty css                                                        */
 import "../Carousel/index.js";
-/* empty css                                                                    */
+/* empty css                                                                        */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/LargeBanner.css.js";
@@ -67,48 +67,48 @@ import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";
 import "../icons/Star/Star.css.js";
 import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
+/* empty css                                                  */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                          */
-/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                             */
 import "../ImageBillboard/ImageBillboard.css.js";
 import { ImageLinkSet } from "./ImageLinkSet.js";
-/* empty css                                              */
-/* empty css                                                      */
-/* empty css                                            */
-/* empty css                                    */
+/* empty css                                                  */
+/* empty css                                                          */
+/* empty css                                                */
+/* empty css                                        */
 import "../LandingPageHeader/LandingPageHeader.css.js";
-/* empty css                                                      */
-/* empty css                                                         */
-/* empty css                                                              */
-/* empty css                                                                 */
-/* empty css                                                   */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                                  */
+/* empty css                                                                     */
+/* empty css                                                       */
 import "../NavigationMenu/AxosBank/NavData.js";
 import "next/image.js";
 import "next/link.js";
 import "next/navigation.js";
-/* empty css                                                      */
-/* empty css                                                       */
+/* empty css                                                          */
+/* empty css                                                           */
 import "../NavigationMenu/AxosALTS/NavData.js";
-/* empty css                                                   */
-/* empty css                                                     */
+/* empty css                                                       */
+/* empty css                                                         */
 import "../NavigationMenu/LaVictoire/NavData.js";
 import "../PageNavItem/PageNavItem.css.js";
 import "react-slick";
-/* empty css                                                 */
-/* empty css                                          */
-/* empty css                                                    */
-/* empty css                                                  */
+/* empty css                                                     */
+/* empty css                                              */
+/* empty css                                                        */
+/* empty css                                                      */
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
-/* empty css                                        */
-/* empty css                                                  */
-/* empty css                                                */
+/* empty css                                            */
+/* empty css                                                      */
+/* empty css                                                    */
 import "next/script.js";
-/* empty css                                        */
-/* empty css                                              */
+/* empty css                                            */
+/* empty css                                                  */
 import "../Hyperlink/Hyperlink.css.js";
 export {
   ImageLinkSet

package/dist/Input/Checkbox.css.js

@@ -1,4 +1,4 @@
-import '../assets/Input/Checkbox.css';/* empty css                            */
+/* empty css                                       */
 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: [] });

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

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

package/dist/Input/DatePicker.css.js

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

package/dist/Input/DatePicker2.d.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,103 @@
+"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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,66 @@
+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

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

package/dist/Input/DatePickerComponents/index.js

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

package/dist/Input/Datepicker.d.ts

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

package/dist/Input/Datepicker.js

@@ -0,0 +1,47 @@
+"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/Dropdown.css.js

@@ -1,5 +1,5 @@
-import '../assets/Input/Dropdown.css';import '../assets/Typography/Typography.css';/* empty css                                          */
-/* empty css                            */
+/* empty css                                              */
+/* empty css                                       */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var selectInput = "_1vzv2cd0";
 var dp_input = createRuntimeFn({ defaultClassName: "_1vzv2cd1", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });

package/dist/Input/Input.css.js

@@ -1,8 +1,8 @@
-import '../assets/Input/Input.css';import '../assets/Input/Checkbox.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
-/* empty css                                   */
 /* empty css                                    */
-/* empty css                            */
-/* empty css                         */
+/* 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" }, isCheckbox: { true: "_18du0lab" } }, defaultVariants: {}, compoundVariants: [] });

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,15 @@
+/* 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

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