@wizleap-inc/wiz-ui-next 2.0.0 → 2.2.0

package/dist/components/base/calendar/calendar.vue.d.ts

@@ -16,17 +16,27 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    /**
+     * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可です。
+     * @param date
+     * @returns {boolean} `true`: 無効な日付, `false`: 有効な日付
+     */
+    disabledDate: {
+        type: PropType<(date: Date) => boolean>;
+        required: false;
+        default: () => boolean;
+    };
 }, {
     emits: (e: "click", value: Date) => void;
     props: any;
     calendars: import("vue").ComputedRef<string[][]>;
     isCurrentMonth: (row: number, col: number) => boolean;
-    getDateState: import("vue").ComputedRef<(row: number, col: number) => import("./types").DateState | "outOfCurrentMonth" | "inCurrentMonth">;
+    getDateState: import("vue").ComputedRef<(row: number, col: number) => import("./types").DateState | "outOfCurrentMonth" | "disabledDate" | "inCurrentMonth">;
     updateSelectedDate: (row: number, col: number, day: string) => void;
     readonly WEEK_LIST_JP: string[];
     readonly calendarCellStyle: string;
     readonly calendarItemCommonStyle: string;
-    readonly calendarItemStyle: Record<"primary" | "secondary" | "dayOfWeek" | "inCurrentMonth" | "outOfCurrentMonth", string>;
+    readonly calendarItemStyle: Record<"primary" | "disabledDate" | "secondary" | "dayOfWeek" | "inCurrentMonth" | "outOfCurrentMonth", string>;
     readonly calendarStyle: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     currentMonth: {
@@ -44,11 +54,22 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    /**
+     * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可です。
+     * @param date
+     * @returns {boolean} `true`: 無効な日付, `false`: 有効な日付
+     */
+    disabledDate: {
+        type: PropType<(date: Date) => boolean>;
+        required: false;
+        default: () => boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     currentMonth: Date;
     activeDates: DateStatus[];
     filledWeeks: boolean;
+    disabledDate: (date: Date) => boolean;
 }>;
 export default _sfc_main;

package/dist/components/base/header/header.vue.d.ts

@@ -1,10 +1,5 @@
 import { PropType } from "vue";
 declare const _sfc_main: import("vue").DefineComponent<{
-    isOpen: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
     gapLeft: {
         type: PropType<"at" | "no" | "xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "max">;
         required: false;
@@ -18,8 +13,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
     };
 }, {
-    props: any;
-    emits: (e: "click", value: boolean) => void;
+    emits: (e: "onToggle") => void;
     toggleMenuOpen: () => void;
     currentZIndex: import("vue").ComputedRef<number>;
     readonly headerStyle: string;
@@ -548,12 +542,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         variant: "transparent" | "link" | "sub" | "primary";
     }>;
     readonly WizIMenu: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    isOpen: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onToggle"[], "onToggle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     gapLeft: {
         type: PropType<"at" | "no" | "xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "max">;
         required: false;
@@ -567,9 +556,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
     };
 }>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
+    onOnToggle?: ((...args: any[]) => any) | undefined;
 }, {
-    isOpen: boolean;
     sticky: boolean;
 }>;
 export default _sfc_main;

package/dist/components/base/inputs/date-picker/date-picker.vue.d.ts

@@ -38,6 +38,16 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    /**
+     * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
+     * @param date
+     * @returns {boolean} `true`: 無効な日付, `false`: 有効な日付
+     */
+    disabledDate: {
+        type: PropType<(date: Date) => boolean>;
+        required: false;
+        default: () => boolean;
+    };
 }, {
     props: any;
     emit: {
@@ -169,17 +179,22 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
             default: boolean;
         };
+        disabledDate: {
+            type: PropType<(date: Date) => boolean>;
+            required: false;
+            default: () => boolean;
+        };
     }, {
         emits: (e: "click", value: Date) => void;
         props: any;
         calendars: import("vue").ComputedRef<string[][]>;
         isCurrentMonth: (row: number, col: number) => boolean;
-        getDateState: import("vue").ComputedRef<(row: number, col: number) => import("../../calendar/types").DateState | "outOfCurrentMonth" | "inCurrentMonth">;
+        getDateState: import("vue").ComputedRef<(row: number, col: number) => import("../../calendar/types").DateState | "outOfCurrentMonth" | "disabledDate" | "inCurrentMonth">;
         updateSelectedDate: (row: number, col: number, day: string) => void;
         readonly WEEK_LIST_JP: string[];
         readonly calendarCellStyle: string;
         readonly calendarItemCommonStyle: string;
-        readonly calendarItemStyle: Record<"primary" | "secondary" | "dayOfWeek" | "inCurrentMonth" | "outOfCurrentMonth", string>;
+        readonly calendarItemStyle: Record<"primary" | "disabledDate" | "secondary" | "dayOfWeek" | "inCurrentMonth" | "outOfCurrentMonth", string>;
         readonly calendarStyle: string;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         currentMonth: {
@@ -197,12 +212,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
             default: boolean;
         };
+        disabledDate: {
+            type: PropType<(date: Date) => boolean>;
+            required: false;
+            default: () => boolean;
+        };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
     }, {
         currentMonth: Date;
         activeDates: import("../../calendar/types").DateStatus[];
         filledWeeks: boolean;
+        disabledDate: (date: Date) => boolean;
     }>;
     readonly WizHStack: import("vue").DefineComponent<{
         align: {
@@ -1587,6 +1608,16 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    /**
+     * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
+     * @param date
+     * @returns {boolean} `true`: 無効な日付, `false`: 有効な日付
+     */
+    disabledDate: {
+        type: PropType<(date: Date) => boolean>;
+        required: false;
+        default: () => boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
@@ -1594,6 +1625,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     width: string;
     disabled: boolean;
+    disabledDate: (date: Date) => boolean;
     isDirectionFixed: boolean;
     placeholder: string;
 }>;

package/dist/components/base/inputs/date-range-picker/date-range-picker.vue.d.ts

@@ -169,17 +169,22 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
             default: boolean;
         };
+        disabledDate: {
+            type: PropType<(date: Date) => boolean>;
+            required: false;
+            default: () => boolean;
+        };
     }, {
         emits: (e: "click", value: Date) => void;
         props: any;
         calendars: import("vue").ComputedRef<string[][]>;
         isCurrentMonth: (row: number, col: number) => boolean;
-        getDateState: import("vue").ComputedRef<(row: number, col: number) => DateState | "outOfCurrentMonth" | "inCurrentMonth">;
+        getDateState: import("vue").ComputedRef<(row: number, col: number) => DateState | "outOfCurrentMonth" | "disabledDate" | "inCurrentMonth">;
         updateSelectedDate: (row: number, col: number, day: string) => void;
         readonly WEEK_LIST_JP: string[];
         readonly calendarCellStyle: string;
         readonly calendarItemCommonStyle: string;
-        readonly calendarItemStyle: Record<"primary" | "secondary" | "dayOfWeek" | "inCurrentMonth" | "outOfCurrentMonth", string>;
+        readonly calendarItemStyle: Record<"primary" | "disabledDate" | "secondary" | "dayOfWeek" | "inCurrentMonth" | "outOfCurrentMonth", string>;
         readonly calendarStyle: string;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         currentMonth: {
@@ -197,12 +202,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
             default: boolean;
         };
+        disabledDate: {
+            type: PropType<(date: Date) => boolean>;
+            required: false;
+            default: () => boolean;
+        };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
     }, {
         currentMonth: Date;
         activeDates: DateStatus[];
         filledWeeks: boolean;
+        disabledDate: (date: Date) => boolean;
     }>;
     readonly WizCard: import("vue").DefineComponent<{
         title: {

package/dist/components/base/inputs/search-input/search-input.vue.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from "vue";
+import { TIcon } from '../../../../components/icons';
 import { SearchInputOption } from "./types";
 declare const _sfc_main: import("vue").DefineComponent<{
     options: {
@@ -43,6 +44,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    icon: {
+        type: PropType<TIcon>;
+        required: false;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    };
 }, {
     props: any;
     emit: {
@@ -594,10 +600,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         reverse: boolean;
         wrap: boolean;
     }>;
-    readonly WizISearch: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     readonly WizIcon: import("vue").DefineComponent<{
         icon: {
-            type: PropType<import('../../../../components').TIcon>;
+            type: PropType<TIcon>;
             required: true;
         };
         color: {
@@ -618,7 +623,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         readonly fontSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         icon: {
-            type: PropType<import('../../../../components').TIcon>;
+            type: PropType<TIcon>;
             required: true;
         };
         color: {
@@ -1413,7 +1418,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         }>;
         readonly WizIcon: import("vue").DefineComponent<{
             icon: {
-                type: PropType<import('../../../../components').TIcon>;
+                type: PropType<TIcon>;
                 required: true;
             };
             color: {
@@ -1434,7 +1439,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             readonly fontSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
             icon: {
-                type: PropType<import('../../../../components').TIcon>;
+                type: PropType<TIcon>;
                 required: true;
             };
             color: {
@@ -1593,11 +1598,17 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    icon: {
+        type: PropType<TIcon>;
+        required: false;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    };
 }>> & {
     onToggle?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    icon: TIcon;
     disabled: boolean;
     expand: boolean;
     isDirectionFixed: boolean;

package/dist/components/base/show-more-less/show-more-less.vue.d.ts

@@ -1,6 +1,10 @@
-import { ColorKeys } from "@wizleap-inc/wiz-ui-constants";
 import { PropType } from "vue";
 declare const _sfc_main: import("vue").DefineComponent<{
+    variant: {
+        type: PropType<"pc" | "mobile">;
+        required: false;
+        default: string;
+    };
     isOpen: {
         type: BooleanConstructor;
         required: true;
@@ -20,29 +24,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: string;
     };
-    bgColor: {
-        type: PropType<ColorKeys | undefined>;
-        required: false;
-    };
-    fontColor: {
-        type: PropType<ColorKeys>;
-        required: false;
-        default: string;
-    };
 }, {
     emit: (e: "toggle") => void;
     contentRef: import("vue").Ref<HTMLElement | undefined>;
     isAnimating: import("vue").Ref<boolean>;
     toggleHeight: import("vue").ComputedRef<string>;
     onClick: (event: MouseEvent) => void;
-    readonly showMoreLessMessageStyle: string;
-    readonly showMoreLessDetailsStyle: string;
     readonly showMoreLessContentStyle: string;
-    readonly showMoreLessSummaryStyle: string;
+    readonly showMoreLessDetailsStyle: string;
     readonly showMoreLessExpandIconStyle: string;
+    readonly showMoreLessMessageStyle: string;
     readonly showMoreLessRotateIconStyle: string;
-    readonly backgroundStyle: Record<ColorKeys, string>;
-    readonly colorStyle: Record<ColorKeys, string>;
+    readonly showMoreLessSummaryStyle: Record<"pc" | "mobile", string>;
     readonly WizHStack: import("vue").DefineComponent<{
         align: {
             type: PropType<"stretch" | "center" | "end" | "start">;
@@ -510,6 +503,46 @@ declare const _sfc_main: import("vue").DefineComponent<{
         reverse: boolean;
         wrap: boolean;
     }>;
+    readonly WizIcon: import("vue").DefineComponent<{
+        icon: {
+            type: PropType<import('../../../components').TIcon>;
+            required: true;
+        };
+        color: {
+            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys | "inherit">;
+            required: false;
+            default: string;
+        };
+        size: {
+            type: PropType<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6">;
+            required: false;
+            default: string;
+        };
+    }, {
+        readonly iconStyle: string;
+        readonly iconSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
+        readonly iconDefaultStyle: string;
+        readonly fillStyle: Record<import("@wizleap-inc/wiz-ui-constants").ColorKeys, string>;
+        readonly fontSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        icon: {
+            type: PropType<import('../../../components').TIcon>;
+            required: true;
+        };
+        color: {
+            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys | "inherit">;
+            required: false;
+            default: string;
+        };
+        size: {
+            type: PropType<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6">;
+            required: false;
+            default: string;
+        };
+    }>>, {
+        color: import("@wizleap-inc/wiz-ui-constants").ColorKeys | "inherit";
+        size: "xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6";
+    }>;
     readonly WizVStack: import("vue").DefineComponent<{
         align: {
             type: PropType<"stretch" | "center" | "end" | "start">;
@@ -977,48 +1010,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
         reverse: boolean;
         wrap: boolean;
     }>;
-    readonly WizIcon: import("vue").DefineComponent<{
-        icon: {
-            type: PropType<import('../../../components').TIcon>;
-            required: true;
-        };
-        color: {
-            type: PropType<ColorKeys | "inherit">;
-            required: false;
-            default: string;
-        };
-        size: {
-            type: PropType<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6">;
-            required: false;
-            default: string;
-        };
-    }, {
-        readonly iconStyle: string;
-        readonly iconSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
-        readonly iconDefaultStyle: string;
-        readonly fillStyle: Record<ColorKeys, string>;
-        readonly fontSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        icon: {
-            type: PropType<import('../../../components').TIcon>;
-            required: true;
-        };
-        color: {
-            type: PropType<ColorKeys | "inherit">;
-            required: false;
-            default: string;
-        };
-        size: {
-            type: PropType<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6">;
-            required: false;
-            default: string;
-        };
-    }>>, {
-        color: ColorKeys | "inherit";
-        size: "xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6";
-    }>;
     readonly WizIExpandMore: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "toggle"[], "toggle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<"pc" | "mobile">;
+        required: false;
+        default: string;
+    };
     isOpen: {
         type: BooleanConstructor;
         required: true;
@@ -1038,21 +1036,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: string;
     };
-    bgColor: {
-        type: PropType<ColorKeys | undefined>;
-        required: false;
-    };
-    fontColor: {
-        type: PropType<ColorKeys>;
-        required: false;
-        default: string;
-    };
 }>> & {
     onToggle?: ((...args: any[]) => any) | undefined;
 }, {
     openMessage: string;
     closeMessage: string;
     width: string;
-    fontColor: ColorKeys;
+    variant: "pc" | "mobile";
 }>;
 export default _sfc_main;

package/dist/components/custom/notification/list/list.vue.d.ts

@@ -941,12 +941,20 @@ declare const _sfc_main: import("vue").DefineComponent<{
             type: PropType<import("../types").TableInfoItem[]>;
             required: false;
         };
+        width: {
+            type: StringConstructor;
+            required: false;
+        };
     }, {
         props: any;
         displayDatetime: import("vue").ComputedRef<string>;
         displayHowPast: import("vue").ComputedRef<string>;
+        isPc: import("vue").ComputedRef<boolean>;
         isHovered: import("vue").Ref<boolean>;
         isPressed: import("vue").Ref<boolean>;
+        setIsHover: (value: boolean) => void;
+        setIsPressed: (value: boolean) => void;
+        panelBgColor: () => import("@wizleap-inc/wiz-ui-constants").ColorKeys;
         emit: (event: "click") => void;
         onClick: () => void;
         readonly WizBox: import("vue").DefineComponent<{
@@ -2336,6 +2344,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
             type: PropType<import("../types").TableInfoItem[]>;
             required: false;
         };
+        width: {
+            type: StringConstructor;
+            required: false;
+        };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
     }, {

package/dist/components/custom/notification/notification.vue.d.ts

@@ -1789,12 +1789,20 @@ declare const _sfc_main: import("vue").DefineComponent<{
                 type: PropType<import("./types").TableInfoItem[]>;
                 required: false;
             };
+            width: {
+                type: StringConstructor;
+                required: false;
+            };
         }, {
             props: any;
             displayDatetime: import("vue").ComputedRef<string>;
             displayHowPast: import("vue").ComputedRef<string>;
+            isPc: import("vue").ComputedRef<boolean>;
             isHovered: import("vue").Ref<boolean>;
             isPressed: import("vue").Ref<boolean>;
+            setIsHover: (value: boolean) => void;
+            setIsPressed: (value: boolean) => void;
+            panelBgColor: () => import("@wizleap-inc/wiz-ui-constants").ColorKeys;
             emit: (event: "click") => void;
             onClick: () => void;
             readonly WizBox: import("vue").DefineComponent<{
@@ -3184,6 +3192,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
                 type: PropType<import("./types").TableInfoItem[]>;
                 required: false;
             };
+            width: {
+                type: StringConstructor;
+                required: false;
+            };
         }>> & {
             onClick?: ((...args: any[]) => any) | undefined;
         }, {

package/dist/components/custom/notification/panel/panel.vue.d.ts

@@ -1,3 +1,4 @@
+import { ColorKeys } from "@wizleap-inc/wiz-ui-constants";
 import { PropType } from "vue";
 import { PanelVariant } from "./types";
 import type { TableInfoItem } from "../types";
@@ -23,12 +24,20 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: PropType<TableInfoItem[]>;
         required: false;
     };
+    width: {
+        type: StringConstructor;
+        required: false;
+    };
 }, {
     props: any;
     displayDatetime: import("vue").ComputedRef<string>;
     displayHowPast: import("vue").ComputedRef<string>;
+    isPc: import("vue").ComputedRef<boolean>;
     isHovered: import("vue").Ref<boolean>;
     isPressed: import("vue").Ref<boolean>;
+    setIsHover: (value: boolean) => void;
+    setIsPressed: (value: boolean) => void;
+    panelBgColor: () => ColorKeys;
     emit: (event: "click") => void;
     onClick: () => void;
     readonly WizBox: import("vue").DefineComponent<{
@@ -101,7 +110,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
         };
         bgColor: {
-            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys>;
+            type: PropType<ColorKeys>;
             required: false;
         };
         shadow: {
@@ -225,7 +234,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
         };
         bgColor: {
-            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys>;
+            type: PropType<ColorKeys>;
             required: false;
         };
         shadow: {
@@ -750,7 +759,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: true;
         };
         color: {
-            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys | "inherit">;
+            type: PropType<ColorKeys | "inherit">;
             required: false;
             default: string;
         };
@@ -763,7 +772,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         readonly iconStyle: string;
         readonly iconSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
         readonly iconDefaultStyle: string;
-        readonly fillStyle: Record<import("@wizleap-inc/wiz-ui-constants").ColorKeys, string>;
+        readonly fillStyle: Record<ColorKeys, string>;
         readonly fontSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         icon: {
@@ -771,7 +780,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: true;
         };
         color: {
-            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys | "inherit">;
+            type: PropType<ColorKeys | "inherit">;
             required: false;
             default: string;
         };
@@ -781,7 +790,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             default: string;
         };
     }>>, {
-        color: import("@wizleap-inc/wiz-ui-constants").ColorKeys | "inherit";
+        color: ColorKeys | "inherit";
         size: "xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6";
     }>;
     readonly WizVStack: import("vue").DefineComponent<{
@@ -1262,7 +1271,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
         };
         color: {
-            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys>;
+            type: PropType<ColorKeys>;
             required: false;
             default: string;
         };
@@ -1328,7 +1337,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         readonly textLineThroughStyle: string;
         readonly lineHeightStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
         readonly fontSizeStyle: Record<"xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6", string>;
-        readonly colorStyle: Record<import("@wizleap-inc/wiz-ui-constants").ColorKeys, string>;
+        readonly colorStyle: Record<ColorKeys, string>;
         readonly whiteSpaceStyle: Record<"normal" | "nowrap" | "pre" | "preLine" | "preWrap" | "breakSpaces", string>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         as: {
@@ -1341,7 +1350,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
             required: false;
         };
         color: {
-            type: PropType<import("@wizleap-inc/wiz-ui-constants").ColorKeys>;
+            type: PropType<ColorKeys>;
             required: false;
             default: string;
         };
@@ -1387,7 +1396,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         };
     }>>, {
         bold: boolean;
-        color: import("@wizleap-inc/wiz-ui-constants").ColorKeys;
+        color: ColorKeys;
         fontSize: "xs2" | "xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xs3" | "xl5" | "xl6";
         textAlign: "left" | "right" | "center" | "end" | "start";
         whiteSpace: "normal" | "nowrap" | "pre" | "preLine" | "preWrap" | "breakSpaces";
@@ -1418,6 +1427,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: PropType<TableInfoItem[]>;
         required: false;
     };
+    width: {
+        type: StringConstructor;
+        required: false;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {