@seamapi/react 0.10.0 → 0.11.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAA;AAE1E,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB;IAC1E,OAAO,CACL,KAAC,SAAS,OACJ,UAAU,EACd,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,GAC1D,CACH,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { ChangeEvent, InputHTMLAttributes } from 'react';
+export type TextFieldProps = {
+    value?: string;
+    onChange: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+export declare function TextField(props: TextFieldProps): JSX.Element;
+export declare const handleString: (setter: (v: string) => void) => (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/lib/ui/TextField/TextField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export function TextField(props) {
+    const { value, onChange, className, ...inputProps } = props;
+    return (_jsx("input", { className: classNames('seam-text-field', className), value: value, onChange: handleString(onChange), type: 'text', ...inputProps }));
+}
+export const handleString = (setter) => (e) => {
+    setter(e.currentTarget.value);
+};
+//# sourceMappingURL=TextField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAC3D,OAAO,CACL,gBACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAChC,IAAI,EAAC,MAAM,KACP,UAAU,GACd,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GACvB,CAAC,MAA2B,EAAE,EAAE,CAChC,CAAC,CAAsD,EAAQ,EAAE;IAC/D,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAC/B,CAAC,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './SearchTextField.js';
+export * from './TextField.js';

package/lib/ui/TextField/index.js

@@ -0,0 +1,3 @@
+export * from './SearchTextField.js';
+export * from './TextField.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA"}

package/lib/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA"}

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

@@ -0,0 +1,4 @@
+export declare function ContentHeader(props: {
+    title?: string;
+    onClickBack?: () => void;
+}): JSX.Element;

package/lib/ui/layout/ContentHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowBackIcon } from '../../../lib/icons/ArrowBack.js';
+export function ContentHeader(props) {
+    return (_jsxs("div", { className: 'seam-content-header', children: [_jsx(BackIcon, { onClick: props.onClickBack }), _jsx("span", { className: 'seam-title', children: props.title })] }));
+}
+function BackIcon(props) {
+    if (props.onClick === undefined) {
+        return null;
+    }
+    return _jsx(ArrowBackIcon, { className: 'seam-back-icon', onClick: props.onClick });
+}
+//# sourceMappingURL=ContentHeader.js.map

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

@@ -0,0 +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,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,EACxC,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,CAAC,KAAK,GAAQ,IAC7C,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE;QAC/B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}

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

@@ -0,0 +1 @@
+export declare function DotDivider(): JSX.Element;

package/lib/ui/layout/DotDivider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DotDivider() {
+    return _jsx("span", { className: 'seam-dot-divider', children: "\u2022" });
+}
+//# sourceMappingURL=DotDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DotDivider.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/DotDivider.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,UAAU;IACxB,OAAO,eAAM,SAAS,EAAC,kBAAkB,uBAAS,CAAA;AACpD,CAAC"}

package/lib/ui/types.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes, HtmlHTMLAttributes } from 'react';
+export type DivProps = HTMLAttributes<HTMLDivElement>;
+export type ButtonProps = HtmlHTMLAttributes<HTMLButtonElement>;

package/lib/ui/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/ui/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/lib/ui/types.ts"],"names":[],"mappings":""}

