@homefile/components-v2 1.6.1 → 2.0.0

package/dist/components/animations/CloudsAnimation.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare const moveLeftToRightAirplane: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeft: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeftWithFade: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeftWithFade2: import("@emotion/serialize").Keyframes;
-export declare const moveRightToLeftWithFade3: import("@emotion/serialize").Keyframes;
+export declare const moveLeftToRightAirplane: import("@emotion/react").Keyframes;
+export declare const moveRightToLeft: import("@emotion/react").Keyframes;
+export declare const moveRightToLeftWithFade: import("@emotion/react").Keyframes;
+export declare const moveRightToLeftWithFade2: import("@emotion/react").Keyframes;
+export declare const moveRightToLeftWithFade3: import("@emotion/react").Keyframes;
 export declare const CloudsAnimation: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/animations/CloudsAnimation.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Airplane, Cloud1, Cloud2, Cloud3, TreesCrop, TreesCrop2, } 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 } from 'react';
 export const moveLeftToRightAirplane = keyframes `
     0% {

package/dist/components/animations/HomieAnimation.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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({
         src: `${url}/homie-v2.riv`,

package/dist/components/homeBoard/ConfirmHomeAddress.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSnapshot } from 'valtio';
 import { t } from 'i18next';
-import { Box, Container, Stack, Center, Flex, Button, Text, keyframes, } from '@chakra-ui/react';
+import { Box, Container, Stack, Center, Flex, Button, Text, } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { AddressStored, SectionHeader, RadioButton, IncludePublicRecords, WrapperWithShadow, } from '..';
 import { HomeAddress, MagnifyingGlassReport } from '../../assets/images';
 import { confirmAddressProxy } from '../../proxies';

package/dist/components/icons/DisplayGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { colors } from '../../theme/colors';
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 export const DisplayGrid = ({ stroke = colors.blue[3], }) => {
     return (_jsx(Icon, { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.5 19.5", children: _jsxs("g", { fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", "data-name": "Group 14495", children: [_jsx("path", { d: "M.75.75h7.321v7.321H.75Z", "data-name": "Path 10064" }), _jsx("path", { d: "M11.429.75h7.321v7.321h-7.321Z", "data-name": "Path 10065" }), _jsx("path", { d: "M11.429 11.428h7.321v7.321h-7.321Z", "data-name": "Path 10066" }), _jsx("path", { d: "M.75 11.428h7.321v7.321H.75Z", "data-name": "Path 10067" })] }) }) }));
 };

package/dist/components/icons/DisplayItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 import { colors } from '../../theme/colors';
 export const DisplayItem = ({ stroke = colors.blue[3], }) => {
     return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.79 17.374", children: _jsxs("g", { stroke: stroke, "data-name": "Group 14548", children: [_jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M.75.75h18.29v11.438H.75Z", "data-name": "Path 10082" }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16845", children: [_jsx("path", { stroke: "none", d: "M.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M1.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16846", children: [_jsx("path", { stroke: "none", d: "M5.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M6.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16847", children: [_jsx("path", { stroke: "none", d: "M10.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M11.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16848", children: [_jsx("path", { stroke: "none", d: "M15.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M16.333 14.874h2v2h-2z" })] })] }) }) }));

package/dist/components/icons/DisplayList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 import { colors } from '../../theme/colors';
 export const DisplayList = ({ stroke = colors.blue[3], }) => {
     return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 14", children: _jsxs("g", { fill: stroke, "data-name": "Group 14455", children: [_jsx("path", { d: "M5 0h13v2H5z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M5 6h13v2H5z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M5 12h13v2H5z", "data-name": "Rectangle 14124" }), _jsx("path", { d: "M0 0h3v2H0z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M0 6h3v2H0z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M0 12h3v2H0z", "data-name": "Rectangle 14124" })] }) }) }));

package/dist/components/icons/Upload.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '@chakra-ui/icon';
+import { Icon } from '@chakra-ui/icons';
 import { colors } from '../../theme/colors';
 export const Upload = ({ stroke = colors.blue[6], }) => {
     return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.878 19.878", children: _jsxs("g", { fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", "data-name": "Icon feather-upload", children: [_jsx("path", { d: "M18.878 12.919v3.973a1.986 1.986 0 0 1-1.986 1.986H2.986A1.986 1.986 0 0 1 1 16.892v-3.973", "data-name": "Path 10078" }), _jsx("path", { d: "M14.905 5.966 9.939 1 4.973 5.966", "data-name": "Path 10079" }), _jsx("path", { d: "M9.939 1v11.919", "data-name": "Path 10080" })] }) }) }));

package/dist/components/inputs/SelectInputWithBadge.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { Box, Flex, Menu, MenuButton, MenuItem, MenuList, useDimensions, } from '@chakra-ui/react';
+import { Box, Flex, Menu, MenuButton, MenuItem, MenuList, useSize, } from '@chakra-ui/react';
 import { ChevronDown, SelectTextDisplay } from '..';
 export const SelectInputWithBadge = ({ handleClick, height = 'md', initialValue, isDisabled, items, width = '10rem', displaySelectedValue = false, }) => {
     const [selectedValue, setSelectedValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : 'All');
     const isLargeWidth = width < '100px';
     const elementRef = useRef(null);
-    const dimensions = useDimensions(elementRef);
+    const dimensions = useSize(elementRef);
     return (_jsx(Menu, { children: _jsxs(Box, { w: width, ref: elementRef, children: [_jsx(MenuButton, { w: "full", disabled: isDisabled, bg: "neutral.white", h: `input.${height}`, px: "2", border: "1px", borderRadius: "sm", borderColor: "lightBlue.6", _hover: { borderColor: 'blue.1' }, _focus: { borderColor: 'blue.3' }, _disabled: {
                         bg: 'container.transparent',
                         color: 'gray.1',
                         pointerEvents: 'none',
                         svg: { fill: 'gray.1' },
-                    }, children: _jsxs(Flex, { align: "center", gap: "2", justify: "space-between", children: [_jsx(SelectTextDisplay, { value: selectedValue, displaySelectedValue: displaySelectedValue }), _jsx(ChevronDown, {})] }) }), _jsx(MenuList, { zIndex: "dropdown", minH: "fit-content", maxH: "30rem", overflow: "scroll", w: isLargeWidth ? dimensions === null || dimensions === void 0 ? void 0 : dimensions.contentBox.width : 'fit-content', children: items === null || items === void 0 ? void 0 : items.map((item) => {
+                    }, children: _jsxs(Flex, { align: "center", gap: "2", justify: "space-between", children: [_jsx(SelectTextDisplay, { value: selectedValue, displaySelectedValue: displaySelectedValue }), _jsx(ChevronDown, {})] }) }), _jsx(MenuList, { zIndex: "dropdown", minH: "fit-content", maxH: "30rem", overflow: "scroll", w: isLargeWidth ? dimensions === null || dimensions === void 0 ? void 0 : dimensions.width : 'fit-content', children: items === null || items === void 0 ? void 0 : items.map((item) => {
                         const isSelectItem = typeof item === 'object';
                         const id = isSelectItem ? item._id : item;
                         const name = isSelectItem ? item.name : item;

package/dist/components/myHomes/steps/MyHomeDetails.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSnapshot } from 'valtio';
 import { t } from 'i18next';
-import { Box, Container, Stack, Center, Flex, Button, Text, keyframes, } from '@chakra-ui/react';
+import { Box, Container, Stack, Center, Flex, Button, Text, } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { AddressStored, FirstHomeHeader, SectionHeader, TextInput, RadioButton, IncludePublicRecords, WrapperWithShadow, } from '../..';
 import { HomeAddress, RelationshipHome, MagnifyingGlassReport, } from '../../../assets/images';
 import { firstHomeProxy } from '../../../proxies';

package/dist/components/myHomes/steps/SearchRecords.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Center, CircularProgress, Flex, Image, keyframes, Stack, } from '@chakra-ui/react';
+import { Box, Center, CircularProgress, Flex, Image, Stack, } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { useSnapshot } from 'valtio';
 import { AnimatedText, MyHomesStepBody, MyHomesStepWrapper } from '../..';
 import { addressProxy } from '../../../proxies';

package/dist/components/overlay/Overlay.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, keyframes } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 export const Overlay = (_a) => {
     var { bg = '#fdfdfdca', showOverlay = true, onClick } = _a, props = __rest(_a, ["bg", "showOverlay", "onClick"]);
     if (!showOverlay)

package/dist/components/partner/adminTiles/satisfactionTile/SatisfactionProgress.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Flex, keyframes, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
 import { Mark, SatisfactionBar } from '../../..';
 export const SatisfactionProgress = ({ satisfactionPercentage, }) => {
     const sentiments = ['great', 'good', 'ok', 'poor'];

package/dist/hooks/homeBoard/useConfirmHomeAddress.d.ts

@@ -4,22 +4,7 @@ export declare const useConfirmHomeAddress: (values: ConfirmAddressFormI | undef
     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/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/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/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.0.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/homeBoard/ConfirmHomeAddress.tsx

@@ -8,8 +8,8 @@ import {
   Flex,
   Button,
   Text,
-  keyframes,
 } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import {
   AddressStored,
   SectionHeader,

package/src/components/icons/DisplayGrid.tsx

@@ -1,5 +1,5 @@
 import { colors } from '@/theme/colors'
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 
 export const DisplayGrid = ({
   stroke = colors.blue[3],

package/src/components/icons/DisplayItem.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 import { colors } from '@/theme/colors'
 
 export const DisplayItem = ({

package/src/components/icons/DisplayList.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 import { colors } from '@/theme/colors'
 
 export const DisplayList = ({

package/src/components/icons/Upload.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@chakra-ui/icon'
+import { Icon } from '@chakra-ui/icons'
 import { colors } from '@/theme/colors'
 
 export const Upload = ({

package/src/components/inputs/SelectInputWithBadge.tsx

@@ -6,7 +6,7 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  useDimensions,
+  useSize,
 } from '@chakra-ui/react'
 import { ChevronDown, SelectTextDisplay } from '@/components'
 import { SelectI } from '@/interfaces'
@@ -20,10 +20,12 @@ export const SelectInputWithBadge = ({
   width = '10rem',
   displaySelectedValue = false,
 }: SelectI) => {
-  const [selectedValue, setSelectedValue] = useState<string>(initialValue ?? 'All')
+  const [selectedValue, setSelectedValue] = useState<string>(
+    initialValue ?? 'All'
+  )
   const isLargeWidth = width < '100px'
   const elementRef = useRef<HTMLDivElement>(null)
-  const dimensions = useDimensions(elementRef)
+  const dimensions = useSize(elementRef)
 
   return (
     <Menu>
@@ -59,7 +61,7 @@ export const SelectInputWithBadge = ({
           minH="fit-content"
           maxH="30rem"
           overflow="scroll"
-          w={isLargeWidth ? dimensions?.contentBox.width : 'fit-content'}
+          w={isLargeWidth ? dimensions?.width : 'fit-content'}
         >
           {items?.map((item) => {
             const isSelectItem = typeof item === 'object'

package/src/components/myHomes/steps/MyHomeDetails.tsx

@@ -8,8 +8,8 @@ import {
   Flex,
   Button,
   Text,
-  keyframes,
 } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import {
   AddressStored,
   FirstHomeHeader,

package/src/components/myHomes/steps/SearchRecords.tsx

@@ -5,9 +5,9 @@ import {
   CircularProgress,
   Flex,
   Image,
-  keyframes,
   Stack,
 } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { useSnapshot } from 'valtio'
 import { AnimatedText, MyHomesStepBody, MyHomesStepWrapper } from '@/components'
 import { addressProxy } from '@/proxies'

package/src/components/overlay/Overlay.tsx

@@ -1,4 +1,5 @@
-import { Box, keyframes } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { OverlayI } from '@/interfaces'
 
 export const Overlay = ({

package/src/components/partner/adminTiles/satisfactionTile/SatisfactionProgress.tsx

@@ -1,5 +1,6 @@
 import { t } from 'i18next'
-import { Box, Flex, keyframes, Stack, Text } from '@chakra-ui/react'
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 import { Mark, SatisfactionBar } from '@/components'
 import { SatisfactionProgressI, SatisfactionTypes } from '@/interfaces'
 

package/src/interfaces/icons/CustomIcon.interface.ts

@@ -1,9 +1,8 @@
-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
 }