@homefile/components-v2 2.52.3 → 2.53.1

package/dist/assets/locales/en/index.json

@@ -307,9 +307,9 @@
   "footer": {
     "copyright": "HMFC, Inc. All Rights Reserved.",
     "privacyLink": "Privacy Policy",
-    "privacyUrl": "https://homefile.com/privacy-policy",
+    "privacyUrl": "https://privacy.homefile.com",
     "termsLink": "Terms of Service",
-    "termsUrl": "https://homefile.com/terms-of-service"
+    "termsUrl": "https://terms.homefile.com"
   },
   "forms": {
     "addAll": "Add All",
@@ -328,9 +328,10 @@
     "errorImageSize": "Please select a file less than 25MB",
     "errorImageType": "File type must be .png, .jpeg, .jpg or .heic",
     "errorLogin": "Invalid email or password",
-    "errorPasswordLength": "Password must be at least 6 characters",
+    "errorPasswordLength": "Password must be at least 8 characters",
     "errorPasswordMatch": "Passwords do not match",
     "firstName": "First name",
+    "fullName": "Full name",
     "invalid": "Please type a valid",
     "invalid2": "Invalid field",
     "itemDetails": "Add Item Details",
@@ -1132,12 +1133,16 @@
     "signupPartner": "Don’t have a Homefile Partner account?"
   },
   "signup": {
-    "signin": "Already have a Homefile account?",
+    "signin": "Already have an account?",
     "signinPartner": "Already have a Homefile Partner account?",
     "signinBt": "Log in",
-    "signupBt": "Create Account",
+    "signupBt": "Create account",
+    "continueApple": "Continue with Apple",
+    "continueGoogle": "Continue with Google",
+    "or": "or",
+    "partnerCodePrompt": "Have a partner code?",
     "subtitle": "Create a strong password",
-    "terms": "By creating an account you agree to the Homefile ",
+    "terms": "By creating an account you agree to the",
     "title": "Create your Homefile Account",
     "titlePartner": "Create your Homefile Partner Account"
   },

package/dist/components/appBar/HomefileLogo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Flex, Image, Text } from '@chakra-ui/react';
-import { LogoSmall, HomefileUpdate } from '../../assets/images';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { BrandLogo } from '../../components/brand/BrandLogo';
 import { useWindowDimensions } from '../../hooks';
 import { MOBILE_WIDTH } from '../../utils';
 import { t } from 'i18next';
@@ -8,7 +8,7 @@ export const HomefileLogo = ({ onClick, isPartner = false }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
     if (!isPartner) {
-        return (_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, "data-testid": "homefile-logo", children: _jsx(Image, { src: isMobile ? LogoSmall : HomefileUpdate, alt: "Homefile", h: "image.logo" }) }));
+        return (_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, "data-testid": "homefile-logo", children: _jsx(BrandLogo, {}) }));
     }
-    return (_jsxs(Flex, { align: "center", gap: ['2', 'base'], children: [_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, "data-testid": "homefile-logo", children: _jsx(Image, { src: isMobile ? LogoSmall : HomefileUpdate, alt: "Homefile", h: "image.logo" }) }), !isMobile && (_jsx(Box, { pl: "base", borderLeft: "1px solid", borderColor: "gray.200", children: _jsx(Text, { fontSize: "18px", fontWeight: "medium", children: t('partner.admin') }) }))] }));
+    return (_jsxs(Flex, { align: "center", gap: ['2', 'base'], children: [_jsx(Button, { variant: "menuIcon", maxW: "fit-content", onClick: onClick, "data-testid": "homefile-logo", children: _jsx(BrandLogo, {}) }), !isMobile && (_jsx(Box, { pl: "base", borderLeft: "1px solid", borderColor: "border.subtle", children: _jsx(Text, { fontSize: "lg", fontWeight: "medium", children: t('partner.admin') }) }))] }));
 };

package/dist/components/brand/BrandLogo.d.ts

@@ -0,0 +1 @@
+export declare const BrandLogo: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/brand/BrandLogo.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, chakra } from '@chakra-ui/react';
+/**
+ * BrandLogo — the ONE Homefile logo, as code (not an image).
+ *
+ * Green house mark + "Homefile" wordmark in Poppins Medium + registered mark.
+ * Self-contained and themed via Chakra, so every surface that shows the logo
+ * (app bar, onboarding, partner, etc.) renders the exact same mark. Consolidates
+ * the previously fragmented logo images/components into a single source.
+ */
+// House icon path (viewBox 0 0 32.877 32.877), Homefile green #6ab528.
+const HOUSE_PATH = 'M912.815,312.316H885.7a2.882,2.882,0,0,0-2.882,2.882V342.31a2.882,2.882,0,0,0,2.882,2.882h8.473V334.22a4.936,4.936,0,0,1,9.872,0v8.58H901.77v-8.58a2.658,2.658,0,0,0-5.316,0v10.973h10.661V333.169a7.827,7.827,0,1,0-15.654,0v7.764h-2.278v-7.764c0-.287.013-.582.04-.881h-2.086a1.279,1.279,0,0,1-1.163-.692,1.073,1.073,0,0,1,.249-1.265l9.8-9.631,3.083-2.977.153-.147.153.147L902.5,320.7l9.8,9.626a1.076,1.076,0,0,1,.253,1.269,1.279,1.279,0,0,1-1.163.692h-2.028c.027.3.04.6.04.881v12.024h3.422a2.882,2.882,0,0,0,2.882-2.882V315.2A2.882,2.882,0,0,0,912.815,312.316Z';
+export const BrandLogo = () => (_jsxs(Flex, { align: "center", gap: "2.5", children: [_jsx(chakra.svg, { width: "33", height: "33", viewBox: "882.821 312.316 32.877 32.877", role: "img", "aria-label": "Homefile", xmlns: "http://www.w3.org/2000/svg", display: "block", children: _jsx(chakra.path, { d: HOUSE_PATH, fill: "brand.logo" }) }), _jsxs(Text, { fontFamily: "primary", fontWeight: "medium", fontSize: "2xl", lineHeight: "none", letterSpacing: "-0.01em", color: "text.heading", children: ["Homefile", _jsx(Box, { as: "sup", fontSize: "0.72em", verticalAlign: "-0.08em", ml: "-1px", children: "\u00AE" })] })] }));

package/dist/components/brand/index.d.ts

@@ -0,0 +1 @@
+export * from './BrandLogo';

package/dist/components/brand/index.js

@@ -0,0 +1 @@
+export * from './BrandLogo';

package/dist/components/button/Button.d.ts

@@ -0,0 +1,33 @@
+import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+/**
+ * Button — the canonical button atom.
+ *
+ * 3 templates (variant) × 2 real sizes × width/shape/colorScheme, with
+ * default/hover/active/focus/disabled states from the theme. This is the
+ * target set; the old 20 theme variants remain as a compat shim during
+ * migration. Width is a style-prop axis (w / isFullWidth), NOT baked in.
+ */
+export type ButtonTemplate = 'filled' | 'outline' | 'ghost';
+export type ButtonSize = 'standard' | 'compact';
+export type ButtonShape = 'square' | 'pillLeft' | 'pillRight';
+export type ButtonColorScheme = 'brand' | 'success';
+export interface ButtonProps extends Omit<ChakraButtonProps, 'variant' | 'size' | 'colorScheme'> {
+    /** fill treatment — the one real archetype axis */
+    variant?: ButtonTemplate;
+    /** real height: standard 3.4rem · compact 2.5rem */
+    size?: ButtonSize;
+    colorScheme?: ButtonColorScheme;
+    /** corner treatment — square (brand default) or a pill half for segmented pairs */
+    shape?: ButtonShape;
+    /** square icon-only button (sized to the height, no h-padding) */
+    isIcon?: boolean;
+}
+export declare const Button: import("@chakra-ui/react").ComponentWithAs<"button", ButtonProps>;
+/**
+ * IconButton — the most-used derivative (~60 real usages). A square,
+ * icon-only Button. `aria-label` is required (accessibility).
+ */
+export interface IconButtonProps extends Omit<ButtonProps, 'isIcon'> {
+    'aria-label': string;
+}
+export declare const IconButton: import("@chakra-ui/react").ComponentWithAs<"button", IconButtonProps>;

