@bethinkpl/design-system 26.1.0 → 26.1.1

package/dist/lib/js/components/Banner/Banner.vue.d.ts

@@ -190,6 +190,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -412,6 +413,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -801,6 +803,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1150,6 +1153,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
                 readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+                readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Buttons/Button/Button.vue.d.ts

@@ -145,6 +145,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts

@@ -151,6 +151,7 @@ declare const _default: import('vue').DefineComponent<{}, {
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -500,6 +501,7 @@ declare const _default: import('vue').DefineComponent<{}, {
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts

@@ -171,6 +171,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/Chip/Chip.vue.d.ts

@@ -145,6 +145,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -492,6 +493,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -841,6 +843,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
                 readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+                readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
                 readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.composables.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from 'vue';
+import { Instance as DatePickerInstance } from 'flatpickr/dist/types/instance';
+import { DatePickerCalendarPositions } from './index';
+
+export interface DatePickerComposablesProps {
+    disableDates: Array<Date>;
+    minDate: Date | null;
+    maxDate: Date | null;
+    calendarPosition: DatePickerCalendarPositions;
+}
+interface InitFlatpickrPrams {
+    props: DatePickerComposablesProps;
+    onChange: (dates: Array<Date>) => void;
+    defaultDates: Date | Array<Date>;
+    mode: 'single' | 'range';
+}
+interface InitFlatpickr {
+    datePicker: DatePickerInstance | null;
+    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement) => Promise<DatePickerInstance | undefined>;
+    isOpen: Ref<boolean>;
+    toggle: () => void;
+}
+export declare function initFlatpickr({ props, onChange, defaultDates, mode, }: InitFlatpickrPrams): InitFlatpickr;
+export {};

package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.consts.d.ts

@@ -25,3 +25,6 @@ export declare const DATE_PICKER_TRIGGER_TYPES: {
     TILE: string;
 };
 export declare type DatePickerTriggerTypes = Value<typeof DATE_PICKER_TRIGGER_TYPES>;
+export declare const FLATPICKR_POSITIONS: {
+    readonly [x: string]: "below left" | "below right" | "below" | "above left" | "above right" | "above";
+};

package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts

@@ -1,8 +1,33 @@
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
+import { TileColors, TileStates } from '../../Tile';
+import { DatePickerStates } from './DatePicker.consts';
 
-declare const _default: import('vue').DefineComponent<{}, {}, {
-    datePicker: null;
-    isOpen: boolean;
+declare const _default: import('vue').DefineComponent<{
+    disableDates: Date[];
+    minDate: Date | null;
+    maxDate: Date | null;
+    calendarPosition: string;
+    date: Date;
+    isInteractive: boolean;
+    state: DatePickerStates;
+}, {
+    flatpickrInputRef: Ref<HTMLInputElement, HTMLInputElement>;
+    datePickerRef: Ref<HTMLDivElement, HTMLDivElement>;
+    isOpen: Ref<boolean, boolean>;
+    toggleDatePicker: () => void;
+    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement) => Promise<import('flatpickr/dist/types/instance').Instance | undefined>;
+    DATE_PICKER_CALENDAR_POSITIONS: Readonly<{
+        TOP: string;
+        TOP_LEFT: string;
+        TOP_RIGHT: string;
+        BOTTOM: string;
+        BOTTOM_LEFT: string;
+        BOTTOM_RIGHT: string;
+    }>;
+    DATE_PICKER_COLORS: Readonly<{
+        NEUTRAL: string;
+        WARNING: string;
+    }>;
     DATE_PICKER_STATES: Readonly<{
         DEFAULT: string;
         DISABLED: string;
@@ -12,20 +37,26 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         BOX: string;
         TILE: string;
     }>;
-}, {
-    isDatePickerEnabled(): any;
+}, {}, {
     eyebrowText(): string;
     text(): any;
     tileIcon(): any;
-    flatpickrConfigString(): any[];
 }, {
     toggle(): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    'update:date': () => true;
-}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
-    "onUpdate:date"?: (() => any) | undefined;
+    'update:date': (date: Date) => true;
+}, string, import('vue').PublicProps, Readonly<{
+    disableDates: Date[];
+    minDate: Date | null;
+    maxDate: Date | null;
+    calendarPosition: string;
+    date: Date;
+    isInteractive: boolean;
+    state: DatePickerStates;
+}> & Readonly<{
+    "onUpdate:date"?: ((date: Date) => any) | undefined;
 }>, {
-    icon: Record<string, any> | null;
+    icon: any;
     label: string;
     color: string;
     state: string;
@@ -33,15 +64,72 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
     isLabelUppercase: boolean;
     isInteractive: boolean;
     placeholder: string;
-    date: Date;
     triggerType: string;
-    calendarPosition: string;
+    date: Date;
     errorMessage: string;
-    disableDates: unknown[];
+    calendarPosition: string;
+    disableDates: Date[];
     minDate: Date;
     maxDate: Date;
 }, {}, {
-    DatePickerBox: import('vue').DefineComponent<{}, {}, {
+    DsTile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        interactive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        iconLeft: {
+            type: ObjectConstructor;
+            default: null;
+            validator(iconLeft: any): boolean;
+        };
+        iconRight: {
+            type: ObjectConstructor;
+            default: null;
+            validator(iconRight: any): boolean;
+        };
+        isIconRightHiddenOnMobile: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        text: {
+            type: StringConstructor;
+            required: boolean;
+        };
+        eyebrowText: {
+            type: StringConstructor;
+            default: null;
+        };
+        additionalText: {
+            type: StringConstructor;
+            default: null;
+        };
+        color: {
+            type: PropType<TileColors>;
+            default: "neutral";
+            validator(color: any): boolean;
+        };
+        isEyebrowTextUppercase: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        state: {
+            type: PropType<TileStates>;
+            default: "default";
+            validator(value: import('../../../utils/type.utils').Value<{
+                readonly DEFAULT: "default";
+                readonly DISABLED: "disabled";
+                readonly LOADING: "loading";
+            }>): boolean;
+        };
+        eyebrowEllipsis: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        textEllipsis: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {}, {
         ICONS: Readonly<{
             readonly HEAD_WITH_QUESTION_MARK: VueConstructor<Vue>;
             readonly RIBBON: VueConstructor<Vue>;
@@ -188,6 +276,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -255,27 +344,83 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             X_LARGE: string;
             XX_LARGE: string;
         }>;
-        DATE_PICKER_STATES: Readonly<{
-            DEFAULT: string;
-            DISABLED: string;
-            LOADING: string;
-        }>;
-        DATE_PICKER_COLORS: Readonly<{
-            NEUTRAL: string;
-            WARNING: string;
+        TILE_STATES: Readonly<{
+            readonly DEFAULT: "default";
+            readonly DISABLED: "disabled";
+            readonly LOADING: "loading";
         }>;
     }, {
-        text(): any;
-    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {
-        icon: Record<string, any>;
-        color: string;
-        state: string;
-        isIconHiddenOnMobile: boolean;
+        tileColor(): any;
+        tileState(): any;
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        interactive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        iconLeft: {
+            type: ObjectConstructor;
+            default: null;
+            validator(iconLeft: any): boolean;
+        };
+        iconRight: {
+            type: ObjectConstructor;
+            default: null;
+            validator(iconRight: any): boolean;
+        };
+        isIconRightHiddenOnMobile: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        text: {
+            type: StringConstructor;
+            required: boolean;
+        };
+        eyebrowText: {
+            type: StringConstructor;
+            default: null;
+        };
+        additionalText: {
+            type: StringConstructor;
+            default: null;
+        };
+        color: {
+            type: PropType<TileColors>;
+            default: "neutral";
+            validator(color: any): boolean;
+        };
+        isEyebrowTextUppercase: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        state: {
+            type: PropType<TileStates>;
+            default: "default";
+            validator(value: import('../../../utils/type.utils').Value<{
+                readonly DEFAULT: "default";
+                readonly DISABLED: "disabled";
+                readonly LOADING: "loading";
+            }>): boolean;
+        };
+        eyebrowEllipsis: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        textEllipsis: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        color: TileColors;
+        state: TileStates;
+        iconLeft: Record<string, any>;
+        iconRight: Record<string, any>;
+        interactive: boolean;
+        isIconRightHiddenOnMobile: boolean;
         eyebrowText: string;
-        isInteractive: boolean;
-        placeholder: string;
-        date: Date;
-        isOpen: boolean;
+        additionalText: string;
+        isEyebrowTextUppercase: boolean;
+        eyebrowEllipsis: boolean;
+        textEllipsis: boolean;
     }, {}, {
         DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {
@@ -356,64 +501,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             FontAwesomeIcon: import('vue').DefineComponent<import('@fortawesome/vue-fontawesome').FontAwesomeIconProps, {}, {}, import('vue').ComputedOptions, import('vue').MethodOptions, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('@fortawesome/vue-fontawesome').FontAwesomeIconProps>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
         }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    DsTile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        interactive: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        iconLeft: {
-            type: ObjectConstructor;
-            default: null;
-            validator(iconLeft: any): boolean;
-        };
-        iconRight: {
-            type: ObjectConstructor;
-            default: null;
-            validator(iconRight: any): boolean;
-        };
-        isIconRightHiddenOnMobile: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        text: {
-            type: StringConstructor;
-            required: boolean;
-        };
-        eyebrowText: {
-            type: StringConstructor;
-            default: null;
-        };
-        additionalText: {
-            type: StringConstructor;
-            default: null;
-        };
-        color: {
-            type: PropType<import('../../Tile').TileColors>;
-            default: "neutral";
-            validator(color: any): boolean;
-        };
-        isEyebrowTextUppercase: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        state: {
-            type: PropType<import('../../Tile').TileStates>;
-            default: "default";
-            validator(value: import('../../../utils/type.utils').Value<{
-                readonly DEFAULT: "default";
-                readonly DISABLED: "disabled";
-                readonly LOADING: "loading";
-            }>): boolean;
-        };
-        eyebrowEllipsis: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        textEllipsis: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {}, {
+    DatePickerBox: import('vue').DefineComponent<{}, {}, {
         ICONS: Readonly<{
             readonly HEAD_WITH_QUESTION_MARK: VueConstructor<Vue>;
             readonly RIBBON: VueConstructor<Vue>;
@@ -560,6 +648,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+            readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
             readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -627,83 +716,31 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             X_LARGE: string;
             XX_LARGE: string;
         }>;
-        TILE_STATES: Readonly<{
-            readonly DEFAULT: "default";
-            readonly DISABLED: "disabled";
-            readonly LOADING: "loading";
+        DATE_PICKER_STATES: Readonly<{
+            DEFAULT: string;
+            DISABLED: string;
+            LOADING: string;
+        }>;
+        DATE_PICKER_COLORS: Readonly<{
+            NEUTRAL: string;
+            WARNING: string;
         }>;
     }, {
-        tileColor(): any;
-        tileState(): any;
-    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        interactive: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        iconLeft: {
-            type: ObjectConstructor;
-            default: null;
-            validator(iconLeft: any): boolean;
-        };
-        iconRight: {
-            type: ObjectConstructor;
-            default: null;
-            validator(iconRight: any): boolean;
-        };
-        isIconRightHiddenOnMobile: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        text: {
-            type: StringConstructor;
-            required: boolean;
-        };
-        eyebrowText: {
-            type: StringConstructor;
-            default: null;
-        };
-        additionalText: {
-            type: StringConstructor;
-            default: null;
-        };
-        color: {
-            type: PropType<import('../../Tile').TileColors>;
-            default: "neutral";
-            validator(color: any): boolean;
-        };
-        isEyebrowTextUppercase: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        state: {
-            type: PropType<import('../../Tile').TileStates>;
-            default: "default";
-            validator(value: import('../../../utils/type.utils').Value<{
-                readonly DEFAULT: "default";
-                readonly DISABLED: "disabled";
-                readonly LOADING: "loading";
-            }>): boolean;
-        };
-        eyebrowEllipsis: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        textEllipsis: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        color: import('../../Tile').TileColors;
-        state: import('../../Tile').TileStates;
-        iconLeft: Record<string, any>;
-        iconRight: Record<string, any>;
-        interactive: boolean;
-        isIconRightHiddenOnMobile: boolean;
-        eyebrowText: string;
-        additionalText: string;
-        isEyebrowTextUppercase: boolean;
-        eyebrowEllipsis: boolean;
-        textEllipsis: boolean;
+        startDateText(): any;
+        endDateText(): string;
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {
+        color: string;
+        state: string;
+        isInteractive: boolean;
+        placeholder: string;
+        startDate: Date;
+        endDate: Date;
+        startIcon: Record<string, any>;
+        endIcon: Record<string, any>;
+        areIconsHiddenOnMobile: boolean;
+        startDateEyebrowText: string;
+        endDateEyebrowText: string;
+        isOpen: boolean;
     }, {}, {
         DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {

package/dist/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue.d.ts

@@ -145,6 +145,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         readonly FA_MEMO_CIRCLE_INFO: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_CIRCLE_INFO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MESSAGE_QUESTION_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MESSAGE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MONEY_BILL1: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MUSIC: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -222,16 +223,20 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         WARNING: string;
     }>;
 }, {
-    text(): any;
+    startDateText(): any;
+    endDateText(): string;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {
-    icon: Record<string, any>;
     color: string;
     state: string;
-    isIconHiddenOnMobile: boolean;
-    eyebrowText: string;
     isInteractive: boolean;
     placeholder: string;
-    date: Date;
+    startDate: Date;
+    endDate: Date;
+    startIcon: Record<string, any>;
+    endIcon: Record<string, any>;
+    areIconsHiddenOnMobile: boolean;
+    startDateEyebrowText: string;
+    endDateEyebrowText: string;
     isOpen: boolean;
 }, {}, {
     DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{