@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/layouts/layouts.stories.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, tenant, integration } from '../../mocks/data';
-import { LayoutProps, Props } from '../MemoriWidget/MemoriWidget';
-import Memori from '../../index';
+import Memori, { Props } from '../../index';
 import I18nWrapper from '../../I18nWrapper';
-import Spin from '../ui/Spin';
 import { VisemeProvider } from '../../context/visemeContext';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
-
 const meta: Meta = {
   title: 'General/Layouts',
-  component: (args: Props) => <Memori {...args}    />,
+  component: (args: Props) => <Memori {...args} />,
   argTypes: {},
   parameters: {
     controls: { expanded: true },
@@ -21,7 +18,6 @@ const meta: Meta = {
 
 export default meta;
 
-
 const Template: Story<Props> = args => (
   <I18nWrapper>
     <ArtifactProvider>
@@ -55,15 +51,11 @@ DefaultLayout.args = {
   showMessageConsumption: true,
 };
 
-
-
 export const Default = Template.bind({});
 Default.args = {
   ...DefaultLayout.args,
 };
 
-
-
 export const Totem = Template.bind({});
 Totem.args = {
   ...DefaultLayout.args,
@@ -90,130 +82,6 @@ ChatOnly.args = {
   layout: 'CHAT',
 };
 
-const CustomLayout: React.FC<LayoutProps> = ({
-  Header,
-  headerProps,
-  Avatar,
-  avatarProps,
-  Chat,
-  chatProps,
-  StartPanel,
-  startPanelProps,
-  integrationStyle,
-  integrationBackground,
-  sessionId,
-  hasUserActivatedSpeak,
-  loading = false,
-  poweredBy,
-}) => (
-  <>
-    {integrationStyle}
-    {integrationBackground}
-
-    <Spin spinning={loading} className="memori-mycustom-layout">
-      {poweredBy}
-
-      <div className="memori-mycustom-layout--controls">
-        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-          <Chat {...chatProps} />
-        ) : startPanelProps ? (
-          <StartPanel {...startPanelProps} />
-        ) : null}
-      </div>
-    </Spin>
-  </>
-);
-
-export const Custom = Template.bind({});
-Custom.args = {
-  ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  memori: memori,
-  tenant,
-  layout: 'FULLPAGE',
-  customLayout: CustomLayout,
-};
-
-export const WebsiteAssistant2 = Template.bind({});
-WebsiteAssistant2.args = {
-  memoriName: 'Marconi Express',
-  ownerUserName: 'exmita',
-  memoriID: '1755979f-28f1-45d1-8f41-bb34e1f7756b',
-  ownerUserID: '3194fcd3-040b-4d5e-a925-691911fb1177',
-  tenantID: 'exmachina.aclambda.online',
-  engineURL: 'https://engine.memori.ai',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://exmachina.aclambda.online',
-  uiLang: 'IT',
-  avatar3dHidden: true,
-  spokenLang: 'IT',
-  layout: 'WEBSITE_ASSISTANT',
-};
-
-export const WebsiteAssistant3 = Template.bind({});
-WebsiteAssistant3.args = {
-  memoriName: "Layout Storybook",
-  ownerUserName: "Andrea-Patini",
-  memoriID: "ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e",
-  ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
-  tenantID: "aisuru-staging.aclambda.online",
-  engineURL: "https://engine-staging.memori.ai/memori/v2",
-  apiURL: "https://backend-staging.memori.ai/api/v2",
-  baseURL: "http://localhost:3000",
-  layout: "WEBSITE_ASSISTANT",
-  avatar3dHidden: true,
-  uiLang: "IT",
-  spokenLang: "IT",
-  showOnlyLastMessages: true,
-  integrationID: "716f4728-919c-4015-aae1-88998a081c6f",
-};
-
-
-export const WebsiteAssistant = Template.bind({});
-WebsiteAssistant.args = {
-  uiLang: 'EN',
-  showShare: false,
-  showSettings: true,
-  memori: memori,
-  tenant,
-  layout: 'WEBSITE_ASSISTANT',
-  memoriName: 'Memori',
-  memoriID: '25ced51c-3520-41af-8bbe-222d861b8e32',
-  ownerUserName: 'memoridev',
-  tenantID: 'www.aisuru.com',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://www.aisuru.com',
-  spokenLang: 'EN',
-  context: {
-    SOURCE: 'WEBSITE',
-    PATH: '/en/',
-  },
-  multilingual: true,
-  integrationID: 'cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1',
-  integration: {
-    ...integration,
-    customData: JSON.stringify({
-      textColor: '#2a2a2a',
-      buttonBgColor: '#653165',
-      buttonTextColor: '#ffffff',
-      blurBackground: true,
-      innerBgColor: 'light',
-      innerBgAlpha: 0.8,
-      multilanguage: true,
-      avatar: 'readyplayerme',
-      avatarURL: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-    }),
-  },
-};
-
-export const WebsiteAssistantWithout3DAvatar = Template.bind({});
-WebsiteAssistantWithout3DAvatar.args = {
-  ...WebsiteAssistant.args,
-  avatar3dHidden: true,
-};
-
 export const HiddenChat = Template.bind({});
 HiddenChat.args = {
   ...DefaultLayout.args,
@@ -228,17 +96,17 @@ HiddenChat.args = {
 export const ZoomedFullBody = Template.bind({});
 ZoomedFullBody.args = {
   ...DefaultLayout.args,
-  memoriName: "Layout Storybook",
-  ownerUserName: "Andrea-Patini",
-  memoriID: "ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e",
-  ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
-  tenantID: "aisuru-staging.aclambda.online",
-  engineURL: "https://engine-staging.memori.ai/memori/v2",
-  apiURL: "https://backend-staging.memori.ai/api/v2",
-  baseURL: "http://localhost:3000",
-  layout: "FULLPAGE",
-  uiLang: "IT",
-  spokenLang: "IT",
-  integrationID: "32922e14-24d6-4f5f-a06b-d963da14a658",
+  memoriName: 'Layout Storybook',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'http://localhost:3000',
+  layout: 'FULLPAGE',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  integrationID: '32922e14-24d6-4f5f-a06b-d963da14a658',
   showSettings: true
 };

package/src/components/layouts/totem.css

@@ -6,7 +6,7 @@
     background: linear-gradient(#333, #eee);
 }
 
-.memori-widget>.memori-spin.memori-totem-layout {
+.memori-widget > .memori-spin.memori-totem-layout {
     display: flex;
     height: 100%;
     flex-direction: column;
@@ -54,6 +54,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    backdrop-filter: blur(18px);
+    background: color-mix(in oklch, var(--memori-main-background) 68%, transparent);
     text-align: center;
 }
 
@@ -67,14 +69,14 @@
 .memori-totem-layout .memori-header .memori-header--button--position,
 .memori-totem-layout .memori-header .memori-header--button-login,
 .memori-totem-layout .memori-header .memori-share-button,
-.memori-totem-layout .memori-header .memori-header--button+.memori-header--button {
-    margin-top: 0.25rem;
+.memori-totem-layout .memori-header .memori-header--button + .memori-header--button {
+    margin-top: var(--memori-spacing-xs);
     margin-right: 0;
     margin-left: 0;
 }
 
 .memori-totem-layout .memori-header .memori-header--button--position {
-    margin-bottom: 0.25rem;
+    margin-bottom: var(--memori-spacing-xs);
 }
 
 .memori-totem-layout .memori-header--position .memori-header--position-placeName {
@@ -90,16 +92,18 @@
     background: none;
 }
 
-.memori-totem-layout .memori--powered-by {
-    top: 0;
-    bottom: auto;
+.memori-widget.memori-layout-totem .memori-totem-layout > .memori--powered-by {
+    top: auto;
+    right: auto;
+    bottom: 1rem;
+    left: 1rem;
 }
 
 /* .memori-totem-layout--avatar .memori--avatar-wrapper>div {
     overflow: visible !important; */
-    /* width: 100% !important;
+/* width: 100% !important;
     height: 100% !important; */
-    /* width: auto !important;
+/* width: auto !important;
     height: 90vh !important;
     max-height: 90vh;
     border-radius: 0;
@@ -122,7 +126,8 @@
 .memori-totem-layout--controls .memori-chat--history,
 .memori-totem-layout--controls .memori-chat--content {
     z-index: 100;
-    background: transparent;
+    backdrop-filter: blur(18px);
+    background: color-mix(in oklch, var(--memori-main-background) 68%, transparent);
 }
 
 .memori-totem-layout--controls .memori-chat--history .memori-chat--content {
@@ -142,7 +147,6 @@
 }
 
 @media (max-width: 870px) {
-
     .memori-totem-layout--controls .memori--start-panel,
     .memori-totem-layout--controls .memori-chat--wrapper {
         width: 100%;
@@ -187,8 +191,12 @@
     }
 }
 
-.memori-widget.memori-layout-totem.memori--hide-emissions .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user),
-.memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
+.memori-widget.memori-layout-totem.memori--hide-emissions
+    .memori-totem-layout--controls
+    .memori-chat--bubble-container:not(.memori-chat--bubble-from-user),
+.memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey
+    .memori-totem-layout--controls
+    .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
     display: none;
 }
 
@@ -196,7 +204,7 @@
     z-index: 2;
 }
 
-.memori-totem-layout--avatar .memori--avatar-wrapper>div canvas+div {
+.memori-totem-layout--avatar .memori--avatar-wrapper > div canvas + div {
     position: absolute !important;
     width: 100%;
     height: 100%;
@@ -218,4 +226,4 @@
 
 .memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
     background: none;
-}
+}

package/src/components/layouts/zoomed-full-body.css

@@ -1,5 +1,3 @@
-
-
 .memori--powered-by-custom {
     position: absolute;
     z-index: 1000;
@@ -9,10 +7,150 @@
     flex-wrap: wrap;
 }
 
-.memori--grid-column--zoomed-full-body {
-    max-height: calc(100% - 130px) !important;
+.memori-widget.memori-layout-zoomed_full_body > .memori-spin {
+    display: flex;
+    height: calc(100vh - 50px);
+    height: calc(100dvh - 50px);
+    min-height: 0;
+    flex-direction: column;
+    gap: 0;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--controls {
+    padding: var(--memori-spacing-md);
+}
+
+.memori-widget.memori-layout-zoomed_full_body {
+    max-width: var(--memori-layout-max-width);
+    margin: 0 auto;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header {
+    position: relative;
+    z-index: 6;
+    width: 100%;
+    flex-shrink: 0;
+    padding: 0 var(--memori-spacing-md);
+    padding-bottom: 0;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-layout--header {
+    min-width: 100%;
+    flex-shrink: 0;
+    padding: var(--memori-spacing-sm) 0;
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 14%, transparent);
+    background: transparent;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row {
+    display: flex;
+    width: 100%;
+    min-height: 48px;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--memori-spacing-md);
 }
 
-.memori.memori-widget.memori-layout-zoomed_full_body .memori--grid {
-    height: calc(100% - 25px);
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand {
+    display: inline-flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.625rem;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-icon {
+    display: block;
+    width: 30px;
+    height: 30px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: linear-gradient(145deg, #6d28d9 0%, #534ab7 52%, #4338ca 100%);
+    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.35);
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-icon--avatar {
+    flex-shrink: 0;
+    border: 0;
+    background: none;
+    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.2);
+    object-fit: cover;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-name {
+    display: block;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
+    color: var(--memori-text-color, #1f2937);
+    font-size: 1.35rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-actions {
+    display: flex;
+    min-width: 0;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
+    min-width: 0;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-header--fullpage-primary,
+.memori-widget.memori-layout-zoomed_full_body .memori-header--fullpage-secondary {
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+}
+
+.memori-widget.memori-layout-zoomed_full_body .memori-header--fullpage-divider {
+    min-height: 26px;
+    margin: 0;
+}
+
+@media (max-width: 870px) {
+    .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header {
+        padding: 0 var(--memori-spacing-sm);
+        padding-bottom: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-top-header {
+        padding: 0 var(--memori-spacing-xs);
+        padding-bottom: 0;
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand-name {
+        font-size: 1.1rem;
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-row {
+        /* flex-wrap: wrap; */
+        align-items: flex-start;
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-brand {
+        min-width: 0;
+        max-width: calc(100% - 6.5rem);
+        flex: 1 1 auto;
+    }
+
+    .memori-widget.memori-layout-zoomed_full_body .memori-fullpage-header-actions {
+        flex: 0 0 auto;
+        justify-content: flex-end;
+    }
 }

package/src/helpers/chatPdfExport.ts

@@ -36,6 +36,9 @@ export const generateChatPDFCSS = (options: ChatPDFOptions = {}): string => {
   } = options;
 
   const baseStyles = `
+    :root {
+      --memori-text-color: ${color};
+    }
     @page {
       margin: 1in;
       size: A4;
@@ -82,7 +85,7 @@ export const generateChatPDFCSS = (options: ChatPDFOptions = {}): string => {
         font-size: 0.9em;
         background-color: #f5f5f5;
         border: 1px solid #ddd;
-        border-radius: 3px;
+        border-radius: .5rem;
         padding: 0.2em 0.4em;
         page-break-inside: avoid;
       }
@@ -137,7 +140,7 @@ export const generateChatPDFCSS = (options: ChatPDFOptions = {}): string => {
       }
 
       a {
-        color: #0066cc;
+        color: var(--memori-text-color);
         text-decoration: none;
       }
 
@@ -206,7 +209,7 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
 
     .chat-export-date {
       margin-top: 0.5em;
-      color: #6b7280;
+      color: var(--memori-text-color);
       font-size: 0.9em;
     }
 
@@ -222,7 +225,7 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
       max-width: 75%;
       flex-direction: column;
       padding: 10px 16px;
-      border-radius: 12px;
+      border-radius: .5rem;
       margin-bottom: 5px;
       box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
       font-size: 0.9em;
@@ -232,20 +235,20 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
     }
 
     .chat-bubble-assistant {
-      border-radius: 12px 12px 12px 0;
+      border-radius: .5rem .5rem .5rem 0;
       margin-left: 0;
       margin-right: auto;
       background: #ffffff;
-      color: #141515;
+      color: var(--memori-text-color);
       border: 1px solid #e5e7eb;
     }
 
     .chat-bubble-user {
-      border-radius: 12px 12px 0 12px;
+      border-radius: .5rem .5rem 0 .5rem;
       margin-left: auto;
       margin-right: 0;
       background: rgb(var(--memori-primary-rgb));
-      color: #ffffff;
+      color: var(--memori-text-color);
     }
 
     .chat-bubble-content {
@@ -272,7 +275,7 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
     }
 
     .chat-bubble-user .chat-bubble-content a {
-      color: #ffffff;
+      color: var(--memori-text-color);
       text-decoration: underline;
     }
 
@@ -305,7 +308,7 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
     .chat-bubble-content code {
       background-color: rgba(0, 0, 0, 0.1);
       padding: 0.2em 0.4em;
-      border-radius: 3px;
+      border-radius: .5rem;
       font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
       font-size: 0.9em;
     }
@@ -317,7 +320,7 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
     .chat-bubble-content pre {
       background-color: rgba(0, 0, 0, 0.05);
       padding: 1em;
-      border-radius: 5px;
+      border-radius: .5rem;
       overflow-x: auto;
       margin: 0.5em 0;
       border: 1px solid rgba(0, 0, 0, 0.1);
@@ -374,7 +377,7 @@ const generateChatBubbleStyles = (primaryColorRgb?: string): string => {
     .chat-bubble-content img {
       max-width: 100%;
       height: auto;
-      border-radius: 5px;
+      border-radius: .5rem;
       margin: 0.5em 0;
     }
 

package/src/helpers/constants.ts

@@ -1,31 +1,32 @@
+/** Display names in English (used in language picker; filter matches these strings). */
 export const chatLanguages = [
-  { value: 'AR', label: 'العربية' },           // Arabic
-  { value: 'BG', label: 'български' },         // Bulgarian
-  { value: 'CS', label: 'Čeština / český jazyk' }, // Czech
-  { value: 'DA', label: 'Dansk' },             // Danish
-  { value: 'DE', label: 'Deutsch' },           // German
-  { value: 'EL', label: 'Ελληνικά' },          // Greek
-  { value: 'EN', label: 'English' },           // English
-  { value: 'ES', label: 'Español' },           // Spanish
-  { value: 'ET', label: 'Eesti keel' },        // Estonian
-  { value: 'FI', label: 'Suomi' },             // Finnish
-  { value: 'FR', label: 'Français' },          // French
-  { value: 'HR', label: 'Hrvatski' },          // Croatian
-  { value: 'HU', label: 'Magyar' },            // Hungarian
-  { value: 'IT', label: 'Italiano' },          // Italian
-  { value: 'JA', label: '日本語' },             // Japanese
-  { value: 'LT', label: 'Lietuvių kalba' },    // Lithuanian
-  { value: 'LV', label: 'Latvian' },           // Latvian / Lettonian
-  { value: 'NL', label: 'Nederlands' },        // Dutch
-  { value: 'PL', label: 'Polski' },            // Polish
-  { value: 'PT', label: 'Português' },         // Portuguese
-  { value: 'RO', label: 'Română' },            // Romanian
-  { value: 'RU', label: 'Русский' },           // Russian
-  { value: 'SK', label: 'Slovenčina' },        // Slovak
-  { value: 'SL', label: 'Slovenščina' },       // Slovenian
-  { value: 'SV', label: 'Svenska' },           // Swedish
-  { value: 'UK', label: 'Українська' },        // Ukrainian
-  { value: 'ZH', label: '中文' },              // Chinese
+  { value: 'AR', label: 'Arabic' },
+  { value: 'BG', label: 'Bulgarian' },
+  { value: 'CS', label: 'Czech' },
+  { value: 'DA', label: 'Danish' },
+  { value: 'DE', label: 'German' },
+  { value: 'EL', label: 'Greek' },
+  { value: 'EN', label: 'English' },
+  { value: 'ES', label: 'Spanish' },
+  { value: 'ET', label: 'Estonian' },
+  { value: 'FI', label: 'Finnish' },
+  { value: 'FR', label: 'French' },
+  { value: 'HR', label: 'Croatian' },
+  { value: 'HU', label: 'Hungarian' },
+  { value: 'IT', label: 'Italian' },
+  { value: 'JA', label: 'Japanese' },
+  { value: 'LT', label: 'Lithuanian' },
+  { value: 'LV', label: 'Latvian' },
+  { value: 'NL', label: 'Dutch' },
+  { value: 'PL', label: 'Polish' },
+  { value: 'PT', label: 'Portuguese' },
+  { value: 'RO', label: 'Romanian' },
+  { value: 'RU', label: 'Russian' },
+  { value: 'SK', label: 'Slovak' },
+  { value: 'SL', label: 'Slovenian' },
+  { value: 'SV', label: 'Swedish' },
+  { value: 'UK', label: 'Ukrainian' },
+  { value: 'ZH', label: 'Chinese' },
 ];
 
 export const popularLanguageCodes = ['IT', 'EN'];

package/src/helpers/utils.ts

@@ -479,3 +479,5 @@ export const safeParseJSON = (jsonString: string, fallbackString = false) => {
     return fallbackString ? jsonString : null;
   }
 };
+
+export const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];

package/src/i18n.ts

@@ -1,4 +1,5 @@
 import { createInstance } from 'i18next';
+import { addMemoriTableToI18n } from '@memori.ai/ui';
 import it from './locales/it.json';
 import en from './locales/en.json';
 import fr from './locales/fr.json';
@@ -35,5 +36,6 @@ const i18n = createInstance({
 });
 
 i18n.init();
+addMemoriTableToI18n(i18n);
 
 export default i18n;

package/src/icons/FacebookIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+const FacebookIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17.3 9.6a1 1 0 1 0-1.6-1.2l-2.308 3.078-2.185-2.185A1 1 0 0 0 9.7 9.4l-3 4a1 1 0 0 0 1.6 1.2l2.308-3.078 2.185 2.185A1 1 0 0 0 14.3 13.6l3-4Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 23c-1.224 0-1.9-.131-3-.5l-2.106 1.053A2 2 0 0 1 4 21.763V19.5c-2.153-2.008-3-4.323-3-7.5C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm-6-4.37-.636-.593C3.691 16.477 3 14.733 3 12a9 9 0 1 1 9 9c-.986 0-1.448-.089-2.364-.396l-.788-.264L6 21.764V18.63Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default FacebookIcon