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

package/esm/components/SendOnEnterMenu/SendOnEnterMenu.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu, RadioGroup } from '@headlessui/react';
-import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
-import Button from '../ui/Button';
+import { Button, Dropdown } from '@memori.ai/ui';
+import { Check, EllipsisVertical } from 'lucide-react';
 const SendOnEnterMenu = ({ sendOnEnter, setSendOnEnter }) => {
     const { t } = useTranslation();
-    return (_jsxs(Menu, { as: "div", className: "memori-send-on-enter-menu", children: [_jsx(Menu.Button, { className: cx('memori-button', 'memori-button--circle', 'memori-button--icon-only', 'memori-share-button--button', 'memori--conversation-button'), children: _jsx("div", { className: "memori-button--icon", children: _jsx("span", { style: {
-                            display: 'block',
-                            width: '1rem',
-                            height: '1rem',
-                        }, children: "\u2026" }) }) }), _jsx(Menu.Items, { className: "memori-menu--overlay", children: _jsxs(RadioGroup, { value: sendOnEnter, onChange: setSendOnEnter, children: [_jsx(RadioGroup.Option, { value: "keypress", className: "memori-menu--option", children: ({ checked }) => (_jsx(Menu.Item, { children: _jsx(Button, { className: "memori-menu--button", ghost: true, outlined: checked, icon: _jsx("span", { className: "memori-menu--icon", children: checked ? '✓' : '' }), children: t('widget.sendOnKeypress') }) })) }), _jsx(RadioGroup.Option, { value: "click", className: "memori-menu--option", children: ({ checked }) => (_jsx(Menu.Item, { children: _jsx(Button, { className: "memori-menu--button", ghost: true, outlined: checked, icon: _jsx("span", { className: "memori-menu--icon", children: checked ? '✓' : '' }), children: t('widget.sendOnClick') }) })) })] }) })] }));
+    return (_jsxs(Dropdown, { children: [_jsx(Dropdown.Trigger, { showChevron: false, render: (props) => (_jsx(Button, { ...props, variant: "ghost", "aria-label": String(t('widget.sendOptions', { defaultValue: 'Send options' })), icon: _jsx(EllipsisVertical, { "aria-hidden": true }) })) }), _jsxs(Dropdown.Menu, { children: [_jsx(Dropdown.Item, { onClick: () => setSendOnEnter('keypress'), ...{ icon: sendOnEnter === 'keypress' ? _jsx(Check, {}) : undefined }, children: t('widget.sendOnKeypress') }), _jsx(Dropdown.Item, { onClick: () => setSendOnEnter('click'), ...{ icon: sendOnEnter === 'click' ? _jsx(Check, {}) : undefined }, children: t('widget.sendOnClick') })] })] }));
 };
 export default SendOnEnterMenu;
 //# sourceMappingURL=SendOnEnterMenu.js.map