package/lib/ui/typography/Caption.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function Caption(props: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/ui/typography/Caption.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Caption(props) {
+    return _jsx("span", { className: 'seam-caption', children: props.children });
+}
+//# sourceMappingURL=Caption.js.map

package/lib/ui/typography/Caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../src/lib/ui/typography/Caption.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,OAAO,CAAC,KAA8B;IACpD,OAAO,eAAM,SAAS,EAAC,cAAc,YAAE,KAAK,CAAC,QAAQ,GAAQ,CAAA;AAC/D,CAAC"}

package/lib/ui/typography/Title.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function Title(props: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/ui/typography/Title.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Title(props) {
+    return _jsx("span", { className: 'seam-title', children: props.children });
+}
+//# sourceMappingURL=Title.js.map

package/lib/ui/typography/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../src/lib/ui/typography/Title.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,KAAK,CAAC,KAA8B;IAClD,OAAO,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,CAAC,QAAQ,GAAQ,CAAA;AAC7D,CAAC"}

package/lib/use-toggle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Simple util to quickly handle on/off states.
+ */
+declare const useToggle: (initialState?: boolean) => [boolean, () => void];
+export default useToggle;

package/lib/use-toggle.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+/**
+ * Simple util to quickly handle on/off states.
+ */
+const useToggle = (initialState = false) => {
+    const [isTrue, setIsTrue] = useState(initialState);
+    // use callback otherwise it would yield unexpected results in promises
+    const toggle = useCallback(() => {
+        setIsTrue((isTrue) => !isTrue);
+    }, [setIsTrue]);
+    return [isTrue, toggle];
+};
+export default useToggle;
+//# sourceMappingURL=use-toggle.js.map

package/lib/use-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toggle.js","sourceRoot":"","sources":["../src/lib/use-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C;;GAEG;AACH,MAAM,SAAS,GAAG,CAAC,eAAwB,KAAK,EAAyB,EAAE;IACzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAElD,uEAAuE;IAEvE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -91,6 +91,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.28.0",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.7",
     "seamapi": "^5.19.0",
     "uuid": "^9.0.0"
   },
@@ -98,6 +100,9 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.2",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-interactions": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
@@ -109,6 +114,7 @@
     "@svgr/cli": "^7.0.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
+    "@types/ms": "^0.7.31",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
@@ -130,6 +136,7 @@
     "http-proxy-middleware": "^2.0.6",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "ms": "^2.1.3",
     "prettier": "^2.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

package/src/icons/access-code-key.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4926 14.743L22.0506 13.292C22.0711 13.2729 22.0905 13.2527 22.1087 13.2314C22.7078 12.531 22.7073 11.3768 22.109 10.6764C22.0874 10.6511 22.0642 10.6274 22.0394 10.6053L21.4925 10.1162C21.1401 9.72783 20.6403 9.50503 20.1149 9.50441L16.4438 9.50003L15.9941 8.92458C15.8145 8.69474 15.5829 8.50937 15.1751 8.50937H12.9297C11.8441 6.98831 10.0656 5.9913 8.05297 5.98877C4.74194 5.98462 2.05675 8.67297 2.05786 11.9944C2.05897 15.3143 4.74361 18.0071 8.05314 18.0112C10.1803 18.0139 12.0466 16.9049 13.1092 15.2372L13.12 15.2199L13.1351 15.1945H19.1429C19.1614 15.1946 19.1834 15.1951 19.2084 15.1958C19.4688 15.2022 20.0576 15.2169 20.4926 14.743ZM20.3441 11.3427L20.8567 11.801C20.89 11.8601 20.8888 12.0535 20.8541 12.1111L19.3494 13.5125C19.3124 13.5134 19.2764 13.5132 19.2256 13.5129L19.1432 13.5126H12.7166C12.3876 13.5126 12.0828 13.6856 11.9133 13.9684L11.6896 14.3419C10.9214 15.5399 9.58137 16.3312 8.05523 16.3293C5.6701 16.3263 3.73561 14.3852 3.73481 11.9939C3.73401 9.60308 5.66632 7.66772 8.05087 7.6707C9.56374 7.6726 10.8948 8.45357 11.6675 9.63672L11.7732 9.84793C11.9904 10.2544 12.7166 10.2544 12.7166 10.2544C12.7166 10.2544 14.1381 10.2216 14.9027 10.2544L15.3457 10.8214C15.5231 11.0484 15.7947 11.1812 16.0822 11.1815L20.1129 11.1863C20.1677 11.1864 20.2201 11.2105 20.256 11.2526C20.2833 11.2845 20.3127 11.3146 20.3441 11.3427ZM6.42429 13.2031C7.08652 13.2031 7.62336 12.6647 7.62336 12.0005C7.62336 11.3363 7.08652 10.7979 6.42429 10.7979C5.76206 10.7979 5.22521 11.3363 5.22521 12.0005C5.22521 12.6647 5.76206 13.2031 6.42429 13.2031Z" fill="#232B3A"/>
+</svg>

package/src/icons/arrow-back.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_662_13515" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_662_13515)">
+<path d="M12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825L13.425 18.6L12 20Z" fill="#6E7179"/>
+</g>
+</svg>

package/src/icons/battery-level-critical.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="17.1467" y="9.5" width="1.85498" height="6" rx="0.75" fill="#E36857"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.52 6.26904H5.50003C3.81647 6.26904 2.76607 7.4595 2.76607 8.92979V9.733C2.00144 9.96233 1.41365 10.7535 1.41365 11.6947L1.41357 13.2534C1.41357 14.1945 2.00136 14.9858 2.76599 15.2151V15.9794C2.76599 17.4517 3.80997 18.7269 5.49997 18.7269H19.5C21.1461 18.7269 22.236 17.8303 22.236 15.9594L22.2361 8.99979C22.2361 7.12893 21.1662 6.26904 19.52 6.26904ZM4.72676 8.26833C4.91265 8.06201 5.21111 7.9057 5.64593 7.9057L19.2727 7.90571C20.0505 7.90571 20.5729 8.395 20.5729 9.27898L20.5728 15.7252C20.5728 16.6092 20.0504 17.0985 19.2726 17.0985L5.64583 17.0985C5.21101 17.0985 4.91255 16.9422 4.72666 16.7359C4.54288 16.5319 4.40416 16.2073 4.40416 15.7252L4.40425 13.7874H3.23192C3.0236 13.7874 2.98071 13.637 2.98071 13.5062L2.98078 11.4868C2.98078 11.3185 3.06357 11.2201 3.23192 11.2201H4.40426V9.27898C4.40426 8.79687 4.54298 8.47232 4.72676 8.26833Z" fill="#E36857"/>
+</svg>

package/src/icons/battery-level-full.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5.94116" y="9.5" width="13.0605" height="6" rx="0.75" fill="#27AE60"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.52 6.26904H5.50003C3.81647 6.26904 2.76607 7.4595 2.76607 8.92979V9.733C2.00144 9.96233 1.41365 10.7535 1.41365 11.6947L1.41357 13.2534C1.41357 14.1945 2.00136 14.9858 2.76599 15.2151V15.9794C2.76599 17.4517 3.80997 18.7269 5.49997 18.7269H19.5C21.1461 18.7269 22.236 17.8303 22.236 15.9594L22.2361 8.99979C22.2361 7.12893 21.1662 6.26904 19.52 6.26904ZM4.72676 8.26833C4.91265 8.06201 5.21111 7.9057 5.64593 7.9057L19.2727 7.90571C20.0505 7.90571 20.5729 8.395 20.5729 9.27898L20.5728 15.7252C20.5728 16.6092 20.0504 17.0985 19.2726 17.0985L5.64583 17.0985C5.21101 17.0985 4.91255 16.9422 4.72666 16.7359C4.54288 16.5319 4.40416 16.2073 4.40416 15.7252L4.40425 13.7874H3.23192C3.0236 13.7874 2.98071 13.637 2.98071 13.5062L2.98078 11.4868C2.98078 11.3185 3.06357 11.2201 3.23192 11.2201H4.40426V9.27898C4.40426 8.79687 4.54298 8.47232 4.72676 8.26833Z" fill="#9DA1A9"/>
+</svg>

package/src/icons/battery-level-high.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.69897" y="9.5" width="10.3027" height="6" rx="0.75" fill="#27AE60"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.52 6.26904H5.50003C3.81647 6.26904 2.76607 7.4595 2.76607 8.92979V9.733C2.00144 9.96233 1.41365 10.7535 1.41365 11.6947L1.41357 13.2534C1.41357 14.1945 2.00136 14.9858 2.76599 15.2151V15.9794C2.76599 17.4517 3.80997 18.7269 5.49997 18.7269H19.5C21.1461 18.7269 22.236 17.8303 22.236 15.9594L22.2361 8.99979C22.2361 7.12893 21.1662 6.26904 19.52 6.26904ZM4.72676 8.26833C4.91265 8.06201 5.21111 7.9057 5.64593 7.9057L19.2727 7.90571C20.0505 7.90571 20.5729 8.395 20.5729 9.27898L20.5728 15.7252C20.5728 16.6092 20.0504 17.0985 19.2726 17.0985L5.64583 17.0985C5.21101 17.0985 4.91255 16.9422 4.72666 16.7359C4.54288 16.5319 4.40416 16.2073 4.40416 15.7252L4.40425 13.7874H3.23192C3.0236 13.7874 2.98071 13.637 2.98071 13.5062L2.98078 11.4868C2.98078 11.3185 3.06357 11.2201 3.23192 11.2201H4.40426V9.27898C4.40426 8.79687 4.54298 8.47232 4.72676 8.26833Z" fill="#9DA1A9"/>
+</svg>

package/src/icons/battery-level-low.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14.1724" y="9.5" width="4.82935" height="6" rx="0.75" fill="#E36857"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.52 6.26904H5.50003C3.81647 6.26904 2.76607 7.4595 2.76607 8.92979V9.733C2.00144 9.96233 1.41365 10.7535 1.41365 11.6947L1.41357 13.2534C1.41357 14.1945 2.00136 14.9858 2.76599 15.2151V15.9794C2.76599 17.4517 3.80997 18.7269 5.49997 18.7269H19.5C21.1461 18.7269 22.236 17.8303 22.236 15.9594L22.2361 8.99979C22.2361 7.12893 21.1662 6.26904 19.52 6.26904ZM4.72676 8.26833C4.91265 8.06201 5.21111 7.9057 5.64593 7.9057L19.2727 7.90571C20.0505 7.90571 20.5729 8.395 20.5729 9.27898L20.5728 15.7252C20.5728 16.6092 20.0504 17.0985 19.2726 17.0985L5.64583 17.0985C5.21101 17.0985 4.91255 16.9422 4.72666 16.7359C4.54288 16.5319 4.40416 16.2073 4.40416 15.7252L4.40425 13.7874H3.23192C3.0236 13.7874 2.98071 13.637 2.98071 13.5062L2.98078 11.4868C2.98078 11.3185 3.06357 11.2201 3.23192 11.2201H4.40426V9.27898C4.40426 8.79687 4.54298 8.47232 4.72676 8.26833Z" fill="#9DA1A9"/>
+</svg>

package/src/icons/battery-level-wired.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_512_53501" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_512_53501)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 18.505C14.5 19.0573 14.9477 19.505 15.5 19.505C16.0523 19.505 16.5 19.0573 16.5 18.505V18.3895V15.4998H21.5C22.0523 15.4998 22.5 15.0521 22.5 14.4998C22.5 13.9475 22.0523 13.4998 21.5 13.4998H16.5V10.4998H21.5C22.0523 10.4998 22.5 10.0521 22.5 9.49979C22.5 8.94751 22.0523 8.49979 21.5 8.49979H16.5V5.56061V5.44434C16.5 4.89205 16.0523 4.44434 15.5 4.44434C14.9477 4.44434 14.5 4.89205 14.5 5.44434V5.56061L10.9242 5.5606C8.82837 5.5606 7.6588 7.48338 7.03239 8.62863C6.80607 9.04239 6.65386 9.14734 6.48353 9.14734H2.50996C1.25199 9.14734 0.5 10.1398 0.5 11.1071V12.9805C0.5 13.9477 1.22522 15.1761 2.50996 15.1761L6.50627 15.1761C6.7165 15.1761 6.7925 15.3298 6.91093 15.5694C6.95103 15.6506 6.996 15.7415 7.05269 15.8397C7.69799 16.9573 8.86996 18.3895 10.9242 18.3895H14.5V18.505ZM11.4111 16.4397C8.95327 16.4397 7.82203 12.9805 7.82203 12.9805H2.50996V11.1071H7.82203C7.82203 11.1071 8.95327 7.53713 11.4111 7.53713H14.4639L14.4639 16.4397H11.4111Z" fill="#6E7179"/>
+</g>
+</svg>

package/src/icons/chevron-right.svg

@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_657_3778" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">
+<rect x="0.333252" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_657_3778)">
+<path d="M9.73325 18L8.33325 16.6L12.9333 12L8.33325 7.4L9.73325 6L15.7333 12L9.73325 18Z" fill="#9DA1A9"/>
+</g>
+</svg>

