@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

package/dist/cjs/components/src/components/Molecules/Carousel/Carousel.js

@@ -1,47 +1,23 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Carousel = exports.defaultVerticalCarouselBreakpoints = exports.defaultCarouselBreakpoints = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var react_2 = require("swiper/react");
-var utilities_1 = require("../../../utilities");
-var modules_1 = require("swiper/modules");
-var Icon_1 = require("../../Atoms/Icon/Icon");
-var providers_1 = require("../../../providers");
-var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var hooks_2 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var vertical = _a.vertical, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const react_2 = require("swiper/react");
+const utilities_1 = require("../../../utilities");
+const modules_1 = require("swiper/modules");
+const Icon_1 = require("../../Atoms/Icon/Icon");
+const providers_1 = require("../../../providers");
+const useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+const hooks_2 = require("../../../hooks");
+const defaultStyles = ({ vertical, theme }) => {
     return (0, react_1.css)({
         display: 'flex',
         maxWidth: '100%',
@@ -76,7 +52,7 @@ var defaultStyles = function (_a) {
             },
         },
         '.swiper-pagination-bullet-active': {
-            background: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || 'inherit',
+            background: theme?.variables?.colors?.primary || 'inherit',
         },
         '.ss__carousel__next-wrapper, .ss__carousel__prev-wrapper': {
             display: 'flex',
@@ -146,7 +122,7 @@ var defaultStyles = function (_a) {
             margin: '0 4px',
             '&.swiper-pagination-bullet-active': {
                 opacity: '0.8',
-                background: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#000',
+                background: theme?.variables?.colors?.primary || '#000',
             },
         },
         '.swiper-slide-invisible-blank': {
@@ -171,7 +147,7 @@ var defaultStyles = function (_a) {
             '.swiper-scrollbar-drag': {
                 position: 'relative',
                 height: '100%',
-                backgroundColor: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary) || '#000',
+                backgroundColor: theme?.variables?.colors?.primary || '#000',
             },
         },
     });
@@ -210,11 +186,10 @@ exports.defaultVerticalCarouselBreakpoints = {
         spaceBetween: 0,
     },
 };
-exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Carousel = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         breakpoints: properties.vertical
             ? JSON.parse(JSON.stringify(exports.defaultVerticalCarouselBreakpoints))
             : JSON.parse(JSON.stringify(exports.defaultCarouselBreakpoints)),
@@ -227,12 +202,12 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
         autoAdjustSlides: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('carousel', globalTheme, defaultProps, properties);
-    var displaySettings;
+    let props = (0, utilities_1.mergeProps)('carousel', globalTheme, defaultProps, properties);
+    let displaySettings;
     //no breakpoint props allowed in templates
