@seamapi/react 1.28.1 → 1.30.0

package/lib/seam/components/AccessCodeTable/AccessCodeTable.js

@@ -3,14 +3,17 @@ import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { compareByCreatedAtDesc } from '../../../../lib/dates.js';
 import { AccessCodeKeyIcon } from '../../../../lib/icons/AccessCodeKey.js';
+import { AddIcon } from '../../../../lib/icons/Add.js';
 import { CopyIcon } from '../../../../lib/icons/Copy.js';
 import { ExclamationCircleOutlineIcon } from '../../../../lib/icons/ExclamationCircleOutline.js';
 import { TriangleWarningOutlineIcon } from '../../../../lib/icons/TriangleWarningOutline.js';
 import { useAccessCodes, } from '../../../../lib/seam/access-codes/use-access-codes.js';
 import { AccessCodeDetails } from '../../../../lib/seam/components/AccessCodeDetails/AccessCodeDetails.js';
+import { AccessCodeForm } from '../../../../lib/seam/components/AccessCodeForm/AccessCodeForm.js';
 import { AccessCodeHealthBar, } from '../../../../lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js';
 import { CodeDetails } from '../../../../lib/seam/components/AccessCodeTable/CodeDetails.js';
 import { copyToClipboard } from '../../../../lib/ui/clipboard.js';
+import { IconButton } from '../../../../lib/ui/IconButton.js';
 import { ContentHeader } from '../../../../lib/ui/layout/ContentHeader.js';
 import { MenuItem } from '../../../../lib/ui/Menu/MenuItem.js';
 import { MoreActionsMenu } from '../../../../lib/ui/Menu/MoreActionsMenu.js';
@@ -23,6 +26,7 @@ import { TableTitle } from '../../../../lib/ui/Table/TableTitle.js';
 import { SearchTextField } from '../../../../lib/ui/TextField/SearchTextField.js';
 import { Caption } from '../../../../lib/ui/typography/Caption.js';
 import { Title } from '../../../../lib/ui/typography/Title.js';
+import { useToggle } from '../../../../lib/ui/use-toggle.js';
 const defaultAccessCodeFilter = (accessCode, searchInputValue) => {
     const value = searchInputValue.trim();
     if (value === '')
@@ -31,12 +35,13 @@ const defaultAccessCodeFilter = (accessCode, searchInputValue) => {
     return (searchRegex.test(accessCode?.name ?? '') ||
         searchRegex.test(accessCode?.code ?? ''));
 };
-export function AccessCodeTable({ deviceId, disableLockUnlock = false, onAccessCodeClick = () => { }, preventDefaultOnAccessCodeClick = false, onBack, accessCodeFilter = defaultAccessCodeFilter, accessCodeComparator = compareByCreatedAtDesc, className, }) {
+export function AccessCodeTable({ deviceId, disableLockUnlock = false, disableCreateAccessCode = false, onAccessCodeClick = () => { }, preventDefaultOnAccessCodeClick = false, onBack, accessCodeFilter = defaultAccessCodeFilter, accessCodeComparator = compareByCreatedAtDesc, className, }) {
     const { accessCodes } = useAccessCodes({
         device_id: deviceId,
     });
     const [selectedAccessCodeId, setSelectedAccessCodeId] = useState(null);
     const [searchInputValue, setSearchInputValue] = useState('');
+    const [accessCodeFormVisible, toggleAddAccessCodeForm] = useToggle();
     const filteredAccessCodes = useMemo(() => accessCodes
         ?.filter((accessCode) => accessCodeFilter(accessCode, searchInputValue))
         ?.sort(accessCodeComparator) ?? [], [accessCodes, searchInputValue, accessCodeFilter, accessCodeComparator]);
@@ -55,7 +60,10 @@ export function AccessCodeTable({ deviceId, disableLockUnlock = false, onAccessC
                 setSelectedAccessCodeId(null);
             }, disableLockUnlock: disableLockUnlock }));
     }
