@homefile/components-v2 1.6.1 → 2.1.0

package/dist/hooks/myHomes/useAddHomeContent.d.ts

@@ -8,22 +8,7 @@ export declare const useAddHouseContent: (values: HomeFormI | undefined, callbac
     handleSelectRecords: (event: ChangeEvent<HTMLInputElement>) => void;
     handleSubmit: () => void;
     isOwner: boolean;
-    group: import("react").AriaAttributes & import("react").DOMAttributes<import("@chakra-ui/react-types").DOMElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    ownRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    rentRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    group: import("@chakra-ui/utils").DOMAttributes<import("@chakra-ui/utils").DOMElement> & import("react").RefAttributes<any>;
+    ownRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
+    rentRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
 };

package/dist/hooks/myProfile/useTwoFactorSetting.d.ts

@@ -6,18 +6,8 @@ export declare const useTwoFactorSetting: ({ defaultValue, email, onChange, sms,
         sms: string | undefined;
         '2fa': boolean;
     }, any>;
-    emailRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
-    group: import("react").AriaAttributes & import("react").DOMAttributes<import("@chakra-ui/react-types").DOMElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    emailRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
+    group: import("@chakra-ui/utils").DOMAttributes<import("@chakra-ui/utils").DOMElement> & import("react").RefAttributes<any>;
     handleEmailValidation: (value?: string) => boolean;
     handlePhoneValidation: (value?: string) => boolean;
     handleSubmit: import("react-hook-form").UseFormHandleSubmit<{
@@ -28,10 +18,5 @@ export declare const useTwoFactorSetting: ({ defaultValue, email, onChange, sms,
     is2faEnabled: boolean;
     radioValue: string | number;
     showButtons: boolean;
-    smsRadio: import("@chakra-ui/react-types").InputDOMProps & import("react").AriaAttributes & import("react").DOMAttributes<HTMLInputElement> & import("@chakra-ui/react-types").DataAttributes & {
-        id?: string;
-        role?: React.AriaRole;
-        tabIndex?: number;
-        style?: React.CSSProperties;
-    } & import("react").RefAttributes<any>;
+    smsRadio: import("@chakra-ui/utils").InputDOMAttributes & import("react").RefAttributes<any>;
 };

package/dist/hooks/partner/preview/usePartnerTilePreview.d.ts

@@ -6,9 +6,9 @@ export declare const usePartnerTilePreview: () => {
     };
     company: {
         readonly address: {
-            readonly apartmentNumber?: string;
+            readonly apartmentNumber?: string | undefined;
             readonly city: string;
-            readonly obs?: string;
+            readonly obs?: string | undefined;
             readonly state: string;
             readonly street: string;
             readonly number: string;

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,6 +1,8 @@
-import { FolderFileI } from '../..';
-type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default';
-export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'house' | 'target' | 'title' | 'company';
+import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
+type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes;
+type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
+export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
+export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {
@@ -10,14 +12,17 @@ export interface ReportI {
     description?: string;
     icon?: IconTypes;
     id: string;
+    link?: string;
     name?: string;
     options?: OptionsTypes;
     type: KindTypes;
     value: ValueTypes;
     visible?: boolean;
 }
-export interface DynamicFormI {
+export interface DynamicFormI extends Partial<PartnerFooterI> {
+    callback?: TileCtaI['callback'];
     form: ReportI[];
+    menuItems?: MenuItemI[];
     onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
     showTitle?: boolean;
     uploadingFieldId?: string;

package/dist/interfaces/forms/dynamicForm/fields/GroupField.interface.d.ts

@@ -1,7 +1,12 @@
-import { DynamicFormI } from '../../..';
+import { DynamicFormI, MenuItemI, TileCtaI } from '../../..';
 export interface GroupFieldI {
     id: string;
     canBeHidden?: boolean;
     fields?: DynamicFormI['form'];
     onRemove: (id: string) => void;
 }
+export interface FieldTypesI {
+    callback?: TileCtaI['callback'];
+    fields?: DynamicFormI['form'];
+    menuItems?: MenuItemI[];
+}

package/dist/interfaces/forms/dynamicForm/fields/UIFields.interface.d.ts

@@ -0,0 +1,20 @@
+import { DynamicFormI, MenuItemI, PartnerFooterI } from '../../..';
+export interface TileBodyLogoI {
+    menuItems?: MenuItemI[];
+    name?: string;
+    value: string;
+}
+export interface TileBodyI extends Partial<PartnerFooterI> {
+    callback?: TileCtaI['callback'];
+    fields?: DynamicFormI['form'];
+    menuItems?: MenuItemI[];
+}
+export interface VerticalIconI {
+    icon?: string;
+    value: string;
+}
+export interface TileCtaI {
+    callback?: (value: string) => void;
+    type: 'primary-cta' | 'secondary-cta';
+    value: string;
+}

package/dist/interfaces/forms/dynamicForm/fields/UIFields.interface.js

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

package/dist/interfaces/forms/dynamicForm/fields/index.d.ts

@@ -8,3 +8,4 @@ export * from './SelectField.interface';
 export * from './SwitchField.interface';
 export * from './TextAreaField.interface';
 export * from './TextField.interface';
+export * from './UIFields.interface';

package/dist/interfaces/forms/dynamicForm/fields/index.js

@@ -8,3 +8,4 @@ export * from './SelectField.interface';
 export * from './SwitchField.interface';
 export * from './TextAreaField.interface';
 export * from './TextField.interface';
+export * from './UIFields.interface';

package/dist/interfaces/icons/CustomIcon.interface.d.ts

@@ -1,8 +1,7 @@
-import { As } from '@chakra-ui/react';
-import { CSSProperties } from 'react';
+import { CSSProperties, ElementType } from 'react';
 export interface IconsI {
     color?: string;
     size?: number | string;
     style?: CSSProperties;
-    type: As | undefined;
+    type?: ElementType;
 }

package/dist/interfaces/partner/PartnerFooter.interface.d.ts

@@ -4,7 +4,6 @@ export interface SocialLinkI {
     link: string;
 }
 export interface PartnerFooterI {
-    iconSize?: number;
     socialLinks?: SocialLinkI[];
     websiteUrl: string;
     urlText?: string;

package/dist/mocks/forms/dynamicForm.mock.d.ts

@@ -1,3 +1,4 @@
 import { ReportI } from '../../interfaces';
 export declare const formFieldsMock: ReportI[];
 export declare const contactFieldsMock: ReportI[];
+export declare const tileUIMock: ReportI[];

package/dist/mocks/forms/dynamicForm.mock.js

@@ -1,3 +1,4 @@
+import { Shine } from '../../assets/images';
 import { faker } from '@faker-js/faker';
 export const formFieldsMock = [
     {
@@ -344,3 +345,161 @@ export const contactFieldsMock = [
         icon: 'image',
     },
 ];
+export const tileUIMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: faker.lorem.word(),
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'tile-body',
+        visible: true,
+        options: [],
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Shine',
+                description: '',
+                comments: '',
+                value: Shine,
+                type: 'tile-body-logo',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: 'We do windows and so much more!',
+                type: 'tile-body-header',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: '',
+                type: 'tile-body-section-grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Pressure Washing',
+                        type: 'vertical-icon',
+                        icon: 'sh-pressure',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Widow Cleaning',
+                        type: 'vertical-icon',
+                        icon: 'sh-window',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Roof Cleaning',
+                        type: 'vertical-icon',
+                        icon: 'sh-roof',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Holiday Lights',
+                        type: 'vertical-icon',
+                        icon: 'sh-lights',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Gutter Cleaning',
+                        type: 'vertical-icon',
+                        icon: 'sh-gutter',
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: '',
+                type: 'tile-body-action',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Schedule Service',
+                        type: 'primary-cta',
+                        link: 'www.shine.com',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Request Support',
+                        type: 'secondary-cta',
+                        link: 'open-drawer',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: '',
+        type: 'tile-form',
+        visible: true,
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: 'We are here to resolve any issues you may be having with our products and services. Please send us a brief description of the issue you are having and we will respond within 24 hours.',
+                comments: '',
+                value: '',
+                type: 'textarea',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: '',
+                type: 'grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: 'Contact Phone',
+                        comments: '',
+                        value: '',
+                        type: 'telephone',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: 'Contact Email',
+                        comments: '',
+                        value: '',
+                        type: 'email',
+                    },
+                ],
+            },
+        ],
+    },
+];

package/dist/stories/forms/dynamicForm/DynamicForm.stories.d.ts

@@ -3,3 +3,4 @@ import { DynamicFormI } from '../../../interfaces';
 declare const _default: Meta;
 export default _default;
 export declare const DynamicFormComponent: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicUIFormComponent: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/forms/dynamicForm/DynamicForm.stories.js

@@ -2,15 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { Box } from '@chakra-ui/react';
 import { DynamicForm } from '../../../components';
-import { formFieldsMock } from '../../../mocks';
+import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '../../../mocks';
 export default {
     title: 'Components/Forms/DynamicForm',
     component: DynamicForm,
     args: {
-        form: formFieldsMock,
+        callback: action('callback'),
         onUpload: action('onUpload'),
+        menuItems: menuMock,
+        socialLinks: socialLinksMock,
+        websiteUrl: 'http://www.audreyscheckdesign.com',
     },
 };
 export const DynamicFormComponent = (args) => {
-    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args)) }));
+    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock })) }));
+};
+export const DynamicUIFormComponent = (args) => {
+    return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false })) }));
 };

