@homefile/components-v2 2.59.1 → 2.60.0

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

@@ -546,7 +546,7 @@
       "title": "You are viewing "
     },
     "details": {
-      "header": "Homefile Summary",
+      "header": "Edit Home",
       "tabs": {
         "tab1": "Details",
         "tab2": "Projects",
@@ -558,6 +558,7 @@
       "title": "Let’s add your first home."
     },
     "form": {
+      "editHomeName": "Home Name",
       "externalLink": "Add optional external link",
       "homeName": "Name your home",
       "name": "Name or Project Number",
@@ -626,6 +627,7 @@
       "2FactorSubtitle": "Select how you would like to receive your 2FA codes. These codes keep your account secure.",
       "2FactorTitle": "2 Factor Authentication (2FA)",
       "homiSmsAlt": "Homi SMS",
+      "homiSmsConsent": "SMS messaging consent & terms",
       "homiSmsSubtitle": "Enable SMS messaging to interact with Homi without a mobile app. Text images, documents, and information directly into Homefile so Homi can capture and organize it for you automatically.",
       "homiSmsTitle": "Enable Homi SMS Messaging"
     },
@@ -1062,7 +1064,8 @@
     "title": "Reset your Password"
   },
   "roomHeader": {
-    "roomValue": "Est room value",
+    "estValue": "Est. value",
+    "roomValue": "Room value",
     "saveBtn": "Save"
   },
   "rooms": {

package/dist/components/folderPanel/displayFiles/GridFile.js

@@ -14,15 +14,23 @@ import { Button, Image, Text, Box, WrapItem, Stack } from '@chakra-ui/react';
 import { IconMenuWithMove, MoreHorizontal } from '../../../components';
 import { DocIcon } from '../../../assets/images';
 import { fileTypes, getFileExtension } from '../../../helpers';
+import { useDisplayFiles } from '../../../hooks';
 export const GridFile = (_a) => {
     var { menu = [], onClick, onMove } = _a, props = __rest(_a, ["menu", "onClick", "onMove"]);
     const { _id, title, updatedAt, files = [], receipt, report } = props;
     const fileExtension = getFileExtension(files, !!receipt);
+    // Real image thumbnail (empty string for non-images); falls back to the icon.
+    const { imageUrl } = useDisplayFiles({ files, title });
+    const typeIcon = report && report.length > 0 && !receipt
+        ? DocIcon
+        : fileTypes[fileExtension] || DocIcon;
     const itemForm = {
         _id,
         name: title || '',
         updatedAt,
         icon: fileTypes[fileExtension] || DocIcon,
     };
-    return (_jsxs(WrapItem, { maxW: "7rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: "0", right: "1", zIndex: "docked", children: _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) }) }), _jsx(Button, { variant: "folder", px: "base", pb: "base", pt: "6", onClick: () => onClick(props), children: _jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Image, { src: (report && report.length > 0 && !receipt) ? DocIcon : fileTypes[fileExtension] || DocIcon, w: "46px", h: "49px", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { children: [_jsx(Text, { isTruncated: true, maxWidth: "5rem", fontSize: "sm", children: title }), _jsx(Text, { variant: "date", children: updatedAt })] })] }) })] }));
+    return (_jsxs(WrapItem, { maxW: "7rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: "0", right: "1", zIndex: "docked", children: _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) }) }), _jsx(Button, { variant: "folder", px: "base", pb: "base", pt: "6", onClick: () => onClick(props), children: _jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Image, Object.assign({ src: imageUrl || typeIcon, fallbackSrc: typeIcon }, (imageUrl
+                            ? { boxSize: '72px', objectFit: 'cover', borderRadius: 'base' }
+                            : { w: '46px', h: '49px' }), { alt: fileExtension, transition: "all 0.2s ease-in-out" })), _jsxs(Box, { children: [_jsx(Text, { isTruncated: true, maxWidth: "5rem", fontSize: "sm", children: title }), _jsx(Text, { variant: "date", children: updatedAt })] })] }) })] }));
 };

package/dist/components/folderPanel/displayFiles/ListFile.js

@@ -14,15 +14,23 @@ import { Image, Text, Box, Flex } from '@chakra-ui/react';
 import { IconMenuWithMove, MoreHorizontal } from '../../../components';
 import { DocIcon } from '../../../assets/images';
 import { fileTypes, getFileExtension } from '../../../helpers';
+import { useDisplayFiles } from '../../../hooks';
 export const ListFile = (_a) => {
     var { menu = [], onClick, onMove } = _a, props = __rest(_a, ["menu", "onClick", "onMove"]);
     const { _id, title, updatedAt, files = [], receipt, report } = props;
     const fileExtension = getFileExtension(files, !!receipt);
+    // Real image thumbnail (empty string for non-images); falls back to the icon.
+    const { imageUrl } = useDisplayFiles({ files, title });
+    const typeIcon = report && report.length > 0 && !receipt
+        ? DocIcon
+        : fileTypes[fileExtension] || DocIcon;
     const itemForm = {
         _id,
         name: title || '',
         updatedAt,
         icon: fileTypes[fileExtension] || DocIcon,
     };
-    return (_jsx(Box, { bg: "neutral.white", w: "100%", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.1' }, children: _jsxs(Flex, { children: [_jsxs(Flex, { gap: "base", p: "base", as: "button", flex: "1", onClick: () => onClick(props), children: [_jsx(Image, { src: (report && report.length > 0 && !receipt) ? DocIcon : fileTypes[fileExtension] || DocIcon, minW: "32px", h: "auto", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { mt: "-1", children: [_jsx(Text, { variant: "date", textTransform: "uppercase", textAlign: "left", children: fileExtension === '' ? 'Doc' : fileExtension }), _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, fontSize: "sm", textAlign: "left", children: title })] })] }), _jsxs(Flex, { align: "center", gap: "2", h: "fit-content", p: "1", pr: "base", children: [_jsx(Text, { variant: "date", w: "fit-content", children: updatedAt }), _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) })] })] }) }));
+    return (_jsx(Box, { bg: "neutral.white", w: "100%", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.1' }, children: _jsxs(Flex, { children: [_jsxs(Flex, { gap: "base", p: "base", as: "button", flex: "1", onClick: () => onClick(props), children: [_jsx(Image, Object.assign({ src: imageUrl || typeIcon, fallbackSrc: typeIcon }, (imageUrl
+                            ? { boxSize: '40px', objectFit: 'cover', borderRadius: 'base' }
+                            : { minW: '32px', h: 'auto' }), { alt: fileExtension, transition: "all 0.2s ease-in-out" })), _jsxs(Box, { mt: "-1", children: [_jsx(Text, { variant: "date", textTransform: "uppercase", textAlign: "left", children: fileExtension === '' ? 'Doc' : fileExtension }), _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, fontSize: "sm", textAlign: "left", children: title })] })] }), _jsxs(Flex, { align: "center", gap: "2", h: "fit-content", p: "1", pr: "base", children: [_jsx(Text, { variant: "date", w: "fit-content", children: updatedAt }), _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) })] })] }) }));
 };

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