package/dist/components/button/Button.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ChakraButton, forwardRef } from '@chakra-ui/react';
+const shapeStyles = (shape) => {
+    if (shape === 'pillLeft')
+        return { borderLeftRadius: 'full', borderRightRadius: 'none' };
+    if (shape === 'pillRight')
+        return { borderRightRadius: 'full', borderLeftRadius: 'none' };
+    return {}; // square → the variant's own radius (none)
+};
+export const Button = forwardRef((_a, ref) => {
+    var { variant = 'filled', size = 'standard', colorScheme = 'brand', shape = 'square', isIcon = false } = _a, rest = __rest(_a, ["variant", "size", "colorScheme", "shape", "isIcon"]);
+    const iconProps = isIcon
+        ? { boxSize: size === 'compact' ? '2.5rem' : '3rem', minW: 0, px: 0 }
+        : {};
+    return (_jsx(ChakraButton, Object.assign({ ref: ref, variant: variant, size: size, colorScheme: colorScheme }, shapeStyles(shape), iconProps, rest)));
+});
+Button.displayName = 'Button';
+export const IconButton = forwardRef((props, ref) => (_jsx(Button, Object.assign({ ref: ref, isIcon: true, variant: "ghost" }, props))));
+IconButton.displayName = 'IconButton';

package/dist/components/forms/dynamicForm/fields/LabeledField.js

@@ -1,8 +1,61 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { Box, Text, Flex } from '@chakra-ui/react';
 export const LabeledField = ({ label, isFilled = false, children, }) => {
+    const wrapRef = useRef(null);
+    const [autofilled, setAutofilled] = useState(false);
+    // Chrome fills the DOM input on load without firing React's onChange, so the
+    // parent's `isFilled` (derived from React state) stays false and the label
+    // never floats. Detect the browser autofill directly via the `:-webkit-autofill`
+    // pseudo: on mount + a couple of short delays (autofill lands just after mount),
+    // and on Chrome's autofill animation event (covers a login picked from the
+    // saved-credentials dropdown, which also fires no onChange).
+    useEffect(() => {
+        const node = wrapRef.current;
+        if (!node)
+            return;
+        const check = () => {
+            const input = node.querySelector('input');
+            try {
+                setAutofilled(!!input && input.matches(':-webkit-autofill'));
+            }
+            catch (_a) {
+                // pseudo unsupported (non-Chromium) — fall back to React state only
+            }
+        };
+        check();
+        const timers = [
+            window.setTimeout(check, 80),
+            window.setTimeout(check, 400),
+        ];
+        const onAnim = (e) => {
+            var _a;
+            if ((_a = e.animationName) === null || _a === void 0 ? void 0 : _a.startsWith('hfAutofill'))
+                check();
+        };
+        node.addEventListener('animationstart', onAnim, true);
+        return () => {
+            timers.forEach(clearTimeout);
+            node.removeEventListener('animationstart', onAnim, true);
+        };
+    }, []);
     if (!label) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsxs(Box, { w: "100%", children: [isFilled && (_jsx(Flex, { gap: "1", align: "start", children: _jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "gray.2", mb: "0.5", children: label }) })), children] }));
+    const showLabel = isFilled || autofilled;
+    return (_jsxs(Box, { ref: wrapRef, w: "100%", sx: {
+            // Emit a no-op animation on autofill state changes so `animationstart`
+            // fires and re-checks the pseudo. This is how autofill is observable
+            // from JS (the pseudo alone gives no event).
+            '& input:-webkit-autofill': {
+                animationName: 'hfAutofillStart',
+                animationDuration: '0.001s',
+            },
+            '& input:not(:-webkit-autofill)': {
+                animationName: 'hfAutofillCancel',
+                animationDuration: '0.001s',
+            },
+            '@keyframes hfAutofillStart': { from: {}, to: {} },
+            '@keyframes hfAutofillCancel': { from: {}, to: {} },
+        }, children: [showLabel && (_jsx(Flex, { gap: "1", align: "start", children: _jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "gray.2", mb: "0.5", children: label }) })), children] }));
 };

package/dist/components/icons/AppleIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const AppleIcon: ({ size, fill }: {
+    size?: number | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/AppleIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors } from '../../theme/colors';
+export const AppleIcon = ({ size = 20, fill = colors.gray[4] }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 384 512", fill: fill, "aria-hidden": "true", children: _jsx("path", { d: "M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" }) }));
+};

package/dist/components/icons/GoogleIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const GoogleIcon: ({ size }: {
+    size?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/GoogleIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GoogleIcon = ({ size = 20 }) => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 48 48", "aria-hidden": "true", children: [_jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }), _jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }), _jsx("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }), _jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" })] }));
+};

package/dist/components/icons/index.d.ts

@@ -1,4 +1,6 @@
+export * from './AppleIcon';
 export * from './ArrowLeft';
+export * from './GoogleIcon';
 export * from './Calendar';
 export * from './Camera';
 export * from './ChevronDown';

package/dist/components/icons/index.js

@@ -1,4 +1,6 @@
+export * from './AppleIcon';
 export * from './ArrowLeft';
+export * from './GoogleIcon';
 export * from './Calendar';
 export * from './Camera';
 export * from './ChevronDown';

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './animations';
 export * from './appliances';
 export * from './appBar';
 export * from './badge';
+export * from './brand';
 export * from './buttons';
 export * from './contacts';
 export * from './customToast';

package/dist/components/index.js

@@ -3,6 +3,7 @@ export * from './animations';
 export * from './appliances';
 export * from './appBar';
 export * from './badge';
+export * from './brand';
 export * from './buttons';
 export * from './contacts';
 export * from './customToast';

package/dist/components/inputs/PasswordStrengthMeter.d.ts