package/src/icons/dots-ellipsis-more.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_637_25895" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+<rect width="18" height="18" fill="#2196F3"/>
+</mask>
+<g mask="url(#mask0_637_25895)">
+<path d="M4.5 10.5C4.0875 10.5 3.73438 10.3531 3.44063 10.0594C3.14688 9.76562 3 9.4125 3 9C3 8.5875 3.14688 8.23438 3.44063 7.94063C3.73438 7.64688 4.0875 7.5 4.5 7.5C4.9125 7.5 5.26562 7.64688 5.55938 7.94063C5.85313 8.23438 6 8.5875 6 9C6 9.4125 5.85313 9.76562 5.55938 10.0594C5.26562 10.3531 4.9125 10.5 4.5 10.5ZM9 10.5C8.5875 10.5 8.23438 10.3531 7.94063 10.0594C7.64687 9.76562 7.5 9.4125 7.5 9C7.5 8.5875 7.64687 8.23438 7.94063 7.94063C8.23438 7.64688 8.5875 7.5 9 7.5C9.4125 7.5 9.76563 7.64688 10.0594 7.94063C10.3531 8.23438 10.5 8.5875 10.5 9C10.5 9.4125 10.3531 9.76562 10.0594 10.0594C9.76563 10.3531 9.4125 10.5 9 10.5ZM13.5 10.5C13.0875 10.5 12.7344 10.3531 12.4406 10.0594C12.1469 9.76562 12 9.4125 12 9C12 8.5875 12.1469 8.23438 12.4406 7.94063C12.7344 7.64688 13.0875 7.5 13.5 7.5C13.9125 7.5 14.2656 7.64688 14.5594 7.94063C14.8531 8.23438 15 8.5875 15 9C15 9.4125 14.8531 9.76562 14.5594 10.0594C14.2656 10.3531 13.9125 10.5 13.5 10.5Z" fill="#007AFC"/>
+</g>
+</svg>