-    return (_jsxs("div", { className: classNames('seam-access-code-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", filteredAccessCodes.length, ")"] })] }), _jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (accessCodes?.length ?? 0) === 0 })] }), _jsx(TableBody, { children: _jsx(Content, { accessCodes: filteredAccessCodes, onAccessCodeClick: handleAccessCodeClick }) })] }));
+    if (accessCodeFormVisible) {
+        return (_jsx(AccessCodeForm, { className: className, onBack: toggleAddAccessCodeForm, deviceId: deviceId }));
+    }
+    return (_jsxs("div", { className: classNames('seam-access-code-table', className), children: [_jsx(ContentHeader, { onBack: onBack }), _jsxs(TableHeader, { children: [_jsxs("div", { className: 'seam-left', children: [_jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", filteredAccessCodes.length, ")"] }), ' '] }), !disableCreateAccessCode && (_jsx(IconButton, { onClick: toggleAddAccessCodeForm, className: 'seam-add-access-code-button', children: _jsx(AddIcon, {}) }))] }), _jsx(SearchTextField, { value: searchInputValue, onChange: setSearchInputValue, disabled: (accessCodes?.length ?? 0) === 0 })] }), _jsx(TableBody, { children: _jsx(Content, { accessCodes: filteredAccessCodes, onAccessCodeClick: handleAccessCodeClick }) })] }));
 }
 function Content(props) {
     const { accessCodes, onAccessCodeClick } = props;

package/lib/seam/components/AccessCodeTable/AccessCodeTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAA;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAChF,OAAO,EACL,cAAc,GAEf,MAAM,2CAA2C,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAA;AAC9F,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAA;AACrF,OAAO,EAEL,mBAAmB,GACpB,MAAM,4DAA4D,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAA;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAsBhD,MAAM,uBAAuB,GAAG,CAC9B,UAAsB,EACtB,gBAAwB,EACf,EAAE;IACX,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,EAAE,CAAA;IACrC,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,IAAI,CAAA;IAC7B,MAAM,WAAW,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC1C,OAAO,CACL,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC;QACxC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,CACzC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,iBAAiB,GAAG,KAAK,EACzB,uBAAuB,GAAG,KAAK,EAC/B,iBAAiB,GAAG,GAAG,EAAE,GAAE,CAAC,EAC5B,+BAA+B,GAAG,KAAK,EACvC,MAAM,EACN,gBAAgB,GAAG,uBAAuB,EAC1C,oBAAoB,GAAG,sBAAsB,EAC7C,SAAS,GACY;IACrB,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;QACrC,SAAS,EAAE,QAAQ;KACpB,CAAC,CAAA;IAEF,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,IAAI,CAAC,CAAA;IAEP,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC5D,MAAM,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,GAAG,SAAS,EAAE,CAAA;IAEpE,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CACH,WAAW;QACT,EAAE,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;QACxE,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,EACtC,CAAC,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CACxE,CAAA;IAED,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,YAAoB,EAAQ,EAAE;QAC7B,iBAAiB,CAAC,YAAY,CAAC,CAAA;QAC/B,IAAI,+BAA+B;YAAE,OAAM;QAC3C,uBAAuB,CAAC,YAAY,CAAC,CAAA;IACvC,CAAC,EACD;QACE,iBAAiB;QACjB,+BAA+B;QAC/B,uBAAuB;KACxB,CACF,CAAA;IAED,IAAI,oBAAoB,IAAI,IAAI,EAAE;QAChC,OAAO,CACL,KAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,oBAAoB,EAClC,MAAM,EAAE,GAAG,EAAE;gBACX,uBAAuB,CAAC,IAAI,CAAC,CAAA;YAC/B,CAAC,EACD,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAA;KACF;IAED,IAAI,qBAAqB,EAAE;QACzB,OAAO,CACL,KAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,uBAAuB,EAC/B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAA;KACF;IAED,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,aAC7D,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,MAAC,WAAW,eACV,eAAK,SAAS,EAAC,WAAW,aACxB,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,mBAAmB,CAAC,MAAM,SAAY,EAAC,GAAG,IAC1D,EACZ,CAAC,uBAAuB,IAAI,CAC3B,KAAC,UAAU,IACT,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAC,6BAA6B,YAEvC,KAAC,OAAO,KAAG,GACA,CACd,IACG,EACN,KAAC,eAAe,IACd,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,mBAAmB,EAC7B,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC,CAAC,KAAK,CAAC,GAC1C,IACU,EACd,KAAC,SAAS,cACR,KAAC,OAAO,IACN,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAE,qBAAqB,GACxC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAGhB;IACC,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAA;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAA;IAEnE,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,OAAO,WAAW,CAAA;SACnB;QAED,IAAI,MAAM,KAAK,oBAAoB,EAAE;YACnC,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE;gBACvC,OAAO,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;YACvE,CAAC,CAAC,CAAA;SACH;QAED,OAAO,WAAW,CAAA;IACpB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAA;IAEzB,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;QAC5B,OAAO,KAAC,gBAAgB,cAAE,CAAC,CAAC,oBAAoB,GAAoB,CAAA;KACrE;IAED,OAAO,CACL,8BACE,KAAC,mBAAmB,IAClB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,SAAS,GACzB,EACD,mBAAmB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACvC,KAAC,aAAa,IAEZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,GAAG,EAAE;oBACZ,iBAAiB,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA;gBAC9C,CAAC,IAJI,UAAU,CAAC,cAAc,CAK9B,CACH,CAAC,IACD,CACJ,CAAA;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAGtB;IACC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAErC,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC/C,MAAM,QAAQ,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,GAAG,CAAC,CAAA;IACnD,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,UAAU,EAAE;QACjC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,SAAS,EAAE,CAAA;IAClC,MAAM,gBAAgB,GAAG,QAAQ;QAC/B,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,UAAU,EAAE;QACnC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,SAAS,EAAE,CAAA;IAEpC,OAAO,CACL,MAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,aACxB,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,YAAE,UAAU,CAAC,IAAI,GAAS,EAChE,KAAC,WAAW,IAAC,UAAU,EAAE,UAAU,GAAI,IAC7B,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,aACpC,UAAU,GAAG,CAAC,IAAI,CACjB,cAAK,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,cAAc,YAC9D,KAAC,4BAA4B,KAAG,GAC5B,CACP,EACA,UAAU,KAAK,CAAC,IAAI,YAAY,GAAG,CAAC,IAAI,CACvC,cAAK,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,gBAAgB,YAChE,KAAC,0BAA0B,KAAG,GAC1B,CACP,EACD,KAAC,eAAe,IACd,SAAS,EAAE;4BACT,eAAe,EAAE;gCACf,SAAS,EAAE,oCAAoC;6BAChD;yBACF,YAED,KAAC,QAAQ,IACP,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,eAAe,CAAC,UAAU,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;4BAC7C,CAAC,YAED,eAAK,SAAS,EAAC,gBAAgB,aAC7B,2BACG,CAAC,CAAC,QAAQ,SAAK,UAAU,CAAC,IAAI,IAC1B,EACP,KAAC,QAAQ,KAAG,IACR,GACG,GACK,IACR,IACH,CACZ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;IAC3B,QAAQ,EAAE,WAAW;IACrB,oBAAoB,EAAE,mCAAmC;IACzD,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;CAC1B,CAAA"}

package/lib/seam/index.d.ts

@@ -1,5 +1,6 @@
 export * from './access-codes/use-access-code.js';
 export * from './access-codes/use-access-codes.js';
+export * from './access-codes/use-create-access-code.js';
 export * from './connect-webviews/use-create-connect-webview.js';
 export * from './devices/use-device.js';
 export * from './devices/use-device-providers.js';

package/lib/seam/index.js

@@ -1,5 +1,6 @@
 export * from './access-codes/use-access-code.js';
 export * from './access-codes/use-access-codes.js';
+export * from './access-codes/use-create-access-code.js';
 export * from './connect-webviews/use-create-connect-webview.js';
 export * from './devices/use-device.js';
 export * from './devices/use-device-providers.js';

package/lib/seam/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/seam/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,oCAAoC,CAAA;AAClD,cAAc,kDAAkD,CAAA;AAChE,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/seam/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,oCAAoC,CAAA;AAClD,cAAc,0CAA0C,CAAA;AACxD,cAAc,kDAAkD,CAAA;AAChE,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA"}

package/lib/ui/Button.d.ts

@@ -5,6 +5,7 @@ interface ButtonProps extends PropsWithChildren {
     disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;
     className?: string;
+    onMouseDown?: MouseEventHandler<HTMLButtonElement>;
 }
-export declare function Button({ variant, children, size, disabled, onClick, className, }: ButtonProps): JSX.Element;
+export declare function Button({ variant, children, size, disabled, onClick, className, onMouseDown, }: ButtonProps): JSX.Element;
 export {};

package/lib/ui/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-export function Button({ variant = 'outline', children, size = 'medium', disabled = false, onClick, className, }) {
+export function Button({ variant = 'outline', children, size = 'medium', disabled = false, onClick, className, onMouseDown, }) {
     return (_jsx("button", { className: classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
             'seam-btn-disabled': disabled,
-        }, className), disabled: disabled, onClick: onClick, children: children }));
+        }, className), disabled: disabled, onClick: onClick, onMouseDown: onMouseDown, children: children }));
 }
 //# sourceMappingURL=Button.js.map

package/lib/ui/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/lib/ui/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAWnC,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,GACG;IACZ,OAAO,CACL,iBACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,OAAO,aAAa,IAAI,EAAE,EAC/C;YACE,mBAAmB,EAAE,QAAQ;SAC9B,EACD,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,YAEf,QAAQ,GACF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/lib/ui/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAYnC,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,EACT,WAAW,GACC;IACZ,OAAO,CACL,iBACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,OAAO,aAAa,IAAI,EAAE,EAC/C;YACE,mBAAmB,EAAE,QAAQ;SAC9B,EACD,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,YAEvB,QAAQ,GACF,CACV,CAAA;AACH,CAAC"}

package/lib/ui/FormField.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface FormFieldProps {
+    children: JSX.Element | JSX.Element[];
+    className?: string;
+}
+export declare function FormField({ children, className, }: FormFieldProps): JSX.Element;
+export {};

package/lib/ui/FormField.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { cloneElement, useRef } from 'react';
+import { InputLabel } from '../../lib/ui/InputLabel.js';
+import { TextField } from '../../lib/ui/TextField/TextField.js';
+export function FormField({ children, className, }) {
+    const inputRef = useRef();
+    const focusInput = () => {
+        if (inputRef.current != null) {
+            inputRef.current.focus();
+        }
+    };
+    const components = Array.isArray(children) ? children : [children];
+    // Map children to automatically focus on input when clicking
+    // on an InputLabel.
+    const clonedChildren = components.map((component, index) => {
+        const baseProps = {
+            ...component.props,
+            key: index,
+        };
+        if (component.type === InputLabel) {
+            return cloneElement(component, {
+                ...baseProps,
+                onClick: focusInput,
+            });
+        }
+        if (component.type === TextField) {
+            return cloneElement(component, {
+                ...baseProps,
+                ref: inputRef,
+            });
+        }
+        return cloneElement(component, baseProps);
+    });
+    return (_jsx("div", { className: classNames('seam-form-field', className), children: clonedChildren }));
+}
+//# sourceMappingURL=FormField.js.map

package/lib/ui/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/lib/ui/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAOzD,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,GACM;IACf,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAA;IAE3C,MAAM,UAAU,GAAG,GAAS,EAAE;QAC5B,IAAI,QAAQ,CAAC,OAAO,IAAI,IAAI,EAAE;YAC5B,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SACzB;IACH,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAElE,6DAA6D;IAC7D,oBAAoB;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;QACzD,MAAM,SAAS,GAAG;YAChB,GAAG,SAAS,CAAC,KAAK;YAClB,GAAG,EAAE,KAAK;SACX,CAAA;QAED,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,EAAE;YACjC,OAAO,YAAY,CAAC,SAAS,EAAE;gBAC7B,GAAG,SAAS;gBACZ,OAAO,EAAE,UAAU;aACpB,CAAC,CAAA;SACH;QAED,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,EAAE;YAChC,OAAO,YAAY,CAAC,SAAS,EAAE;gBAC7B,GAAG,SAAS;gBACZ,GAAG,EAAE,QAAQ;aACd,CAAC,CAAA;SACH;QAED,OAAO,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAC3C,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,YACrD,cAAc,GACX,CACP,CAAA;AACH,CAAC"}

package/lib/ui/InputLabel.d.ts

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from 'react';
+interface InputLabelProps extends PropsWithChildren {
+    className?: string;
+    onClick?: () => void;
+}
+export declare const InputLabel: import("react").ForwardRefExoticComponent<InputLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/ui/InputLabel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+export const InputLabel = forwardRef(function InputLabel({ children, className, onClick }, ref) {
+    return (_jsx("div", { className: classNames('seam-input-label', className), ref: ref, onClick: onClick, children: children }));
+});
+//# sourceMappingURL=InputLabel.js.map

package/lib/ui/InputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../src/lib/ui/InputLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAA;AAO1D,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,GAAG;IACvD,OAAO,CACL,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,EACpD,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,YAEf,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CACF,CAAA"}

package/lib/ui/TextField/SearchTextField.js

@@ -1,57 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
-import { CloseIcon } from '../../../lib/icons/Close.js';
 import { SearchIcon } from '../../../lib/icons/Search.js';
 import { TextField } from '../../../lib/ui/TextField/TextField.js';
 export function SearchTextField({ className, value, onChange, ...props }) {
-    const [inputEl, setInputEl] = useState(null);
-    const valueIsEmpty = useValueIsEmpty(value, inputEl);
-    const clearInput = () => {
-        if (onChange != null) {
-            onChange('');
-            return;
-        }
-        if (inputEl != null) {
-            inputEl.value = '';
-        }
-    };
     return (_jsx(TextField, { value: value, onChange: onChange, ...props, className: classNames(className, 'seam-search-text-field'), startAdornment: _jsx(SearchIcon, {}), inputProps: {
-            ref: setInputEl,
             placeholder: 'Search',
-        }, endAdornment: _jsx("button", { className: classNames({
-                'seam-hidden': valueIsEmpty,
-            }), onClick: clearInput, children: _jsx(CloseIcon, {}) }) }));
-}
-function useValueIsEmpty(value, inputEl) {
-    const [valueIsEmpty, setValueIsEmpty] = useState(true);
-    // If this is a controlled element, we'll just look at `value`
-    useEffect(() => {
-        setValueIsEmpty(value == null || value === '');
-    }, [value]);
-    // If this is not a controlled element, we'll need to listen to `input`
-    // events.
-    useEffect(() => {
-        if (inputEl == null) {
-            return;
-        }
-        const handler = (event) => {
-            if (value !== undefined) {
-                return;
-            }
-            if (event.target == null || !('value' in event.target)) {
-                return;
-            }
-            const inputValue = event.target.value;
-            if (value === undefined) {
-                setValueIsEmpty(inputValue === '');
-            }
-        };
-        inputEl.addEventListener('input', handler);
-        return () => {
-            inputEl.removeEventListener('input', handler);
-        };
-    }, [inputEl, value]);
-    return valueIsEmpty;
+        }, clearable: true }));
 }
 //# sourceMappingURL=SearchTextField.js.map

package/lib/ui/TextField/SearchTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAA;AAE9E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACO;IACf,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAA;IAErE,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACpD,MAAM,UAAU,GAAG,GAAS,EAAE;QAC5B,IAAI,QAAQ,IAAI,IAAI,EAAE;YACpB,QAAQ,CAAC,EAAE,CAAC,CAAA;YACZ,OAAM;SACP;QAED,IAAI,OAAO,IAAI,IAAI,EAAE;YACnB,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;SACnB;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,EAC1D,cAAc,EAAE,KAAC,UAAU,KAAG,EAC9B,UAAU,EAAE;YACV,GAAG,EAAE,UAAU;YACf,WAAW,EAAE,QAAQ;SACtB,EACD,YAAY,EACV,iBACE,SAAS,EAAE,UAAU,CAAC;gBACpB,aAAa,EAAE,YAAY;aAC5B,CAAC,EACF,OAAO,EAAE,UAAU,YAEnB,KAAC,SAAS,KAAG,GACN,GAEX,CACH,CAAA;AACH,CAAC;AAED,SAAS,eAAe,CACtB,KAAyB,EACzB,OAAgC;IAEhC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEtD,8DAA8D;IAC9D,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,uEAAuE;IACvE,UAAU;IACV,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,IAAI,EAAE;YACnB,OAAM;SACP;QAED,MAAM,OAAO,GAAG,CAAC,KAAY,EAAQ,EAAE;YACrC,IAAI,KAAK,KAAK,SAAS,EAAE;gBACvB,OAAM;aACP;YAED,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE;gBACtD,OAAM;aACP;YAED,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;YACrC,IAAI,KAAK,KAAK,SAAS,EAAE;gBACvB,eAAe,CAAC,UAAU,KAAK,EAAE,CAAC,CAAA;aACnC;QACH,CAAC,CAAA;QAED,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAE1C,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC/C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,OAAO,YAAY,CAAA;AACrB,CAAC"}
+{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAA;AAE9E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACO;IACf,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,EAC1D,cAAc,EAAE,KAAC,UAAU,KAAG,EAC9B,UAAU,EAAE;YACV,WAAW,EAAE,QAAQ;SACtB,EACD,SAAS,SACT,CACH,CAAA;AACH,CAAC"}

package/lib/ui/TextField/TextField.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react';
+import { type ChangeEvent, type FocusEventHandler, type InputHTMLAttributes, type MutableRefObject } from 'react';
 export interface TextFieldProps {
     value?: string;
     onChange?: (value: string) => void;
@@ -6,9 +6,15 @@ export interface TextFieldProps {
     endAdornment?: JSX.Element;
     disabled?: boolean;
     className?: string;
+    size?: 'small' | 'large';
     inputProps?: {
         ref?: MutableRefObject<HTMLInputElement | null> | ((inputEl: HTMLInputElement) => void);
     } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+    clearable?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    helperText?: string;
+    hasError?: boolean;
 }
-export declare function TextField(props: TextFieldProps): JSX.Element;
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement | undefined>>;
 export declare const handleString: (setter: (v: string) => void) => (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/lib/ui/TextField/TextField.js

@@ -1,12 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-export function TextField(props) {
-    const { value, onChange, className, startAdornment, endAdornment, inputProps, disabled = false, } = props;
-    return (_jsxs("div", { className: classNames('seam-text-field', className, {
+import { forwardRef, useEffect, useImperativeHandle, useState, } from 'react';
+import { CloseIcon } from '../../../lib/icons/Close.js';
+export const TextField = forwardRef(function TextField({ value, onChange, className, startAdornment, endAdornment, inputProps, disabled = false, size = 'small', clearable = false, onFocus, onBlur, hasError = false, helperText, }, ref) {
+    const [inputEl, setInputEl] = useState(null);
+    const valueIsEmpty = useValueIsEmpty(value, inputEl);
+    const clearInput = () => {
+        if (onChange != null) {
+            onChange('');
+            return;
+        }
+        if (inputEl != null) {
+            inputEl.value = '';
+        }
+    };
+    // Maintain a local ref, and still forward it along
+    useImperativeHandle(ref, () => (inputEl != null ? inputEl : undefined), [
+        inputEl,
+    ]);
+    const endAdornmentVisible = endAdornment != null || clearable;
+    return (_jsxs("div", { className: classNames('seam-text-field', className, `seam-${size}`, {
             'seam-disabled': disabled,
-        }), children: [startAdornment != null && (_jsx("div", { className: 'seam-adornment seam-start', children: startAdornment })), _jsx("input", { className: 'seam-text-field-input', value: value, onChange: onChange == null ? undefined : handleString(onChange), type: 'text', disabled: disabled, ...inputProps }), endAdornment != null && (_jsx("div", { className: 'seam-adornment seam-end', children: endAdornment }))] }));
-}
+            'seam-error': hasError,
+        }), children: [_jsxs("div", { className: 'seam-main', children: [startAdornment != null && (_jsx("div", { className: 'seam-adornment seam-start', children: startAdornment })), _jsx("input", { className: 'seam-text-field-input', value: value, onChange: onChange == null ? undefined : handleString(onChange), type: 'text', disabled: disabled, ref: setInputEl, onFocus: onFocus, onBlur: onBlur, ...inputProps }), endAdornmentVisible && (_jsxs("div", { className: 'seam-adornment seam-end', children: [clearable && (_jsx("button", { className: classNames({
+                                    'seam-hidden': valueIsEmpty,
+                                }), onClick: clearInput, children: _jsx(CloseIcon, {}) })), endAdornment] }))] }), helperText != null && (_jsx("div", { className: 'seam-helper-text', children: helperText }))] }));
+});
 export const handleString = (setter) => (event) => {
     setter(event.currentTarget.value);
 };
+function useValueIsEmpty(value, inputEl) {
+    const [valueIsEmpty, setValueIsEmpty] = useState(true);
+    // If this is a controlled element, we'll just look at `value`
+    useEffect(() => {
+        setValueIsEmpty(value == null || value === '');
+    }, [value]);
+    // If this is not a controlled element, we'll need to listen to `input`
+    // events.
+    useEffect(() => {
+        if (inputEl == null) {
+            return;
+        }
+        const handler = (event) => {
+            if (value !== undefined) {
+                return;
+            }
+            if (event.target == null || !('value' in event.target)) {
+                return;
+            }
+            const inputValue = event.target.value;
+            if (value === undefined) {
+                setValueIsEmpty(inputValue === '');
+            }
+        };
+        inputEl.addEventListener('input', handler);
+        return () => {
+            inputEl.removeEventListener('input', handler);
+        };
+    }, [inputEl, value]);
+    return valueIsEmpty;
+}
 //# sourceMappingURL=TextField.js.map

package/lib/ui/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAiBnC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,EACV,QAAQ,GAAG,KAAK,GACjB,GAAG,KAAK,CAAA;IAET,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;YAClD,eAAe,EAAE,QAAQ;SAC1B,CAAC,aAED,cAAc,IAAI,IAAI,IAAI,CACzB,cAAK,SAAS,EAAC,2BAA2B,YAAE,cAAc,GAAO,CAClE,EACD,gBACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,EAC/D,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,KACd,UAAU,GACd,EACD,YAAY,IAAI,IAAI,IAAI,CACvB,cAAK,SAAS,EAAC,yBAAyB,YAAE,YAAY,GAAO,CAC9D,IACG,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GACvB,CAAC,MAA2B,EAAE,EAAE,CAChC,CAAC,KAA0D,EAAQ,EAAE;IACnE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AACnC,CAAC,CAAA"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/TextField.tsx"],"names":[],"mappings":"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"}

package/lib/ui/layout/ContentHeader.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare function ContentHeader(props: {
-    title?: string;
+export interface ContentHeaderProps {
     onBack?: () => void;
-}): JSX.Element | null;
+    title?: string;
+    subheading?: string;
+}
+export declare function ContentHeader(props: ContentHeaderProps): JSX.Element | null;

package/lib/ui/layout/ContentHeader.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowBackIcon } from '../../../lib/icons/ArrowBack.js';
 export function ContentHeader(props) {
-    const { title, onBack } = props;
+    const { title, onBack, subheading } = props;
     if (title == null && onBack == null) {
         return null;
     }
-    return (_jsxs("div", { className: 'seam-content-header', children: [_jsx(BackIcon, { onClick: onBack }), _jsx("span", { className: 'seam-title', children: title })] }));
+    return (_jsxs("div", { className: 'seam-content-header', children: [_jsx(BackIcon, { onClick: onBack }), _jsxs("div", { children: [_jsx("span", { className: 'seam-title', children: title }), subheading != null && (_jsx("span", { className: 'seam-subheading', children: subheading }))] })] }));
 }
 function BackIcon(props) {
     if (props.onClick == null) {

package/lib/ui/layout/ContentHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAC/B,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE;QACnC,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,GAAI,EAC7B,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,IACvC,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}
+{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAQtD,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE;QACnC,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,GAAI,EAC7B,0BACE,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,EAC1C,UAAU,IAAI,IAAI,IAAI,CACrB,eAAM,SAAS,EAAC,iBAAiB,YAAE,UAAU,GAAQ,CACtD,IACG,IACF,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.28.1";
+declare const seamapiReactVersion = "1.30.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.28.1';
+const seamapiReactVersion = '1.30.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.28.1",
+  "version": "1.30.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -120,7 +120,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^6.15.1",
+    "seamapi": "^7.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -131,7 +131,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
     "@r2wc/react-to-web-component": "^2.0.2",
-    "@seamapi/fake-seam-connect": "^0.10.0",
+    "@seamapi/fake-seam-connect": "^0.11.0",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
     "@storybook/addon-styling": "^1.0.5",
@@ -164,7 +164,7 @@
     "http-proxy-middleware": "^2.0.6",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.3.0",
+    "prettier": "^3.0.0",
     "prop-types": "^15.8.1",
     "raw-body": "^2.5.2",
     "react": "^18.2.0",
@@ -177,7 +177,7 @@
     "ts-jest": "^29.1.0",
     "tsc-alias": "^1.8.5",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "typescript": "~5.0.0",
+    "typescript": "^5.1.0",
     "vite": "^4.2.1",
     "vite-tsconfig-paths": "^4.0.8",
     "zustand-hoist": "^1.0.0"

package/src/lib/icons/Add.tsx

@@ -0,0 +1,33 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function AddIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='add_svg__a'
+        width={24}
+        height={24}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+      </mask>
+      <g mask='url(#add_svg__a)'>
+        <path fill='#1C1B1F' d='M11 19v-6H5v-2h6V5h2v6h6v2h-6v6h-2Z' />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/DotsEllipsisMore.tsx

@@ -9,15 +9,15 @@ export function DotsEllipsisMoreIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width={24}
+      height={24}
       fill='none'
       {...props}
     >
       <mask
         id='dots-ellipsis-more_svg__a'
-        width={18}
-        height={18}
+        width={24}
+        height={24}
         x={0}
         y={0}
         maskUnits='userSpaceOnUse'
@@ -25,12 +25,12 @@ export function DotsEllipsisMoreIcon(
           maskType: 'alpha',
         }}
       >
-        <path fill='#2196F3' d='M0 0h18v18H0z' />
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
       </mask>
       <g mask='url(#dots-ellipsis-more_svg__a)'>
         <path
-          fill='#007AFC'
-          d='M4.5 10.5c-.412 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 3 9c0-.412.147-.766.44-1.06.294-.293.648-.44 1.06-.44.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Zm4.5 0c-.412 0-.766-.147-1.06-.44A1.444 1.444 0 0 1 7.5 9c0-.412.147-.766.44-1.06.294-.293.647-.44 1.06-.44.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44Zm4.5 0c-.412 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 12 9c0-.412.147-.766.44-1.06.294-.293.648-.44 1.06-.44.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44Z'
+          fill='#232B3A'
+          d='M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z'
         />
       </g>
     </svg>

package/src/lib/seam/access-codes/use-create-access-code.ts

@@ -0,0 +1,43 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  AccessCode,
+  AccessCodeCreateRequest,
+  AccessCodeCreateResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseCreateAccessCodeParams = never
+export type UseCreateAccessCodeData = AccessCode
+export type UseCreateAccessCodeMutationParams = AccessCodeCreateRequest
+
+export function useCreateAccessCode(): UseMutationResult<
+  UseCreateAccessCodeData,
+  SeamError,
+  UseCreateAccessCodeMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    AccessCodeCreateResponse['access_code'],
+    SeamError,
+    AccessCodeCreateRequest
+  >({
+    mutationFn: async (mutationParams: UseCreateAccessCodeMutationParams) => {
+      if (client === null) {
+        throw new Error('Missing seam client')
+      }
+
+      return await client.accessCodes.create(mutationParams)
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries(['access_codes', 'list'])
+    },
+  })
+}

package/src/lib/seam/components/AccessCodeForm/AccessCodeForm.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+import type { AccessCodeFormProps } from 'lib/seam/components/AccessCodeForm/AccessCodeForm.js'
+
+export const name = 'seam-access-code-form'
+
+export const props: ElementProps<AccessCodeFormProps> = {
+  deviceId: 'string',
+  onBack: 'function',
+  className: 'string',
+}
+
+export { AccessCodeForm as Component } from './AccessCodeForm.js'