@bspk/ui 1.1.33 → 1.2.0

package/dist/components/FileUpload/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"names":[],"mappings":"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"}

package/dist/components/FileUpload/FileUploadExample.d.ts

@@ -0,0 +1,3 @@
+import { FileUploadProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const FileUploadExample: ComponentExampleFn<FileUploadProps>;

package/dist/components/FileUpload/FileUploadExample.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FileUpload } from '.';
+import { randomNumber } from '../../utils/random';
+export const FileUploadExample = ({ action }) => ({
+    render: ({ props, preset }) => {
+        return _jsx(FileUploadExampleMockUpload, { ...props, action: action }, preset?.label);
+    },
+    presets: [
+        {
+            label: 'multiple files',
+            propState: {
+                dragAndDrop: false,
+                multipleFiles: true,
+            },
+        },
+        {
+            label: 'Drag and Drop Multiple Files',
+            propState: {
+                dragAndDrop: true,
+                multipleFiles: true,
+            },
+        },
+    ],
+    variants: false,
+});
+function FileUploadExampleMockUpload({ action, files: presetFiles, ...props }) {
+    const [files, setFiles] = useState([]);
+    // Here we
+    const handleUpload = (nextFiles) => {
+        setFiles(nextFiles);
+        // mock the upload action by incrementally updating the progress and eventually setting the status to 'complete'
+        nextFiles.forEach((file, index) => {
+            setTimeout(() => {
+                const updatedFile = {
+                    ...file,
+                    status: 'uploading',
+                    progress: 0,
+                };
+                setFiles((prev) => prev.map((f) => (f.id === file.id ? updatedFile : f)));
+                // Simulate progress
+                const interval = setInterval(() => {
+                    updatedFile.progress = Math.min((updatedFile.progress || 0) + randomNumber(10, 15), 100);
+                    setFiles((prev) => prev.map((f) => (f.id === file.id ? { ...updatedFile } : f)));
+                    if (updatedFile.progress === 100) {
+                        clearInterval(interval);
+                        updatedFile.status = 'complete';
+                        setFiles((prev) => prev.map((f) => (f.id === file.id ? { ...updatedFile } : f)));
+                        action(`File upload complete: ${file.fileName}`);
+                    }
+                }, 350);
+            }, index * 400); // stagger uploads
+        });
+        action(`Files uploading: ${nextFiles.map((f) => f.fileName).join(', ')}`);
+    };
+    useEffect(() => {
+        if (Array.isArray(presetFiles) && presetFiles.length > 0) {
+            handleUpload(presetFiles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [presetFiles]);
+    return (_jsx(FileUpload, { ...props, acceptedFileTypes: ['image/png', 'image/gif', 'image/svg+xml', 'image/jpeg'], cancelButtonLabel: "Cancel", files: files.length > 0 ? files : undefined, maxFileSize: 1, onCancel: (file) => action(`onCancel called for: ${file.fileName}`), onError: (filesWithErrors) => {
+            action(`Error occurred during file upload: ${filesWithErrors.map((f) => f.fileName).join(', ')}`);
+        }, onUpload: handleUpload, uploadSubtitle: "SVG, PNG, JPG or GIF (max. 1MB)" }));
+}
+//# sourceMappingURL=FileUploadExample.js.map

package/dist/components/FileUpload/FileUploadExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadExample.js","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUploadExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/FileUpload/file-upload.css

@@ -0,0 +1,20 @@
+[data-bspk=file-upload] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+  width: 100%;
+  padding: var(--spacing-sizing-04);
+  border: 1px dashed var(--stroke-neutral-base);
+  border-radius: var(--spacing-sizing-02);
+  background-color: var(--surface-neutral-t2-lowest);
+}
+
+[data-bspk-owner=file-upload][data-file-entries] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FileUpload/file-upload.css.js

@@ -0,0 +1,25 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=file-upload] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+  width: 100%;
+  padding: var(--spacing-sizing-04);
+  border: 1px dashed var(--stroke-neutral-base);
+  border-radius: var(--spacing-sizing-02);
+  background-color: var(--surface-neutral-t2-lowest);
+}
+
+[data-bspk-owner=file-upload][data-file-entries] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/FileUpload/index.js

@@ -0,0 +1,2 @@
+export * from './FileUpload';
+//# sourceMappingURL=index.js.map

package/dist/components/FileUpload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileUpload/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/FileUploadItem/FileUploadItem.d.ts

