@memori.ai/memori-react 8.45.2 → 8.45.4

package/esm/components/layouts/chat.css

@@ -1,5 +1,25 @@
 .memori-widget.memori-layout-chat {
-    height: 100vh !important;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    flex-direction: column;
+}
+
+/* Fill the known mount nodes. Do not size memori-client / :host: the page owns those. */
+#memori-root:has(.memori-layout-chat),
+.memori-root:has(.memori-layout-chat) {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+/* Same mount nodes when this stylesheet is injected into the web component shadow root. */
+:host:has(.memori-layout-chat) #memori-root,
+:host:has(.memori-layout-chat) .memori-root {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
 }
 
 .memori-widget.memori-layout-chat .memori--global-background.no-background-image {
@@ -9,10 +29,13 @@
 .memori-widget > .memori-spin.memori-chat-layout {
     display: flex;
     height: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
     flex-direction: column;
 }
 
 .memori-chat-layout--header {
+    flex: 0 0 auto;
     margin-bottom: 12px;
     text-align: right;
     transition: all 0.05s ease-in-out;
@@ -53,9 +76,10 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
+    min-height: 0;
     flex: 1;
     flex-direction: row;
-    align-items: center;
+    /* align-items: center; */
     justify-content: center;
     /* max-width: 1200px; */
     transition: all 0.05s ease-in-out;
@@ -75,8 +99,7 @@
     z-index: 5;
     overflow: hidden;
     min-width: 0;
-    height: 100%;
-    max-height: 100%;
+    min-height: 0;
     flex: 1;
     /* padding-bottom: 1.5rem; */
     transition: all 0.05s ease-in-out;

package/esm/styles.css

@@ -58,7 +58,6 @@
 @import url('./components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css');
 @import url('./components/ContentPreviewModal/ContentPreviewModal.css');
 
-
 @import url('./components/layouts/hidden-chat.css');
 @import url('./components/layouts/totem.css');
 @import url('./components/layouts/website-assistant.css');
@@ -123,4 +122,4 @@ body.sb-show-main #root,
     .mobile-hidden {
         display: none;
     }
-}
+}

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.45.2";
+export declare const version = "8.45.4";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '8.45.2';
+export const version = '8.45.4';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.45.2",
+  "version": "8.45.4",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -8,7 +8,6 @@
   "files": [
     "dist",
     "esm",
-    "src",
     "CHANGELOG.md",
     "LICENSE",
     "README.md"
@@ -43,11 +42,11 @@
     "clean": "rimraf dist esm",
     "copy-files:cjs": "copyfiles -u 1 src/**/*.css dist/",
     "copy-files:esm": "copyfiles -u 1 src/**/*.css esm/",
-    "cleanup-test:cjs": "find dist -name \\*.test.\\* -type f | xargs -n1 rm",
+    "cleanup-test:cjs": "find dist \\( -name \\*.test.\\* -o -name testUtils.\\* -o -name CopyButtonTest.\\* \\) -type f | xargs -n1 rm",
     "cleanup-stories:cjs": "find dist -name \\*.stories.\\* -type f | xargs -n1 rm",
-    "cleanup-test:esm": "find esm -name \\*.test.\\* -type f | xargs -n1 rm",
+    "cleanup-test:esm": "find esm \\( -name \\*.test.\\* -o -name testUtils.\\* -o -name CopyButtonTest.\\* \\) -type f | xargs -n1 rm",
     "cleanup-stories:esm": "find esm -name \\*.stories.\\* -type f | xargs -n1 rm",
-    "cleanup-mocks": "rimraf dist/mocks esm/mocks",
+    "cleanup-mocks": "rimraf dist/mocks esm/mocks dist/components/MemoriArtifactSystem/components/ArtifactActions/test esm/components/MemoriArtifactSystem/components/ArtifactActions/test",
     "cleanup": "yarn cleanup-test:cjs && yarn cleanup-stories:cjs && yarn cleanup-test:esm && yarn cleanup-stories:esm && yarn cleanup-mocks",
     "copy-files": "yarn copy-files:cjs && yarn copy-files:esm",
     "build:cjs": "tsc --module commonjs --outDir dist",
@@ -225,7 +224,7 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.29.7",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
@@ -269,7 +268,7 @@
     "is-ci": "3.0.1",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
-    "postcss": "8.4.19",
+    "postcss": "8.5.28",
     "prettier": "2.8.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",

package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const CopyButtonTest: React.FC;
-export default CopyButtonTest;

package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("../");
-const CopyButtonTest = () => {
-    const testArtifacts = [
-        {
-            content: `# Hello World
-
-This is a **markdown** document with some content.
-
-\`\`\`javascript
-function hello() {
-  console.log("Hello, World!");
-}
-\`\`\`
-
-- Item 1
-- Item 2
-- Item 3`,
-            mimeType: 'text/markdown',
-            title: 'Markdown Test',
-        },
-        {
-            content: `<!DOCTYPE html>
-<html>
-<head>
-  <title>Test HTML</title>
-</head>
-<body>
-  <h1>Hello World</h1>
-  <p>This is a test HTML document.</p>
-</body>
-</html>`,
-            mimeType: 'text/html',
-            title: 'HTML Test',
-        },
-        {
-            content: `function fibonacci(n) {
-  if (n <= 1) return n;
-  return fibonacci(n - 1) + fibonacci(n - 2);
-}`,
-            mimeType: 'application/vnd.ant.code.javascript',
-            title: 'JavaScript Code',
-        },
-        {
-            content: `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
-</svg>`,
-            mimeType: 'image/svg+xml',
-            title: 'SVG Test',
-        },
-    ];
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Copy Button Dropdown Test" }), testArtifacts.map((artifact, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { border: '1px solid #ccc', padding: '10px', borderRadius: '8px' }, children: [(0, jsx_runtime_1.jsxs)("h3", { children: [artifact.title, " (", artifact.mimeType, ")"] }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(__1.CopyButtonWithDropdown, { artifact: artifact, onCopy: () => console.log('Copy clicked'), onDownload: () => console.log('Download clicked'), onPrint: () => console.log('Print clicked') }) }), (0, jsx_runtime_1.jsxs)("pre", { style: {
-                            background: '#f5f5f5',
-                            padding: '10px',
-                            borderRadius: '4px',
-                            fontSize: '12px',
-                            maxHeight: '200px',
-                            overflow: 'auto'
-                        }, children: [artifact.content.substring(0, 200), "..."] })] }, index)))] }));
-};
-exports.default = CopyButtonTest;
-//# sourceMappingURL=CopyButtonTest.js.map