-    if (!(((_a = properties.theme) === null || _a === void 0 ? void 0 : _a.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates') && props.breakpoints) {
-        Object.keys(props.breakpoints).forEach(function (breakpoint) {
-            var breakPointProps = props.breakpoints[breakpoint];
+    if (!(properties.theme?.type == 'templates' || globalTheme?.type == 'templates') && props.breakpoints) {
+        Object.keys(props.breakpoints).forEach((breakpoint) => {
+            const breakPointProps = props.breakpoints[breakpoint];
             // make certain props numbers
             if (breakPointProps.slidesPerView)
                 breakPointProps.slidesPerView = Number(breakPointProps.slidesPerView) || 1;
@@ -241,55 +216,66 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
         });
         displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
         if (displaySettings && Object.keys(displaySettings).length) {
-            var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+            const theme = (0, deepmerge_1.default)(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
             if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
                 displaySettings.slidesPerView = props.children.length;
                 displaySettings.slidesPerGroup = props.children.length;
             }
-            props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
+            props = {
+                ...props,
+                ...displaySettings,
+                theme,
+            };
         }
     }
-    var children = props.children, loop = props.loop, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, onInit = props.onInit, onBeforeInit = props.onBeforeInit, onAfterInit = props.onAfterInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, modules = props.modules, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, additionalProps = __rest(props, ["children", "loop", "nextButton", "prevButton", "hideButtons", "vertical", "onInit", "onBeforeInit", "onAfterInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "styleScript", "themeStyleScript", "modules", "className", "internalClassName", "treePath"]);
-    var _b = (0, hooks_2.useCustomComponentOverride)('carousel', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style: _, styleScript: __, themeStyleScript: ___, modules, className, internalClassName, treePath, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('carousel', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var pagination = props.pagination;
-    var navigation = props.navigation;
-    var scrollbar = props.scrollbar;
-    var subProps = {
-        icon: __assign(__assign({ 
+    let pagination = props.pagination;
+    let navigation = props.navigation;
+    let scrollbar = props.scrollbar;
+    const subProps = {
+        icon: {
             // default props
-            internalClassName: 'ss__carousel__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__carousel__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var swiperModulesUnfiltered = Array.isArray(modules)
+    const swiperModulesUnfiltered = Array.isArray(modules)
         ? [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y].concat(modules)
         : [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y];
     //remove any duplicates, in case user passes in Navigation or Pagination
-    var swiperModules = swiperModulesUnfiltered.filter(function (module, pos) { return swiperModulesUnfiltered.indexOf(module) === pos; });
-    var navigationPrevRef = (0, hooks_1.useRef)(null);
-    var navigationNextRef = (0, hooks_1.useRef)(null);
-    var rootComponentRef = (0, hooks_1.useRef)(null);
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    (0, hooks_1.useEffect)(function () {
+    const swiperModules = swiperModulesUnfiltered.filter((module, pos) => swiperModulesUnfiltered.indexOf(module) === pos);
+    const navigationPrevRef = (0, hooks_1.useRef)(null);
+    const navigationNextRef = (0, hooks_1.useRef)(null);
+    const rootComponentRef = (0, hooks_1.useRef)(null);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    (0, hooks_1.useEffect)(() => {
         //backwards compatability for legacy styles
         if (rootComponentRef.current) {
-            var rootElem = rootComponentRef.current;
-            var swiperElem = rootElem.querySelector('.swiper');
-            swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.add('swiper-container', 'swiper-container-pointer-events');
-            (swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.contains('swiper-vertical')) && swiperElem.classList.add('swiper-container-vertical');
-            (swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.contains('swiper-horizontal')) && swiperElem.classList.add('swiper-container-horizontal');
+            const rootElem = rootComponentRef.current;
+            const swiperElem = rootElem.querySelector('.swiper');
+            swiperElem?.classList.add('swiper-container', 'swiper-container-pointer-events');
+            swiperElem?.classList.contains('swiper-vertical') && swiperElem.classList.add('swiper-container-vertical');
+            swiperElem?.classList.contains('swiper-horizontal') && swiperElem.classList.add('swiper-container-horizontal');
         }
         //add usable class to last visible slide.
         attachClasstoLastVisibleSlide();
     }, [properties]);
     if (pagination) {
         if (typeof pagination == 'object') {
-            pagination = __assign({ clickable: true }, pagination);
+            pagination = {
+                clickable: true,
+                ...pagination,
+            };
         }
         else {
             pagination = {
@@ -299,7 +285,11 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     if (navigation) {
         if (typeof navigation == 'object') {
-            navigation = __assign({ nextEl: '.ss_carousel_DNE', prevEl: '.ss_carousel_DNE' }, navigation);
+            navigation = {
+                nextEl: '.ss_carousel_DNE',
+                prevEl: '.ss_carousel_DNE',
+                ...navigation,
+            };
         }
         else {
             navigation = {
@@ -310,7 +300,10 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     if (scrollbar) {
         if (typeof scrollbar == 'object') {
-            scrollbar = __assign({ enabled: true }, scrollbar);
+            scrollbar = {
+                enabled: true,
+                ...scrollbar,
+            };
         }
         else {
             scrollbar = {
@@ -318,20 +311,20 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
             };
         }
     }
-    var attachClasstoLastVisibleSlide = function () {
+    const attachClasstoLastVisibleSlide = () => {
         if (rootComponentRef.current) {
-            var swiperElem = rootComponentRef.current;
-            var slides_visible_1 = swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.querySelectorAll('.swiper-slide-visible');
-            slides_visible_1.forEach(function (element, idx) {
+            const swiperElem = rootComponentRef.current;
+            const slides_visible = swiperElem?.querySelectorAll('.swiper-slide-visible');
+            slides_visible.forEach((element, idx) => {
                 element.classList.remove('swiper-last-visible-slide');
-                if (idx == slides_visible_1.length - 1) {
+                if (idx == slides_visible.length - 1) {
                     element.classList.add('swiper-last-visible-slide');
                 }
             });
         }
     };
     delete additionalProps.breakpoints;
-    return (children === null || children === void 0 ? void 0 : children.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && (function (e) { return onPrevButtonClick(e); }), children: prevButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-up' : 'angle-left' }, subProps.icon, { name: 'prev' })) }) })), (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ centerInsufficientSlides: true, onBeforeInit: function (swiper) {
+    return children?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ref: rootComponentRef, ...styling, className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)), children: prevButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon, name: 'prev' }) }) })), (0, jsx_runtime_1.jsx)(react_2.Swiper, { centerInsufficientSlides: true, onBeforeInit: (swiper) => {
                         if (navigation && swiper.params.navigation) {
                             //@ts-ignore : someone should refactor this
                             swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
@@ -341,14 +334,14 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
                         if (onBeforeInit) {
                             onBeforeInit(swiper);
                         }
-                    }, onInit: function (swiper) {
+                    }, onInit: (swiper) => {
                         if (onInit) {
                             onInit(swiper);
                         }
-                    }, onAfterInit: function (swiper) {
+                    }, onAfterInit: (swiper) => {
                         if (navigation && swiper.navigation) {
                             //@ts-ignore : someone should refactor this
-                            swiper.navigation.onPrevClick = function (e) {
+                            swiper.navigation.onPrevClick = (e) => {
                                 e.preventDefault();
                                 if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind)
                                     return;
@@ -356,7 +349,7 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
                                 swiper.emit('navigationPrev');
                             };
                             //@ts-ignore : someone should refactor this
-                            swiper.navigation.onNextClick = function (e) {
+                            swiper.navigation.onNextClick = (e) => {
                                 e.preventDefault();
                                 if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind)
                                     return;
@@ -367,25 +360,25 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
                         if (onAfterInit) {
                             onAfterInit(swiper);
                         }
-                    }, onClick: function (swiper, e) {
+                    }, onClick: (swiper, e) => {
                         onClick && onClick(swiper, e);
-                    }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules }, additionalProps, displaySettings, { controller: undefined, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: function (swiper) {
+                    }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, controller: undefined, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: (swiper) => {
                         if (additionalProps.onResize) {
                             additionalProps.onResize();
                         }
                         swiper.updateSlidesClasses();
                         attachClasstoLastVisibleSlide();
-                    }, onTransitionEnd: function () {
+                    }, onTransitionEnd: () => {
                         if (additionalProps.onTransitionEnd) {
                             additionalProps.onTransitionEnd();
                         }
                         attachClasstoLastVisibleSlide();
-                    }, children: children.map(function (child) {
+                    }, children: children.map((child) => {
                         if (child != null) {
-                            return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, utilities_1.cloneWithProps)(child, { treePath: treePath }) });
+                            return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, utilities_1.cloneWithProps)(child, { treePath }) });
                         }
                         else {
                             return null;
                         }
-                    }) })), navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }), children: nextButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon, { name: 'next' })) }) }))] })) })) : null;
+                    }) }), navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)), children: nextButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon, name: 'next' }) }) }))] }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/ChatAttachmentContext.js