@@ -0,0 +1,40 @@
+import { FileEntry } from '-/utils/fileUploads';
+import './file-upload-item.scss';
+export type FileUploadItemProps = FileEntry & {
+    /**
+     * The function to call when the Cancel button is clicked.
+     *
+     * @required
+     */
+    onCancel: (file: Pick<FileEntry, 'fileName'>) => void;
+    /**
+     * The label used for tooltip text for the Cancel button.
+     *
+     * @default Cancel
+     */
+    cancelButtonLabel?: string;
+};
+/**
+ * A component that represents an uploaded item and its status.
+ *
+ * Usually used with FileUpload to display individual files being uploaded.
+ *
+ * @example
+ *     import { FileUploadItem } from '@bspk/ui/FileUploadItem';
+ *
+ *     function Example() {
+ *         return (
+ *             <FileUploadItem
+ *                 fileName="dunder-mifflin-paper-co.jpg"
+ *                 fileSize="1.43 mb"
+ *                 status="Uploading"
+ *                 onCancel={() => console.log('Cancel item clicked!')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name FileUploadItem
+ * @phase UXReview
+ */
+export declare function FileUploadItem({ fileName, status, fileSize, onCancel, cancelButtonLabel: onCancelToolTip, progress, errorMessage, }: FileUploadItemProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FileUploadItem/FileUploadItem.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgDelete } from '@bspk/icons/Delete';
+import { SvgDraft } from '@bspk/icons/Draft';
+import { Button } from '../Button';
+import { InlineAlert } from '../InlineAlert';
+import { ProgressBar } from '../ProgressBar';
+import { Truncated } from '../Truncated';
+import { DEFAULT_ERROR_MESSAGE } from '../../utils/fileUploads';
+import './file-upload-item.css.js';
+/**
+ * A component that represents an uploaded item and its status.
+ *
+ * Usually used with FileUpload to display individual files being uploaded.
+ *
+ * @example
+ *     import { FileUploadItem } from '@bspk/ui/FileUploadItem';
+ *
+ *     function Example() {
+ *         return (
+ *             <FileUploadItem
+ *                 fileName="dunder-mifflin-paper-co.jpg"
+ *                 fileSize="1.43 mb"
+ *                 status="Uploading"
+ *                 onCancel={() => console.log('Cancel item clicked!')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name FileUploadItem
+ * @phase UXReview
+ */
+export function FileUploadItem({ fileName = '', status, fileSize, onCancel, cancelButtonLabel: onCancelToolTip = 'Cancel', progress = 0, errorMessage = DEFAULT_ERROR_MESSAGE, }) {
+    const subText = [fileSizeFormat(fileSize), status].filter(Boolean).join(' • ');
+    return (_jsxs("div", { "data-bspk": "file-upload-item", children: [_jsxs("div", { "data-row": true, children: [_jsx("div", { "data-icon": true, children: _jsx(SvgDraft, {}) }), _jsxs("div", { "data-info": true, children: [_jsx(Truncated, { "data-file-name": true, children: fileName }), _jsx("span", { "data-file-details": true, children: subText })] }), _jsx(Button, { icon: _jsx(SvgDelete, {}), iconOnly: true, label: onCancelToolTip || 'Cancel', onClick: () => onCancel({ fileName }), size: "large", variant: "tertiary" })] }), _jsx("div", { "data-status": true, children: status === 'error' ? (_jsx(InlineAlert, { variant: "error", children: errorMessage })) : (_jsx(ProgressBar, { align: "left", completion: progress, label: `${Math.max(0, Math.min(100, Math.round(progress))) // Ensure completion is between 0 and 100
+                    }%` })) })] }));
+}
+const KB = 1024;
+const MB = 1024 * KB;
+const GB = 1024 * MB;
+/**
+ * This is a simple utility to format file sizes in a human-readable way
+ *
+ * Lets not support terrabytes or petabytes for now.
+ *
+ * - @param fileSize {number | null | undefined} - The size of the file in bytes.
+ * - @returns {string | null | undefined} A string representing the file size in a human-readable format or the original
+ *   value if it cannot be formatted.
+ */
+function fileSizeFormat(fileSize) {
+    if (!fileSize)
+        return 'Unknown size';
+    const fileSizeMb = fileSize * MB; // Convert bytes to MB
+    const roundUp2 = (num) => Math.ceil(num * 100) / 100;
+    if (fileSizeMb < MB)
+        return `${roundUp2(fileSizeMb / KB)} KB`;
+    if (fileSizeMb < GB)
+        return `${roundUp2(fileSizeMb / MB)} MB`;
+    return `${roundUp2(fileSizeMb / GB)} GB`;
+}
+//# sourceMappingURL=FileUploadItem.js.map