package/src/icons/online-status-account-offline.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_521_54797" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.73291" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_521_54797)">
+<path d="M19.8 23.3327L17.15 20.7327H6.5C4.96667 20.7327 3.66667 20.1994 2.6 19.1327C1.53333 18.066 1 16.766 1 15.2327C1 13.9494 1.39583 12.8077 2.1875 11.8077C2.97917 10.8077 4 10.166 5.25 9.88272C5.3 9.74938 5.35 9.62022 5.4 9.49522C5.45 9.37022 5.5 9.23272 5.55 9.08272L1.4 4.93271L2.8 3.53271L21.2 21.9327L19.8 23.3327ZM6.5 18.7327H15.15L7.1 10.6827C7.06667 10.866 7.04167 11.041 7.025 11.2077C7.00833 11.3744 7 11.5494 7 11.7327H6.5C5.53333 11.7327 4.70833 12.0744 4.025 12.7577C3.34167 13.441 3 14.266 3 15.2327C3 16.1994 3.34167 17.0244 4.025 17.7077C4.70833 18.391 5.53333 18.7327 6.5 18.7327ZM21.6 19.4827L20.15 18.0827C20.4333 17.8494 20.6458 17.5785 20.7875 17.2702C20.9292 16.9619 21 16.616 21 16.2327C21 15.5327 20.7583 14.941 20.275 14.4577C19.7917 13.9744 19.2 13.7327 18.5 13.7327H17V11.7327C17 10.3494 16.5125 9.17022 15.5375 8.19522C14.5625 7.22022 13.3833 6.73272 12 6.73272C11.55 6.73272 11.1167 6.78688 10.7 6.89522C10.2833 7.00355 9.88333 7.17438 9.5 7.40772L8.05 5.95772C8.63333 5.55771 9.25417 5.25355 9.9125 5.04522C10.5708 4.83688 11.2667 4.73271 12 4.73271C13.95 4.73271 15.6042 5.41188 16.9625 6.77022C18.3208 8.12855 19 9.78272 19 11.7327C20.15 11.866 21.1042 12.3619 21.8625 13.2202C22.6208 14.0785 23 15.0827 23 16.2327C23 16.8827 22.875 17.4869 22.625 18.0452C22.375 18.6035 22.0333 19.0827 21.6 19.4827Z" fill="#E36857"/>
+</g>
+</svg>