package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CopyButtonTest.js","sourceRoot":"","sources":["../../../../../../src/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.tsx"],"names":[],"mappings":";;;AAMA,2BAA6C;AAE7C,MAAM,cAAc,GAAa,GAAG,EAAE;IACpC,MAAM,aAAa,GAAG;QACpB;YACE,OAAO,EAAE;;;;;;;;;;;;SAYN;YACH,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,eAAe;SACvB;QACD;YACE,OAAO,EAAE;;;;;;;;;QASP;YACF,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,WAAW;SACnB;QACD;YACE,OAAO,EAAE;;;EAGb;YACI,QAAQ,EAAE,qCAAqC;YAC/C,KAAK,EAAE,iBAAiB;SACzB;QACD;YACE,OAAO,EAAE;;OAER;YACD,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,UAAU;SAClB;KACF,CAAC;IAEF,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACpF,uEAAkC,EAEjC,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,iCAAiB,KAAK,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,aACxF,2CAAK,QAAQ,CAAC,KAAK,QAAI,QAAQ,CAAC,QAAQ,SAAO,EAC/C,gCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAClC,uBAAC,0BAAsB,IACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAC3C,GACE,EACN,iCAAK,KAAK,EAAE;4BACV,UAAU,EAAE,SAAS;4BACrB,OAAO,EAAE,MAAM;4BACf,YAAY,EAAE,KAAK;4BACnB,QAAQ,EAAE,MAAM;4BAChB,SAAS,EAAE,OAAO;4BAClB,QAAQ,EAAE,MAAM;yBACjB,aACE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAC/B,KAnBE,KAAK,CAoBT,CACP,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,cAAc,CAAC"}

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const CopyButtonTest: React.FC;
-export default CopyButtonTest;

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CopyButtonWithDropdown } from '../';
-const CopyButtonTest = () => {
-    const testArtifacts = [
-        {
-            content: `# Hello World
-
-This is a **markdown** document with some content.
-
-\`\`\`javascript
-function hello() {
-  console.log("Hello, World!");
-}
-\`\`\`
-
-- Item 1
-- Item 2
-- Item 3`,
-            mimeType: 'text/markdown',
-            title: 'Markdown Test',
-        },
-        {
-            content: `<!DOCTYPE html>
-<html>
-<head>
-  <title>Test HTML</title>
-</head>
-<body>
-  <h1>Hello World</h1>
-  <p>This is a test HTML document.</p>
-</body>
-</html>`,
-            mimeType: 'text/html',
-            title: 'HTML Test',
-        },
-        {
-            content: `function fibonacci(n) {
-  if (n <= 1) return n;
-  return fibonacci(n - 1) + fibonacci(n - 2);
-}`,
-            mimeType: 'application/vnd.ant.code.javascript',
-            title: 'JavaScript Code',
-        },
-        {
-            content: `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
-</svg>`,
-            mimeType: 'image/svg+xml',
-            title: 'SVG Test',
-        },
-    ];
-    return (_jsxs("div", { style: { padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx("h2", { children: "Copy Button Dropdown Test" }), testArtifacts.map((artifact, index) => (_jsxs("div", { style: { border: '1px solid #ccc', padding: '10px', borderRadius: '8px' }, children: [_jsxs("h3", { children: [artifact.title, " (", artifact.mimeType, ")"] }), _jsx("div", { style: { marginBottom: '10px' }, children: _jsx(CopyButtonWithDropdown, { artifact: artifact, onCopy: () => console.log('Copy clicked'), onDownload: () => console.log('Download clicked'), onPrint: () => console.log('Print clicked') }) }), _jsxs("pre", { style: {
-                            background: '#f5f5f5',
-                            padding: '10px',
-                            borderRadius: '4px',
-                            fontSize: '12px',
-                            maxHeight: '200px',
-                            overflow: 'auto'
-                        }, children: [artifact.content.substring(0, 200), "..."] })] }, index)))] }));
-};
-export default CopyButtonTest;
-//# sourceMappingURL=CopyButtonTest.js.map

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CopyButtonTest.js","sourceRoot":"","sources":["../../../../../../src/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAE7C,MAAM,cAAc,GAAa,GAAG,EAAE;IACpC,MAAM,aAAa,GAAG;QACpB;YACE,OAAO,EAAE;;;;;;;;;;;;SAYN;YACH,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,eAAe;SACvB;QACD;YACE,OAAO,EAAE;;;;;;;;;QASP;YACF,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,WAAW;SACnB;QACD;YACE,OAAO,EAAE;;;EAGb;YACI,QAAQ,EAAE,qCAAqC;YAC/C,KAAK,EAAE,iBAAiB;SACzB;QACD;YACE,OAAO,EAAE;;OAER;YACD,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,UAAU;SAClB;KACF,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACpF,qDAAkC,EAEjC,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,eAAiB,KAAK,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,aACxF,yBAAK,QAAQ,CAAC,KAAK,QAAI,QAAQ,CAAC,QAAQ,SAAO,EAC/C,cAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAClC,KAAC,sBAAsB,IACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAC3C,GACE,EACN,eAAK,KAAK,EAAE;4BACV,UAAU,EAAE,SAAS;4BACrB,OAAO,EAAE,MAAM;4BACf,YAAY,EAAE,KAAK;4BACnB,QAAQ,EAAE,MAAM;4BAChB,SAAS,EAAE,OAAO;4BAClB,QAAQ,EAAE,MAAM;yBACjB,aACE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAC/B,KAnBE,KAAK,CAoBT,CACP,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/src/I18nWrapper.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { I18nextProvider } from 'react-i18next';
-import i18n from './i18n';
-
-export interface Props {
-  children: React.ReactNode;
-}
-
-const I18nWrapper = ({ children }: Props) => {
-  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
-};
-
-export default I18nWrapper;