package/dist/components/FileUploadItem/FileUploadItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/FileUploadItem/FileUploadItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAa,MAAM,qBAAqB,CAAC;AAEvE,OAAO,yBAAyB,CAAC;AAiBjC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,QAAQ,GAAG,EAAE,EACb,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,iBAAiB,EAAE,eAAe,GAAG,QAAQ,EAC7C,QAAQ,GAAG,CAAC,EACZ,YAAY,GAAG,qBAAqB,GAClB;IAClB,MAAM,OAAO,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE/E,OAAO,CACH,4BAAe,kBAAkB,aAC7B,4CACI,2CACI,KAAC,QAAQ,KAAG,GACV,EACN,6CACI,KAAC,SAAS,sCAAiB,QAAQ,GAAa,EAChD,oDAAyB,OAAO,GAAQ,IACtC,EACN,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,SAAS,KAAG,EACnB,QAAQ,QACR,KAAK,EAAE,eAAe,IAAI,QAAQ,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EACrC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,IACA,EACN,6CACK,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAClB,KAAC,WAAW,IAAC,OAAO,EAAC,OAAO,YAAE,YAAY,GAAe,CAC5D,CAAC,CAAC,CAAC,CACA,KAAC,WAAW,IACR,KAAK,EAAC,MAAM,EACZ,UAAU,EAAE,QAAQ,EACpB,KAAK,EAAE,GACH,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,yCAAyC;oBAC9F,GAAG,GACL,CACL,GACC,IACJ,CACT,CAAC;AACN,CAAC;AAED,MAAM,EAAE,GAAG,IAAI,CAAC;AAChB,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AACrB,MAAM,EAAE,GAAG,IAAI,GAAG,EAAE,CAAC;AAErB;;;;;;;;GAQG;AACH,SAAS,cAAc,CAAC,QAAiB;IACrC,IAAI,CAAC,QAAQ;QAAE,OAAO,cAAc,CAAC;IAErC,MAAM,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAC,sBAAsB;IAExD,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IAE7D,IAAI,UAAU,GAAG,EAAE;QAAE,OAAO,GAAG,QAAQ,CAAC,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC;IAC9D,IAAI,UAAU,GAAG,EAAE;QAAE,OAAO,GAAG,QAAQ,CAAC,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC;IAC9D,OAAO,GAAG,QAAQ,CAAC,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC;AAC7C,CAAC"}

package/dist/components/FileUploadItem/FileUploadItemExample.d.ts

@@ -0,0 +1,3 @@
+import { FileUploadItemProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const FileUploadItemExample: ComponentExampleFn<FileUploadItemProps>;

package/dist/components/FileUploadItem/FileUploadItemExample.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FileUploadItem } from './FileUploadItem';
+import { useTimeout } from '../../hooks/useTimeout';
+import { randomNumber } from '../../utils/random';
+export const FileUploadItemExample = ({ action }) => ({
+    render: ({ props, preset }) => {
+        let progress = props.progress;
+        if (preset?.label === 'state: success')
+            progress = 100;
+        return (_jsx(FileUploadItemExampleRender, { ...props, onCancel: () => action('Cancel action clicked!'), progress: progress }, preset?.label));
+    },
+    presets: [
+        {
+            label: 'long file name',
+            propState: {
+                fileName: 'I-think-this-is-a-long-file-name.txt',
+                status: 'uploading',
+                cancelButtonLabel: 'Close',
+                fileSize: 10,
+            },
+        },
+        {
+            label: 'state: uploading',
+            propState: {
+                fileName: 'basic-file.png',
+                status: 'uploading',
+                fileSize: 1.2,
+                cancelButtonLabel: 'Cancel',
+            },
+        },
+        {
+            label: 'state: success',
+            propState: {
+                fileName: 'success-story.pdf',
+                status: 'complete',
+                cancelButtonLabel: 'Bye',
+                fileSize: 42,
+            },
+        },
+        {
+            label: 'state: failed',
+            propState: {
+                fileName: 'file-name.txt',
+                status: 'error',
+                errorMessage: 'File too large. Please upload a smaller file.',
+                cancelButtonLabel: 'Escape',
+                fileSize: 10000000,
+            },
+        },
+    ],
+    variants: false,
+});
+function FileUploadItemExampleRender({ progress, ...props }) {
+    const [progressNum, setProgressNum] = useState(progress || 0);
+    const timeout = useTimeout();
+    const updateProgress = (previousProgress) => () => {
+        const next = Math.round(Math.min(previousProgress + randomNumber(0, 20), 100));
+        setProgressNum(next);
+        if (next < 100)
+            timeout.set(updateProgress(next), 1000);
+    };
+    if (props.status === 'uploading')
+        timeout.set(updateProgress(progressNum), 1000);
+    return _jsx(FileUploadItem, { ...props, progress: progressNum });
+}
+//# sourceMappingURL=FileUploadItemExample.js.map