package/src/icons/online-status-device-offline.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.41113" y="4.93066" width="1.94189" height="26.066" transform="rotate(-45 1.41113 4.93066)" fill="#E36857"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.3623C10.05 23.3623 8.39583 22.6831 7.0375 21.3248C5.67917 19.9665 5 18.3123 5 16.3623V8.3623C5 7.56337 5.11401 6.8141 5.34202 6.11448L7.02794 7.8004C7.00931 7.9838 7 8.1711 7 8.3623V16.3623C7 17.7456 7.4875 18.9248 8.4625 19.8998C9.4375 20.8748 10.6167 21.3623 12 21.3623C13.3833 21.3623 14.5625 20.8748 15.5375 19.8998C16.2015 19.2358 16.6394 18.4771 16.8512 17.6237L18.4317 19.2042C18.0932 19.9769 17.6035 20.6838 16.9625 21.3248C15.6042 22.6831 13.95 23.3623 12 23.3623ZM18.9749 17.0011C18.9916 16.7918 19 16.5789 19 16.3623V8.3623C19 6.4123 18.3208 4.75814 16.9625 3.3998C15.6042 2.04147 13.95 1.3623 12 1.3623C10.05 1.3623 8.39583 2.04147 7.0375 3.3998C6.7517 3.68561 6.49596 3.98451 6.2703 4.2965L7.72223 5.74844C7.92591 5.42252 8.17266 5.11464 8.4625 4.8248C9.4375 3.8498 10.6167 3.3623 12 3.3623C13.3833 3.3623 14.5625 3.8498 15.5375 4.8248C16.5125 5.7998 17 6.97897 17 8.3623V15.0262L18.9749 17.0011ZM15 12.3623C15.2833 12.3623 15.5208 12.2665 15.7125 12.0748C15.9042 11.8831 16 11.6456 16 11.3623C16 11.079 15.9042 10.8415 15.7125 10.6498C15.5208 10.4581 15.2833 10.3623 15 10.3623C14.7167 10.3623 14.4792 10.4581 14.2875 10.6498C14.0958 10.8415 14 11.079 14 11.3623C14 11.6456 14.0958 11.8831 14.2875 12.0748C14.4792 12.2665 14.7167 12.3623 15 12.3623ZM9 15.3623C9.28333 15.3623 9.52083 15.2665 9.7125 15.0748C9.90417 14.8831 10 14.6456 10 14.3623C10 14.079 9.90417 13.8415 9.7125 13.6498C9.52083 13.4581 9.28333 13.3623 9 13.3623C8.71667 13.3623 8.47917 13.4581 8.2875 13.6498C8.09583 13.8415 8 14.079 8 14.3623C8 14.6456 8.09583 14.8831 8.2875 15.0748C8.47917 15.2665 8.71667 15.3623 9 15.3623ZM9 18.3623C9.28333 18.3623 9.52083 18.2665 9.7125 18.0748C9.90417 17.8831 10 17.6456 10 17.3623C10 17.079 9.90417 16.8415 9.7125 16.6498C9.52083 16.4581 9.28333 16.3623 9 16.3623C8.71667 16.3623 8.47917 16.4581 8.2875 16.6498C8.09583 16.8415 8 17.079 8 17.3623C8 17.6456 8.09583 17.8831 8.2875 18.0748C8.47917 18.2665 8.71667 18.3623 9 18.3623ZM12 18.3623C12.2833 18.3623 12.5208 18.2665 12.7125 18.0748C12.9042 17.8831 13 17.6456 13 17.3623C13 17.079 12.9042 16.8415 12.7125 16.6498C12.5208 16.4581 12.2833 16.3623 12 16.3623C11.7167 16.3623 11.4792 16.4581 11.2875 16.6498C11.0958 16.8415 11 17.079 11 17.3623C11 17.6456 11.0958 17.8831 11.2875 18.0748C11.4792 18.2665 11.7167 18.3623 12 18.3623ZM15.7125 9.07481C15.5208 9.26647 15.2833 9.3623 15 9.3623C14.7167 9.3623 14.4792 9.26647 14.2875 9.07481C14.0958 8.88314 14 8.64564 14 8.3623C14 8.07897 14.0958 7.84147 14.2875 7.64981C14.4792 7.45814 14.7167 7.3623 15 7.3623C15.2833 7.3623 15.5208 7.45814 15.7125 7.64981C15.9042 7.84147 16 8.07897 16 8.3623C16 8.64564 15.9042 8.88314 15.7125 9.07481ZM11.9641 9.3623C12.2474 9.3623 12.4849 9.26647 12.6766 9.07481C12.8683 8.88314 12.9641 8.64564 12.9641 8.3623C12.9641 8.07897 12.8683 7.84147 12.6766 7.64981C12.4849 7.45814 12.2474 7.3623 11.9641 7.3623C11.6808 7.3623 11.4433 7.45814 11.2516 7.64981C11.0599 7.84147 10.9641 8.07897 10.9641 8.3623C10.9641 8.64564 11.0599 8.88314 11.2516 9.07481C11.4433 9.26647 11.6808 9.3623 11.9641 9.3623Z" fill="#E36857"/>
+</svg>