package/esm/components/SendOnEnterMenu/SendOnEnterMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendOnEnterMenu.js","sourceRoot":"","sources":["../../../src/components/SendOnEnterMenu/SendOnEnterMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,MAAM,MAAM,cAAc,CAAC;AAOlC,MAAM,eAAe,GAAoB,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,2BAA2B,aAClD,KAAC,IAAI,CAAC,MAAM,IACV,SAAS,EAAE,EAAE,CACX,eAAe,EACf,uBAAuB,EACvB,0BAA0B,EAC1B,6BAA6B,EAC7B,6BAA6B,CAC9B,YAED,cAAK,SAAS,EAAC,qBAAqB,YAClC,eACE,KAAK,EAAE;4BACL,OAAO,EAAE,OAAO;4BAChB,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;yBACf,uBAGI,GACH,GACM,EACd,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,YAC1C,MAAC,UAAU,IAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,aACtD,KAAC,UAAU,CAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAC,qBAAqB,YAChE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,KAAC,IAAI,CAAC,IAAI,cACR,KAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,KAAK,QACL,QAAQ,EAAE,OAAO,EACjB,IAAI,EACF,eAAM,SAAS,EAAC,mBAAmB,YAChC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GACd,YAGR,CAAC,CAAC,uBAAuB,CAAC,GACpB,GACC,CACb,GACiB,EACpB,KAAC,UAAU,CAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,YAC7D,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,KAAC,IAAI,CAAC,IAAI,cACR,KAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,KAAK,QACL,QAAQ,EAAE,OAAO,EACjB,IAAI,EACF,eAAM,SAAS,EAAC,mBAAmB,YAChC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GACd,YAGR,CAAC,CAAC,oBAAoB,CAAC,GACjB,GACC,CACb,GACiB,IACT,GACF,IACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SendOnEnterMenu.js","sourceRoot":"","sources":["../../../src/components/SendOnEnterMenu/SendOnEnterMenu.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOvD,MAAM,eAAe,GAAoB,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,QAAQ,CAAC,OAAO,IACf,WAAW,EAAE,KAAK,EAClB,MAAM,EAAE,CAAC,KAAoD,EAAE,EAAE,CAAC,CAChE,KAAC,MAAM,OACD,KAAK,EACT,OAAO,EAAC,OAAO,gBACH,MAAM,CAChB,CAAC,CAAC,oBAAoB,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,CAC1D,EACD,IAAI,EAAE,KAAC,gBAAgB,0BAAe,GACtC,CACH,GACD,EACF,MAAC,QAAQ,CAAC,IAAI,eACZ,KAAC,QAAQ,CAAC,IAAI,IACZ,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,KACpC,EAAE,IAAI,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAC,KAAK,KAAG,CAAC,CAAC,CAAC,SAAS,EAAiD,YAE/G,CAAC,CAAC,uBAAuB,CAAC,GACb,EAChB,KAAC,QAAQ,CAAC,IAAI,IACZ,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,KACjC,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,KAAG,CAAC,CAAC,CAAC,SAAS,EAAiD,YAE5G,CAAC,CAAC,oBAAoB,CAAC,GACV,IACF,IACP,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/components/SettingsDrawer/SettingsDrawer.css