package/dist/components/FileUploadItem/FileUploadItemExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadItemExample.js","sourceRoot":"","sources":["../../../src/components/FileUploadItem/FileUploadItemExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAA4C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3F,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC1B,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAE9B,IAAI,MAAM,EAAE,KAAK,KAAK,gBAAgB;YAAE,QAAQ,GAAG,GAAG,CAAC;QAEvD,OAAO,CACH,KAAC,2BAA2B,OAEpB,KAAK,EACT,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAChD,QAAQ,EAAE,QAAQ,IAHb,MAAM,EAAE,KAAK,CAIpB,CACL,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,QAAQ,EAAE,sCAAsC;gBAChD,MAAM,EAAE,WAAW;gBACnB,iBAAiB,EAAE,OAAO;gBAC1B,QAAQ,EAAE,EAAE;aACf;SACJ;QACD;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,QAAQ,EAAE,gBAAgB;gBAC1B,MAAM,EAAE,WAAW;gBACnB,QAAQ,EAAE,GAAG;gBACb,iBAAiB,EAAE,QAAQ;aAC9B;SACJ;QACD;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,QAAQ,EAAE,mBAAmB;gBAC7B,MAAM,EAAE,UAAU;gBAClB,iBAAiB,EAAE,KAAK;gBACxB,QAAQ,EAAE,EAAE;aACf;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,QAAQ,EAAE,eAAe;gBACzB,MAAM,EAAE,OAAO;gBACf,YAAY,EAAE,+CAA+C;gBAC7D,iBAAiB,EAAE,QAAQ;gBAC3B,QAAQ,EAAE,QAAQ;aACrB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC;AAEH,SAAS,2BAA2B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,MAAM,cAAc,GAAG,CAAC,gBAAwB,EAAE,EAAE,CAAC,GAAG,EAAE;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/E,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,IAAI,GAAG,GAAG;YAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW;QAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IAEjF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAI,CAAC;AAChE,CAAC"}

package/dist/components/FileUploadItem/file-upload-item.css