package/src/icons/online-status-online.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 20C4.98333 20 3.6875 19.475 2.6125 18.425C1.5375 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.6042 4.67917 16.9625 6.0375C18.3208 7.39583 19 9.05 19 11C20.15 11.1333 21.1042 11.6292 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.75 22.5625 17.8125 21.6875 18.6875C20.8125 19.5625 19.75 20 18.5 20H6.5ZM6.5 18H18.5C19.2 18 19.7917 17.7583 20.275 17.275C20.7583 16.7917 21 16.2 21 15.5C21 14.8 20.7583 14.2083 20.275 13.725C19.7917 13.2417 19.2 13 18.5 13H17V11C17 9.61667 16.5125 8.4375 15.5375 7.4625C14.5625 6.4875 13.3833 6 12 6C10.6167 6 9.4375 6.4875 8.4625 7.4625C7.4875 8.4375 7 9.61667 7 11H6.5C5.53333 11 4.70833 11.3417 4.025 12.025C3.34167 12.7083 3 13.5333 3 14.5C3 15.4667 3.34167 16.2917 4.025 16.975C4.70833 17.6583 5.53333 18 6.5 18Z" fill="#9DA1A9"/>
+<path d="M16 11.3499L10.35 16.9999L6.80005 13.4499L8.22505 12.0249L10.325 14.1249L14.55 9.8999L16 11.3499Z" fill="#27AE60"/>
+</svg>

package/src/index.scss

@@ -1,2 +1 @@
-@use 'the-new-css-reset/css/reset.css';
-@use './styles/_main.scss';
+@use './styles/main.scss';

package/src/lib/{provider.tsx → SeamProvider.tsx}