package/dist/stories/tour/Bubble.stories.d.ts

@@ -5,7 +5,7 @@ export default _default;
 export declare const BubbleComponent: {
     (args: BubbleI): import("react/jsx-runtime").JSX.Element;
     args: {
-        handleStep: import("@vitest/spy").Mock<any, any>;
+        handleStep: import("@vitest/spy").Mock<(...args: any[]) => any>;
         steps: {
             homeboard: {
                 topRef: number;

package/dist/stories/tour/HomeBoardTour.stories.d.ts

@@ -6,6 +6,6 @@ export declare const HomeBoardTourComponent: {
     (args: TourI): import("react/jsx-runtime").JSX.Element;
     args: {
         isActive: boolean;
-        handleStep: import("@vitest/spy").Mock<any, any>;
+        handleStep: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
 };

package/dist/stories/tour/LaunchpadTour.stories.d.ts

@@ -6,6 +6,6 @@ export declare const LaunchpadTourComponent: {
     (args: TourI): import("react/jsx-runtime").JSX.Element;
     args: {
         isActive: boolean;
-        handleStep: import("@vitest/spy").Mock<any, any>;
+        handleStep: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.6.1",
+  "version": "2.1.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -22,66 +22,67 @@
     "src"
   ],
   "devDependencies": {
-    "@chakra-ui/storybook-addon": "^5.1.0",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@faker-js/faker": "^8.1.0",
-    "@storybook/addon-a11y": "^8.2.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-onboarding": "^8.2.4",
-    "@storybook/addon-viewport": "^8.2.4",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/builder-vite": "^8.2.4",
+    "@chakra-ui/storybook-addon": "^5.2.5",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@faker-js/faker": "^9.0.3",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/addon-viewport": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/builder-vite": "^8.3.5",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
-    "@storybook/test": "^8.2.4",
-    "@types/node": "^20.14.11",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "axe-playwright": "^2.0.1",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@types/node": "^22.7.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "axe-playwright": "^2.0.3",
     "copyfiles": "^2.4.1",
     "git-commit-msg-linter": "^5.0.4",
-    "husky": "^9.1.0",
+    "husky": "^9.1.6",
     "jest": "^29.7.0",
     "json-loader": "^0.5.7",
-    "rimraf": "^5.0.1",
-    "semantic-release": "^24.0.0",
-    "storybook": "^8.2.4",
-    "storybook-react-i18next": "^3.1.1",
+    "rimraf": "^6.0.1",
+    "semantic-release": "^24.1.2",
+    "storybook": "^8.3.5",
+    "storybook-react-i18next": "^3.1.7",
     "tsconfig-replace-paths": "^0.0.14",
     "tscpaths": "^0.0.9",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/assistant": "^5.0.18",
-    "@fontsource/poppins": "^5.0.14",
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "^2.10.3",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/assistant": "^5.1.0",
+    "@fontsource/poppins": "^5.1.0",
     "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
     "@hookform/resolvers": "^3.3.1",
     "@rive-app/react-canvas": "^4.14.5",
-    "axios": "^1.7.2",
-    "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.6",
-    "i18next": "^23.12.1",
+    "axios": "^1.7.7",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^11.11.9",
+    "i18next": "^23.16.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.2.2",
+    "i18next-http-backend": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.46.2",
-    "react-i18next": "^15.0.0",
-    "react-icons": "^5.2.1",
+    "react-dropzone": "^14.2.9",
+    "react-hook-form": "^7.53.0",
+    "react-i18next": "^15.0.3",
+    "react-icons": "^5.3.0",
     "react-modern-calendar-datepicker": "^3.1.6",
     "react-quill": "^2.0.0",
     "react-spinners": "^0.14.1",
-    "recharts": "^2.10.1",
-    "valtio": "^1.11.2",
+    "recharts": "^2.13.0",
+    "valtio": "^2.1.0",
     "yup": "^1.2.0"
   },
   "scripts": {

package/src/components/animations/CloudsAnimation.tsx

@@ -8,7 +8,8 @@ import {
 } from '@/assets/images'
 import { useWindowDimensions } from '@/hooks'
 import { colors } from '@/theme/colors'
-import { Box, keyframes, Image } from '@chakra-ui/react'
+import { Box, Image } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { Fragment, PropsWithChildren } from 'react'
 
 export const moveLeftToRightAirplane = keyframes`

package/src/components/animations/HomieAnimation.tsx

@@ -1,5 +1,5 @@
 import { useRive } from '@rive-app/react-canvas'
-const url = process.env.REACT_APP_RIVE_ASSETS
+const url = import.meta.env.VITE_RIVE_ASSETS
 
 export const HomieAnimation = () => {
   const { RiveComponent } = useRive({

package/src/components/customToast/CustomToast.tsx

@@ -16,17 +16,18 @@ export const CustomToast = ({
   }
   return (
     <Box
+      paddingTop={0}
+      paddingBottom={0}
       bg={bgColors[status]}
       borderRadius="lg"
       boxShadow="lg"
       position="relative"
-      py="base"
     >
-      <Flex gap="base" p="base" align="center">
+      <Flex gap="base" p="base" align="center" position="relative" left="-26px">
         <StatusIllustration status={status} />
         <Box>
           <Text
-            fontSize="25px"
+            fontSize="22px"
             fontWeight="medium"
             color="neutral.white"
             lineHeight="1.1"

package/src/components/customToast/StatusIllustration.tsx

@@ -14,18 +14,18 @@ export const StatusIllustration = ({
       src: Check,
       alt: t('ariaLabels.success'),
       bg: '#28B5A8',
-      height: '26px',
+      height: '21px',
     },
     error: {
       src: Exclamation,
       alt: t('ariaLabels.error'),
       bg: '#991365',
-      height: '33px',
+      height: '28px',
     },
   }
   const { alt, bg, height, src } = props[status]
   return (
-    <Center borderRadius="full" bg={bg} boxShadow="xl" w="60px" h="60px">
+    <Center borderRadius="full" bg={bg} boxShadow="xl" w="43px" h="43px">
       <Image src={src} alt={alt} h={height} w="auto" />
     </Center>
   )

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -16,15 +16,19 @@ import {
   DateField,
   NumberField,
   CurrencyField,
+  TileBody,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
 
 export const DynamicForm = ({
+  callback,
   form: fields,
+  menuItems,
   onUpload,
   showTitle = true,
   uploadingFieldId,
+  ...props
 }: DynamicFormI) => {
   const {
     form,
@@ -159,6 +163,16 @@ export const DynamicForm = ({
                     canBeHidden={canBeHidden}
                   />
                 )
+              case 'tile-body':
+                return (
+                  <TileBody
+                    key={id}
+                    callback={callback}
+                    fields={children}
+                    menuItems={menuItems}
+                    {...props}
+                  />
+                )
               default:
                 return null
             }