@@ -0,0 +1,5 @@
+interface PasswordStrengthMeterProps {
+    password?: string;
+}
+export declare const PasswordStrengthMeter: ({ password, }: PasswordStrengthMeterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/inputs/PasswordStrengthMeter.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from '@chakra-ui/react';
+/**
+ * PasswordStrengthMeter — lightweight, dependency-free strength hint.
+ *
+ * This is UX GUIDANCE ONLY (client-side, bypassable). Real strength/breach
+ * enforcement belongs server-side — tracked separately (breach-check ticket).
+ */
+const LEVELS = [
+    { label: '', color: 'lightGray.1' }, // 0 — unused (empty returns null)
+    { label: 'Weak', color: 'red.1' },
+    { label: 'Fair', color: 'orange.2' },
+    { label: 'Good', color: 'blue.2' },
+    { label: 'Strong', color: 'status.success' },
+];
+const scorePassword = (pw) => {
+    if (!pw)
+        return 0;
+    let score = 1; // any input is at least "Weak"
+    if (pw.length >= 8)
+        score++;
+    if (pw.length >= 12)
+        score++;
+    const variety = [/[a-z]/, /[A-Z]/, /[0-9]/, /[^a-zA-Z0-9]/].filter((re) => re.test(pw)).length;
+    if (variety >= 3)
+        score++;
+    return Math.min(score, 4);
+};
+export const PasswordStrengthMeter = ({ password = '', }) => {
+    if (!password)
+        return null;
+    const score = scorePassword(password);
+    const level = LEVELS[score];
+    return (_jsxs(Box, { mt: "1.5", "aria-live": "polite", children: [_jsx(Flex, { gap: "1", mb: "1", children: [1, 2, 3, 4].map((i) => (_jsx(Box, { flex: "1", h: "4px", borderRadius: "full", bg: i <= score ? level.color : 'lightGray.1', transition: "background-color 0.2s ease" }, i))) }), _jsx(Text, { fontSize: "xxs", fontFamily: "secondary", color: level.color, textAlign: "right", children: level.label })] }));
+};

package/dist/components/inputs/TextInput.js

@@ -18,5 +18,5 @@ export const TextInput = (_a) => {
     const error = hasError && !isDisabled;
     const isFilled = String(value).trim().length > 0 && showLabel;
     const placeholderToUse = isFilled ? '' : ((_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : '');
-    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && (_jsx(Text, { variant: "error", my: "1", children: errorMessage })), hint && !error && (_jsx(Text, { variant: "hint", my: "1", children: hint }))] }));
+    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled })) }), error && (_jsx(Text, { variant: "error", my: "1", children: errorMessage })), hint && !error && (_jsx(Text, { variant: "hint", my: "1", children: hint }))] }));
 };

package/dist/components/inputs/index.d.ts

@@ -5,6 +5,7 @@ export * from './EditFileUploader';
 export * from './ItemSubTypeSelect';
 export * from './MobileFileUploader';
 export * from './PasswordInput';
+export * from './PasswordStrengthMeter';
 export * from './RadioCard';
 export * from './SearchInput';
 export * from './SelectButton';

package/dist/components/inputs/index.js

@@ -5,6 +5,7 @@ export * from './EditFileUploader';
 export * from './ItemSubTypeSelect';
 export * from './MobileFileUploader';
 export * from './PasswordInput';
+export * from './PasswordStrengthMeter';
 export * from './RadioCard';
 export * from './SearchInput';
 export * from './SelectButton';

package/dist/components/loaders/SkeletonBox.js

@@ -9,4 +9,4 @@ const shine = keyframes `
     background-position: 200% 0;
   }
 `;
-export const SkeletonBox = ({ height = '20px', width = '100%', borderRadius = 'md', }) => (_jsx(Box, { bg: "#F4F7F8", w: width, h: height, borderRadius: borderRadius, backgroundImage: "linear-gradient(90deg, #F4F7F8 0%, #e6ecee 50%, #F4F7F8 100%)", backgroundSize: "200% 100%", animation: `${shine} 1.5s infinite linear` }));
+export const SkeletonBox = ({ height = '20px', width = '100%', borderRadius = 'md', }) => (_jsx(Box, { bg: "bg.surface", w: width, h: height, borderRadius: borderRadius, backgroundImage: "linear-gradient(90deg, #F4F7F8 0%, #e6ecee 50%, #F4F7F8 100%)", backgroundSize: "200% 100%", animation: `${shine} 1.5s infinite linear` }));

package/dist/components/myHomes/HomeDetailsContent.js

@@ -17,5 +17,5 @@ import { House } from '../../assets/images';
 export const HomeDetailsContent = (_a) => {
     var props = __rest(_a, []);
     const { handleClose, isLoading, children, showFooter, footerButtons } = props;
-    return (_jsxs(DrawerContent, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { icon: House, handleCloseButton: handleClose, title: t("myHomes.details.header") }) }), _jsx(DrawerBody, { padding: "0 0 6rem 0", bg: "#F4F7F8", children: _jsx(Box, { children: isLoading ? (_jsx(Loading, {})) : (_jsxs(_Fragment, { children: [_jsx(HomeCard, Object.assign({}, props)), children] })) }) }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: showFooter, children: footerButtons }) })] }));
+    return (_jsxs(DrawerContent, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { icon: House, handleCloseButton: handleClose, title: t("myHomes.details.header") }) }), _jsx(DrawerBody, { padding: "0 0 6rem 0", bg: "bg.surface", children: _jsx(Box, { children: isLoading ? (_jsx(Loading, {})) : (_jsxs(_Fragment, { children: [_jsx(HomeCard, Object.assign({}, props)), children] })) }) }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: showFooter, children: footerButtons }) })] }));
 };

package/dist/components/onboarding/CardFooter.d.ts

@@ -1,2 +1,2 @@
 import { CardFooterI } from '../../interfaces';