@@ -1,7 +1,12 @@
 'use client'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { createContext, type PropsWithChildren, useRef } from 'react'
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useRef,
+} from 'react'
 import type { Seam, SeamClientOptions } from 'seamapi'
 
 declare global {
@@ -103,3 +108,13 @@ const createSeamContextValue = ({
 const defaultSeamContextValue = createDefaultSeamContextValue()
 
 export const seamContext = createContext<SeamContext>(defaultSeamContextValue)
+
+export function useSeamContext() {
+  const context = useContext(seamContext)
+
+  if (context === undefined) {
+    throw new Error('useSeamContext must be used inside a <SeamProvider/>')
+  }
+
+  return context
+}

package/src/lib/icons/AccessCodeKey.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react'
+export const AccessCodeKeyIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <path
+      fill='#232B3A'
+      fillRule='evenodd'
+      d='m20.493 14.743 1.558-1.451.058-.06c.599-.701.598-1.855 0-2.556a.73.73 0 0 0-.07-.07l-.547-.49a1.863 1.863 0 0 0-1.377-.612L16.444 9.5l-.45-.575c-.18-.23-.411-.416-.819-.416H12.93a5.992 5.992 0 0 0-4.877-2.52c-3.311-.004-5.996 2.684-5.995 6.005.001 3.32 2.686 6.013 5.995 6.017a5.978 5.978 0 0 0 5.056-2.774l.011-.017.015-.026h6.008l.065.002c.26.006.85.02 1.285-.453Zm-.149-3.4.513.458a.484.484 0 0 1-.003.31l-1.505 1.401H12.717a.937.937 0 0 0-.804.456l-.223.374a4.303 4.303 0 0 1-3.635 1.987 4.333 4.333 0 0 1-4.32-4.335A4.315 4.315 0 0 1 8.05 7.67a4.32 4.32 0 0 1 3.617 1.966l.105.21c.217.407.944.407.944.407s1.421-.032 2.186 0l.443.567c.177.227.449.36.736.36l4.03.005c.056 0 .108.024.144.067a.948.948 0 0 0 .088.09Zm-13.92 1.86a1.2 1.2 0 0 0 1.2-1.202 1.2 1.2 0 0 0-1.2-1.203A1.2 1.2 0 0 0 5.225 12a1.2 1.2 0 0 0 1.2 1.202Z'
+      clipRule='evenodd'
+    />
+  </svg>
+)

package/src/lib/icons/ArrowBack.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+export const ArrowBackIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='arrow-back_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(#arrow-back_svg__a)'>
+      <path
+        fill='#6E7179'
+        d='m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6L12 20Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/BatteryLevelCritical.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+export const BatteryLevelCriticalIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <rect
+      width={1.855}
+      height={6}
+      x={17.147}
+      y={9.5}
+      fill='#E36857'
+      rx={0.75}
+    />
+    <path
+      fill='#E36857'
+      fillRule='evenodd'
+      d='M19.52 6.269H5.5c-1.684 0-2.734 1.19-2.734 2.66v.804c-.765.23-1.352 1.02-1.352 1.962v1.558c0 .941.587 1.733 1.352 1.962v.764c0 1.473 1.044 2.748 2.734 2.748h14c1.646 0 2.736-.897 2.736-2.768V9c0-1.87-1.07-2.73-2.716-2.73Zm-14.793 2c.186-.207.484-.363.919-.363h13.627c.777 0 1.3.489 1.3 1.373v6.446c0 .884-.523 1.374-1.3 1.374H5.646c-.435 0-.733-.157-.92-.363-.183-.204-.322-.529-.322-1.01v-1.939H3.232c-.208 0-.251-.15-.251-.28v-2.02c0-.168.083-.267.25-.267h1.173V9.28c0-.482.139-.807.323-1.01Z'
+      clipRule='evenodd'
+    />
+  </svg>
+)

package/src/lib/icons/BatteryLevelFull.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react'
+export const BatteryLevelFullIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <rect width={13.06} height={6} x={5.941} y={9.5} fill='#27AE60' rx={0.75} />
+    <path
+      fill='#9DA1A9'
+      fillRule='evenodd'
+      d='M19.52 6.269H5.5c-1.684 0-2.734 1.19-2.734 2.66v.804c-.765.23-1.352 1.02-1.352 1.962v1.558c0 .941.587 1.733 1.352 1.962v.764c0 1.473 1.044 2.748 2.734 2.748h14c1.646 0 2.736-.897 2.736-2.768V9c0-1.87-1.07-2.73-2.716-2.73Zm-14.793 2c.186-.207.484-.363.919-.363h13.627c.777 0 1.3.489 1.3 1.373v6.446c0 .884-.523 1.374-1.3 1.374H5.646c-.435 0-.733-.157-.92-.363-.183-.204-.322-.529-.322-1.01v-1.939H3.232c-.208 0-.251-.15-.251-.28v-2.02c0-.168.083-.267.25-.267h1.173V9.28c0-.482.139-.807.323-1.01Z'
+      clipRule='evenodd'
+    />
+  </svg>
+)