@@ -23,7 +23,7 @@ export const DynamicForm = (_a) => {
     if (searching) {
         return _jsx(SearchItemLoader, {});
     }
-    return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title !== null && title !== void 0 ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
+    return (_jsxs(Stack, { bg: props.style === 'wizard' ? 'transparent' : 'lightBlue.1', spacing: "0", h: "full", overflowX: props.style === 'wizard' ? 'visible' : 'hidden', children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title !== null && title !== void 0 ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
                         const { comments, canBeHidden, children, description, icon, id, name, label, options, type, value, } = field;
                         const baseProps = {
                             id,

package/dist/components/forms/dynamicForm/HiddenField.js

@@ -4,7 +4,7 @@ import { Plus } from '../../../components';
 import { colors } from '../../../theme/colors';
 export const HiddenField = ({ disabled, h = '80px', icon, id, isActive, name, onClick, showPlusIcon = false, }) => {
     const handleClick = () => onClick(id);
-    return (_jsxs(Box, { position: "relative", children: [_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "4px", w: "100%", h: h, boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
+    return (_jsxs(Box, { position: "relative", children: [_jsxs(Center, { as: "button", disabled: disabled, bg: "neutral.white", borderRadius: "4px", w: "100%", h: h, boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", py: "2", px: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: isActive ? 'blue.1' : 'transparent', _hover: {
                     borderColor: 'blue.1',
                 }, _disabled: {
                     opacity: 0.5,
@@ -13,5 +13,5 @@ export const HiddenField = ({ disabled, h = '80px', icon, id, isActive, name, on
                     },
                 }, _active: {
                     boxShadow: 'md',
-                }, children: [_jsx(Image, { h: "22px", w: "auto", maxW: "28px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }), showPlusIcon && (_jsx(Box, { position: "absolute", top: "1", left: "1", children: _jsx(Plus, { size: 14, stroke: colors.blue[3] }) }))] }));
+                }, children: [_jsx(Center, { flex: "1", children: _jsx(Image, { h: "28px", w: "auto", maxW: "36px", src: icon }) }), _jsx(Text, { fontFamily: "primary", color: "gray.3", textTransform: "uppercase", fontSize: "12px", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }), showPlusIcon && (_jsx(Box, { position: "absolute", top: "1", left: "1", children: _jsx(Plus, { size: 14, stroke: colors.blue[3] }) }))] }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
-import { WizardTextBody, WizardInitialOptions, WizardStepOptions, } from '../../../../components';
+import { WizardTextBody, WizardInitialOptions, WizardStepOptions, WizardSelectCard, } from '../../../../components';
 export const HomeInitialSetup = ({ fields, callback, style }) => {
     // const isWizard = style === 'wizard'
     return (_jsx(Stack, { bg: "neutral.white", spacing: { base: '6', md: '0' }, children: fields === null || fields === void 0 ? void 0 : fields.map(({ children = [], id, label = '', type, value, description }) => {
@@ -11,6 +11,8 @@ export const HomeInitialSetup = ({ fields, callback, style }) => {
                     return (_jsx(WizardInitialOptions, { form: children, title: String(value), callback: callback, style: style }, id));
                 case 'home-wizard-step-options':
                     return (_jsx(WizardStepOptions, { form: children, title: String(value), callback: callback, style: style }, id));
+                case 'home-wizard-select-card':
+                    return (_jsx(WizardSelectCard, { form: children, title: String(value), callback: callback, style: style }, id));
                 default:
                     return null;
             }

package/dist/components/forms/readOnly/ReadOnlyDynamicForm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Box } from '@chakra-ui/react';
-import { ReadOnlyAppliances, ReadOnlyCollapsible, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyNotes, ReadOnlyRating, ReadOnlyTextArea, } from '../../../components';
+import { ReadOnlyAppliances, ReadOnlyCollapsible, ReadOnlyDate, ReadOnlyGrid, ReadOnlyGroup, ReadOnlyInput, ReadOnlyHistory, ReadOnlyNotes, ReadOnlyOverview, ReadOnlyPurchaseDetails, ReadOnlyRating, ReadOnlyTextArea, ReadOnlyWarrantyBanner, } from '../../../components';
 import { fieldIcons } from '../../../helpers';
 /**
  * Coerce a field value into something safe to render. A malformed value that
@@ -51,7 +51,7 @@ export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit, }) => {
                 case 'textarea':
                     return (_createElement(ReadOnlyTextArea, Object.assign({}, baseProps, { key: `${id}-${name}-${value}-${type}` })));
                 case 'grid':
-                    return (_jsx(ReadOnlyGrid, { onClick: onClick, children: children }, id));
+                    return (_jsx(ReadOnlyGrid, { onClick: onClick, borderBottom: "none", children: children }, id));
                 case 'group':
                     return _jsx(ReadOnlyGroup, { children: children }, id);
                 case 'appliances':
@@ -60,6 +60,14 @@ export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit, }) => {
                     return _createElement(ReadOnlyCollapsible, Object.assign({}, field, { key: id }));
                 case 'notes':
                     return _createElement(ReadOnlyNotes, Object.assign({}, field, { key: id }));
+                case 'warranty':
+                    return _createElement(ReadOnlyWarrantyBanner, Object.assign({}, field, { key: id }));
+                case 'purchase':
+                    return (_createElement(ReadOnlyPurchaseDetails, Object.assign({}, field, { key: id, onClick: onClick })));
+                case 'overview':
+                    return _createElement(ReadOnlyOverview, Object.assign({}, field, { key: id }));
+                case 'history':
+                    return _createElement(ReadOnlyHistory, Object.assign({}, field, { key: id }));
                 default:
                     return null;
             }

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.js

@@ -1,24 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, Flex, Stack, IconButton, Box } from '@chakra-ui/react';
-import { ReadOnlyHomeItemRating, Edit, ReadOnlyHomeItemImages, ReadOnlyHomeItemText, } from '../../../../../components';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Text, Flex, Stack, IconButton, Box, Image, SimpleGrid } from '@chakra-ui/react';
+import { Edit } from '../../../../../components';
 import { colors } from '../../../../../theme/colors';
-export const ReadOnlyAppliances = ({ description, id, name, children, onEdit, value, }) => {
-    const rating = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'rating');
-    const images = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'images');
-    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [name ||
-                (onEdit && (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), onEdit && (_jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) }))] }))), _jsxs(Flex, { gap: "base", children: [_jsx(ReadOnlyHomeItemImages, Object.assign({}, images)), _jsxs(Stack, { spacing: "4", flex: "1", children: [_jsx(ReadOnlyHomeItemRating, Object.assign({}, rating)), _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "22px", fontWeight: "semibold", children: value }), _jsx(Box, { children: children === null || children === void 0 ? void 0 : children.map(({ id, name, value, type }) => {
-                                            const baseProps = {
-                                                key: `${id}-${name}-${value}-${type}`,
-                                                id,
-                                                value,
-                                                type,
-                                                name,
-                                            };
-                                            switch (type) {
-                                                case 'text':
-                                                    return _jsx(ReadOnlyHomeItemText, Object.assign({}, baseProps));
-                                                default:
-                                                    return null;
-                                            }
-                                        }) }), _jsx(Box, { flex: "1", borderBottom: "1px dashed", borderColor: "lightBlue.6", h: "1px" }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description })] })] })] })] }));
+import { formatCurrency } from '../../../../../utils';
+// Dashed rule between sections (XD: light gray dashed).
+const DashedRule = () => (_jsx(Box, { borderBottom: "1px dashed", borderColor: "lightGray.2" }));
+// Brand / Model# / Serial# row — label #6C7679, value #464646 (XD).
+const DetailRow = ({ label, value }) => (_jsxs(Flex, { children: [_jsx(Text, { w: "35%", fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "gray.3", children: value != null ? String(value) : '' })] }));
+// Retail Price / Est Replacement Cost — label left #6C7679, value right #464646.
+const ValueRow = ({ label, value, bold, }) => (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", color: "gray.3", fontWeight: bold ? 'bold' : 'normal', children: value != null && value !== ''
+                ? formatCurrency({ value: value })
+                : '' })] }));
+export const ReadOnlyAppliances = ({ description, id, name, children = [], onEdit, value, }) => {
+    var _a;
+    const imageField = children.find(({ type }) => type === 'images');
+    const images = (_a = imageField === null || imageField === void 0 ? void 0 : imageField.value) !== null && _a !== void 0 ? _a : [];
+    const [mainImage, setMainImage] = useState(images[0]);
+    const detailFields = children.filter(({ type }) => type === 'text');
+    const valueFields = children.filter(({ type }) => type === 'currency');
+    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [(name || onEdit) && (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", children: [_jsx(Text, { fontFamily: "primary", fontSize: "12px", letterSpacing: "0", color: "#525458", textTransform: "uppercase", children: name }), onEdit && (_jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", minW: "auto", h: "auto", p: "0", flexShrink: 0, icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) }))] })), _jsxs(Flex, { gap: "base", align: "stretch", children: [_jsxs(Flex, { direction: "column", gap: "base", flexShrink: 0, w: "174px", children: [_jsx(Image, { src: mainImage, alt: "home item", boxSize: "174px", objectFit: "cover" }), images.length > 0 && (_jsx(SimpleGrid, { columns: 4, spacing: "2", children: images.map((image) => (_jsx(Box, { as: "button", backgroundImage: image, backgroundSize: "cover", backgroundPosition: "center", boxSize: "34px", onClick: () => setMainImage(image) }, image))) }))] }), _jsxs(Stack, { flex: "1", spacing: "base", children: [_jsxs(Stack, { spacing: "13px", children: [_jsx(Text, { fontFamily: "primary", fontWeight: "600", fontSize: "22px", lineHeight: "15px", letterSpacing: "0", color: "gray.3", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "15px", color: "gray.3", children: description })] }), _jsx(DashedRule, {}), detailFields.length > 0 && (_jsx(Stack, { spacing: "0", children: detailFields.map((field) => (_jsx(DetailRow, { label: field.name ? `${field.name}:` : undefined, value: field.value }, `${field.id}-${field.name}`))) })), valueFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(DashedRule, {}), _jsx(Stack, { spacing: "0", children: valueFields.map((field, i) => (_jsx(ValueRow, { label: field.name, value: field.value, bold: i === valueFields.length - 1 }, `${field.id}-${field.name}`))) })] }))] })] })] }));
 };

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, Stack, Grid } from '@chakra-ui/react';
+import { Text, Stack, Box, Flex } from '@chakra-ui/react';
 import { HiddenField } from '../../../../../components';
 import { fieldIcons } from '../../../../../helpers';
+// Care & Guidelines column: hugs its content (content-width) so the Parts
+// column can fill the remaining width to the right of the 13px separator.
+// Tiles are fixed 75px squares (HiddenField's own `h` prop — not modified).
 export const ReadOnlyGuidelines = ({ name, children, onClick, }) => {
-    return (_jsxs(Stack, { spacing: "base", flex: "1", width: "100%", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(Grid, { templateColumns: "repeat(auto-fit, minmax(0, 75px))", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
+    return (_jsxs(Stack, { spacing: "base", width: "fit-content", flexShrink: 0, children: [_jsx(Text, { fontFamily: "primary", fontSize: "12px", color: "gray.3", textTransform: "uppercase", children: name }), _jsx(Flex, { flexWrap: "wrap", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
                     const { id, icon, value } = child;
                     const btnIcon = icon ? fieldIcons[icon] : '';
-                    return (_jsx(HiddenField, { id: id, icon: btnIcon, name: value, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id) }, id));
+                    return (_jsx(Box, { w: "75px", children: _jsx(HiddenField, { id: id, h: "75px", icon: btnIcon, name: value, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id) }) }, id));
                 }) })] }));
 };

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHistory.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../../interfaces';
+export declare const ReadOnlyHistory: ({ name, value, label, accentColor, children, }: ReportI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHistory.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Stack, Text } from '@chakra-ui/react';
+import { DatePennant, HistoryCard } from '../../../../../components';
+import { fieldIcons } from '../../../../../helpers';
+import { formatCurrency } from '../../../../../utils';
+// label (left #6C7679) + value (right #464646) — Brand / Model# rows (XD "Card").
+const Row = ({ label, value }) => (_jsxs(Flex, { gap: "base", children: [_jsx(Text, { minW: "70px", fontFamily: "secondary", fontSize: "14px", lineHeight: "20px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "20px", color: "gray.3", children: value != null ? String(value) : '' })] }));
+// A single history event on the timeline: a date pennant (color per event type)
+// joined by a node to the core HistoryCard. `label` = the pennant date,
+// `accentColor` = the pennant color. Body is derived from children: an optional
+// bold heading (value, e.g. a service company), Brand/Model-style rows for named
+// text, plain lines for unnamed (address), a currency child as the attachment,
+// an images child as the logo.
+export const ReadOnlyHistory = ({ name, value, label, accentColor, children = [], }) => {
+    var _a;
+    const image = (_a = children.find(({ type }) => type === 'images')) === null || _a === void 0 ? void 0 : _a.value;
+    const attach = children.find(({ type }) => type === 'currency');
+    const textFields = children.filter(({ type }) => type === 'text');
+    const heading = value != null && value !== '' ? String(value) : '';
+    const color = accentColor || '#1E6388';
+    // Honesty: nothing credible to show → render nothing.
+    if (!name && !heading && textFields.length === 0 && !attach)
+        return null;
+    const attachment = attach
+        ? {
+            // Data-driven file-type icon (e.g. 'pdf'); none if unspecified.
+            icon: attach.icon ? fieldIcons[attach.icon] : undefined,
+            label: attach.name,
+            amount: attach.value != null && attach.value !== ''
+                ? formatCurrency({ value: attach.value })
+                : undefined,
+        }
+        : undefined;
+    return (_jsx(Box, { pl: "base", pr: "base", pt: "base", _last: { pb: 'base' }, children: _jsxs(Flex, { align: "flex-start", children: [_jsxs(Flex, { align: "center", pt: "12px", flexShrink: 0, children: [_jsx(DatePennant, { date: label, color: color }), _jsx(Box, { boxSize: "10px", borderRadius: "full", bg: "neutral.white", border: "2px solid", borderColor: color, ml: "0", zIndex: 2 })] }), _jsx(Box, { flex: "1", ml: "6px", children: _jsx(HistoryCard, { title: name, image: image, imagePosition: heading ? 'right' : 'left', attachment: attachment, children: _jsxs(Stack, { spacing: "0", children: [heading && (_jsx(Text, { fontFamily: "secondary", fontWeight: "bold", fontSize: "16px", lineHeight: "22px", color: "gray.3", children: heading })), textFields.map((field) => field.name ? (_jsx(Row, { label: `${field.name}:`, value: field.value }, field.id)) : (_jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "#3E4045", children: field.value != null ? String(field.value) : '' }, field.id)))] }) }) })] }) }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyItemRelated.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, Stack, Grid, Box } from '@chakra-ui/react';
+import { Text, Stack, Grid, Box, Flex, Link } from '@chakra-ui/react';
 import { HiddenField } from '../../../../../components';
 import { fieldIcons } from '../../../../../helpers';
+// Parts & Accessories column: fills the width to the right of the separator
+// (flex="1"), so "View All" sits at the right edge. The 13px on the LEFT of the
+// separator is the parent Flex `gap="base"` (=13px); the 13px on the RIGHT is
+// this box's `pl="13px"`. Tiles are fixed 75px squares, three across, wrapping
+// in threes. Icons are data-driven (each part's `icon` → the appliance icon).
 export const ReadOnlyItemRelated = ({ name, children, onClick, }) => {
-    return (_jsx(Box, { borderLeft: "1px solid", borderColor: "lightBlue.6", pl: "4", marginInlineStart: "auto", children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: name }), _jsx(Grid, { templateColumns: "repeat(2, minmax(80px, 1fr))", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
+    return (_jsx(Box, { flex: "1", borderLeft: "1px solid", borderColor: "lightBlue.5", pl: "13px", children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { justify: "space-between", align: "center", gap: "base", children: [_jsx(Text, { fontFamily: "primary", fontSize: "12px", color: "gray.3", textTransform: "uppercase", children: name }), _jsx(Link, { fontFamily: "secondary", fontSize: "14px", fontWeight: "normal", color: "#2487C5", flexShrink: 0, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick('view-all'), children: "View All" })] }), _jsx(Grid, { templateColumns: "repeat(4, 75px)", gap: "base", children: children === null || children === void 0 ? void 0 : children.map((child) => {
                         const { id, icon, value } = child;
                         const btnIcon = icon ? fieldIcons[icon] : '';
-                        return (_jsx(HiddenField, { id: id, icon: btnIcon, name: value, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id) }, id));
+                        return (_jsx(HiddenField, { id: id, h: "75px", icon: btnIcon, name: value, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id) }, id));
                     }) })] }) }));
 };

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyOverview.d.ts

@@ -0,0 +1,2 @@
+import { ReadOnlyOverviewI } from '../../../../../interfaces';
+export declare const ReadOnlyOverview: ({ name, children }: ReadOnlyOverviewI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyOverview.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Flex, ListItem, Text, UnorderedList, } from '@chakra-ui/react';
+import { ChevronRight } from '../../../../../components';
+// A Specs collapsible section — XD assembled Specs artboard. Exact spec:
+// white card, 3px radius, shadow rgba(0,0,0,.16) 0 3px 6px; header padded
+// 13px (top/sides) and 6.5px (bottom); title Poppins Regular 12px #525458
+// uppercase + a blue circle chevron; body = bulleted list (Assistant 12px
+// #464646). Built directly on Accordion (the shared Collapsible can't express
+// this padding/radius/shadow).
+export const ReadOnlyOverview = ({ name = '', children = [] }) => {
+    const bullets = children.filter((c) => c.value != null && c.value !== '');
+    // Honesty: no bullets → render nothing (never fabricate specs).
+    if (bullets.length === 0)
+        return null;
+    return (_jsx(Accordion, { allowToggle: true, bg: "neutral.white", borderRadius: "3px", boxShadow: "0 3px 6px rgba(0, 0, 0, 0.16)", children: _jsx(AccordionItem, { border: "none", children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsx(AccordionButton, { p: "base", _hover: { bg: 'transparent' }, _focus: { outline: 'none' }, children: _jsxs(Flex, { flex: "1", align: "center", justify: "space-between", children: [_jsx(Text, { fontFamily: "primary", fontSize: "14px", color: "#525458", textTransform: "uppercase", children: name }), _jsx(Box, { rounded: "full", border: "1px solid", borderColor: "blue.3", padding: "1", transition: "all .2s ease-in-out", transform: isExpanded ? 'rotate(-90deg)' : 'rotate(0)', children: _jsx(ChevronRight, {}) })] }) }), _jsx(AccordionPanel, { px: "13px", pb: "13px", pt: "0", children: _jsx(UnorderedList, { spacing: "base", m: "0", pl: "1.1em", children: bullets.map((bullet) => (_jsx(ListItem, { fontFamily: "secondary", fontSize: "14px", lineHeight: "1.4", color: "gray.3", children: String(bullet.value) }, bullet.id))) }) })] })) }) }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyPurchaseDetails.d.ts

@@ -0,0 +1,2 @@
+import { ReadOnlyPurchaseDetailsI } from '../../../../../interfaces';
+export declare const ReadOnlyPurchaseDetails: ({ id, name, link, children, onClick, }: ReadOnlyPurchaseDetailsI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyPurchaseDetails.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Flex, Stack, Box, Image, Link } from '@chakra-ui/react';
+import { formatCurrency } from '../../../../../utils';
+// Purchase Details block — XD "Purchase Details" (500×178). Retailer logo
+// (128px square) + retailer name, then a purchase column (Purchased / Payment)
+// and, past a vertical dashed divider, a totals column (Price / Tax / Total).
+// Fonts/colors from the XD character styles:
+//   header "PURCHASE DETAILS"  Poppins Regular 12px #464646 uppercase
+//   "View Receipt"             Assistant Regular 14px #2488C6
+//   retailer label             Assistant Regular 14px #6C7679
+//   retailer name              Poppins SemiBold 18px #464646
+//   row label                  Assistant Regular 14px #6C7679
+//   row value                  Assistant Regular 14px #464646  (Total: Bold)
+// label (left, #6C7679) + value (right, #464646). `bold` for the Total value.
+const Row = ({ label, value, bold, }) => (_jsxs(Flex, { justify: "space-between", gap: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "20px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "20px", color: "gray.3", fontWeight: bold ? 'bold' : 'normal', children: value != null ? String(value) : '' })] }));
+export const ReadOnlyPurchaseDetails = ({ id, name, link, children = [], onClick, }) => {
+    var _a, _b;
+    const logo = (_a = children.find(({ type }) => type === 'images')) === null || _a === void 0 ? void 0 : _a.value;
+    const retailer = children.find((c) => c.name === 'Retailer');
+    const detailFields = children.filter(({ type, name: n }) => (type === 'text' || type === 'date') && n !== 'Retailer');
+    const valueFields = children.filter(({ type }) => type === 'currency');
+    // Honesty: nothing credible to show → render nothing (never fabricate).
+    if (!retailer && !logo && valueFields.length === 0)
+        return null;
+    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [_jsxs(Flex, { justify: "space-between", align: "center", w: "full", children: [_jsx(Text, { fontFamily: "primary", fontSize: "12px", letterSpacing: "0", color: "gray.3", textTransform: "uppercase", children: name }), link && (_jsx(Link, { fontFamily: "secondary", fontSize: "14px", fontWeight: "normal", color: "#2488C6", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(id), children: "View Receipt" }))] }), _jsxs(Flex, { gap: "base", align: "stretch", children: [logo && (_jsx(Image, { src: logo, alt: (retailer === null || retailer === void 0 ? void 0 : retailer.value) || 'retailer', boxSize: "128px", objectFit: "contain", flexShrink: 0 })), _jsxs(Stack, { flex: "1", spacing: "13px", children: [retailer && (_jsx(Text, { fontFamily: "primary", fontWeight: "600", fontSize: "22px", lineHeight: "26px", letterSpacing: "0", color: "gray.3", mt: "30px", children: String((_b = retailer.value) !== null && _b !== void 0 ? _b : '') })), _jsxs(Flex, { gap: "base", align: "flex-start", children: [detailFields.length > 0 && (_jsx(Stack, { flex: "1", spacing: "0", children: detailFields.map((field) => (_jsx(Row, { label: field.name ? `${field.name}:` : undefined, value: field.value }, `${field.id}-${field.name}`))) })), valueFields.length > 0 && (_jsx(Box, { borderLeft: "1px dashed", borderColor: "lightGray.2", pl: "base", w: "170px", flexShrink: 0, children: _jsx(Stack, { spacing: "0", children: valueFields.map((field, i) => (_jsx(Row, { label: field.name ? `${field.name}:` : undefined, value: field.value != null && field.value !== ''
+                                                    ? formatCurrency({
+                                                        value: field.value,
+                                                    })
+                                                    : '', bold: i === valueFields.length - 1 }, `${field.id}-${field.name}`))) }) }))] })] })] })] }));
+};

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyWarrantyBanner.d.ts

@@ -0,0 +1,2 @@
+import { ReadOnlyWarrantyBannerI } from '../../../../../interfaces';
+export declare const ReadOnlyWarrantyBanner: ({ icon, value, state, link, }: ReadOnlyWarrantyBannerI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyWarrantyBanner.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Image, Link, Text } from '@chakra-ui/react';
+import { fieldIcons } from '../../../../../helpers';
+/**
+ * Warranty-status banner. Built to the EXACT CSS from the "Read Only Item" XD
+ * (dev/spec mode), under-warranty artboard:
+ *   container:    height 76px, background #F2F9F2, no border, no radius
+ *   badge circle: 45×45, #E0EBE0, full radius, 10px from the left / centered
+ *   umbrella:     27×29
+ *   text:         Poppins Regular 16px/20px, letter-spacing 0, #464646, left
+ *
+ * Only the under-warranty state is designed in the XD. `expired` and `recall`
+ * palettes below are PROVISIONAL placeholders (awaiting their own artboards) —
+ * flagged so they get exact CSS before shipping, not invented values.
+ *
+ * HONESTY: `recall` must ONLY be used with REAL recall data (#357) — the banner
+ * renders nothing when `value` is empty and never fabricates an alert.
+ */
+// Per-state visuals. `icon` is a `fieldIcons` key and is the SINGLE swap point
+// for each state's glyph — drop the new expired/recall icons in here (one line
+// each) once their assets are registered in `fieldIcons`. Colors reuse existing
+// design-system variants (no new colors): under-warranty = exact XD; expired =
+// neutral gray family; recall = the app's alert color (`error`, same variant as
+// AlertBanner / CreditCardError). Exact XD for expired/recall is still TBD.
+const STATE = {
+    underWarranty: { bg: '#F2F9F2', badge: '#E0EBE0', icon: 'warranty' },
+    expired: { bg: 'lightGray.1', badge: 'lightGray.2', icon: 'warranty' }, // TODO: swap to the expired icon
+    recall: { bg: 'error.1', badge: 'error.2', icon: 'warranty' }, // TODO: swap to the recall icon
+};
+export const ReadOnlyWarrantyBanner = ({ icon, value, state = 'underWarranty', link, }) => {
+    var _a;
+    // No data → render nothing. Never fabricate a status (critical for recall).
+    if (!value)
+        return null;
+    const s = (_a = STATE[state]) !== null && _a !== void 0 ? _a : STATE.underWarranty;
+    // Field-provided icon overrides; otherwise the state's own (swappable) icon.
+    const iconKey = icon !== null && icon !== void 0 ? icon : s.icon;
+    const bannerIcon = iconKey ? fieldIcons[iconKey] : '';
+    return (_jsxs(Flex, { align: "center", gap: "10px", minH: "76px", pl: "10px", pr: "base", bg: s.bg, mt: "2px", children: [_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, boxSize: "45px", borderRadius: "full", bg: s.badge, children: state === 'recall' ? (
+                // Extra-bold Poppins "!" sized to the internal icon (~29px).
+                _jsx(Text, { fontFamily: "primary", fontWeight: "extrabold", fontSize: "29px", lineHeight: "1", color: "neutral.white", children: "!" })) : (bannerIcon && (_jsx(Image, { src: bannerIcon, alt: "warranty status", w: "27px", h: "29px", objectFit: "contain" }))) }), link ? (_jsx(Link, { href: link, isExternal: true, fontFamily: "primary", fontSize: "16px", lineHeight: "20px", letterSpacing: "0", color: "gray.3", sx: { textWrap: 'balance' }, children: String(value) })) : (_jsx(Text, { fontFamily: "primary", fontSize: "16px", lineHeight: "20px", letterSpacing: "0", color: "gray.3", sx: { textWrap: 'balance' }, children: String(value) }))] }));
+};

package/dist/components/forms/readOnly/fields/homeItem/index.d.ts

@@ -4,4 +4,8 @@ export * from './ReadOnlyGuidelines';
 export * from './ReadOnlyHomeItemImages';
 export * from './ReadOnlyHomeItemRating';
 export * from './ReadOnlyHomeItemText';
+export * from './ReadOnlyHistory';
 export * from './ReadOnlyItemRelated';
+export * from './ReadOnlyOverview';
+export * from './ReadOnlyPurchaseDetails';
+export * from './ReadOnlyWarrantyBanner';

package/dist/components/forms/readOnly/fields/homeItem/index.js

@@ -4,4 +4,8 @@ export * from './ReadOnlyGuidelines';
 export * from './ReadOnlyHomeItemImages';
 export * from './ReadOnlyHomeItemRating';
 export * from './ReadOnlyHomeItemText';
+export * from './ReadOnlyHistory';
 export * from './ReadOnlyItemRelated';
+export * from './ReadOnlyOverview';
+export * from './ReadOnlyPurchaseDetails';
+export * from './ReadOnlyWarrantyBanner';

package/dist/components/headers/TabsHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs, } from '@chakra-ui/react';
 export const TabsHeader = ({ onChange, tabList, tabIndex, defaultIndex, rightButton, rightTabList, }) => {
-    return (_jsxs(Tabs, { zIndex: "base", variant: "unstyled", onChange: onChange, index: tabIndex, defaultIndex: defaultIndex, h: "100%", children: [_jsx(Box, { bg: "lightBlue.2", children: _jsxs(Flex, { justify: "space-between", children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), _jsxs(Flex, { flexShrink: 0, children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: rightTabList === null || rightTabList === void 0 ? void 0 : rightTabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), rightButton] })] }) }), _jsx(TabPanels, { h: "100%", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label, component }) => (_jsx(TabPanel, { p: "0", h: "100%", children: component }, label))) })] }));
+    return (_jsxs(Tabs, { zIndex: "base", variant: "unstyled", onChange: onChange, index: tabIndex, defaultIndex: defaultIndex, h: "100%", children: [_jsx(Box, { bg: "lightBlue.2", children: _jsxs(Flex, { justify: "space-between", children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), _jsxs(Flex, { flexShrink: 0, children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: rightTabList === null || rightTabList === void 0 ? void 0 : rightTabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), rightButton] })] }) }), _jsx(TabPanels, { h: "100%", children: [...(tabList !== null && tabList !== void 0 ? tabList : []), ...(rightTabList !== null && rightTabList !== void 0 ? rightTabList : [])].map(({ label, component }) => (_jsx(TabPanel, { p: "0", h: "100%", children: component }, label))) })] }));
 };
 const CustomTab = ({ label = '' }) => {
     return (_jsx(Tab, { minW: "1rem", px: "base", py: "0", lineHeight: "10", textTransform: "uppercase", fontWeight: "normal", fontSize: "sm", fontFamily: "primary", color: "blue.2", borderBottom: "3px solid transparent", _hover: { cursor: 'pointer' }, _focus: { outline: 'none' }, _selected: {

package/dist/components/history/AddDocuments.d.ts

@@ -0,0 +1,7 @@
+export interface AddDocumentsI {
+    title?: string;
+    message?: string;
+    /** "browse" affordance — the consumer wires the real file picker/dropzone. */
+    onBrowse?: () => void;
+}
+export declare const AddDocuments: ({ title, message, onBrowse, }: AddDocumentsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/history/AddDocuments.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Link, Stack, Text } from '@chakra-ui/react';
+import { Upload } from '../../components';
+// Add-documents zone atop the History tab — XD "Assembled – 1".
+// Section sits on the dark rail color (#E9EDEF); inside, a 72px dashed drop
+// area (bg rgba(219,236,246,.6), 1px dashed #707070, radius 4px). The message
+// is Assistant 16px #606060; "browse" is a Poppins Medium 16px #2487C5 link.
+export const AddDocuments = ({ title = 'Add Notes, Documents and Service Records', message = 'Drag and drop media here or', onBrowse, }) => (_jsxs(Stack, { spacing: "base", p: "base", bg: "#E9EDEF", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "16px", color: "#606060", children: title }), _jsxs(Flex, { h: "72px", align: "center", justify: "center", gap: "2", bg: "rgba(219, 236, 246, 0.6)", border: "1px dashed", borderColor: "rgba(112, 112, 112, 0.45)", borderRadius: "4px", children: [_jsx(Upload, {}), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", color: "#606060", children: message }), _jsx(Link, { fontFamily: "secondary", fontSize: "16px", color: "#2487C5", onClick: onBrowse, children: "browse" })] })] }));

package/dist/components/history/DatePennant.d.ts

@@ -0,0 +1,7 @@
+export interface DatePennantI {
+    /** Display date, e.g. "01 23 2017". */
+    date?: string;
+    /** Pennant fill — data-driven per event type (a legend maps color→type). */
+    color?: string;
+}
+export declare const DatePennant: ({ date, color }: DatePennantI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/history/DatePennant.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex, Text } from '@chakra-ui/react';
+// Date pennant — XD "Assembled – 1" timeline tag: a right-pointing flag
+// (113×47, default #1E6388) with the event date in white Poppins Medium 16px.
+// The fill color varies per event type (see the timeline legend, TODO).
+export const DatePennant = ({ date, color = '#1E6388' }) => (_jsx(Flex, { w: "113px", h: "47px", bg: color, align: "center", pl: "base", flexShrink: 0, sx: { clipPath: 'polygon(0 0, 79% 0, 100% 50%, 79% 100%, 0 100%)' }, children: _jsx(Text, { fontFamily: "primary", fontWeight: "500", fontSize: "16px", lineHeight: "1", color: "neutral.white", whiteSpace: "nowrap", children: date }) }));

package/dist/components/history/HistoryCard.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface HistoryCardI {
+    /** Event title, e.g. "Added Refrigerator" / "Service Record" (rendered uppercase). */
+    title?: string;
+    /** Image/logo URL (48px square). */
+    image?: string;
+    /** Which side the image sits on. 'right' (e.g. a service-company logo) keeps
+     *  the text left-justified and lets the logo grow. Default 'left'. */
+    imagePosition?: 'left' | 'right';
+    /** Optional attachment row below a divider: file icon + label + amount. */
+    attachment?: {
+        icon?: string;
+        label?: string;
+        amount?: string;
+    };
+    /** Body content (the part that varies between derivatives). */
+    children?: ReactNode;
+}
+export declare const HistoryCard: ({ title, image, imagePosition, attachment, children, }: HistoryCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/history/HistoryCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Image, Stack, Text } from '@chakra-ui/react';
+// Core History card TEMPLATE — the shared shell every history event derives
+// from (XD "Card" 344×154 and "Card 2" 344×197). Structure:
+//   header (event title, Poppins 12px #3E4045 uppercase)
+//   body   (left image/logo 48px + a content slot — varies per derivative)
+//   divider + attachment row (file icon + name Assistant 16px #3E4045 +
+//            amount Assistant Bold 16px #464646), only when `attachment` is set.
+// Presentational and slot-based so new event types compose it via `children`.
+export const HistoryCard = ({ title, image, imagePosition = 'left', attachment, children, }) => (_jsx(Box, { bg: "neutral.white", borderRadius: "4px", boxShadow: "0 2px 10px rgba(0, 0, 0, 0.08)", p: "base", children: _jsxs(Stack, { spacing: "base", children: [title && (_jsx(Text, { fontFamily: "primary", fontSize: "12px", letterSpacing: "0", color: "#3E4045", textTransform: "uppercase", children: title })), _jsxs(Flex, { gap: "base", align: "flex-start", direction: imagePosition === 'right' ? 'row-reverse' : 'row', children: [image &&
+                        (imagePosition === 'right' ? (
+                        // Right-side logo: a larger area, kept uncropped.
+                        _jsx(Image, { src: image, alt: title || 'history', h: "90px", maxW: "150px", w: "auto", objectFit: "contain", flexShrink: 0 })) : (_jsx(Image, { src: image, alt: title || 'history', boxSize: "48px", objectFit: "cover", flexShrink: 0 }))), _jsx(Box, { flex: "1", children: children })] }), attachment && (_jsxs(_Fragment, { children: [_jsx(Box, { borderTop: "1px solid", borderColor: "lightGray.2" }), _jsxs(Flex, { justify: "space-between", align: "center", gap: "base", children: [_jsxs(Flex, { gap: "2", align: "center", children: [attachment.icon && (_jsx(Image, { src: attachment.icon, alt: "", boxSize: "24px", objectFit: "contain" })), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", color: "#3E4045", children: attachment.label })] }), attachment.amount != null && (_jsx(Text, { fontFamily: "secondary", fontWeight: "bold", fontSize: "16px", color: "gray.3", children: attachment.amount }))] })] }))] }) }));

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

@@ -0,0 +1,3 @@
+export * from './AddDocuments';
+export * from './DatePennant';
+export * from './HistoryCard';

package/dist/components/history/index.js

@@ -0,0 +1,3 @@
+export * from './AddDocuments';
+export * from './DatePennant';
+export * from './HistoryCard';

package/dist/components/homeBoard/AddToHomefile.js

@@ -5,6 +5,6 @@ import { ContainerHeader, HiddenField, TileTooltip } from '../../components';
 import { GreenCirclePlus } from '../../assets/images';
 export const AddToHomefile = ({ documentList, headerList, isDisabled = false, showHelp }) => {
     return (_jsx(TileTooltip, { label: "addToHomefile", children: _jsxs(Container, { variant: "launchpad", h: "full", minW: ['full', '20rem'], bg: "lightViolet.1", children: [_jsx(ContainerHeader, { title: t('addToHomefile.title'), titleIcon: GreenCirclePlus, menuItems: headerList, fontWeight: 'normal', showHelp: showHelp }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", p: "base", children: documentList.map((item) => {
-                        return (_jsx(HiddenField, { h: "58px", id: item.label, name: item.label, icon: item.icon, disabled: isDisabled, onClick: item.onClick, showPlusIcon: true }, item.label));
+                        return (_jsx(HiddenField, { h: "68px", id: item.label, name: item.label, icon: item.icon, disabled: isDisabled, onClick: item.onClick, showPlusIcon: true }, item.label));
                     }) })] }) }));
 };

package/dist/components/homeBoard/HomeCard.js

@@ -29,5 +29,5 @@ export const HomeCard = (_a) => {
     };
     const { imageUrl } = useHomeCard(image);
     const hasImage = Boolean(imageUrl);
-    return (_jsx(TileTooltip, { label: "homeCard", children: _jsxs(Stack, { spacing: "base", bg: "white", children: [_jsxs(Center, { pos: "relative", h: "12rem", bg: "lightBlue.2", overflow: "hidden", children: [loading && (_jsx(Center, { h: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !loading && (_jsxs(_Fragment, { children: [editImage && (_jsx(EditFileUploader, { handleInputChange: addImage, "aria-label": t('ariaLabels.edit'), position: "absolute", right: "2", top: "1" })), _jsx(Image, { src: (hasImage && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, w: "full", objectFit: "cover" })] }))] }), !isEditMode && (_jsx(HomeCardReadOnly, Object.assign({ addImage: addImage, name: name, externalLink: externalLink, edit: edit }, props, address))), isEditMode && (_jsx(EditHomeDetails, { address: address, externalLink: externalLink, name: name, setIsDirty: setIsDirty }))] }) }));
+    return (_jsx(TileTooltip, { label: "homeCard", children: _jsxs(Stack, { spacing: "base", bg: "white", children: [_jsxs(Center, { pos: "relative", w: "full", aspectRatio: "16 / 9", bg: "lightBlue.2", overflow: "hidden", children: [loading && (_jsx(Center, { h: "8rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !loading && (_jsxs(_Fragment, { children: [editImage && (_jsx(EditFileUploader, { handleInputChange: addImage, "aria-label": t('ariaLabels.edit'), position: "absolute", right: "2", top: "1" })), _jsx(Image, { src: (hasImage && imageUrl) || randomImages(0), alt: `${name} ${t('images.altImage')}`, w: "full", h: "full", objectFit: "cover" })] }))] }), !isEditMode && (_jsx(HomeCardReadOnly, Object.assign({ addImage: addImage, name: name, externalLink: externalLink, edit: edit }, props, address))), isEditMode && (_jsx(EditHomeDetails, { address: address, externalLink: externalLink, name: name, setIsDirty: setIsDirty }))] }) }));
 };

package/dist/components/homeItems/ViewingHomeItemBody.d.ts

@@ -0,0 +1,2 @@
+import { ViewingHomeItemBodyI } from '../../interfaces';
+export declare const ViewingHomeItemBody: ({ form, onClick, onEdit, }: ViewingHomeItemBodyI) => import("react/jsx-runtime").JSX.Element;