@@ -0,0 +1,40 @@
+[data-bspk=file-upload-item] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+[data-bspk=file-upload-item] [data-row] {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=file-upload-item] [data-icon] {
+  padding: var(--spacing-sizing-02);
+  width: fit-content;
+  display: flex;
+  flex: 0 0 auto;
+}
+[data-bspk=file-upload-item] [data-info] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+}
+[data-bspk=file-upload-item] [data-file-name] {
+  width: 100%;
+  font: var(--body-small);
+}
+[data-bspk=file-upload-item] [data-file-details] {
+  color: var(--foreground-neutral-on-surface-variant-01);
+  font: var(--body-x-small);
+}
+@media (width >= 640px) {
+  [data-bspk=file-upload-item] [data-status] {
+    padding: 0 var(--spacing-sizing-18);
+  }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FileUploadItem/file-upload-item.css.js

@@ -0,0 +1,45 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=file-upload-item] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+[data-bspk=file-upload-item] [data-row] {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=file-upload-item] [data-icon] {
+  padding: var(--spacing-sizing-02);
+  width: fit-content;
+  display: flex;
+  flex: 0 0 auto;
+}
+[data-bspk=file-upload-item] [data-info] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+}
+[data-bspk=file-upload-item] [data-file-name] {
+  width: 100%;
+  font: var(--body-small);
+}
+[data-bspk=file-upload-item] [data-file-details] {
+  color: var(--foreground-neutral-on-surface-variant-01);
+  font: var(--body-x-small);
+}
+@media (width >= 640px) {
+  [data-bspk=file-upload-item] [data-status] {
+    padding: 0 var(--spacing-sizing-18);
+  }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/FileUploadItem/index.js

@@ -0,0 +1,2 @@
+export * from './FileUploadItem';
+//# sourceMappingURL=index.js.map

package/dist/components/FileUploadItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileUploadItem/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/FormField/FormField.d.ts

@@ -1,18 +1,9 @@
-import { CommonProps, ElementProps, InvalidPropsLibrary } from '../../index.js';
+import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
 import './form-field.scss';
-export type FieldControlProps = {
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * @default false
-     */
-    invalid?: boolean;
-    /** The id of the control description. */
-    'aria-describedby'?: string;
-    /** The id of the error message */
-    'aria-errormessage'?: string;
-};
-export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
+export type FormFieldWrapProps<T extends Record<string, unknown>> = Omit<FormFieldProps, keyof T | 'children'> & Omit<T, 'aria-describedby' | 'aria-errormessage'>;
+export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
+    /** The error message to display when the field is invalid. */
+    errorMessage?: string;
     /**
      * The label of the field.
      *
@@ -22,13 +13,12 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
     /** The id of the control. */
     controlId: string;
     /**
-     * The children of the form field. This should be a control such as TextInput, Select, DatePicker, or
-     * TimePicker.
+     * The children of the form field. This should be a control such as TextInput, Select, DatePicker, or TimePicker.
      *
-     * @type (childProps: FieldControlProps) => JSX.Element
+     * @type (childProps: FormFieldControlProps) => JSX.Element
      * @required
      */
-    children: (childProps: FieldControlProps) => JSX.Element;
+    children: (childProps: FormFieldControlProps) => JSX.Element;
     /** The helperText of the field. */
     helperText?: string;
     /** The trailing element of the label. */
@@ -65,11 +55,7 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
  *     }
  *
  * @name FormField
- * @phase Backlog
+ * @phase Utility
  */