package/src/lib/icons/BatteryLevelHigh.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+export const BatteryLevelHighIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <rect
+      width={10.303}
+      height={6}
+      x={8.699}
+      y={9.5}
+      fill='#27AE60'
+      rx={0.75}
+    />
+    <path
+      fill='#9DA1A9'
+      fillRule='evenodd'
+      d='M19.52 6.269H5.5c-1.684 0-2.734 1.19-2.734 2.66v.804c-.765.23-1.352 1.02-1.352 1.962v1.558c0 .941.587 1.733 1.352 1.962v.764c0 1.473 1.044 2.748 2.734 2.748h14c1.646 0 2.736-.897 2.736-2.768V9c0-1.87-1.07-2.73-2.716-2.73Zm-14.793 2c.186-.207.484-.363.919-.363h13.627c.777 0 1.3.489 1.3 1.373v6.446c0 .884-.523 1.374-1.3 1.374H5.646c-.435 0-.733-.157-.92-.363-.183-.204-.322-.529-.322-1.01v-1.939H3.232c-.208 0-.251-.15-.251-.28v-2.02c0-.168.083-.267.25-.267h1.173V9.28c0-.482.139-.807.323-1.01Z'
+      clipRule='evenodd'
+    />
+  </svg>
+)

package/src/lib/icons/BatteryLevelLow.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+export const BatteryLevelLowIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <rect
+      width={4.829}
+      height={6}
+      x={14.172}
+      y={9.5}
+      fill='#E36857'
+      rx={0.75}
+    />
+    <path
+      fill='#9DA1A9'
+      fillRule='evenodd'
+      d='M19.52 6.269H5.5c-1.684 0-2.734 1.19-2.734 2.66v.804c-.765.23-1.352 1.02-1.352 1.962v1.558c0 .941.587 1.733 1.352 1.962v.764c0 1.473 1.044 2.748 2.734 2.748h14c1.646 0 2.736-.897 2.736-2.768V9c0-1.87-1.07-2.73-2.716-2.73Zm-14.793 2c.186-.207.484-.363.919-.363h13.627c.777 0 1.3.489 1.3 1.373v6.446c0 .884-.523 1.374-1.3 1.374H5.646c-.435 0-.733-.157-.92-.363-.183-.204-.322-.529-.322-1.01v-1.939H3.232c-.208 0-.251-.15-.251-.28v-2.02c0-.168.083-.267.25-.267h1.173V9.28c0-.482.139-.807.323-1.01Z'
+      clipRule='evenodd'
+    />
+  </svg>
+)

package/src/lib/icons/BatteryLevelWired.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react'
+export const BatteryLevelWiredIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='battery-level-wired_svg__a'
+      width={24}
+      height={25}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 .5h24v24H0z' />
+    </mask>
+    <g mask='url(#battery-level-wired_svg__a)'>
+      <path
+        fill='#6E7179'
+        fillRule='evenodd'
+        d='M14.5 18.505a1 1 0 1 0 2 0V15.5h5a1 1 0 1 0 0-2h-5v-3h5a1 1 0 1 0 0-2h-5V5.444a1 1 0 1 0-2 0v.117h-3.576c-2.096 0-3.265 1.922-3.892 3.068-.226.413-.378.518-.548.518H2.51c-1.258 0-2.01.993-2.01 1.96v1.873c0 .968.725 2.196 2.01 2.196h3.996c.21 0 .287.154.405.393.04.082.085.172.142.27.645 1.118 1.817 2.55 3.871 2.55H14.5v.116Zm-3.089-2.065c-2.458 0-3.589-3.46-3.589-3.46H2.51v-1.873h5.312s1.131-3.57 3.59-3.57h3.052v8.903H11.41Z'
+        clipRule='evenodd'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/ChevronRight.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const ChevronRightIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={25}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='chevron-right_svg__a'
+      width={25}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M.333 0h24v24h-24z' />
+    </mask>
+    <g mask='url(#chevron-right_svg__a)'>
+      <path
+        fill='#9DA1A9'
+        d='m9.733 18-1.4-1.4 4.6-4.6-4.6-4.6 1.4-1.4 6 6-6 6Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/DotsEllipsisMore.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const DotsEllipsisMoreIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={18}
+    height={18}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='dots-ellipsis-more_svg__a'
+      width={18}
+      height={18}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#2196F3' d='M0 0h18v18H0z' />
+    </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'
+      />
+    </g>
+  </svg>
+)