package/src/__snapshots__/index.test.tsx.snap

@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders client 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with all the props 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with audio disabled 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with whiteListedDomains on allowed domains 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with whiteListedDomains on not allowed domains 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -1,95 +0,0 @@
-/* Above website assistant and other fixed UI (same max z-index so modal stacks on top by DOM order) */
-.age-verification-modal {
-    z-index: 2147483647;
-}
-
-.age-verification-modal,
-.age-verification-modal * {
-    box-sizing: border-box;
-}
-
-.age-verification-form {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-}
-/* 
-@media (min-width: 640px) {
-    .age-verification-form {
-        min-width: 600px;
-    }
-} */
-
-.age-verification-form fieldset {
-    padding-right: 0;
-    padding-left: 0;
-    border: 0;
-}
-
-.age-verification-form .form-item {
-    width: 100%;
-    text-align: center;
-}
-
-.age-verification-form .form-item.submit {
-    margin-top: 1.5rem;
-    text-align: center;
-}
-
-.age-verification-form .form-item input {
-    color: #000;
-}
-
-.age-verification-form .form-item-help {
-    padding-bottom: 0.25rem;
-    margin: 1.5rem 0 1rem;
-    opacity: 0.5;
-    text-align: left;
-}
-
-.age-verification-form .form-item-error {
-    padding-bottom: 0.25rem;
-    margin: 1.5rem 0 1rem;
-    color: var(--memori-error-color);
-}
-
-button.age-verification-submit {
-   position: relative;
-    overflow: hidden;
-    width: 100%;
-    min-width: 220px;
-    max-width: 220px;
-    min-height: 42px;
-    padding: 1rem 2rem;
-    border: none;
-    border-radius: 12px;
-    border-radius: 8px;
-    margin-top: 1rem;
-    background: var(--memori-primary);
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-button.age-verification-submit::before {
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    content: '';
-    transition: left 0.5s ease;
-}
-
-button.age-verification-submit:hover::before {
-    left: 100%;
-}
-
-
-button.age-verification-submit:active {
-    transform: translateY(0);
-}

package/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import AgeVerificationModal, { Props } from './AgeVerificationModal';
-
-import './AgeVerificationModal.css';
-
-const meta: Meta = {
-  title: 'AgeVerificationModal',
-  component: AgeVerificationModal,
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <AgeVerificationModal {...args} />
-  </I18nWrapper>
-);
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  visible: true,
-  onClose: console.log,
-  minAge: 0,
-};
-
-export const Min14yo = Template.bind({});
-Min14yo.args = {
-  visible: true,
-  onClose: console.log,
-  minAge: 14,
-};
-
-export const Min18yo = Template.bind({});
-Min18yo.args = {
-  visible: true,
-  onClose: console.log,
-  minAge: 18,
-};