@@ -0,0 +1,221 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatAttachmentContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const Image_1 = require("../../Atoms/Image");
+const Button_1 = require("../../Atoms/Button");
+const defaultStyles = ({ theme }) => {
+    const colorPrimary = utilities_1.Colour.concrete(theme?.variables?.colors?.primary) || '#253B80';
+    return (0, react_1.css)({
+        '.ss__chat-attachment-context__label': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontSize: '0.8em',
+            color: '#555',
+            marginBottom: '0.5em',
+            '.ss__chat-attachment-context__label__close.ss__button': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '1.5em',
+                height: '1.5em',
+                borderRadius: '50%',
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+                padding: 0,
+                '&:hover': {
+                    background: '#eee',
+                },
+                '&:focus-visible': {
+                    outline: `2px solid ${colorPrimary}`,
+                    outlineOffset: '2px',
+                },
+            },
+        },
+        '.ss__chat-attachment-context__items': {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '0.5em',
+            '.ss__chat-attachment-context__item': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5em',
+                padding: '0.25em 0.5em',
+                border: '1px solid #eee',
+                borderRadius: '0.5em',
+                background: '#f9fafb',
+                maxWidth: 'calc(50% - 0.25em)',
+                '.ss__chat-attachment-context__item__main': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.5em',
+                    flex: 1,
+                    minWidth: 0,
+                },
+                '&.ss__chat-attachment-context__item--clickable': {
+                    cursor: 'pointer',
+                    '&:hover': {
+                        borderColor: colorPrimary,
+                    },
+                    '.ss__chat-attachment-context__item__main:focus-visible': {
+                        outline: `2px solid ${colorPrimary}`,
+                        outlineOffset: '2px',
+                    },
+                },
+                '&.ss__chat-attachment-context__item--error': {
+                    background: '#fff5f5',
+                    borderColor: '#fca5a5',
+                    color: '#b91c1c',
+                    maxWidth: '100%',
+                },
+                '.ss__chat-attachment-context__item__content': {
+                    position: 'relative',
+                    width: '2em',
+                    height: '2em',
+                    flexShrink: 0,
+                    '.ss__image': {
+                        width: '100%',
+                        height: '100%',
+                    },
+                },
+                '.ss__chat-attachment-context__item__name': {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontSize: '0.85em',
+                },
+                '.ss__chat-attachment-context__item__loading': {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '2px',
+                    '.ss__chat-attachment-context__item__loading__dot': {
+                        width: '4px',
+                        height: '4px',
+                        borderRadius: '50%',
+                        background: colorPrimary,
+                        animation: 'ss-chat-attachment-context-pulse 1s ease-in-out infinite',
+                        '&:nth-of-type(2)': { animationDelay: '0.2s' },
+                        '&:nth-of-type(3)': { animationDelay: '0.4s' },
+                    },
+                },
+                '@keyframes ss-chat-attachment-context-pulse': {
+                    '0%, 100%': { opacity: 0.3 },
+                    '50%': { opacity: 1 },
+                },
+                '.ss__chat-attachment-context__item__error-icon': {
+                    fontWeight: 'bold',
+                },
+                '.ss__chat-attachment-context__item__remove': {
+                    marginLeft: 'auto',
+                    padding: 0,
+                    background: 'transparent',
+                    border: 'none',
+                },
+            },
+        },
+    });
+};
+exports.ChatAttachmentContext = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatAttachmentContext', globalTheme, defaultProps, properties);
+    const { title, items, onClose, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('chatAttachmentContext', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    if (!items || items.length === 0) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    const subProps = {
+        image: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        closeButton: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        removeButton: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        closeButton: {
+            attributes: {
+                'aria-label': `Close ${title}`,
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        title,
+        items,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-attachment-context', className, internalClassName), ...styling, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__label', children: [(0, jsx_runtime_1.jsx)("span", { children: title }), onClose && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.closeButton, internalClassName: 'ss__chat-attachment-context__label__close', onClick: onClose, icon: { icon: 'close-thin', size: '12px' }, ...mergedLang.closeButton.attributes }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__items', children: items.map((item) => {
+                        const isClickable = !!item.onClick;
+                        const itemDefaultLang = {
+                            openItemButton: {
+                                attributes: {
+                                    'aria-label': `Open ${item.name}`,
+                                },
+                            },
+                            loadingIndicator: {
+                                attributes: {
+                                    'aria-label': `Loading ${item.name}`,
+                                },
+                            },
+                            removeButton: {
+                                attributes: {
+                                    'aria-label': `Remove ${item.name}`,
+                                },
+                            },
+                            uploadFailedText: {
+                                value: `Upload Failed - ${item.name}`,
+                            },
+                        };
+                        const itemLang = (0, deepmerge_1.default)(itemDefaultLang, props.lang || {});
+                        const itemMergedLang = (0, hooks_1.useLang)(itemLang, {
+                            title,
+                            items,
+                            item,
+                        }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                        const itemContent = item.hasError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-icon', "aria-hidden": "true", children: "!" }), item.errorMessage ? ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-message', children: item.errorMessage })) : ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__error-message', ...itemMergedLang.uploadFailedText.value }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__content', children: [item.imageUrl && (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image, className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat-attachment-context__item__loading', role: "status", ...itemMergedLang.loadingIndicator.attributes, children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__loading__dot' })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__name', title: item.name, children: item.name })] }));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-attachment-context__item', {
+                                'ss__chat-attachment-context__item--error': item.hasError,
+                                'ss__chat-attachment-context__item--clickable': isClickable,
+                            }), children: [isClickable ? ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__main', role: "button", ref: (e) => (0, hooks_1.useA11y)(e), onClick: item.onClick, ...itemMergedLang.openItemButton.attributes, children: itemContent })) : ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat-attachment-context__item__main', children: itemContent })), item.onRemove && (items.length > 1 || !onClose || isClickable) && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.removeButton, className: 'ss__chat-attachment-context__item__remove', onClick: (e) => {
+                                        e.stopPropagation();
+                                        if (!item.isLoading)
+                                            item.onRemove?.();
+                                    }, icon: {
+                                        icon: 'close-thin',
+                                        size: '0.6em',
+                                    }, ...itemMergedLang.removeButton.attributes }))] }, item.id));
+                    }) })] }) }));
+});

package/dist/cjs/components/src/components/Molecules/ChatAttachmentContext/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatAttachmentContext"), exports);