@@ -5,7 +5,7 @@
 }
 
 .memori-settings-drawer .memori-settings-drawer--field .memori-select--value {
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-settings-drawer--controlsposition-radio,
@@ -15,7 +15,7 @@
     flex-wrap: wrap;
     align-items: center;
     margin: 0.5rem 0;
-    gap: 0.2rem;
+    gap: var(--memori-spacing-xs);
 }
 
 .memori-settings-drawer--microphoneMode-radio-button-disabled {

package/esm/components/SettingsDrawer/SettingsDrawer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
 export interface Props {
     open: boolean;

package/esm/components/SettingsDrawer/SettingsDrawer.js

@@ -1,25 +1,28 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import Drawer from '../ui/Drawer';
+import { Drawer, Checkbox, Button } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
-import Checkbox from '../ui/Checkbox';
 import { setLocalConfig } from '../../helpers/configuration';
-import { RadioGroup } from '@headlessui/react';
-import Button from '../ui/Button';
 const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
 const SettingsDrawer = ({ open, layout = 'DEFAULT', onClose, controlsPosition, setControlsPosition, hideEmissions, setHideEmissions, additionalSettings, avatarType, setAvatarType, enablePositionControls, setEnablePositionControls, isAvatar3d, }) => {
     const { t } = useTranslation();
-    return (_jsxs(Drawer, { className: "memori-settings-drawer", open: open, onClose: onClose, title: t('widget.settings') || 'Settings', description: t('write_and_speak.settingsHeaderLabel'), children: [layout === 'TOTEM' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "#controlsPosition", children: [t('write_and_speak.controlsPosition') || 'Controls', ":"] }), _jsxs(RadioGroup, { id: "controlsPosition", name: "controlsPosition", value: controlsPosition, defaultValue: controlsPosition, className: "memori-settings-drawer--controlsposition-radio", onChange: (value) => {
-                                    setControlsPosition(value);
-                                    setLocalConfig('controlsPosition', value);
-                                }, children: [_jsx(RadioGroup.Option, { value: "center", className: "memori-settings-drawer--controlsposition-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('center') || 'Center' })) }), _jsx(RadioGroup.Option, { value: "bottom", className: "memori-settings-drawer--controlsposition-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('bottom') || 'Bottom' })) })] })] }), isAvatar3d && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "avatarType", className: "memori-settings-drawer-label", children: [t('write_and_speak.avatarType') || 'Avatar type', ":"] }), _jsxs(RadioGroup, { id: "avatarType", name: "avatarType", value: avatarType, defaultValue: avatarType, className: "memori-settings-drawer--avatarType-radio", onChange: (value) => {
-                                            setAvatarType && setAvatarType(value);
-                                            setLocalConfig('avatarType', value);
-                                        }, children: [_jsx(RadioGroup.Option, { value: "blob", className: "memori-settings-drawer--avatarType-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('write_and_speak.blob') || 'Blob' })) }), _jsx(RadioGroup.Option, { value: "avatar3d", className: "memori-settings-drawer--avatarType-radio-button", children: ({ checked }) => (_jsx(Button, { primary: checked, outlined: !checked, children: t('write_and_speak.avatar3d') || 'Avatar 3D' })) })] })] }), _jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Checkbox, { label: t('write_and_speak.enablePositionControls') ||
-                                        'Enable position controls', name: "enablePositionControls", checked: enablePositionControls, onChange: e => {
-                                        setEnablePositionControls(e.target.checked);
-                                    } }) })] })), _jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Checkbox, { label: t('write_and_speak.hideEmissionsLabel') || 'Hide emissions', name: "hideControls", checked: hideEmissions, onChange: e => {
-                                setHideEmissions(e.target.checked);
-                                setLocalConfig('hideEmissions', e.target.checked);
+    return (_jsxs(Drawer, { className: "memori-settings-drawer", open: open, onClose: onClose, title: t('widget.settings') || 'Settings', description: t('write_and_speak.settingsHeaderLabel'), children: [layout === 'TOTEM' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "#controlsPosition", children: [t('write_and_speak.controlsPosition') || 'Controls', ":"] }), _jsxs("div", { id: "controlsPosition", className: "memori-settings-drawer--controlsposition-radio", role: "radiogroup", children: [_jsx(Button, { role: "radio", "aria-checked": controlsPosition === 'center', variant: controlsPosition === 'center' ? 'primary' : 'outline', className: "memori-settings-drawer--controlsposition-radio-button", onClick: () => {
+                                            setControlsPosition('center');
+                                            setLocalConfig('controlsPosition', 'center');
+                                        }, children: t('center') || 'Center' }), _jsx(Button, { role: "radio", "aria-checked": controlsPosition === 'bottom', variant: controlsPosition === 'bottom' ? 'primary' : 'outline', className: "memori-settings-drawer--controlsposition-radio-button", onClick: () => {
+                                            setControlsPosition('bottom');
+                                            setLocalConfig('controlsPosition', 'bottom');
+                                        }, children: t('bottom') || 'Bottom' })] })] }), isAvatar3d && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-settings-drawer--field controls", children: [_jsxs("label", { htmlFor: "avatarType", className: "memori-settings-drawer-label", children: [t('write_and_speak.avatarType') || 'Avatar type', ":"] }), _jsxs("div", { id: "avatarType", className: "memori-settings-drawer--avatarType-radio", role: "radiogroup", children: [_jsx(Button, { role: "radio", "aria-checked": avatarType === 'blob', variant: avatarType === 'blob' ? 'primary' : 'outline', className: "memori-settings-drawer--avatarType-radio-button", onClick: () => {
+                                                    setAvatarType === null || setAvatarType === void 0 ? void 0 : setAvatarType('blob');
+                                                    setLocalConfig('avatarType', 'blob');
+                                                }, children: t('write_and_speak.blob') || 'Blob' }), _jsx(Button, { role: "radio", "aria-checked": avatarType === 'avatar3d', variant: avatarType === 'avatar3d' ? 'primary' : 'outline', className: "memori-settings-drawer--avatarType-radio-button", onClick: () => {
+                                                    setAvatarType === null || setAvatarType === void 0 ? void 0 : setAvatarType('avatar3d');
+                                                    setLocalConfig('avatarType', 'avatar3d');
+                                                }, children: t('write_and_speak.avatar3d') || 'Avatar 3D' })] })] }), _jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Checkbox, { label: t('write_and_speak.enablePositionControls') ||
+                                        'Enable position controls', name: "enablePositionControls", checked: enablePositionControls, onChange: checked => {
+                                        setEnablePositionControls(checked);
+                                    } }) })] })), _jsx("div", { className: "memori-settings-drawer--field", children: _jsx(Checkbox, { label: t('write_and_speak.hideEmissionsLabel') || 'Hide emissions', name: "hideControls", checked: hideEmissions, onChange: checked => {
+                                setHideEmissions(checked);
+                                setLocalConfig('hideEmissions', checked);
                             } }) })] })), additionalSettings && (_jsx("div", { className: "memori-settings-drawer--field controls", children: additionalSettings }))] }));
 };
 export default SettingsDrawer;