-export declare const CardFooter: ({ title, buttonLabel, handleButtonClick, }: CardFooterI) => import("react/jsx-runtime").JSX.Element;
+export declare const CardFooter: ({ title, buttonLabel, handleButtonClick, children, }: CardFooterI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/CardFooter.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Container, Text, Button } from '@chakra-ui/react';
-export const CardFooter = ({ title = '', buttonLabel, handleButtonClick, }) => {
-    return (_jsx(Container, { variant: "secondary", centerContent: true, children: _jsxs(Box, { w: "full", px: ['container.sm', 'container.md', 'container.lg'], my: "auto", py: "2rem", children: [title !== '' && (_jsx(Text, { mb: 4, textAlign: "center", variant: "body", children: title })), _jsx(Button, { mb: 2, variant: "secondary", onClick: handleButtonClick, children: buttonLabel })] }) }));
+import { Box, Container, Text } from '@chakra-ui/react';
+export const CardFooter = ({ title = '', buttonLabel, handleButtonClick, children, }) => {
+    return (_jsx(Container, { variant: "secondary", centerContent: true, children: _jsxs(Box, { w: "full", px: ['container.sm', 'container.md', 'container.lg'], my: "auto", py: "2rem", children: [_jsxs(Text, { textAlign: "center", variant: "body", children: [title, ' ', _jsx(Box, { as: "button", type: "button", display: "inline", color: "link.default", fontWeight: "medium", onClick: handleButtonClick, _hover: { textDecoration: 'underline' }, _focusVisible: {
+                                textDecoration: 'underline',
+                                outline: '2px solid',
+                                outlineColor: 'border.focus',
+                                outlineOffset: '2px',
+                                borderRadius: 'sm',
+                            }, children: buttonLabel })] }), children && _jsx(Box, { mt: 6, children: children })] }) }));
 };

package/dist/components/onboarding/Footer.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Flex, Text } from '@chakra-ui/react';
 export const Footer = () => {
-    const currentDate = new Date();
-    const currentYear = currentDate.getFullYear();
-    return (_jsxs(Flex, { w: ['container.full', 'container.sm', 'container.md'], direction: ['column', 'row'], mx: "auto", my: 4, justifyContent: ['center', 'space-between'], alignItems: "center", children: [_jsx(Text, { variant: "label", children: `©${currentYear} ${t('footer.copyright')}` }), _jsxs(Flex, { gap: 2, children: [_jsx(Text, { variant: "label", children: _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') }) }), _jsx(Text, { variant: "label", children: _jsx("a", { target: "_blank", href: t('footer.privacyUrl'), children: t('footer.privacyLink') }) })] })] }));
+    const currentYear = new Date().getFullYear();
+    return (_jsx(Flex, { justifyContent: "center", px: 4, my: 4, children: _jsx(Text, { variant: "label", textAlign: "center", children: `©${currentYear} ${t('footer.copyright')}` }) }));
 };

package/dist/components/onboarding/Logo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Center, Container, Image } from '@chakra-ui/react';
-import { HomefileUpdate } from '../../assets/images';
+import { Center, Container } from '@chakra-ui/react';
+import { BrandLogo } from '../../components/brand/BrandLogo';
 export const Logo = () => {
-    return (_jsx(Container, { variant: "ghost", size: "full", children: _jsx(Center, { h: "container.xxs", children: _jsx(Image, { src: HomefileUpdate, alt: "Homefile", h: "image.logo" }) }) }));
+    return (_jsx(Container, { variant: "ghost", size: "full", children: _jsx(Center, { h: "container.xxs", children: _jsx(BrandLogo, {}) }) }));
 };

package/dist/components/onboarding/pages/SignUp.d.ts

@@ -1,2 +1,2 @@
 import { SignUpI } from '../../../interfaces';
-export declare const SignUp: ({ isLoading, isPartner, handleCreateAccount, handleSignIn, showPromoCode, signupErrorMessage, values, }: SignUpI) => import("react/jsx-runtime").JSX.Element;
+export declare const SignUp: ({ isLoading, isPartner, handleCreateAccount, handleSignIn, handleGoogleSignIn, handleAppleSignIn, signupErrorMessage, values, }: SignUpI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/SignUp.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { t } from 'i18next';
-import { Box, Button, Center, Container, Stack, Text } from '@chakra-ui/react';
-import { Footer, CardFooter, PageTitle, PasswordInput, TextInput, ButtonLoader, BasePageWrapper, AuthHeader, } from '../../../components';
-import { isEmptyField, isValidEmail, isValidPassword, passwordMatch, } from '../../../utils';
+import { Box, Button, Center, Container, Divider, Flex, Stack, Text, } from '@chakra-ui/react';
+import { Footer, CardFooter, PageTitle, PasswordInput, PasswordStrengthMeter, TextInput, ButtonLoader, BasePageWrapper, AuthHeader, GoogleIcon, AppleIcon, } from '../../../components';
+import { isEmptyField, isValidEmail, isValidPassword } from '../../../utils';
 import { useSignUp } from '../../../hooks';
-export const SignUp = ({ isLoading, isPartner, handleCreateAccount, handleSignIn, showPromoCode, signupErrorMessage, values = {
+export const SignUp = ({ isLoading, isPartner, handleCreateAccount, handleSignIn, handleGoogleSignIn, handleAppleSignIn, signupErrorMessage, values = {
     email: '',
     firstName: '',
     lastName: '',
@@ -12,15 +13,18 @@ export const SignUp = ({ isLoading, isPartner, handleCreateAccount, handleSignIn
     password: '',
     partnerCode: '',
 }, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { inputs, handleInputChange, handleSubmit, isValidated, passwordErrorMessage, } = useSignUp({
         handleCreateAccount,
         values,
     });
-    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsx(PageTitle, { title: isPartner ? t('signup.titlePartner') : t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [Boolean(signupErrorMessage) && (_jsx(Text, { variant: "error", children: signupErrorMessage })), _jsx(TextInput, { errorMessage: t('forms.firstName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.firstName), id: "firstName", placeholder: t('forms.firstName'), value: inputs.firstName, handleChange: handleInputChange, autoComplete: "given-name" }), _jsx(TextInput, { errorMessage: t('forms.lastName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.lastName), id: "lastName", placeholder: t('forms.lastName'), value: inputs.lastName, handleChange: handleInputChange, autoComplete: "family-name" }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
-                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: "email" }), showPromoCode && (_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", id: "partnerCode", placeholder: t('forms.promoCode'), value: (_a = inputs.partnerCode) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: "off" })), _jsx(Text, { textAlign: "center", variant: "caption", children: t('signup.subtitle') }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(values.password), hasError: isValidated &&
-                                        (!isValidPassword(inputs.password) ||
-                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(inputs.confirmPassword), hasError: isValidated &&
-                                        (!isValidPassword(inputs.confirmPassword) ||
-                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('forms.passwordConfirm'), value: (_c = inputs.confirmPassword) !== null && _c !== void 0 ? _c : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(Center, { px: ['container.sm', 'container.md', 'container.lg'], h: "4rem", children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') })] }) }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') })] }) }), _jsx(CardFooter, { title: isPartner ? t('signup.signinPartner') : t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn })] }), _jsx(Footer, {})] }));
+    // Partner code is hidden behind a "Have a partner code?" link, closed by default.
+    const [showPartnerCode, setShowPartnerCode] = useState(false);
+    // Social sign-in (and the "or" divider) appear only once OAuth is wired —
+    // i.e. a handler is actually provided by the app.
+    const showGoogle = Boolean(handleGoogleSignIn);
+    const showApple = Boolean(handleAppleSignIn);
+    const showSocial = showGoogle || showApple;
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(AuthHeader, { isPartner: isPartner }), _jsx(PageTitle, { title: isPartner ? t('signup.titlePartner') : t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [Boolean(signupErrorMessage) && (_jsx(Text, { variant: "error", children: signupErrorMessage })), _jsx(TextInput, { errorMessage: t('forms.fullName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.name), id: "name", placeholder: t('forms.fullName'), value: (_a = inputs.name) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: "name" }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
+                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: "email" }), _jsxs(Box, { children: [_jsx(PasswordInput, { errorMessage: passwordErrorMessage(values.password), hasError: isValidated && !isValidPassword(inputs.password), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: "new-password" }), _jsx(PasswordStrengthMeter, { password: (_c = inputs.password) !== null && _c !== void 0 ? _c : '' })] }), _jsx(Center, { children: _jsx(Button, { variant: "text", leftIcon: _jsx(Text, { as: "span", fontSize: "md", lineHeight: "1", children: "+" }), onClick: () => setShowPartnerCode((prev) => !prev), children: t('signup.partnerCodePrompt') }) }), showPartnerCode && (_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", id: "partnerCode", placeholder: t('forms.promoCode'), value: (_d = inputs.partnerCode) !== null && _d !== void 0 ? _d : '', handleChange: handleInputChange, autoComplete: "off" })), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') }), showSocial && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "3", py: "1", children: [_jsx(Divider, { flex: "1", borderColor: "border.default" }), _jsx(Text, { variant: "caption", children: t('signup.or') }), _jsx(Divider, { flex: "1", borderColor: "border.default" })] }), showGoogle && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(GoogleIcon, { size: 20 }), onClick: handleGoogleSignIn, children: t('signup.continueGoogle') })), showApple && (_jsx(Button, { variant: "secondary", leftIcon: _jsx(AppleIcon, { size: 20 }), onClick: handleAppleSignIn, children: t('signup.continueApple') }))] }))] }) }), _jsx(CardFooter, { title: isPartner ? t('signup.signinPartner') : t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn, children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), ' ', _jsxs(Text, { as: "span", whiteSpace: "nowrap", children: ["Homefile", ' ', _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') }), "."] })] }) })] }), _jsx(Footer, {})] }));
 };

package/dist/components/propertyTiles/charts/lineCharts/trendingLineChart/TrendingLineChart.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from '@chakra-ui/react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts';
 import { contentStyle, cursorStyle, labelStyle, itemStyle, yAxisStyle, TrendingLineChartHeader, } from '../../../../../components';
 import { colors } from '../../../../../theme/colors';
 export const TrendingLineChart = ({ data = [] }) => {
-    return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingLineChartHeader, {}), _jsxs(LineChart, { width: 300, height: 200, data: data, margin: {
-                    left: -25,
-                    bottom: -10,
-                }, children: [_jsx(CartesianGrid, {}), _jsx(XAxis, { dataKey: "year", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle }), _jsx(Tooltip, { contentStyle: contentStyle, cursor: cursorStyle, labelStyle: labelStyle, itemStyle: itemStyle }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: colors.green[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", dataKey: "invested", stroke: colors.yellow[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", strokeDasharray: "5 5", dataKey: "balance", stroke: colors.blue[8], strokeWidth: 3, dot: _jsx(Box, {}) })] })] }));
+    return (_jsxs(Stack, { spacing: "base", bg: "neutral.white", p: "base", children: [_jsx(TrendingLineChartHeader, {}), _jsx(ResponsiveContainer, { width: "100%", height: 200, children: _jsxs(LineChart, { data: data, margin: {
+                        left: -25,
+                        right: 8,
+                        bottom: -10,
+                    }, children: [_jsx(CartesianGrid, {}), _jsx(XAxis, { dataKey: "year", style: yAxisStyle }), _jsx(YAxis, { style: yAxisStyle }), _jsx(Tooltip, { contentStyle: contentStyle, cursor: cursorStyle, labelStyle: labelStyle, itemStyle: itemStyle }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: colors.green[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", dataKey: "invested", stroke: colors.yellow[1], strokeWidth: 3, dot: _jsx(Box, {}) }), _jsx(Line, { type: "monotone", strokeDasharray: "5 5", dataKey: "balance", stroke: colors.blue[8], strokeWidth: 3, dot: _jsx(Box, {}) })] }) })] }));
 };

package/dist/helpers/SignUp.helper.d.ts

@@ -1,4 +1,5 @@
 export declare const SignUpForm: {
+    name: string;
     firstName: string;
     lastName: string;
     email: string;

package/dist/helpers/SignUp.helper.js

@@ -1,4 +1,5 @@
 export const SignUpForm = {
+    name: '',
     firstName: '',
     lastName: '',
     email: '',

package/dist/hooks/onboarding/useSignUp.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { SignUpForm } from '../../helpers';
-import { isEmptyField, isValidEmail, isValidPassword, passwordMatch, } from '../../utils';
+import { isEmptyField, isValidEmail, isValidPassword } from '../../utils';
 export const useSignUp = ({ handleCreateAccount, values }) => {
     const [inputs, setInputs] = useState(SignUpForm);
     const [isValidated, setIsValidated] = useState(false);
@@ -13,16 +13,23 @@ export const useSignUp = ({ handleCreateAccount, values }) => {
         setInputs(Object.assign(Object.assign({}, inputs), { [event.target.id]: event.target.value }));
     };
     const handleSubmit = () => {
+        var _a;
         setIsValidated(true);
-        if (!isEmptyField(inputs.firstName) &&
-            !isEmptyField(inputs.lastName) &&
+        // One "Name" field in the UI; split into first/last for the backend
+        // (contract unchanged — firstName is what greetings/emails/Homi use).
+        const name = ((_a = inputs.name) !== null && _a !== void 0 ? _a : '').trim();
+        const [firstName = '', ...rest] = name.split(/\s+/);
+        const lastName = rest.join(' ');
+        if (!isEmptyField(name) &&
             isValidEmail(inputs.email) &&
-            isValidPassword(inputs.password) &&
-            passwordMatch(inputs.password, inputs.confirmPassword))
-            handleCreateAccount(inputs);
+            isValidPassword(inputs.password))
+            handleCreateAccount(Object.assign(Object.assign({}, inputs), { firstName, lastName }));
     };
     useEffect(() => {
-        setInputs(values);
+        var _a, _b;
+        // Prefill the single Name field from any first/last that arrives via props.
+        const name = values.name || `${(_a = values.firstName) !== null && _a !== void 0 ? _a : ''} ${(_b = values.lastName) !== null && _b !== void 0 ? _b : ''}`.trim();
+        setInputs(Object.assign(Object.assign({}, values), { name }));
     }, [values]);
     return {
         inputs,

package/dist/index.d.ts

@@ -7,3 +7,5 @@ export { homeAssistantWizardSteps, partnerWizardSteps } from './helpers';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, addressProxy, } from './proxies';
 import theme from './theme';
 export { theme };
+export { Button, IconButton } from './components/button/Button';
+export type { ButtonProps, IconButtonProps } from './components/button/Button';

package/dist/index.js

@@ -7,3 +7,4 @@ export { homeAssistantWizardSteps, partnerWizardSteps } from './helpers';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, addressProxy, } from './proxies';
 import theme from './theme';
 export { theme };
+export { Button, IconButton } from './components/button/Button';

package/dist/interfaces/onboarding/CardFooter.interface.d.ts

@@ -1,5 +1,7 @@
+import { ReactNode } from 'react';
 export interface CardFooterI {
     title?: string;
     buttonLabel: string;
     handleButtonClick: () => void;
+    children?: ReactNode;
 }

package/dist/interfaces/pages/SignUp.interface.d.ts

@@ -1,6 +1,7 @@
 export interface SignUpFormI {
     confirmPassword?: string;
     email: string;
+    name?: string;
     firstName: string;
     lastName: string;
     password?: string;
@@ -11,6 +12,8 @@ export interface SignUpI {
     isPartner?: boolean;
     handleCreateAccount: (form: SignUpFormI) => void;
     handleSignIn: () => void;
+    handleGoogleSignIn?: () => void;
+    handleAppleSignIn?: () => void;
     showPromoCode?: boolean;
     signupErrorMessage?: string;
     values?: SignUpFormI;

package/dist/stories/foundations/ButtonAtom.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/react';
+/**
+ * Button (atom) — the 3 canonical templates × 2 real sizes, plus shape and
+ * the IconButton derivative. Rendered through the real wrapper component.
+ * The old 20 theme variants remain untouched (compat shim) during migration.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Templates: () => import("react/jsx-runtime").JSX.Element;
+export declare const Shapes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Icons: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundations/ButtonAtom.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, Text, VStack } from '@chakra-ui/react';
+import { Button, IconButton } from '../../components/button/Button';
+/**
+ * Button (atom) — the 3 canonical templates × 2 real sizes, plus shape and
+ * the IconButton derivative. Rendered through the real wrapper component.
+ * The old 20 theme variants remain untouched (compat shim) during migration.
+ */
+export default {
+    title: 'Foundations/Button (atom)',
+};
+const Row = ({ label, variant, }) => (_jsxs(HStack, { spacing: "4", align: "center", children: [_jsx(Text, { w: "80px", fontSize: "xs", fontFamily: "secondary", color: "text.secondary", children: label }), _jsx(Button, { variant: variant, size: "standard", children: "Continue" }), _jsx(Button, { variant: variant, size: "compact", children: "Continue" }), _jsx(Button, { variant: variant, isDisabled: true, children: "Disabled" })] }));
+export const Templates = () => (_jsxs(VStack, { align: "stretch", spacing: "6", p: "8", bg: "bg.canvas", maxW: "640px", children: [_jsx(Text, { fontFamily: "primary", fontSize: "lg", color: "text.heading", children: "3 templates \u00B7 standard (3.4rem) + compact (2.5rem)" }), _jsx(Row, { label: "filled", variant: "filled" }), _jsx(Row, { label: "outline", variant: "outline" }), _jsx(Row, { label: "ghost", variant: "ghost" })] }));
+export const Shapes = () => (_jsxs(HStack, { spacing: "4", p: "8", bg: "bg.canvas", align: "center", children: [_jsx(Button, { shape: "square", children: "Square" }), _jsx(Button, { shape: "pillLeft", children: "Back" }), _jsx(Button, { shape: "pillRight", children: "Next" }), _jsx(Button, { width: "12rem", children: "Fixed width" })] }));
+export const Icons = () => (_jsxs(HStack, { spacing: "4", p: "8", bg: "bg.canvas", align: "center", children: [_jsx(IconButton, { "aria-label": "Add", variant: "outline", children: "\uFF0B" }), _jsx(IconButton, { "aria-label": "Menu", children: "\u2630" }), _jsx(IconButton, { "aria-label": "Close", size: "compact", children: "\u2715" })] }));

package/dist/stories/foundations/DesignTokens.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/react';
+/**
+ * Design Tokens — visual reference for the Step 1 semantic token layer.
+ *
+ * Every value is read from the live Chakra theme via `useTheme()`, so this
+ * doc CANNOT drift from `src/theme/index.ts`. Nothing here is hardcoded.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+export declare const Radii: () => import("react/jsx-runtime").JSX.Element;
+export declare const Shadows: () => import("react/jsx-runtime").JSX.Element;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundations/DesignTokens.stories.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Center, Code, Divider, Grid, HStack, Text, VStack, useTheme, } from '@chakra-ui/react';
+/**
+ * Design Tokens — visual reference for the Step 1 semantic token layer.
+ *
+ * Every value is read from the live Chakra theme via `useTheme()`, so this
+ * doc CANNOT drift from `src/theme/index.ts`. Nothing here is hardcoded.
+ */
+export default {
+    title: 'Foundations/Design Tokens',
+};
+// ── helpers ────────────────────────────────────────────────────────
+// Resolve a palette token ref (e.g. 'blue.2', 'overlay') to its raw hex.
+const resolveHex = (theme, token) => {
+    const parts = String(token).split('.');
+    let cur = theme.colors;
+    for (const p of parts)
+        cur = cur === null || cur === void 0 ? void 0 : cur[p];
+    return typeof cur === 'string' ? cur : token;
+};
+// Convert a radius value ('0.5rem' | '2px' | '9999px') to a px label.
+const toPx = (v) => {
+    if (typeof v !== 'string')
+        return '';
+    if (v.endsWith('rem'))
+        return `${parseFloat(v) * 16}px`;
+    return v;
+};
+// The 7 semantic groups WE authored, in display order. Explicit list keeps
+// Chakra's built-in semanticTokens (chakra-body-text, …) out of the doc.
+const COLOR_GROUPS = [
+    'brand',
+    'bg',
+    'text',
+    'border',
+    'link',
+    'status',
+    'accent',
+];
+const RADII_KEYS = ['none', 'sm', 'base', 'md', 'lg', 'xl', '2xl', 'full'];
+const SHADOW_KEYS = ['focusRing', 'cardHover'];
+// ── shared bits ────────────────────────────────────────────────────
+const SectionTitle = ({ children }) => (_jsx(Text, { fontFamily: "primary", fontSize: "lg", fontWeight: "semibold", color: "text.heading", textTransform: "capitalize", mb: "3", children: children }));
+const ColorSwatch = ({ role, alias, hex, }) => (_jsxs(Box, { borderWidth: "1px", borderColor: "border.subtle", borderRadius: "base", overflow: "hidden", bg: "bg.elevated", children: [_jsx(Box, { bg: role, h: "56px", borderBottomWidth: "1px", borderColor: "blackAlpha.100" }), _jsxs(Box, { p: "2", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xs", fontWeight: "bold", color: "text.heading", children: role }), _jsxs(Text, { fontFamily: "secondary", fontSize: "0.625rem", color: "text.secondary", children: ["alias: ", alias] }), _jsx(Text, { fontFamily: "secondary", fontSize: "0.625rem", color: "text.muted", textTransform: "uppercase", children: hex })] })] }));
+// ── 1. COLORS ──────────────────────────────────────────────────────
+export const Colors = () => {
+    var _a, _b;
+    const theme = useTheme();
+    const sem = (_b = (_a = theme.semanticTokens) === null || _a === void 0 ? void 0 : _a.colors) !== null && _b !== void 0 ? _b : {};
+    return (_jsx(VStack, { align: "stretch", spacing: "8", p: "base", maxW: "960px", children: COLOR_GROUPS.map((group) => {
+            var _a;
+            const roles = (_a = sem[group]) !== null && _a !== void 0 ? _a : {};
+            return (_jsxs(Box, { children: [_jsx(SectionTitle, { children: group }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(170px, 1fr))", gap: "4", children: Object.entries(roles).map(([role, val]) => {
+                            const alias = val === null || val === void 0 ? void 0 : val.default;
+                            if (!alias)
+                                return null;
+                            const fullRole = `${group}.${role}`;
+                            return (_jsx(ColorSwatch, { role: fullRole, alias: String(alias), hex: resolveHex(theme, alias) }, fullRole));
+                        }) })] }, group));
+        }) }));
+};
+// ── 2. RADII ───────────────────────────────────────────────────────
+export const Radii = () => {
+    const theme = useTheme();
+    return (_jsxs(Box, { p: "base", maxW: "960px", children: [_jsx(SectionTitle, { children: "Radii" }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(120px, 1fr))", gap: "6", children: RADII_KEYS.map((key) => {
+                    var _a;
+                    const value = (_a = theme.radii) === null || _a === void 0 ? void 0 : _a[key];
+                    if (value === undefined)
+                        return null;
+                    return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Box, { boxSize: "80px", bg: "brand.primary", borderRadius: key, mb: "2" }), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", fontWeight: "bold", color: "text.heading", children: key }), _jsxs(Text, { fontFamily: "secondary", fontSize: "0.625rem", color: "text.muted", children: [value, " \u00B7 ", toPx(value)] })] }, key));
+                }) })] }));
+};
+// ── 3. SHADOWS ─────────────────────────────────────────────────────
+export const Shadows = () => {
+    const theme = useTheme();
+    return (_jsxs(Box, { p: "base", maxW: "960px", children: [_jsx(SectionTitle, { children: "Shadows" }), _jsx(HStack, { spacing: "10", flexWrap: "wrap", align: "flex-start", children: SHADOW_KEYS.map((key) => {
+                    var _a;
+                    const value = (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a[key];
+                    if (value === undefined)
+                        return null;
+                    return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Box, { boxSize: "96px", bg: "bg.elevated", borderRadius: "base", boxShadow: key, mb: "3" }), _jsx(Text, { fontFamily: "secondary", fontSize: "xs", fontWeight: "bold", color: "text.heading", children: key }), _jsx(Text, { fontFamily: "secondary", fontSize: "0.625rem", color: "text.muted", maxW: "140px", textAlign: "center", children: value })] }, key));
+                }) })] }));
+};
+// ── 4. USAGE / INTRO ───────────────────────────────────────────────
+export const Usage = () => (_jsxs(Box, { p: "base", maxW: "720px", children: [_jsx(Text, { fontFamily: "primary", fontSize: "3xl", color: "text.heading", mb: "4", children: "Design Tokens" }), _jsxs(Text, { fontFamily: "secondary", fontSize: "md", color: "text.body", mb: "4", children: ["Semantic ", _jsx("b", { children: "roles" }), " that alias our existing palette. Instead of remembering that the brand blue is ", _jsx(Code, { children: "blue.2" }), " or a card background is ", _jsx(Code, { children: "lightBlue.1" }), ", you name the job:"] }), _jsxs(VStack, { align: "stretch", spacing: "1", mb: "5", children: [_jsx(Code, { children: "bg=\"bg.canvas\"" }), _jsx(Code, { children: "bg=\"bg.surface\"" }), _jsx(Code, { children: "color=\"text.heading\"" }), _jsx(Code, { children: "color=\"brand.primary\"" }), _jsx(Code, { children: "borderColor=\"border.default\"" })] }), _jsx(Divider, { mb: "5", borderColor: "border.subtle" }), _jsxs(Text, { fontFamily: "secondary", fontSize: "md", color: "text.body", mb: "3", children: [_jsx("b", { children: "One source of truth." }), " Every role points at one palette token, defined once in ", _jsx(Code, { children: "src/theme/index.ts" }), ". Change", ' ', _jsx(Code, { children: "brand.primary" }), " in that one place and every card, button, link and border that uses the role updates together."] }), _jsxs(Text, { fontFamily: "secondary", fontSize: "md", color: "text.body", children: [_jsx("b", { children: "Additive & opt-in." }), " These tokens are new and change nothing on screen yet \u2014 existing components still use raw palette tokens. Repointing components to these roles happens in a later step (Step 3). Use the roles in ", _jsx("i", { children: "new" }), " work now; nothing breaks."] })] }));

package/dist/theme/colors.d.ts

@@ -89,6 +89,7 @@ export declare const colors: {
         9: string;
         10: string;
         11: string;
+        brand: string;
     };
     teal: {
         1: string;
@@ -113,6 +114,7 @@ export declare const colors: {
     error: {
         1: string;
         2: string;
+        3: string;
     };
     dayGradient: string;
     morningGradient: string;

package/dist/theme/colors.js

@@ -89,6 +89,7 @@ export const colors = {
         9: '#726E60',
         10: '#5D675B',
         11: '#4C8827',
+        brand: '#6ab528', // Homefile logo house mark
     },
     teal: {
         1: '#F2EFF9',
@@ -113,6 +114,7 @@ export const colors = {
     error: {
         1: '#f5ddf4',
         2: '#F544DA',
+        3: '#D53F8C', // canonical validation-error color (was rendering via Chakra-default pink.500)
     },
     dayGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
     morningGradient: 'linear(to-b, #d2abf1, #f7dcac)',

package/dist/theme/components/ButtonStyles.d.ts

@@ -22,8 +22,90 @@ export declare const Button: {
         onboarding: {
             w: string[];
         };
+        standard: {
+            fontSize: string;
+            h: string;
+            px: string;
+            fontWeight: string;
+        };
+        compact: {
+            fontSize: string;
+            h: string;
+            px: string;
+            fontWeight: string;
+        };
     };
     variants: {
+        filled: ({ colorScheme: cs }: {
+            colorScheme?: string;
+        }) => {
+            color: string;
+            bg: string;
+            borderRadius: string;
+            boxShadow: string;
+            textTransform: string;
+            _hover: {
+                boxShadow: string;
+            };
+            _active: {
+                bg: string;
+                boxShadow: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+            _disabled: {
+                filter: string;
+                opacity: number;
+                pointerEvents: string;
+            };
+        };
+        outline: ({ colorScheme: cs }: {
+            colorScheme?: string;
+        }) => {
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            textTransform: string;
+            _hover: {
+                bg: string;
+            };
+            _active: {
+                bg: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+            _disabled: {
+                filter: string;
+                opacity: number;
+                pointerEvents: string;
+            };
+        };
+        ghost: ({ colorScheme: cs }: {
+            colorScheme?: string;
+        }) => {
+            color: string;
+            bg: string;
+            boxShadow: string;
+            textTransform: string;
+            _hover: {
+                color: string;
+                bg: string;
+            };
+            _active: {
+                color: string;
+            };
+            _focusVisible: {
+                boxShadow: string;
+            };
+            _disabled: {
+                filter: string;
+                pointerEvents: string;
+            };
+        };
         primary: {
             fontSize: string;
             textTransform: string;

package/dist/theme/components/ButtonStyles.js

@@ -22,13 +22,69 @@ export const Button = {
         onboarding: {
             w: ['button.full', 'button.md'],
         },
+        // ── Canonical sizes (the atom): 2 real heights, type-only. Width is a
+        // separate axis set via style props (w / isFullWidth), never baked here.
+        standard: { fontSize: 'md', h: 'button.xs', px: '1.4rem', fontWeight: 'medium' }, // 3.4rem
+        compact: { fontSize: 'sm', h: 'button.xxs', px: '1rem', fontWeight: 'medium' }, // 2.5rem
     },
     variants: {
+        // ── Canonical templates (the atom) ──────────────────────────────
+        // 3 templates × colorScheme (brand default; success on demand). Old
+        // variants below are deprecated aliases kept for the compat shim —
+        // migrate internal usages to these + props, then delete each.
+        filled: ({ colorScheme: cs }) => {
+            const c = cs === 'success'
+                ? { base: 'status.success', active: 'green.5' }
+                : { base: 'brand.primary', active: 'brand.primaryHover' };
+            return {
+                color: 'text.inverse',
+                bg: c.base,
+                borderRadius: 'none',
+                boxShadow: 'base',
+                textTransform: 'none',
+                _hover: { boxShadow: 'xl' },
+                _active: { bg: c.active, boxShadow: 'none' },
+                _focusVisible: { boxShadow: 'focusRing' },
+                _disabled: { filter: 'grayscale(100%)', opacity: 1, pointerEvents: 'none' },
+            };
+        },
+        outline: ({ colorScheme: cs }) => {
+            const c = cs === 'success'
+                ? { edge: 'status.success', tint: 'lightGreen.3', press: 'lightGreen.4' }
+                : { edge: 'brand.primary', tint: 'lightBlue.3', press: 'lightBlue.5' };
+            return {
+                color: c.edge,
+                bg: 'transparent',
+                border: '1px solid',
+                borderColor: c.edge,
+                borderRadius: 'none',
+                textTransform: 'none',
+                _hover: { bg: c.tint },
+                _active: { bg: c.press },
+                _focusVisible: { boxShadow: 'focusRing' },
+                _disabled: { filter: 'grayscale(100%)', opacity: 1, pointerEvents: 'none' },
+            };
+        },
+        ghost: ({ colorScheme: cs }) => {
+            const c = cs === 'success'
+                ? { text: 'status.success', hover: 'green.5' }
+                : { text: 'brand.primary', hover: 'brand.primaryHover' };
+            return {
+                color: c.text,
+                bg: 'transparent',
+                boxShadow: 'none',
+                textTransform: 'none',
+                _hover: { color: c.hover, bg: 'transparent' },
+                _active: { color: c.hover },
+                _focusVisible: { boxShadow: 'focusRing' },
+                _disabled: { filter: 'grayscale(100%)', pointerEvents: 'none' },
+            };
+        },
         primary: {
             fontSize: 'md',
-            textTransform: 'uppercase',
+            textTransform: 'none',
             h: 'button.xs',
-            fontWeight: 'regular',
+            fontWeight: 'medium',
             borderRadius: 'none',
             boxShadow: 'base',
             color: 'neutral.white',
@@ -49,10 +105,10 @@ export const Button = {
         },
         secondary: {
             fontSize: 'md',
-            textTransform: 'uppercase',
+            textTransform: 'none',
             h: 'button.xs',
             px: '1rem',
-            fontWeight: 'regular',
+            fontWeight: 'medium',
             borderRadius: 'none',
             boxShadow: 'base',
             backgroundColor: 'transparent',
@@ -66,7 +122,7 @@ export const Button = {
                 boxShadow: 'none',
             },
             _hover: {
-                backgroundColor: 'lightGreen.3',
+                backgroundColor: 'lightBlue.3',
                 boxShadow: 'lg',
             },
             _disabled: {
@@ -236,7 +292,7 @@ export const Button = {
         },
         rightRounded: {
             fontSize: 'md',
-            textTransform: 'uppercase',
+            textTransform: 'none',
             h: 'button.xs',
             pr: '3rem',
             fontWeight: 'semibold',
@@ -259,7 +315,7 @@ export const Button = {
         },
         menu: {
             fontSize: 'md',
-            textTransform: 'uppercase',
+            textTransform: 'none',
             h: 'button.xs',
             fontWeight: 'regular',
             borderRadius: 'none',
@@ -285,7 +341,7 @@ export const Button = {
             maxW: 'fit-content',
             px: '1rem',
             fontSize: 'md',
-            textTransform: 'uppercase',
+            textTransform: 'none',
             h: 'button.xxs',
             fontWeight: 'semibold',
             borderRadius: 'none',

package/dist/theme/components/InputStyles.js

@@ -25,7 +25,7 @@ export const Input = {
                 borderColor: 'lightBlue.6',
                 borderRadius: 'sm',
                 _placeholder: {
-                    color: 'gray.3',
+                    color: 'text.secondary', // #818181 — single source; consistent across all inputs
                 },
                 _hover: {
                     borderColor: 'blue.1',
@@ -44,7 +44,7 @@ export const Input = {
                     },
                 },
                 _invalid: {
-                    borderColor: 'pink.500',
+                    borderColor: 'status.error',
                 },
             },
         },
@@ -72,7 +72,7 @@ export const Input = {
                     },
                 },
                 _invalid: {
-                    borderColor: 'pink.500',
+                    borderColor: 'status.error',
                 },
             },
         },

package/dist/theme/components/SelectStyles.js

@@ -44,7 +44,7 @@ export const Select = {
                     },
                 },
                 _invalid: {
-                    borderColor: 'pink.500',
+                    borderColor: 'status.error',
                 },
             },
         },

package/dist/theme/components/TextArea.js

@@ -28,7 +28,7 @@ export const Textarea = {
                 },
             },
             _invalid: {
-                borderColor: 'pink.500',
+                borderColor: 'status.error',
             },
         },
     },

package/dist/theme/components/TextStyles.js

@@ -53,7 +53,7 @@ export const Text = {
         error: {
             fontSize: 'xs',
             fontFamily: 'secondary',
-            color: 'pink.500',
+            color: 'status.error',
             lineHeight: '13px',
         },
         hint: {

package/dist/theme/index.js

@@ -37,6 +37,58 @@ const theme = extendTheme({
         Textarea,
     },
     colors,
+    // Semantic token layer: purpose-named roles that ALIAS existing palette
+    // tokens (no new colors). Light-only ({ default }); dark can bolt on later.
+    // Consume as color props, e.g. bg="bg.canvas", color="text.heading".
+    semanticTokens: {
+        colors: {
+            brand: {
+                primary: { default: 'blue.2' }, // #2488C6
+                primaryHover: { default: 'blue.3' }, // #1D7AB4
+                primaryActive: { default: 'blue.8' }, // #1E6388
+                logo: { default: 'green.brand' }, // #6ab528 — logo house mark
+            },
+            bg: {
+                canvas: { default: 'lightBlue.4' }, // #DCE8EC — app body (matches global)
+                surface: { default: 'lightBlue.1' }, // #F4F7F8 — cards / tiles
+                elevated: { default: 'neutral.white' }, // #FFFFFF
+                subtle: { default: 'lightBlue.2' }, // #E9EDEF
+                hover: { default: 'lightGreen.1' }, // #F0F8F0 — row hover
+                overlay: { default: 'overlay' }, // #00000040 — modal scrim
+            },
+            text: {
+                heading: { default: 'gray.4' }, // #37323E
+                body: { default: 'gray.3' }, // #464646
+                secondary: { default: 'gray.2' }, // #818181
+                muted: { default: 'gray.1' }, // #ADB6BA
+                inverse: { default: 'neutral.white' }, // on dark/brand fills
+            },
+            border: {
+                default: { default: 'lightBlue.6' }, // #BCD1D8
+                subtle: { default: 'lightGray.1' }, // #E2EBEF
+                focus: { default: 'blue.2' }, // #2488C6
+            },
+            link: {
+                default: { default: 'blue.2' }, // #2488C6 — matches global `a`
+                hover: { default: 'blue.3' }, // #1D7AB4
+            },
+            status: {
+                success: { default: 'green.1' }, // #519F0E
+                successBg: { default: 'lightGreen.1' }, // #F0F8F0
+                error: { default: 'error.3' }, // #D53F8C — deliberately magenta, NOT red (red is used elsewhere in-app)
+                errorBg: { default: 'error.1' }, // #f5ddf4
+                warning: { default: 'orange.2' }, // #EA6808
+                warningBg: { default: 'orange.1' }, // #FDEDE2
+                info: { default: 'blue.2' }, // #2488C6
+                infoBg: { default: 'lightBlue.3' }, // #DFEFF8
+                caution: { default: 'yellow.1' }, // #DEB841
+            },
+            accent: {
+                homi: { default: 'teal.3' }, // #13C0B7 — Homi voice / special moments
+                violet: { default: 'violet.1' }, // #6041B7 — insight/accent
+            },
+        },
+    },
     fonts: {
         primary: 'Poppins',
         secondary: 'Assistant',
@@ -134,5 +186,23 @@ const theme = extendTheme({
             wMd: '22rem',
         },
     },
+    // Corner-radius scale — declared at Chakra defaults so existing
+    // borderRadius="sm|base|md|lg|xl" render identically; makes the scale ours (SSOT).
+    radii: {
+        none: '0',
+        sm: '0.125rem', // 2px
+        base: '0.25rem', // 4px
+        md: '0.375rem', // 6px
+        lg: '0.5rem', // 8px
+        xl: '0.75rem', // 12px
+        '2xl': '1rem', // 16px
+        full: '9999px',
+    },
+    // NEW, non-colliding shadow keys only — does NOT redefine Chakra's numeric
+    // keys, so existing boxShadow="base|lg|2xl" keep their current values.
+    shadows: {
+        focusRing: '0 0 0 2px #2488C6', // = blue.2 (v2 shadow strings can't ref color tokens)
+        cardHover: '0 4px 12px rgba(36,136,198,0.15)', // brand-tinted
+    },
 });
 export default theme;

package/dist/utils/Validations.utils.js

@@ -22,7 +22,7 @@ export const isValidEmail = (email = '') => {
     return true;
 };
 export const isValidPassword = (password = '') => {
-    return password.trim().length >= 6;
+    return password.trim().length >= 8;
 };
 export const passwordMatch = (password = '', confirmPassword = '') => {
     return password.trim() === confirmPassword.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.52.3",
+  "version": "2.53.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",