@homefile/components-v2 2.59.2 → 2.60.1

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
@@ -26,7 +26,17 @@ function toSafeValue(value) {
     return value;
 }
 export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit, }) => {
-    return (_jsx(Box, { bg: "lightBlue.1", overflow: "scroll", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+    return (
+    // `overflow="auto"`, not `"scroll"`. `scroll` reserves a scrollbar gutter on
+    // BOTH axes whether or not there is anything to scroll — measured at 15px
+    // each in Chrome with classic (non-overlay) scrollbars. That gutter is
+    // inside the box, so every field rendered here stops 15px short of the
+    // panel's right edge and a dead 15px band runs along the bottom, which is
+    // what showed up as the item card and warranty banner "not filling the
+    // panel". Nothing in this form scrolls sideways, so the horizontal gutter
+    // was pure loss. `auto` shows each bar only when that axis actually
+    // overflows and reserves nothing otherwise.
+    _jsx(Box, { bg: "lightBlue.1", overflow: "auto", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { children = [], icon, id, name, type } = field;
             const value = toSafeValue(field.value);
             const baseProps = {
@@ -51,7 +61,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 +70,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,67 @@
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Text, Flex, Stack, IconButton, Box, Image, SimpleGrid, Grid } 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).
+//
+// The label column sizes to its content with a floor, rather than taking a
+// fixed 35%: a real label is "Brand/Manufacturer:" (a schema key in ~50 places
+// across the platform, so it cannot simply be shortened), and 35% of a narrow
+// drawer is not wide enough for it. The percentage broke it mid-word into
+// "Brand/Manufact" + "urer:". `keep-all` stops the mid-word break outright,
+// so a label that still outgrows the column wraps at a natural boundary.
+// Values arrive from different extractors with inconsistent casing — a brand
+// comes back "Maytag", a product type "front-load washing machine" — so the
+// column reads as a ransom note. Capitalize the FIRST character only and leave
+// the rest of the string untouched: that makes the column consistent without
+// rewriting the data, and keeps model numbers like "NC501" or "DCC-3400"
+// exactly as extracted (title-casing them would produce "Nc501").
+const leadCap = (s) => s.length > 0 ? s[0].toUpperCase() + s.slice(1) : s;
+// Renders as TWO grid cells rather than a self-contained row, so every label
+// shares one column and every value starts on the same left edge.
+//
+// Each row previously sized its own label independently, so the value column
+// was ragged — the longest label ("Avg Retail Price Range:") pushed its own
+// value right while the others sat further left. A fixed percentage was the
+// original spec and broke the opposite way, wrapping "Brand/Manufacturer:"
+// mid-word. A shared `max-content` column solves both: it is exactly as wide
+// as the longest label, so nothing wraps and everything aligns.
+const DetailRow = ({ label, value }) => (_jsxs(_Fragment, { children: [_jsx(Text, { wordBreak: "keep-all", fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "gray.3", children: value != null ? leadCap(String(value)) : '' })] }));
+// A value-row amount is currency-formatted only when it IS a single number.
+//
+// Catalog-resolved prices arrive as RANGE strings ("$229-$249") because that is
+// what can honestly be established for a model. formatCurrency runs Number() on
+// its input, and Number("$229-$249") is NaN, so formatting one prints "$NaN" on
+// the owner's card. A non-numeric amount is already human-readable — render it
+// as-is rather than mangling it.
+const formatValueAmount = (value) => {
+    if (value == null || value === '')
+        return '';
+    const numeric = typeof value === 'number' ? value : Number(String(value).replace(/[$,\s]/g, ''));
+    return Number.isFinite(numeric)
+        ? formatCurrency({ value: numeric })
+        : 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: formatValueAmount(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 : [];
+    // The chosen thumbnail is stored; the displayed image is DERIVED from it.
+    //
+    // `useState(images[0])` captured the first image only on the first render —
+    // and images arrive after that render, so the card kept showing an empty
+    // <Image> (a broken-picture box) until something else forced a re-render.
+    // Deriving means there is no second copy of "which image" to go stale, and a
+    // selection that is no longer in the list falls back instead of blanking.
+    const [chosenImage, setChosenImage] = useState(undefined);
+    const mainImage = chosenImage && images.includes(chosenImage) ? chosenImage : 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: () => setChosenImage(image) }, image))) }))] }), _jsxs(Stack, { flex: "1", spacing: "base", children: [_jsxs(Stack, { spacing: "13px", children: [_jsx(Text, { fontFamily: "primary", fontWeight: "600", fontSize: "22px", lineHeight: "26px", 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(Grid, { templateColumns: "max-content 1fr", columnGap: "base", rowGap: "0", alignItems: "start", 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, onAction, actionLabel, }: ReadOnlyWarrantyBannerI) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Circle, Flex, Image, Link, Text } from '@chakra-ui/react';
+import { ArrowLeft } from '../../../../../components';
+import { fieldIcons } from '../../../../../helpers';
+import { colors } from '../../../../../theme/colors';
+/**
+ * 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
+    // EXACT CSS from the unknown-warranty XD artboard (Matt, 09-21) — no longer
+    // provisional. Light blue reads INFORMATIONAL: deliberately neither the
+    // green of "covered" nor the gray of "lapsed", because the point of the
+    // state is that we do not know which it is.
+    //   container #DEEDF7 · badge #BFDCEF · "?" #5F7482 Poppins SemiBold 29px
+    unverified: { bg: '#DEEDF7', badge: '#BFDCEF', icon: 'warranty' },
+    recall: { bg: 'error.1', badge: 'error.2', icon: 'warranty' }, // TODO: swap to the recall icon
+};
+export const ReadOnlyWarrantyBanner = ({ icon, value, 
+// Defaults to the NEUTRAL state, not to "covered". The only production
+// caller spreads field data (ReadOnlyDynamicForm), so a warranty field that
+// arrives without an explicit state used to assert coverage by omission —
+// the same fail-unsafe default as the STATE lookup below. Callers that mean
+// "under warranty" must say so.
+state = 'unverified', link, onAction, actionLabel, }) => {
+    var _a;
+    // No data → render nothing. Never fabricate a status (critical for recall).
+    if (!value)
+        return null;
+    // Fail SAFE on an unrecognised state: degrade to "we don't know", never to
+    // "you are covered". This is not hypothetical — a caller on a NEWER build
+    // than the installed package can send a state this copy has no key for (e.g.
+    // 'unverified' against 2.60.0), and a green fallback would assert coverage
+    // the data cannot support. Neutral is the only defensible default.
+    const s = (_a = STATE[state]) !== null && _a !== void 0 ? _a : STATE.unverified;
+    // 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] : '';
+    // States drawn as a typographic glyph rather than an image asset. Both are
+    // punctuation the brand face already carries, so neither needs an icon file.
+    const glyph = state === 'recall' ? '!' : state === 'unverified' ? '?' : '';
+    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: glyph ? (
+                // Typographic glyph sized to the internal icon (29px): "!" for
+                // recall, "?" for unverified. Recall keeps extra-bold white on its
+                // saturated badge; unverified is exact XD — Poppins SemiBold (600)
+                // in #5F7482, a desaturated slate that reads on the pale badge
+                // without competing with the message.
+                _jsx(Text, { fontFamily: "primary", fontWeight: state === 'recall' ? 'extrabold' : '600', fontSize: "29px", lineHeight: "1", color: state === 'recall' ? 'neutral.white' : '#5F7482', children: glyph })) : (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) })), onAction && (_jsx(Circle, { as: "button", type: "button", onClick: onAction, "aria-label": actionLabel !== null && actionLabel !== void 0 ? actionLabel : t('buttons.forward'), size: "40px", bg: "neutral.white", flexShrink: 0, ml: "auto", transition: "all 0.2s ease-in-out", _hover: { boxShadow: 'lg' }, children: _jsx(Box, { transform: "rotate(180deg)", lineHeight: "0", children: _jsx(ArrowLeft, { stroke: colors.blue[2], size: 24 }) }) }))] }));
+};

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;