package/esm/components/SettingsDrawer/SettingsDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsDrawer.js","sourceRoot":"","sources":["../../../src/components/SettingsDrawer/SettingsDrawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SettingsDrawer.js","sourceRoot":"","sources":["../../../src/components/SettingsDrawer/SettingsDrawer.tsx"],"names":[],"mappings":"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"}

package/esm/components/ShareButton/ShareButton.css

@@ -3,10 +3,256 @@
     display: inline-block;
 }
 
-.memori-share-button--button {
+.memori-share-button--trigger {
+    display: flex;
+    max-width: 2rem;
+    max-height: 2rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.memori-share-button--trigger svg {
+    width: 100%;
+    max-width: 1rem;
+    height: 100%;
+    max-height: 1rem;
+}
+
+.memori-share-button .memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary, #3b82f6) 40%, transparent);
+}
+
+.memori-share-button--trigger-menu-item {
+    width: 100%;
+    max-width: none;
+    max-height: none;
+    justify-content: flex-start;
+}
+
+.memori-share-button--dropdown-item-content{
+    display: inline-flex;
+    width: 100%;
+    min-height: 1.25rem;
+    align-items: center;
+    cursor: pointer;
+}
+
+.memori-share-button--dropdown-menu {
+    min-width: 15.5rem;
+    max-width: 19rem;
+    padding: 0.375rem;
+}
+
+.memori-share-button--dropdown-section {
+    display: grid;
+    gap: 0.125rem;
+}
+
+.memori-share-button--inline-list {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.memori-share-button--inline-item {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding: 0.55rem 0.65rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    gap: 0.5rem;
+    text-align: left;
+}
+
+.memori-share-button--inline-item svg {
+    width: 1rem;
+    max-width: 1rem;
+    height: 1rem;
+    max-height: 1rem;
+    flex-shrink: 0;
+}
+
+.memori-share-button--inline-item:hover {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 10%,
+        transparent
+    );
+}
+
+.memori-share-button--inline-item:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.memori-share-button--dropdown-divider {
+    height: 1px;
+    margin: 0.375rem 0.125rem;
+    background-color: color-mix(
+        in srgb,
+        var(--memori-text-color, #111827) 12%,
+        transparent
+    );
+}
+
+/* All actionable menu rows: press feedback */
+.memori-share-button--menu-item {
+    position: relative;
+    border-radius: 0.5rem;
+    transition:
+        background-color 0.2s ease,
+        transform 0.12s ease;
+}
+
+.memori-share-button--menu-item:active:not(:disabled) {
+    transform: scale(0.985);
+}
+
+/* Same primary tint as copy success, brief feedback on share / export / social / QR */
+.memori-share-button--menu-item--flash {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 12%,
+        transparent
+    );
+}
+
+.memori-share-button--copy-item--success {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 12%,
+        transparent
+    );
+}
+
+.memori-share-button--copy-item--error {
+    background-color: color-mix(in srgb, #ef4444 10%, transparent);
+}
+
+.memori-share-button--copy-icon {
+    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.memori-share-button--copy-item--success .memori-share-button--copy-icon {
+    animation: memori-share-copy-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
+        both;
+    color: var(--memori-primary, #3b82f6);
+}
+
+.memori-share-button--copy-label {
+    transition: opacity 0.15s ease;
+}
+
+.memori-share-button--copy-item--success .memori-share-button--copy-label {
+    font-weight: 600;
+}
+
+.memori-share-button--copy-item--error .memori-share-button--copy-label {
+    color: #b91c1c;
+}
+
+@keyframes memori-share-copy-check-pop {
+    0% {
+        opacity: 0.85;
+        transform: scale(0.6) rotate(-12deg);
+    }
+
+    60% {
+        transform: scale(1.08) rotate(4deg);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+}
+
+.memori-share-button--qr-download {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 0.5rem;
+    margin-top: 0.25rem;
+    background: transparent;
+    color: var(--memori-primary, #3b82f6);
     cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    gap: 0.5rem;
+    transition:
+        background-color 0.2s ease,
+        transform 0.12s ease;
 }
 
+.memori-share-button--qr-download svg {
+    width: 1rem;
+    max-width: 1rem;
+    height: 1rem;
+    max-height: 1rem;
+    flex-shrink: 0;
+}
+
+.memori-share-button--qr-download:hover {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 10%,
+        transparent
+    );
+}
+
+.memori-share-button--qr-download:focus-visible {
+    outline: 2px solid color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 55%,
+        transparent
+    );
+    outline-offset: 2px;
+}
+
+.memori-share-button--qr-item {
+    display: flex;
+    justify-content: center;
+    padding: 0.625rem;
+}
+
+.memori-share-button--qr-content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.memori-share-button--qr-download:active {
+    transform: scale(0.985);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-share-button--menu-item,
+    .memori-share-button--copy-item,
+    .memori-share-button--copy-icon,
+    .memori-share-button--copy-label,
+    .memori-share-button--qr-download {
+        animation: none;
+        transition: none;
+    }
+
+    .memori-share-button--menu-item:active:not(:disabled),
+    .memori-share-button--qr-download:active {
+        transform: none;
+    }
+}
+
+
 .memori-share-button--overlay {
     position: absolute;
     right: auto;
@@ -16,12 +262,12 @@
     flex-direction: column;
     padding: 0.5rem 0;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0.375rem;
+    border-radius: var(--memori-radius-box);
     margin: 0;
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
     background-color: #fff;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
-    color: #000;
+    color: var(--memori-text-color);
     list-style: none;
     outline: none;
     transform-origin: top right;
@@ -50,24 +296,24 @@ a.memori-share-button--link {
 }
 
 .memori-share-button--li-qr-code {
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
     text-align: center;
 }
 
 .memori-share-button--li-qr-code button {
     background: #fff;
-    color: #333;
+    color: var(--memori-text-color);
     cursor: pointer;
 }
 
 .memori-share-button--li-qr-code button:hover,
 .memori-share-button--li-qr-code button:focus {
     background: #fff;
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-share-button--li-shared {
     padding-bottom: 0.25rem;
     border-bottom: 1px solid var(--memori-primary);
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--memori-spacing-sm);
 }

package/esm/components/ShareButton/ShareButton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from '@memori.ai/ui';
 import { Tenant, Memori, Message } from '@memori.ai/memori-api-client/dist/types';
 export interface Props {
     tenant?: Tenant;
@@ -6,12 +7,16 @@ export interface Props {
     sessionID?: string;
     url?: string;
     title?: string;
-    className?: string;
     primary?: boolean;
+    triggerVariant?: React.ComponentProps<typeof Button>['variant'];
+    className?: string;
     baseUrl?: string;
     showQrCode?: boolean;
     align?: 'left' | 'right';
     history?: Message[];
+    triggerMode?: 'icon' | 'menu-item';
+    triggerLabel?: string;
+    renderMode?: 'dropdown' | 'inline';
 }
 declare const ShareButton: React.FC<Props>;
 export default ShareButton;