-declare function FormField({ label, invalid, errorMessage: errorMessageProp, helperText: helperTextProp, children, labelTrailing, controlId, required, }: ElementProps<FormFieldProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
-declare namespace FormField {
-    var bspkName: string;
-}
-export { FormField };
+export declare function FormField({ label, invalid, errorMessage: errorMessageProp, helperText: helperTextProp, children, labelTrailing, controlId, required, ...props }: ElementProps<FormFieldProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FormField/FormField.js

@@ -33,21 +33,18 @@ import './form-field.css.js';
  *     }
  *
  * @name FormField
- * @phase Backlog
+ * @phase Utility
  */
-function FormField({ label, invalid, errorMessage: errorMessageProp, helperText: helperTextProp, children, labelTrailing, controlId, required, }) {
+export function FormField({ label, invalid, errorMessage: errorMessageProp, helperText: helperTextProp, children, labelTrailing, controlId, required, ...props }) {
     const errorMessage = invalid && errorMessageProp ? errorMessageProp : undefined;
     const errorMessageId = errorMessage ? `${controlId}-error-message` : undefined;
-    const helperText = !invalid && helperTextProp ? helperTextProp : undefined;
+    const helperText = !errorMessage && helperTextProp ? helperTextProp : undefined;
     const helperTextId = !errorMessage && helperText ? `${controlId}-helper-text` : undefined;
     if (typeof children !== 'function')
         return null;
-    return (_jsxs("div", { "data-bspk": "form-field", "data-invalid": invalid || undefined, children: [_jsxs("header", { children: [_jsxs("label", { htmlFor: controlId, children: [_jsx(Txt, { as: "span", variant: "labels-small", children: label }), required && (_jsx(Txt, { as: "span", variant: "body-small", children: ' (Required)' }))] }), labelTrailing] }), children({
-                invalid,
+    return (_jsxs("div", { ...props, "data-bspk-utility": "form-field", "data-invalid": invalid || undefined, children: [_jsxs("header", { children: [_jsxs("label", { htmlFor: controlId, children: [_jsx(Txt, { as: "span", variant: "labels-small", children: label }), required && (_jsx(Txt, { as: "span", variant: "body-small", children: ' (Required)' }))] }), labelTrailing] }), children({
                 'aria-describedby': helperTextId,
                 'aria-errormessage': errorMessageId,
             }), errorMessage && (_jsx(InlineAlert, { id: errorMessageId, variant: "error", children: errorMessage })), helperText && (_jsx(Txt, { id: helperTextId, variant: "body-small", children: helperText }))] }));
 }
-FormField.bspkName = 'FormField';
-export { FormField };
 //# sourceMappingURL=FormField.js.map

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAuC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,OAAO,EACP,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,GAC0B;IAClC,MAAM,YAAY,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3E,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1F,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,4BAAe,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC1D,6BACI,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,OAAO;gBACP,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,mBAAmB,CAAC;AA8B3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,OAAO,EACP,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC0B;IAClC,MAAM,YAAY,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1F,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,kBAAS,KAAK,uBAAoB,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC7E,6BACI,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC"}

package/dist/components/FormField/FormFieldExample.d.ts

@@ -0,0 +1,4 @@
+import { FormFieldWrapProps } from './FormField';
+import { TextInputProps } from '-/components/TextInput';
+import { ComponentExample } from '-/utils/demo';
+export declare const FormFieldExample: ComponentExample<FormFieldWrapProps<TextInputProps>>;

package/dist/components/FormField/FormFieldExample.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from './FormField';
+import { TextInput } from '../TextInput';
+export const FormFieldExample = {
+    render: ({ props, setState }) => {
+        const { invalid, errorMessage, label, controlId = 'example-control-id', helperText, labelTrailing, ...inputProps } = props;
+        return (_jsx(FormField, { controlId: controlId, errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, children: (fieldProps) => {
+                return (_jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, invalid: invalid, onChange: (next) => setState({ value: next }), value: props.value }));
+            } }));
+    },
+};
+//# sourceMappingURL=FormFieldExample.js.map

package/dist/components/FormField/FormFieldExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldExample.js","sourceRoot":"","sources":["../../../src/components/FormField/FormFieldExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGnE,MAAM,CAAC,MAAM,gBAAgB,GAAyD;IAClF,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,EACF,OAAO,EACP,YAAY,EACZ,KAAK,EACL,SAAS,GAAG,oBAAoB,EAChC,UAAU,EACV,aAAa,EACb,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;QAEV,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,YAE3B,CAAC,UAAU,EAAE,EAAE;gBACZ,OAAO,CACH,KAAC,SAAS,OACF,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACrD,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,CACL,CAAC;YACN,CAAC,GACO,CACf,CAAC;IACN,CAAC;CACJ,CAAC"}

package/dist/components/FormField/form-field.css.js

@@ -20,4 +20,3 @@ style.appendChild(document.createTextNode(`[data-bspk=form-field] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Img/Img.d.ts

@@ -1,4 +1,4 @@
-import { ElementProps } from '../../index.js';
+import { ElementProps } from '-/types/common';
 export type ImgProps = {
     /**
      * The URL of the image.
@@ -26,9 +26,5 @@ export type ImgProps = {
  * @name Img
  * @phase Backlog
  */
-declare function Img({ alt, ...props }: ElementProps<ImgProps, 'img'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Img {
-    var bspkName: string;
-}
-export { Img };
+export declare function Img({ alt, ...props }: ElementProps<ImgProps, 'img'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Img/Img.js

@@ -12,9 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @name Img
  * @phase Backlog
  */
-function Img({ alt, ...props }) {
+export function Img({ alt, ...props }) {
     return _jsx("img", { ...props, alt: alt, "data-bspk": "img" });
 }
-Img.bspkName = 'Img';
-export { Img };
 //# sourceMappingURL=Img.js.map

package/dist/components/Img/Img.js.map

@@ -1 +1 @@
-{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../../src/components/Img/Img.tsx"],"names":[],"mappings":";AAiBA;;;;;;;;;;;;GAYG;AACH,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiC;IACzD,OAAO,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,eAAY,KAAK,GAAG,CAAC;AACxD,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../../src/components/Img/Img.tsx"],"names":[],"mappings":";AAiBA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiC;IAChE,OAAO,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,eAAY,KAAK,GAAG,CAAC;AACxD,CAAC"}

package/dist/components/InlineAlert/InlineAlert.d.ts

@@ -1,4 +1,4 @@
-import { AlertVariant } from '../../index.js';
+import { AlertVariant } from '-/types/common';
 import './inline-alert.scss';
 export type InlineAlertProps = {
     /**
@@ -29,11 +29,7 @@ export type InlineAlertProps = {
  *     }
  *
  * @name InlineAlert
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function InlineAlert({ children, variant, id }: InlineAlertProps): import("react/jsx-runtime").JSX.Element;
-declare namespace InlineAlert {
-    var bspkName: string;
-}
-export { InlineAlert };
+export declare function InlineAlert({ children, variant, id }: InlineAlertProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */