mui-design-system 0.0.21 → 0.0.23

package/dist/components/{input-list → form}/UseFormInput.js

@@ -5,14 +5,13 @@ import { UFTextField } from '../index';
 import { UFSelect } from '../index';
 import { UFCheckbox } from '../index';
 import { UFDatePicker } from '../index';
-import { UFDatePickerMobile } from '../index';
 import { UFTextArea } from '../index';
 import { UFCurrency } from '../index';
 import { UFMultiSelect } from '../index';
 import { UFAutoComplete } from '../index';
 import { UFRadio } from '../index';
-import { UFSwitch } from '../index';
 import { UFMultiCheckbox } from '../index';
+import { UFSwitch } from '../index';
 import { UFUploader } from '../index';
 import { UFTime } from '../index';
 const UseFormInput = ({ form, error, inputVariants, type, ...inputFormProps }) => {
@@ -31,8 +30,6 @@ const UseFormInput = ({ form, error, inputVariants, type, ...inputFormProps }) =
             return (_jsx(UFCheckbox, { ...inputFormProps, form: form, error: error, variant: inputFormProps.variant ?? inputVariants }));
         case 'date-picker':
             return (_jsx(UFDatePicker, { ...inputFormProps, form: form, error: error, variant: inputFormProps.variant ?? inputVariants }));
-        case 'date-picker-mobile':
-            return (_jsx(UFDatePickerMobile, { ...inputFormProps, form: form, error: error, variant: inputFormProps.variant ?? inputVariants }));
         case 'time':
             return (_jsx(UFTime, { ...inputFormProps, form: form, error: error, variant: inputFormProps.variant ?? inputVariants }));
         case 'text-area':

package/dist/components/{input-list → form}/type.d.ts

@@ -79,10 +79,6 @@ export interface IDatePickerForm extends IBaseForm {
     props?: Partial<ICustomDatePickerProps>;
     itemProps?: Partial<ICustomDatePickerProps>;
 }
-export interface IDatePickerMobileForm extends IBaseForm {
-    type?: 'date-picker-mobile';
-    props?: Partial<ICustomDatePickerProps>;
-}
 export interface ITimeForm extends IBaseForm {
     type?: 'time';
     props?: Partial<TextFieldProps>;
@@ -119,7 +115,7 @@ export interface ITextFieldForm extends IBaseForm {
     props?: Partial<TextFieldProps>;
     itemProps?: Partial<TextFieldProps>;
 }
-export type TSchema = ITextFieldForm | ICurrencyForm | ITextAreaForm | IDatePickerForm | IDatePickerMobileForm | ITimeForm | ICheckboxForm | IAutoCompleteForm | IMultiSelectForm | ISelectForm | IRadioForm | ISwitchForm | IUploaderForm | IMultiCheckboxForm;
+export type TSchema = ITextFieldForm | ICurrencyForm | ITextAreaForm | IDatePickerForm | ITimeForm | ICheckboxForm | IAutoCompleteForm | IMultiSelectForm | ISelectForm | IRadioForm | ISwitchForm | IUploaderForm | IMultiCheckboxForm;
 export type TFormSchema = TSchema[];
 export type TFormTheme = {
     text?: Partial<TextFieldProps>;

package/dist/components/form/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -1,183 +1,127 @@
 /// <reference types="react" />
-export { default as useTable } from './custom-table/components/useTable';
-export declare const CustomTable: import("react").FC<import("./custom-table/CustomTable").ICustomTable & {
+import useTable from './custom-table/components/useTable';
+declare const FormWithErrorBoundary: import("react").FC<import("./form/Form").FormProps & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFUploader: import("react").FC<import("./input-list/type").IUploaderForm & {
-    form: import("react-hook-form").UseFormReturn<any>;
-    error: any;
-} & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomUploader: import("react").FC<import("./custom-uploader/CustomUploader").ICustomUploaderProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomAutoComplete: import("react").FC<import("./custom-auto-complete-advanced/CustomAutoComplete").CustomAutocompleteAdvancedProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomBreadcrumbs: import("react").FC<import("./custom-breadcrumbs/CustomBreadcrumbs").ICustomBreadcrumbsProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomHorizontalCard: import("react").FC<import("./custom-card/types").CustomCardProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomVerticalCard: import("react").FC<import("./custom-card/types").CustomCardProps & {
+declare const CustomTableWithErrorBoundary: import("react").FC<import("./custom-table/types").ICustomTable & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const CustomChip: import("react").FC<import("./custom-chip/CustomChip").ICustomChipProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomDatePicker: import("react").FC<import("./custom-date-picker/CustomDatePicker").ICustomDatePickerProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomDatePickerMobile: import("react").FC<import("./input-list/type").IDatePickerMobileForm & {
+declare const UFAutoCompleteWithErrorBoundary: import("react").FC<import("./form/type").IAutoCompleteForm & {
     form: import("react-hook-form").UseFormReturn<any>;
-    error?: any;
+    error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const CustomDialog: import("react").FC<import("./custom-dialog/CustomDialog").ICustomDialog & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomNumericInput: import("react").FC<import("./custom-input/CustomNumericInput").ICustomNumericInputProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomModal: import("react").FC<import("./custom-modal/CustomModal").CustomModalProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomTabs: import("react").FC<import("./custom-tabs/CustomTabs").CustomTabsProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const UFAutoComplete: import("react").FC<import("./input-list/type").IAutoCompleteForm & {
+declare const UFCheckboxWithErrorBoundary: import("react").FC<import("./form/type").ICheckboxForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFCheckbox: import("react").FC<import("./input-list/type").ICheckboxForm & {
+declare const UFRadioWithErrorBoundary: import("react").FC<import("./form/type").IRadioForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFRadio: import("react").FC<import("./input-list/type").IRadioForm & {
+declare const UFCurrencyWithErrorBoundary: import("react").FC<import("./form/type").ICurrencyForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFSwitch: import("react").FC<import("./input-list/type").ISwitchForm & {
+export declare const UFDatePickerWithErrorBoundary: import("react").FC<import("./form/type").IDatePickerForm & {
     form: import("react-hook-form").UseFormReturn<any>;
-    error?: any;
+    error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFCurrency: import("react").FC<import("./input-list/type").ICurrencyForm & {
+export declare const UFMultiSelectWithErrorBoundary: import("react").FC<import("./form/type").IMultiSelectForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFDatePicker: import("react").FC<import("./input-list/type").IDatePickerForm & {
+export declare const UFSelectWithErrorBoundary: import("react").FC<import("./form/type").ISelectForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFDatePickerMobile: import("react").FC<import("./input-list/type").IDatePickerMobileForm & {
+export declare const UFTextAreaWithErrorBoundary: import("react").FC<import("./form/type").ITextAreaForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFTime: import("react").FC<import("./input-list/type").ITimeForm & {
+export declare const UFTextFieldWithErrorBoundary: import("react").FC<import("./form/type").ITextFieldForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFMultiSelect: import("react").FC<import("./input-list/type").IMultiSelectForm & {
+export declare const UFMultiCheckboxWithErrorBoundary: import("react").FC<import("./form/type").IMultiCheckboxForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFSelect: import("react").FC<import("./input-list/type").ISelectForm & {
-    form: import("react-hook-form").UseFormReturn<any>;
-    error: any;
-} & {
+export declare const CheckboxListWithErrorBoundary: import("react").FC<import("./form/checkbox-list/CheckboxList").CheckboxListProps & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFTextArea: import("react").FC<import("./input-list/type").ITextAreaForm & {
-    form: import("react-hook-form").UseFormReturn<any>;
-    error: any;
-} & {
+export declare const FormProviderWithErrorBoundary: import("react").FC<import("../context/FormContext").IFormProvider & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFTextField: import("react").FC<import("./input-list/type").ITextFieldForm & {
+export declare const UFSwitchWithErrorBoundary: import("react").FC<import("./form/type").ISwitchForm & {
     form: import("react-hook-form").UseFormReturn<any>;
-    error: any;
+    error?: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFMultiCheckbox: import("react").FC<import("./input-list/type").IMultiCheckboxForm & {
+export declare const UFTimeWithErrorBoundary: import("react").FC<import("./form/type").ITimeForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const CheckboxList: import("react").FC<import("./checkbox-list/CheckboxList").CheckboxListProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const RichTooltip: import("react").FC<import("./rich-tooltip/RichTooltip").IRichTooltipProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const OTPInput: import("react").FC<import("./otp-input/OTPInput").OTPInputProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomPagination1: import("react").FC<import("./custom-pagination/custom-pagination-1/CustomPagination1").CustomPagination1Props & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomPagination2: import("react").FC<import("./custom-pagination/custom-pagination-2/CustomPagination2").ITableFooterProps & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const CustomStepper: import("react").FC<import("./custom-stepper/CustomStepper").ICustomStepper & {
-    skeletonWidth?: string | number | undefined;
-    skeletonHeight?: string | number | undefined;
-}>;
-export declare const Form: import("react").FC<import("./input-list/Form").FormProps & {
+export declare const UFUploaderWithErrorBoundary: import("react").FC<import("./form/type").IUploaderForm & {
+    form: import("react-hook-form").UseFormReturn<any>;
+    error: any;
+} & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
+export { useTable };
+export { FormWithErrorBoundary as Form };
+export { CustomTableWithErrorBoundary as CustomTable };
+export { UFAutoCompleteWithErrorBoundary as UFAutoComplete };
+export { UFCheckboxWithErrorBoundary as UFCheckbox };
+export { UFRadioWithErrorBoundary as UFRadio };
+export { UFCurrencyWithErrorBoundary as UFCurrency };
+export { UFDatePickerWithErrorBoundary as UFDatePicker };
+export { UFMultiSelectWithErrorBoundary as UFMultiSelect };
+export { UFSelectWithErrorBoundary as UFSelect };
+export { UFTextAreaWithErrorBoundary as UFTextArea };
+export { UFTextFieldWithErrorBoundary as UFTextField };
+export { UFMultiCheckboxWithErrorBoundary as UFMultiCheckbox };
+export { UFSwitchWithErrorBoundary as UFSwitch };
+export { UFTimeWithErrorBoundary as UFTime };
+export { UFUploaderWithErrorBoundary as UFUploader };
+export { CheckboxListWithErrorBoundary as CheckboxList };
+export { FormProviderWithErrorBoundary as FormProvider };

package/dist/components/index.js

@@ -1,70 +1,56 @@
-import CustomTableComponent from './custom-table/CustomTable';
-import UFUploaderComponent from './input-list/components/UFUploader';
-import CustomUploaderComponent from './custom-uploader/CustomUploader';
-import CustomAutoCompleteComponent from './custom-auto-complete-advanced/CustomAutoComplete';
-import CustomBreadcrumbsComponent from './custom-breadcrumbs/CustomBreadcrumbs';
-import CustomHorizontalCardComponent from './custom-card/CustomHorizontalCard';
-import CustomVerticalCardComponent from './custom-card/CustomVerticalCard';
-import CustomChipComponent from './custom-chip/CustomChip';
-import CustomDatePickerComponent from './custom-date-picker/CustomDatePicker';
-import CustomDatePickerMobileComponent from './custom-mobile-date-picker/CustomMobileDatePicker';
-import CustomDialogComponent from './custom-dialog/CustomDialog';
-import CustomNumericInputComponent from './custom-input/CustomNumericInput';
-import CustomModalComponent from './custom-modal/CustomModal';
-import CustomTabsComponent from './custom-tabs/CustomTabs';
-import UFAutoCompleteComponent from './input-list/components/UFAutoComplete';
-import UFCheckboxComponent from './input-list/components/UFCheckbox';
-import UFRadioComponent from './input-list/components/UFRadio';
-import UFSwitchComponent from './input-list/components/UFSwitch';
-import UFCurrencyComponent from './input-list/components/UFCurrency';
-import UFDatePickerComponent from './input-list/components/UFDatePicker';
-import UFDatePickerMobileComponent from './input-list/components/UFDatePickerMobile';
-import UFTimeComponent from './input-list/components/UFTime';
-import UFMultiSelectComponent from './input-list/components/UFMultiSelect';
-import UFSelectComponent from './input-list/components/UFSelect';
-import UFTextAreaComponent from './input-list/components/UFTextArea';
-import UFTextFieldComponent from './input-list/components/UFTextField';
-import UFMultiCheckboxComponent from './input-list/components/UFMultiCheckbox';
-import CheckboxListComponent from './checkbox-list/CheckboxList';
-import RichTooltipComponent from './rich-tooltip/RichTooltip';
-import OTPInputComponent from './otp-input/OTPInput';
-import CustomPagination1Component from './custom-pagination/custom-pagination-1/CustomPagination1';
-import CustomPagination2Component from './custom-pagination/custom-pagination-2/CustomPagination2';
-import CustomStepperComponent from './custom-stepper/CustomStepper';
 import withErrorBoundary from './error boundary/withErrorBoundary';
-import FormComponent from './input-list/Form';
-export { default as useTable } from './custom-table/components/useTable';
-export const CustomTable = withErrorBoundary(CustomTableComponent);
-export const UFUploader = withErrorBoundary(UFUploaderComponent);
-export const CustomUploader = withErrorBoundary(CustomUploaderComponent);
-export const CustomAutoComplete = withErrorBoundary(CustomAutoCompleteComponent);
-export const CustomBreadcrumbs = withErrorBoundary(CustomBreadcrumbsComponent);
-export const CustomHorizontalCard = withErrorBoundary(CustomHorizontalCardComponent);
-export const CustomVerticalCard = withErrorBoundary(CustomVerticalCardComponent);
-export const CustomChip = withErrorBoundary(CustomChipComponent);
-export const CustomDatePicker = withErrorBoundary(CustomDatePickerComponent);
-export const CustomDatePickerMobile = withErrorBoundary(CustomDatePickerMobileComponent);
-export const CustomDialog = withErrorBoundary(CustomDialogComponent);
-export const CustomNumericInput = withErrorBoundary(CustomNumericInputComponent);
-export const CustomModal = withErrorBoundary(CustomModalComponent);
-export const CustomTabs = withErrorBoundary(CustomTabsComponent);
-export const UFAutoComplete = withErrorBoundary(UFAutoCompleteComponent);
-export const UFCheckbox = withErrorBoundary(UFCheckboxComponent);
-export const UFRadio = withErrorBoundary(UFRadioComponent);
-export const UFSwitch = withErrorBoundary(UFSwitchComponent);
-export const UFCurrency = withErrorBoundary(UFCurrencyComponent);
-export const UFDatePicker = withErrorBoundary(UFDatePickerComponent);
-export const UFDatePickerMobile = withErrorBoundary(UFDatePickerMobileComponent);
-export const UFTime = withErrorBoundary(UFTimeComponent);
-export const UFMultiSelect = withErrorBoundary(UFMultiSelectComponent);
-export const UFSelect = withErrorBoundary(UFSelectComponent);
-export const UFTextArea = withErrorBoundary(UFTextAreaComponent);
-export const UFTextField = withErrorBoundary(UFTextFieldComponent);
-export const UFMultiCheckbox = withErrorBoundary(UFMultiCheckboxComponent);
-export const CheckboxList = withErrorBoundary(CheckboxListComponent);
-export const RichTooltip = withErrorBoundary(RichTooltipComponent);
-export const OTPInput = withErrorBoundary(OTPInputComponent);
-export const CustomPagination1 = withErrorBoundary(CustomPagination1Component);
-export const CustomPagination2 = withErrorBoundary(CustomPagination2Component);
-export const CustomStepper = withErrorBoundary(CustomStepperComponent);
-export const Form = withErrorBoundary(FormComponent);
+import useTable from './custom-table/components/useTable';
+import Form from "./form/Form";
+import CustomTable from "./custom-table/CustomTable";
+import UFAutoComplete from "./form/components/UFAutoComplete";
+import UFCheckbox from "./form/components/UFCheckbox";
+import UFRadio from "./form/components/UFRadio";
+import UFCurrency from "./form/components/UFCurrency";
+import UFDatePicker from './form/components/UFDatePicker';
+import UFMultiSelect from './form/components/UFMultiSelect';
+import UFSelect from './form/components/UFSelect';
+import UFTextArea from './form/components/UFTextArea';
+import UFTextField from './form/components/UFTextField';
+import UFMultiCheckbox from './form/components/UFMultiCheckbox';
+import CheckboxList from './form/checkbox-list/CheckboxList';
+import FormProvider from '../context/FormContext';
+import UFSwitch from './form/components/UFSwitch';
+import UFTime from './form/components/UFTime';
+import UFUploader from './form/components/UFUploader';
+// Wrap components with the HOC
+const FormWithErrorBoundary = withErrorBoundary(Form);
+const CustomTableWithErrorBoundary = withErrorBoundary(CustomTable);
+const UFAutoCompleteWithErrorBoundary = withErrorBoundary(UFAutoComplete);
+const UFCheckboxWithErrorBoundary = withErrorBoundary(UFCheckbox);
+const UFRadioWithErrorBoundary = withErrorBoundary(UFRadio);
+const UFCurrencyWithErrorBoundary = withErrorBoundary(UFCurrency);
+export const UFDatePickerWithErrorBoundary = withErrorBoundary(UFDatePicker);
+export const UFMultiSelectWithErrorBoundary = withErrorBoundary(UFMultiSelect);
+export const UFSelectWithErrorBoundary = withErrorBoundary(UFSelect);
+export const UFTextAreaWithErrorBoundary = withErrorBoundary(UFTextArea);
+export const UFTextFieldWithErrorBoundary = withErrorBoundary(UFTextField);
+export const UFMultiCheckboxWithErrorBoundary = withErrorBoundary(UFMultiCheckbox);
+export const CheckboxListWithErrorBoundary = withErrorBoundary(CheckboxList);
+export const FormProviderWithErrorBoundary = withErrorBoundary(FormProvider);
+export const UFSwitchWithErrorBoundary = withErrorBoundary(UFSwitch);
+export const UFTimeWithErrorBoundary = withErrorBoundary(UFTime);
+export const UFUploaderWithErrorBoundary = withErrorBoundary(UFUploader);
+// Export wrapped components
+export { useTable };
+export { FormWithErrorBoundary as Form };
+export { CustomTableWithErrorBoundary as CustomTable };
+export { UFAutoCompleteWithErrorBoundary as UFAutoComplete };
+export { UFCheckboxWithErrorBoundary as UFCheckbox };
+export { UFRadioWithErrorBoundary as UFRadio };
+export { UFCurrencyWithErrorBoundary as UFCurrency };
+export { UFDatePickerWithErrorBoundary as UFDatePicker };
+export { UFMultiSelectWithErrorBoundary as UFMultiSelect };
+export { UFSelectWithErrorBoundary as UFSelect };
+export { UFTextAreaWithErrorBoundary as UFTextArea };
+export { UFTextFieldWithErrorBoundary as UFTextField };
+export { UFMultiCheckboxWithErrorBoundary as UFMultiCheckbox };
+export { UFSwitchWithErrorBoundary as UFSwitch };
+export { UFTimeWithErrorBoundary as UFTime };
+export { UFUploaderWithErrorBoundary as UFUploader };
+export { CheckboxListWithErrorBoundary as CheckboxList };
+export { FormProviderWithErrorBoundary as FormProvider };

package/dist/context/FormContext.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-import { TFormTheme } from "../components/input-list/type";
+import { TFormTheme } from "../components/form/type";
 export interface ICustomInputs {
 }
 interface InputContextType {

package/dist/mui/Button/MuiButton.js

@@ -3,20 +3,22 @@ export const MuiButton = {
         disableElevation: true,
         variant: "contained",
         centerRipple: true,
+        color: "secondary",
+        disableRipple: true
     },
     styleOverrides: {
         root: ({ ownerState, theme }) => ({
             fontWeight: 500,
             outline: "0px solid",
             borderRadius: theme.shape.borderRadius * 2,
-            minWidth: ownerState.size === "small" ? "73px" : "117px",
-            minHeight: ownerState.size === "small" ? "34px" : "48px",
-            fontSize: ownerState.size === "small" ? "clamp(12px,2.7vw,14px)" : "clamp(14px,2.7vw,16px)",
+            minHeight: ownerState.size === "small" ? "36px" : "48px",
+            fontSize: ownerState.size === "small" ? 15 : 17,
             width: ownerState.fullWidth ? "100%" : "max-content",
             height: "max-content",
             lineHeight: "100% !important",
-            padding: "6px 12px",
+            padding: ownerState.size === "small" ? "0px 15px" : "0px 19px",
             textTransform: "none",
+            transition: "all 0.05s",
             //Icon style in general
             ".MuiButton-icon": {
                 display: ownerState.isLoading ? "none" : "flex",
@@ -30,7 +32,7 @@ export const MuiButton = {
                     ? theme.palette.mode === "dark"
                         ? theme.palette.text.primary
                         : theme.palette.text.secondary
-                    : theme.palette[ownerState?.color ?? "primary"]["5"],
+                    : theme?.palette?.[ownerState?.color ?? "primary"]?.["main"],
             },
             ".MuiButton-startIcon": {
                 flexGrow: 1,
@@ -38,6 +40,9 @@ export const MuiButton = {
             ".MuiButton-endIcon": {
                 flexGrow: 1,
             },
+            "&:active": {
+                scale: (0.97)
+            },
         }),
         text: ({ ownerState, theme }) => ({
             ...(ownerState.isLoading && {
@@ -100,9 +105,7 @@ export const MuiButton = {
             }),
             color: ownerState.isLoading
                 ? "transparent !important"
-                : ownerState.color === "warning"
-                    ? theme.palette.getContrastText(theme.palette.warning.main)
-                    : theme.palette.text["1"],
+                : theme.palette[ownerState.color || "primary"].contrastText,
             backgroundColor: theme.palette[ownerState?.color ?? "primary"].main,
             "&::before": {
                 width: "100%",
@@ -116,10 +119,7 @@ export const MuiButton = {
             },
             "&:hover": {
                 // backgroundColor: theme.palette[ownerState?.color ?? 'primary']["4"],
-                backgroundColor: theme.palette.primary.main,
-                "&::before": {
-                    opacity: 0.1,
-                },
+                filter: "brightness(1.1)",
             },
             "&:focus": {
                 border: "none",
@@ -131,6 +131,7 @@ export const MuiButton = {
         }),
         outlined: ({ theme, ownerState }) => ({
             backgroundColor: "none",
+            outline: "none",
             color: ownerState.isLoading
                 ? "transparent !important"
                 : theme.palette[ownerState?.color ?? "primary"].main,

package/dist/mui/Typography/index.js

@@ -22,7 +22,7 @@ export const typography = {
     },
     h5: {
         fontWeight: 700,
-        fontSize: "clamp(22px,4.3vw,29px)",
+        fontSize: "clamp(24px,4.3vw,29px)",
         lineHeight: "clamp(30px,5.7vw,34px)",
     },
     h6: {
@@ -32,17 +32,17 @@ export const typography = {
     },
     body1: {
         fontWeight: 400,
-        fontSize: "clamp(18px,3.3vw,22px)",
+        fontSize: "clamp(20px,3.3vw,24px)",
         lineHeight: "clamp(26px,5.7vw,30px)",
     },
     "body1.medium": {
         fontWeight: 500,
-        fontSize: "clamp(18px,3.3vw,22px)",
+        fontSize: "clamp(20px,3.3vw,24px)",
         lineHeight: "clamp(26px,5.7vw,30px)",
     },
     "body1.bold": {
         fontWeight: 700,
-        fontSize: "clamp(18px,3.3vw,22px)",
+        fontSize: "clamp(20px,3.3vw,24px)",
         lineHeight: "clamp(26px,5.7vw,30px)",
     },
     body2: {
@@ -62,18 +62,18 @@ export const typography = {
     },
     body3: {
         fontWeight: 400,
-        fontSize: "clamp(14px,2.7vw,18px)",
-        lineHeight: "clamp(22px,4.9vw,26px)",
+        fontSize: "clamp(14px,2.7vw,20px)",
+        lineHeight: "clamp(24px,4.9vw,26px)",
     },
     "body3.medium": {
         fontWeight: 500,
-        fontSize: "clamp(14px,2.7vw,18px)",
-        lineHeight: "clamp(22px,4.9vw,26px)",
+        fontSize: "clamp(14px,2.7vw,20px)",
+        lineHeight: "clamp(24px,4.9vw,26px)",
     },
     "body3.bold": {
         fontWeight: 700,
-        fontSize: "clamp(14px,2.7vw,18px)",
-        lineHeight: "clamp(22px,4.9vw,26px)",
+        fontSize: "clamp(14px,2.7vw,20px)",
+        lineHeight: "clamp(24px,4.9vw,26px)",
     },
     caption1: {
         fontWeight: 400,
@@ -108,17 +108,17 @@ export const typography = {
     caption3: {
         fontWeight: 400,
         fontSize: "clamp(10px,1.85vw,12px)",
-        lineHeight: "clamp(18px,3.85vw,22px)",
+        lineHeight: "clamp(20px,3.85vw,24px)",
     },
     "caption3.medium": {
         fontWeight: 500,
         fontSize: "clamp(10px,1.85vw,12px)",
-        lineHeight: "clamp(18px,3.85vw,22px)",
+        lineHeight: "clamp(20px,3.85vw,24px)",
     },
     "caption3.bold": {
         fontWeight: 700,
         fontSize: "clamp(10px,1.85vw,12px)",
-        lineHeight: "clamp(18px,3.85vw,22px)",
+        lineHeight: "clamp(20px,3.85vw,24px)",
     },
     caption4: {
         fontWeight: 400,