@adiba-banking-cloud/backoffice 0.2.24 → 0.2.26

package/build/index.cjs.js/{heatmap-DajMNZBC.js → heatmap-D1SQUNrl.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BFlcM32-.js');
+var index = require('./index-DbCa8uwP.js');
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/build/index.cjs.js/{index-BFlcM32-.js → index-DbCa8uwP.js}

@@ -12169,7 +12169,7 @@ function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t
   }
 
   // Fallback: use dynamic import (async, but will work in Vite/Storybook)
-  Promise.resolve().then(function () { return require('./heatmap-DajMNZBC.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
+  Promise.resolve().then(function () { return require('./heatmap-D1SQUNrl.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
     const moduleFn = typeof heatmapModule === "function" ? heatmapModule : (heatmapModule === null || heatmapModule === void 0 ? void 0 : heatmapModule.default) || heatmapModule;
     if (typeof moduleFn === "function") {
       moduleFn(Highcharts);
@@ -14125,15 +14125,26 @@ const File = _ref => {
     p: isChip ? "xs" : undefined
   }, /*#__PURE__*/React.createElement(core.Group, {
     justify: isChip ? "space-between" : undefined,
-    gap: "xs"
+    gap: "xs",
+    wrap: "nowrap",
+    w: "100%"
   }, /*#__PURE__*/React.createElement(core.Image, {
     p: isChip ? undefined : "xs",
     pr: 2,
     h: isChip ? CHIP_HEIGHT : TILE_HEIGHT,
     w: isChip ? CHIP_WIDTH : TILE_WIDTH,
     alt: shape,
-    fallbackSrc: ICON[type]
-  }), rest.children, /*#__PURE__*/React.createElement(core.Space, {
+    fallbackSrc: ICON[type],
+    style: {
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement(core.Box, {
+    style: {
+      minWidth: 0,
+      overflow: "hidden",
+      flex: "1 1 auto"
+    }
+  }, rest.children), /*#__PURE__*/React.createElement(core.Space, {
     flex: 1
   }), rightsection ? /*#__PURE__*/React.createElement(core.ActionIcon, {
     variant: "transparent",
@@ -14814,8 +14825,7 @@ const ChatBubble = _ref => {
     style: {
       backgroundColor: bubbleBg,
       borderRadius: borderRadius,
-      position: "relative",
-      minWidth: 400 // Ensure enough width for layout
+      position: "relative"
     }
   }, senderName && !isOutgoing && /*#__PURE__*/React.createElement(core.Text, {
     size: "sm",
@@ -14829,7 +14839,10 @@ const ChatBubble = _ref => {
     variant: "chip",
     type: (_attachment$type = attachment.type) !== null && _attachment$type !== void 0 ? _attachment$type : "pdf",
     bg: "white",
-    w: "100%",
+    w: {
+      base: 200,
+      md: 250
+    },
     bd: "1px solid #E2E8F0",
     rightsection: {
       icon: {
@@ -14842,7 +14855,10 @@ const ChatBubble = _ref => {
     mb: 4
   }, /*#__PURE__*/React.createElement(core.Stack, {
     gap: 0,
-    ml: "xs"
+    ml: "xs",
+    style: {
+      minWidth: 0
+    }
   }, /*#__PURE__*/React.createElement(core.Text, {
     size: "sm",
     fw: 500,
@@ -14891,17 +14907,29 @@ const ChatHeader = _ref => {
     } = _ref,
     others = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(core.Box, _extends({
-    py: "md",
-    px: "lg",
+    py: {
+      base: "sm",
+      md: "md"
+    },
+    px: {
+      base: "sm",
+      md: "lg"
+    },
     style: _objectSpread$4({
       borderBottom: "1px solid #E2E8F0",
       backgroundColor: "white"
     }, style),
     className: className
   }, others), /*#__PURE__*/React.createElement(core.Group, {
-    justify: "space-between"
+    justify: "space-between",
+    wrap: "nowrap"
   }, /*#__PURE__*/React.createElement(core.Group, {
-    gap: 8
+    gap: 8,
+    wrap: "nowrap",
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
   }, onBack && /*#__PURE__*/React.createElement(core.ActionIcon, {
     variant: "subtle",
     color: "gray",
@@ -14914,32 +14942,51 @@ const ChatHeader = _ref => {
     size: 20
   })), /*#__PURE__*/React.createElement(core.Avatar, {
     src: avatar,
-    size: 50,
+    w: {
+      base: 40,
+      md: 50
+    },
+    h: {
+      base: 40,
+      md: 50
+    },
     radius: "xl",
     style: {
-      border: "1px solid #CFD1D8"
+      border: "1px solid #CFD1D8",
+      flexShrink: 0
     }
   }), /*#__PURE__*/React.createElement(core.Stack, {
-    gap: 0
+    gap: 0,
+    style: {
+      overflow: "hidden",
+      minWidth: 0,
+      flex: 1
+    }
   }, /*#__PURE__*/React.createElement(core.Text, {
     size: "15px",
     fw: 400,
     lh: "24px",
-    c: "dark.9"
+    c: "dark.9",
+    truncate: "end"
   }, name), status && /*#__PURE__*/React.createElement(core.Text, {
     fw: 300,
     size: "sm",
     fs: "italic",
-    c: "#575E77"
+    c: "#575E77",
+    truncate: "end"
   }, status))), /*#__PURE__*/React.createElement(core.Group, {
-    gap: 0
+    gap: 0,
+    wrap: "nowrap"
   }, /*#__PURE__*/React.createElement(core.Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
     }
   }, /*#__PURE__*/React.createElement(core.ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"
@@ -14948,11 +14995,18 @@ const ChatHeader = _ref => {
     size: 20
   }))), /*#__PURE__*/React.createElement(core.Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
+    },
+    display: {
+      base: "none",
+      md: "block"
     }
   }, /*#__PURE__*/React.createElement(core.ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"
@@ -14961,11 +15015,18 @@ const ChatHeader = _ref => {
     size: 20
   }))), /*#__PURE__*/React.createElement(core.Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
+    },
+    display: {
+      base: "none",
+      md: "block"
     }
   }, /*#__PURE__*/React.createElement(core.ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"
@@ -14974,11 +15035,14 @@ const ChatHeader = _ref => {
     size: 20
   }))), /*#__PURE__*/React.createElement(core.Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
     }
   }, /*#__PURE__*/React.createElement(core.ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"

package/build/index.cjs.js/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BFlcM32-.js');
+var index = require('./index-DbCa8uwP.js');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/defineProperty');
 require('@mantine/modals');

package/build/index.esm.js/{heatmap-CWUcaLIf.js → heatmap-OFHx8ymB.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './index-DktlPeMy.js';
+import { g as getDefaultExportFromCjs } from './index-CrB5gMd3.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/build/index.esm.js/{index-DktlPeMy.js → index-CrB5gMd3.js}

@@ -12148,7 +12148,7 @@ function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t
   }
 
   // Fallback: use dynamic import (async, but will work in Vite/Storybook)
-  import('./heatmap-CWUcaLIf.js').then(function (n) { return n.h; }).then(heatmapModule => {
+  import('./heatmap-OFHx8ymB.js').then(function (n) { return n.h; }).then(heatmapModule => {
     const moduleFn = typeof heatmapModule === "function" ? heatmapModule : (heatmapModule === null || heatmapModule === void 0 ? void 0 : heatmapModule.default) || heatmapModule;
     if (typeof moduleFn === "function") {
       moduleFn(Highcharts);
@@ -14104,15 +14104,26 @@ const File = _ref => {
     p: isChip ? "xs" : undefined
   }, /*#__PURE__*/React__default.createElement(Group, {
     justify: isChip ? "space-between" : undefined,
-    gap: "xs"
+    gap: "xs",
+    wrap: "nowrap",
+    w: "100%"
   }, /*#__PURE__*/React__default.createElement(Image, {
     p: isChip ? undefined : "xs",
     pr: 2,
     h: isChip ? CHIP_HEIGHT : TILE_HEIGHT,
     w: isChip ? CHIP_WIDTH : TILE_WIDTH,
     alt: shape,
-    fallbackSrc: ICON[type]
-  }), rest.children, /*#__PURE__*/React__default.createElement(Space, {
+    fallbackSrc: ICON[type],
+    style: {
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    style: {
+      minWidth: 0,
+      overflow: "hidden",
+      flex: "1 1 auto"
+    }
+  }, rest.children), /*#__PURE__*/React__default.createElement(Space, {
     flex: 1
   }), rightsection ? /*#__PURE__*/React__default.createElement(ActionIcon, {
     variant: "transparent",
@@ -14793,8 +14804,7 @@ const ChatBubble = _ref => {
     style: {
       backgroundColor: bubbleBg,
       borderRadius: borderRadius,
-      position: "relative",
-      minWidth: 400 // Ensure enough width for layout
+      position: "relative"
     }
   }, senderName && !isOutgoing && /*#__PURE__*/React__default.createElement(Text, {
     size: "sm",
@@ -14808,7 +14818,10 @@ const ChatBubble = _ref => {
     variant: "chip",
     type: (_attachment$type = attachment.type) !== null && _attachment$type !== void 0 ? _attachment$type : "pdf",
     bg: "white",
-    w: "100%",
+    w: {
+      base: 200,
+      md: 250
+    },
     bd: "1px solid #E2E8F0",
     rightsection: {
       icon: {
@@ -14821,7 +14834,10 @@ const ChatBubble = _ref => {
     mb: 4
   }, /*#__PURE__*/React__default.createElement(Stack, {
     gap: 0,
-    ml: "xs"
+    ml: "xs",
+    style: {
+      minWidth: 0
+    }
   }, /*#__PURE__*/React__default.createElement(Text, {
     size: "sm",
     fw: 500,
@@ -14870,17 +14886,29 @@ const ChatHeader = _ref => {
     } = _ref,
     others = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
-    py: "md",
-    px: "lg",
+    py: {
+      base: "sm",
+      md: "md"
+    },
+    px: {
+      base: "sm",
+      md: "lg"
+    },
     style: _objectSpread$4({
       borderBottom: "1px solid #E2E8F0",
       backgroundColor: "white"
     }, style),
     className: className
   }, others), /*#__PURE__*/React__default.createElement(Group, {
-    justify: "space-between"
+    justify: "space-between",
+    wrap: "nowrap"
   }, /*#__PURE__*/React__default.createElement(Group, {
-    gap: 8
+    gap: 8,
+    wrap: "nowrap",
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
   }, onBack && /*#__PURE__*/React__default.createElement(ActionIcon, {
     variant: "subtle",
     color: "gray",
@@ -14893,32 +14921,51 @@ const ChatHeader = _ref => {
     size: 20
   })), /*#__PURE__*/React__default.createElement(Avatar, {
     src: avatar,
-    size: 50,
+    w: {
+      base: 40,
+      md: 50
+    },
+    h: {
+      base: 40,
+      md: 50
+    },
     radius: "xl",
     style: {
-      border: "1px solid #CFD1D8"
+      border: "1px solid #CFD1D8",
+      flexShrink: 0
     }
   }), /*#__PURE__*/React__default.createElement(Stack, {
-    gap: 0
+    gap: 0,
+    style: {
+      overflow: "hidden",
+      minWidth: 0,
+      flex: 1
+    }
   }, /*#__PURE__*/React__default.createElement(Text, {
     size: "15px",
     fw: 400,
     lh: "24px",
-    c: "dark.9"
+    c: "dark.9",
+    truncate: "end"
   }, name), status && /*#__PURE__*/React__default.createElement(Text, {
     fw: 300,
     size: "sm",
     fs: "italic",
-    c: "#575E77"
+    c: "#575E77",
+    truncate: "end"
   }, status))), /*#__PURE__*/React__default.createElement(Group, {
-    gap: 0
+    gap: 0,
+    wrap: "nowrap"
   }, /*#__PURE__*/React__default.createElement(Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
     }
   }, /*#__PURE__*/React__default.createElement(ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"
@@ -14927,11 +14974,18 @@ const ChatHeader = _ref => {
     size: 20
   }))), /*#__PURE__*/React__default.createElement(Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
+    },
+    display: {
+      base: "none",
+      md: "block"
     }
   }, /*#__PURE__*/React__default.createElement(ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"
@@ -14940,11 +14994,18 @@ const ChatHeader = _ref => {
     size: 20
   }))), /*#__PURE__*/React__default.createElement(Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
+    },
+    display: {
+      base: "none",
+      md: "block"
     }
   }, /*#__PURE__*/React__default.createElement(ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"
@@ -14953,11 +15014,14 @@ const ChatHeader = _ref => {
     size: 20
   }))), /*#__PURE__*/React__default.createElement(Box, {
     style: {
-      borderLeft: "1px solid #ECEDEF",
-      paddingInline: "8px"
+      borderLeft: "1px solid #ECEDEF"
+    },
+    px: {
+      base: 4,
+      md: 8
     }
   }, /*#__PURE__*/React__default.createElement(ActionIcon, {
-    variant: "subtle",
+    variant: "transparent",
     color: "gray",
     size: "lg",
     radius: "xl"

package/build/index.esm.js/index.js

@@ -1,4 +1,4 @@
-export { A as ApplicationMenu, p as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, Q as ChatBubble, R as ChatHeader, O as ChatListCard, o as ConnectionPanel, u as CreditCard, a5 as DEFAULT_API_TIMEOUT, a3 as DEFAULT_PAGE_SIZE, v as DetailCard, D as DonutChart, W as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, G as ErrorModal, F as File, d as Icons, r as InfoGrid, H as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, V as LoadingModal, a4 as MAX_PAGE_SIZE, Y as MaskedTilePanel, _ as MerchantCard, a8 as ModalContentWrapper, M as MultiAxisArea, m as PageTitle, w as PaymentMethod, x as PaymentMethodAdd, P as PieChart, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, X as SimpleForm, J as SimpleModal, i as SimplePanel, y as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, t as StatusAlert, q as SubscriptionPlans, K as SuccessModal, $ as TableStateView, Z as TilePanel, n as TitleWithIndex, T as TitledPanel, N as TwoFactorModal, U as UserMenu, s as UserProfileCard, a7 as apiClient, a6 as createApiClient, aa as extractBetweenBraces, ab as extractOutsideBraces, z as theme, a1 as useManagedModals, a0 as useModal, a2 as useUrlFilters, a9 as withProviders } from './index-DktlPeMy.js';
+export { A as ApplicationMenu, p as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, Q as ChatBubble, R as ChatHeader, O as ChatListCard, o as ConnectionPanel, u as CreditCard, a5 as DEFAULT_API_TIMEOUT, a3 as DEFAULT_PAGE_SIZE, v as DetailCard, D as DonutChart, W as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, G as ErrorModal, F as File, d as Icons, r as InfoGrid, H as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, V as LoadingModal, a4 as MAX_PAGE_SIZE, Y as MaskedTilePanel, _ as MerchantCard, a8 as ModalContentWrapper, M as MultiAxisArea, m as PageTitle, w as PaymentMethod, x as PaymentMethodAdd, P as PieChart, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, X as SimpleForm, J as SimpleModal, i as SimplePanel, y as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, t as StatusAlert, q as SubscriptionPlans, K as SuccessModal, $ as TableStateView, Z as TilePanel, n as TitleWithIndex, T as TitledPanel, N as TwoFactorModal, U as UserMenu, s as UserProfileCard, a7 as apiClient, a6 as createApiClient, aa as extractBetweenBraces, ab as extractOutsideBraces, z as theme, a1 as useManagedModals, a0 as useModal, a2 as useUrlFilters, a9 as withProviders } from './index-CrB5gMd3.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/defineProperty';
 import '@mantine/modals';

package/build/typings/components/widgets/chat/Chat.stories.d.ts

@@ -4,7 +4,10 @@ export default _default;
 export declare const GroupChat: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chat.types").ChatListCardProps>;
 export declare const ConversationItem: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chat.types").ChatListCardProps>;
 export declare const ConversationItemActive: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chat.types").ChatListCardProps>;
-export declare const MessageIncoming: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chat.types").ChatBubbleProps>;
-export declare const MessageOutgoing: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chat.types").ChatBubbleProps>;
-export declare const MessageAttachment: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Chat.types").ChatBubbleProps>;
+export declare const MessageIncoming: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const MessageOutgoing: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const MessageAttachment: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const MobileMessageAttachment: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const DesktopHeader: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
+export declare const MobileHeader: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
 export declare const FullChatLayout: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",