@memori.ai/memori-react 9.0.0-alpha.21 → 9.0.0-alpha.22

package/src/components/layouts/totem.css

@@ -180,6 +180,11 @@
    internal scroll instead of pushing the scene up. */
 .memori-totem-layout--controls {
     z-index: 100;
+    display: flex;
+    width: 100%;
+    min-height: 0;
+    max-height: 48vh;
+    flex-direction: column;
     flex-shrink: 0;
 }
 
@@ -187,6 +192,8 @@
    SECTION 2–3 — Single unified panel + shared alignment axis
    One container (surface + 1px border + 12px radius). Inner sections have
    NO border/shadow/width of their own, only 1px dividers between them.
+   A definite height (not just max-height) is required so nested overflow-y
+   auto actually scrolls instead of clipping.
    ========================================================================== */
 .memori-totem-layout--controls .memori-chat--wrapper,
 .memori-totem-layout--controls .memori--start-panel {
@@ -194,8 +201,11 @@
     overflow: hidden;
     width: 100%;
     max-width: var(--memori-totem-max-width, 600px);
+    height: 48vh;
+    min-height: 0;
     max-height: 48vh;
     box-sizing: border-box;
+    flex: 1 1 auto;
     flex-direction: column;
     padding: 0;
     border: 1px solid var(--memori-border-color);
@@ -206,34 +216,53 @@
 
 /* Nested conversation column must not add its own axis/padding/surface. */
 .memori-totem-layout--controls .memori-conversation-column {
+    display: flex;
+    overflow: hidden;
     width: 100%;
     max-width: none;
     height: auto;
     min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
     padding: 0;
     margin: 0;
 }
 
-/* Messages section: height follows content (no empty band), scrolls when capped. */
-.memori-totem-layout--controls .memori-chat--history {
-    height: auto;
+/* Messages section: remaining panel height; children must not size to content. */
+.memori-totem-layout--controls .memori-chat--history,
+.memori-totem-layout--controls .memori-chat--history.memori-chat--history-touch {
+    display: flex;
+    overflow: hidden;
+    height: auto !important;
     min-height: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
+    flex-direction: column;
     border: none;
     border-radius: 0;
     margin: 0;
     background: transparent;
 }
 
-.memori-totem-layout--controls .memori-chat--content {
-    height: auto;
+.memori-totem-layout--controls .memori-chat--content,
+.memori-totem-layout--controls .memori-chat--content.memori-chat--content-touch {
+    height: 0;
+    min-height: 0;
     max-height: none;
+    flex: 1 1 auto;
     padding: var(--memori-spacing-md);
     background: transparent;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.memori-totem-layout--controls .memori-chat--content > * {
+    flex-shrink: 0;
 }
 
 /* Input section: 1px divider above, no own surface. */
 .memori-totem-layout--controls .memori-chat-inputs-wrapper {
+    flex-shrink: 0;
     padding: var(--memori-spacing-md);
     border-top: 1px solid var(--memori-border-color);
     background: transparent;
@@ -244,10 +273,15 @@
     border-radius: 8px;
 }
 
+.memori-totem-layout--controls .memori-chat--bubble,
+.memori-totem-layout--controls .memori-chat--bubble.memori-chat--user-bubble {
+    font-size: 1.125rem;
+}
+
 /* Start-panel body scrolls internally instead of stretching the panel. */
 .memori-totem-layout--controls .memori--start-panel__body {
     min-height: 0;
-    flex: 1 1 auto;
+    flex: 1 1 0%;
     overflow-y: auto;
 }
 
@@ -259,11 +293,11 @@
 }
 
 @media (max-width: 480px) {
-    .memori-totem-layou .memori-send-on-enter-menu {
+    .memori-totem-layout .memori-send-on-enter-menu {
         display: none;
     }
 
-    .memori-totem-layou .memori-header--button-settings {
+    .memori-totem-layout .memori-header--button-settings {
         display: none;
     }
 }

package/src/helpers/positionPopover.test.ts

@@ -1,4 +1,21 @@
-import { shouldRestartSessionOnPositionPopoverClose } from './positionPopover';
+import {
+  shouldHoldAutoStartForPosition,
+  shouldRestartSessionOnPositionPopoverClose,
+} from './positionPopover';
+
+describe('shouldHoldAutoStartForPosition', () => {
+  it('holds auto-start when position is required and none is stored', () => {
+    expect(shouldHoldAutoStartForPosition(true, false)).toBe(true);
+  });
+
+  it('does not hold when a position (or skip) is already stored', () => {
+    expect(shouldHoldAutoStartForPosition(true, true)).toBe(false);
+  });
+
+  it('does not hold when the agent does not require a position', () => {
+    expect(shouldHoldAutoStartForPosition(false, false)).toBe(false);
+  });
+});
 
 describe('shouldRestartSessionOnPositionPopoverClose', () => {
   it('restarts only when closing an open popover with autoStart and no session', () => {
@@ -36,4 +53,22 @@ describe('shouldRestartSessionOnPositionPopoverClose', () => {
       false
     );
   });
+
+  it('does not restart when closing without a stored position', () => {
+    expect(
+      shouldRestartSessionOnPositionPopoverClose(
+        true,
+        false,
+        true,
+        false,
+        false
+      )
+    ).toBe(false);
+  });
+
+  it('restarts when closing after a position was stored', () => {
+    expect(
+      shouldRestartSessionOnPositionPopoverClose(true, false, true, false, true)
+    ).toBe(true);
+  });
 });

package/src/helpers/positionPopover.ts

@@ -1,16 +1,33 @@
+/**
+ * Auto-start must wait on the start panel when the agent requires a location
+ * and none has been stored yet (share or skip). The start panel is the place
+ * to collect that preference; do not open the header popover instead.
+ */
+export function shouldHoldAutoStartForPosition(
+  needsPosition: boolean,
+  hasPosition: boolean
+): boolean {
+  return !!needsPosition && !hasPosition;
+}
+
 /**
  * Whether closing the position popover should re-run autoStart (`onClickStart`).
  * Only true on a real open → closed transition when a session has not started yet
- * (e.g. autostart blocked waiting for position). Closing during an active session
- * must not wipe chat history.
+ * and a position (or skip) is already stored. Closing during an active session
+ * must not wipe chat history. Closing without a position leaves the start panel.
  */
 export function shouldRestartSessionOnPositionPopoverClose(
   wasOpen: boolean,
   nextOpen: boolean,
   autoStart: boolean,
-  sessionAlreadyStarted = false
+  sessionAlreadyStarted = false,
+  hasPosition = true
 ): boolean {
   return (
-    wasOpen && !nextOpen && !!autoStart && !sessionAlreadyStarted
+    wasOpen &&
+    !nextOpen &&
+    !!autoStart &&
+    !sessionAlreadyStarted &&
+    hasPosition
   );
 }

package/src/i18n.knownFacts.test.ts

@@ -0,0 +1,40 @@
+import i18n from './i18n';
+
+describe('known facts bulk delete translations', () => {
+  afterEach(async () => {
+    await i18n.changeLanguage('en');
+  });
+
+  it('keeps the selected-rows count in the same language as the confirm message', async () => {
+    await i18n.changeLanguage('it');
+
+    const selectedRows = i18n.t('knownFacts.selectedRows', { count: 10 });
+    const confirm = i18n.t('knownFacts.deleteSelectedConfirmMessage');
+    const message = `${selectedRows}. ${confirm}`;
+
+    expect(selectedRows).toBe('10 righe selezionate');
+    expect(message).not.toMatch(/rows selected/i);
+    expect(message).toBe(
+      '10 righe selezionate. Confermi di voler eliminare i fatti noti selezionati?'
+    );
+  });
+
+  it.each([
+    ['en', 1, '1 row selected'],
+    ['en', 10, '10 rows selected'],
+    ['it', 1, '1 riga selezionata'],
+    ['it', 10, '10 righe selezionate'],
+    ['fr', 1, '1 ligne sélectionnée'],
+    ['fr', 10, '10 lignes sélectionnées'],
+    ['de', 1, '1 Zeile ausgewählt'],
+    ['de', 10, '10 Zeilen ausgewählt'],
+    ['es', 1, '1 fila seleccionada'],
+    ['es', 10, '10 filas seleccionadas'],
+  ] as const)(
+    'translates %s selectedRows for count %i',
+    async (lng, count, expected) => {
+      await i18n.changeLanguage(lng);
+      expect(i18n.t('knownFacts.selectedRows', { count })).toBe(expected);
+    }
+  );
+});

package/src/icons/MemoriIcon.tsx

@@ -12,7 +12,7 @@ const MemoriIcon = (props: React.SVGProps<SVGSVGElement>) => (
     <defs>
       <style>
         {
-          "\n      .cls-1 {\n        fill: url(#Sfumatura_senza_nome_6);\n      }\n\n      .cls-1,\n      .cls-2 {\n        stroke-width: 0px;\n      }\n\n      .cls-2 {\n        fill: var(--memori-logo-text-color, '#744c99');\n      }\n    "
+          "\n      .cls-1 {\n        fill: url(#Sfumatura_senza_nome_6);\n      }\n\n      .cls-1,\n      .cls-2 {\n        stroke-width: 0px;\n      }\n\n      .cls-2 {\n        fill: var(--memori-text-color, '#744c99');\n      }\n    "
         }
       </style>
       <linearGradient

package/src/index.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import Memori, { Props } from './index';
 
 const meta: Meta = {
-  title: 'General/Functionalities',
+  title: 'Live/Functionalities',
   component: Memori,
   argTypes: {
     AZURE_COGNITIVE_SERVICES_TTS_KEY: {
@@ -88,21 +88,6 @@ WithChatHistory.args = {
   showChatHistory: true,
 };
 
-export const WithUploadNoTotalPayloadLimit = Template.bind({});
-WithUploadNoTotalPayloadLimit.args = {
-  ownerUserName: 'nzambello',
-  memoriName: 'Nicola',
-  tenantID: 'www.aisuru.com',
-  engineURL: 'https://engine.memori.ai',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://www.aisuru.com',
-  layout: 'FULLPAGE',
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  enableAudio: true,
-  showUpload: true,
-};
-
 export const WithMaxTextareaCharacters = Template.bind({});
 WithMaxTextareaCharacters.args = {
   ownerUserName: 'nzambello',
@@ -193,34 +178,3 @@ WithPiiDetection.args = {
   },
 };
 
-export const WithLocalNats = Template.bind({});
-WithLocalNats.args = {
-  memoriName: 'test324',
-  ownerUserName: 'andrea.patini',
-  memoriID: 'd661a9ca-e907-4396-a986-5095ccd582d6',
-  ownerUserID: '69fcc557-9cb6-4e5e-b8ab-140cff975492',
-  tenantID: 'localhost:3000',
-  engineURL: 'http://localhost:7778/memori/v2',
-  apiURL: 'http://localhost:7778/api/v2',
-  baseURL: 'http://localhost:3000',
-  layout: 'FULLPAGE',
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  integrationID: 'ee1c3d98-7819-4506-ba28-818e79ba86cb',
-};
-
-export const WithFunctionalities = Template.bind({});
-WithFunctionalities.args = {
-  memoriName: 'test324',
-  ownerUserName: 'andrea.patini',
-  memoriID: 'd661a9ca-e907-4396-a986-5095ccd582d6',
-  ownerUserID: '69fcc557-9cb6-4e5e-b8ab-140cff975492',
-  tenantID: 'localhost:3000',
-  engineURL: 'http://localhost:7778/memori/v2',
-  apiURL: 'http://localhost:7778/api/v2',
-  baseURL: 'http://localhost:3000',
-  layout: 'FULLPAGE',
-  uiLang: 'IT',
-  spokenLang: 'IT',
-  integrationID: 'ee1c3d98-7819-4506-ba28-818e79ba86cb',
-};

package/src/locales/de.json

@@ -116,7 +116,9 @@
     "deleteConfirmTitle": "Bekannte Tatsache löschen",
     "deleteConfirmMessage": "Sind Sie sicher, dass Sie diese bekannte Tatsache löschen möchten?",
     "deleteSelectedConfirmTitle": "Ausgewählte bekannte Fakten löschen",
-    "deleteSelectedConfirmMessage": "Sind Sie sicher, dass Sie die ausgewählten bekannten Fakten löschen möchten?"
+    "deleteSelectedConfirmMessage": "Sind Sie sicher, dass Sie die ausgewählten bekannten Fakten löschen möchten?",
+    "selectedRows_one": "{{count}} Zeile ausgewählt",
+    "selectedRows_other": "{{count}} Zeilen ausgewählt"
   },
   "auth": {
     "title": "Authentifizierung",
@@ -411,6 +413,7 @@
     "otpTimer": "Code läuft in {{seconds}} Sekunden ab",
     "otpInvalidFormat": "Bitte geben Sie einen gültigen 4-stelligen Code ein",
     "otpInvalid": "Ungültiger Bestätigungscode",
+    "otpExpired": "Der Bestätigungscode ist abgelaufen",
     "otpError": "Fehler bei der Code-Validierung. Bitte versuchen Sie es erneut.",
     "otpSuccess": "Anmeldung erfolgreich!",
     "password": "Passwort",

package/src/locales/en.json

@@ -118,7 +118,9 @@
     "deleteConfirmTitle": "Delete known fact",
     "deleteConfirmMessage": "Are you sure you want to delete this known fact?",
     "deleteSelectedConfirmTitle": "Delete selected known facts",
-    "deleteSelectedConfirmMessage": "Are you sure you want to delete the selected known facts?"
+    "deleteSelectedConfirmMessage": "Are you sure you want to delete the selected known facts?",
+    "selectedRows_one": "{{count}} row selected",
+    "selectedRows_other": "{{count}} rows selected"
   },
   "auth": {
     "title": "Authentication",

package/src/locales/es.json

@@ -116,7 +116,9 @@
     "deleteConfirmTitle": "Eliminar hecho conocido",
     "deleteConfirmMessage": "¿Está seguro de que desea eliminar este hecho conocido?",
     "deleteSelectedConfirmTitle": "Eliminar hechos conocidos seleccionados",
-    "deleteSelectedConfirmMessage": "¿Está seguro de que desea eliminar los hechos conocidos seleccionados?"
+    "deleteSelectedConfirmMessage": "¿Está seguro de que desea eliminar los hechos conocidos seleccionados?",
+    "selectedRows_one": "{{count}} fila seleccionada",
+    "selectedRows_other": "{{count}} filas seleccionadas"
   },
   "auth": {
     "title": "Autenticación",

package/src/locales/fr.json

@@ -115,7 +115,9 @@
     "deleteConfirmTitle": "Supprimer un fait connu",
     "deleteConfirmMessage": "Êtes-vous sûr de vouloir supprimer ce fait connu ?",
     "deleteSelectedConfirmTitle": "Supprimer les faits connus sélectionnés",
-    "deleteSelectedConfirmMessage": "Etes-vous sûr de vouloir supprimer les faits connus sélectionnés ?"
+    "deleteSelectedConfirmMessage": "Etes-vous sûr de vouloir supprimer les faits connus sélectionnés ?",
+    "selectedRows_one": "{{count}} ligne sélectionnée",
+    "selectedRows_other": "{{count}} lignes sélectionnées"
   },
   "auth": {
     "title": "Authentification",

package/src/locales/it.json

@@ -119,7 +119,9 @@
     "deleteConfirmTitle": "Elimina il fatto noto",
     "deleteConfirmMessage": "Confermi di voler eliminare questo fatto noto?",
     "deleteSelectedConfirmTitle": "Elimina i fatti noti selezionati",
-    "deleteSelectedConfirmMessage": "Confermi di voler eliminare i fatti noti selezionati?"
+    "deleteSelectedConfirmMessage": "Confermi di voler eliminare i fatti noti selezionati?",
+    "selectedRows_one": "{{count}} riga selezionata",
+    "selectedRows_other": "{{count}} righe selezionate"
   },
   "auth": {
     "title": "Autenticazione",

package/src/styles.css

@@ -1,8 +1,8 @@
 /* ==========================================================================
    MEMORI REACT – FOGLIO DI STILE GLOBALE
    ========================================================================== */
-/* Layer order: theme (defaults) < integration (integrationConfig overrides) */
-@layer theme, integration;
+/* Layer order matches @memori.ai/ui: theme < components < host overrides */
+@layer memori.theme, memori.components, memori.overrides;
 
 /* --- 1. Design system esterno (variabili, reset, token) ---
    NOTE: the bundler-style specifier below is intentional for dev/Storybook.
@@ -113,6 +113,11 @@
     flex-direction: column;
 }
 
+/*
+ * Nested dialogs: use Modal stacking="stacked" from @memori.ai/ui (z-index 1600).
+ * Do not reintroduce max int z-index overrides here.
+ */
+
 .memori.memori-widget.memori-layout-chat > .memori-widget__surface,
 .memori.memori-widget.memori-layout-fullpage > .memori-widget__surface,
 .memori.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface {
@@ -122,6 +127,7 @@
 /* After inserting .memori-widget__surface, Spin is no longer a direct child of
    .memori-widget — keep it a stretching flex column so fullpage/chat fill the viewport. */
 .memori-widget > .memori-widget__surface > .memori-spin {
+    position: relative;
     display: flex !important;
     overflow: hidden;
     width: 100%;
@@ -142,8 +148,8 @@
     flex-shrink: 0;
 }
 
-/* --- 6. Base: brand e tema di default (in layer così integration può sovrascrivere --memori-primary) --- */
-@layer theme {
+/* --- 6. Base: brand e tema di default (in layer così overrides possono sovrascrivere --memori-primary) --- */
+@layer memori.overrides {
     :root,
     body,
     memori-client,
@@ -172,15 +178,14 @@
     background-color: var(--memori-secondary-background);
 }
 
-/* --- 8. Dark mode: override quando c’è data-theme="dark" (in layer theme) --- */
-@layer theme {
+/* --- 8. Dark mode: surface contrast only — keep --memori-primary on the brand hook --- */
+@layer memori.overrides {
     [data-theme='dark'] memori-client,
     [data-theme='dark'] memori-client #root,
     [data-theme='dark'] #headlessui-portal-root,
     [data-theme='dark'] .memori-widget,
     memori-client[data-theme='dark'],
     .memori-widget[data-theme='dark'] {
-        --memori-primary: var(--memori-primary-hover);
         /* Align with @memori.ai/ui: contrast = ink, inverse = surface */
         --memori-surface-contrast: #fff;
         --memori-surface-contrast-inverse: #000;
@@ -200,26 +205,7 @@
     );
 } */
 
-/* --- 10. HIDDEN_CHAT / WEBSITE_ASSISTANT tooltip labels ---
- * Both layouts park their UI in position:fixed children, so .memori-widget
- * (MemoriUIProvider portal root) often collapses to a near-zero in-flow box.
- * Base UI tooltips position with position:absolute inside that root, so the
- * popup shrink-to-fits to a tiny width and overflow-wrap:anywhere (from
- * @memori.ai/ui) stacks each letter vertically. Force content-sized popups. */
-.memori-widget.memori-layout-hidden_chat .memori-tooltip__popup,
-.memori-widget.memori-layout-website_assistant .memori-tooltip__popup {
-    width: max-content;
-    max-width: min(20rem, calc(100vw - 2rem));
-    overflow-wrap: break-word;
-    text-orientation: mixed;
-    word-break: normal;
-    writing-mode: horizontal-tb;
-}
-
-.memori-widget.memori-layout-hidden_chat .memori-tooltip__surface,
-.memori-widget.memori-layout-website_assistant .memori-tooltip__surface {
-    max-width: none;
-}
+/* Tooltip width/wrap is fixed in @memori.ai/ui 1.17 — no consumer patch. */
 
 /* --- 11. Utility responsive --- */
 @media (max-width: 768px) {

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '9.0.0-alpha.21';
+export const version = '9.0.0-alpha.22';

package/src/components/ChatTextArea/ChatTextArea.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ChatTextArea, { Props } from './ChatTextArea';
-import I18nWrapper from '../../I18nWrapper';
-import './ChatTextArea.css';
-
-const meta: Meta = {
-  title: 'Widget/Chat textarea',
-  component: ChatTextArea,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [userMessage, setUserMessage] = React.useState(args.value);
-
-  return (
-    <I18nWrapper>
-      <div style={{ paddingTop: '10rem' }}>
-        <ChatTextArea {...args} value={userMessage} onChange={setUserMessage} />
-      </div>
-    </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 = {
-  value: '',
-  onChange: () => {},
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  value: 'Suspendisse sit amet volutpat velit.',
-  onChange: () => {},
-};
-
-export const WithLongText = Template.bind({});
-WithLongText.args = {
-  value:
-    'Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.',
-  onChange: () => {},
-};

package/src/components/CustomGLBModelViewer/ModelViewer.stories.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ModelViewer, { Props } from './ModelViewer';
-import './ModelViewer.css';
-
-const meta: Meta = {
-  title: 'Custom GLB Avatar',
-  component: ModelViewer,
-  argTypes: {
-    src: {
-      control: {
-        type: 'text',
-      },
-    },
-    poster: {
-      control: {
-        type: 'text',
-      },
-    },
-    alt: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [hydrated, setHydrated] = React.useState(false);
-  React.useEffect(() => {
-    setHydrated(true);
-  }, []);
-
-  return hydrated ? (
-    <ModelViewer
-      {...args}
-      src={args.src + `#${new Date(Date.now()).toISOString()}`}
-      key={Date.now()}
-    />
-  ) : (
-    <></>
-  );
-};
-
-// 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 = {
-  alt: '',
-  src: 'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-  poster:
-    'https://assets.memori.ai/api/v2/asset/596382ce-381a-4a66-9740-c7adc3bfa4a8.png',
-};

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import DateSelector, { Props } from './DateSelector';
-
-import './DateSelector.css';
-
-const meta: Meta = {
-  title: 'DateSelector',
-  component: DateSelector,
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <DateSelector {...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 = {
-  defaultDate: '1990-06-15',
-  minAge: 18,
-  onChange: console.log,
-  disabled: false,
-};
-
-export const MinAge14 = Template.bind({});
-MinAge14.args = {
-  minAge: 14,
-  onChange: console.log,
-  disabled: false,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  defaultDate: '1990-06-15',
-  minAge: 18,
-  onChange: () => {},
-  disabled: true,
-};