package/src/components/AgeVerificationModal/AgeVerificationModal.test.tsx

@@ -1,33 +0,0 @@
-import { render } from '@testing-library/react';
-import AgeVerificationModal from './AgeVerificationModal';
-
-beforeEach(() => {
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-});
-
-it('renders AgeVerificationModal unchanged', () => {
-  const { container } = render(
-    <AgeVerificationModal onClose={jest.fn()} minAge={0} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders AgeVerificationModal visible unchanged', () => {
-  const { container } = render(
-    <AgeVerificationModal visible onClose={jest.fn()} minAge={14} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders AgeVerificationModal with minAge unchanged', () => {
-  const { container } = render(
-    <AgeVerificationModal visible onClose={jest.fn()} minAge={18} />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -1,99 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import toast from 'react-hot-toast';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
-import { DateTime } from 'luxon';
-import DateSelector from '../DateSelector/DateSelector';
-import { useCallback, useState } from 'react';
-
-export interface Props {
-  visible?: boolean;
-  onClose: (birthDate?: string) => void;
-  minAge: number;
-}
-
-const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
-  const { t } = useTranslation();
-
-  const [birthDate, setBirthDate] = useState<DateTime>();
-  const [error, setError] = useState<string>();
-  const [submitting, setSubmitting] = useState<boolean>(false);
-
-  const onSubmit = useCallback(() => {
-    setSubmitting(true);
-
-    if (!birthDate) {
-      toast.error(t('requiredField'));
-      setError(t('requiredField') || 'Required field');
-      setSubmitting(false);
-      return;
-    }
-
-    let age = DateTime.now().diff(birthDate, 'years').years;
-    if (age < minAge) {
-      toast.error(t('underageTwinSession', { age: minAge }));
-      setError(
-        t('underageTwinSession', { age: minAge }) ||
-          `You must be at least ${minAge} years old to interact with this Agent`
-      );
-      setSubmitting(false);
-      return;
-    }
-
-    onClose(birthDate.toJSDate().toISOString());
-  }, [birthDate, minAge, onClose, t]);
-
-  const handleDateChange = useCallback((date: DateTime | undefined) => {
-    setBirthDate(date);
-  }, []);
-
-  return (
-    <Modal
-      open={visible}
-      width="600px"
-      widthMd="600px"
-      title={t('ageVerification')}
-      className="age-verification-modal"
-      closable
-      onClose={() => onClose()}
-    >
-      <p>{t('ageVerificationText', { minAge })}</p>
-
-      <form
-        className="age-verification-form"
-        onSubmit={e => {
-          e.preventDefault();
-          onSubmit();
-        }}
-      >
-        <div className="form-item">
-          <fieldset name="birthDate">
-            <legend className="sr-only">{t('birthDate')}</legend>
-
-            <DateSelector
-              minAge={minAge}
-              onChange={handleDateChange}
-            />
-
-            <p className="form-item-help">{t('birthDateHelper')}</p>
-
-            {error && <p className="form-item-error">{error}</p>}
-          </fieldset>
-        </div>
-        <div className="form-item form-submit">
-          <Button
-            primary
-            htmlType="submit"
-            className="age-verification-submit"
-            loading={submitting}
-            disabled={!birthDate}
-          >
-            {t('confirm')}
-          </Button>
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-export default AgeVerificationModal;