@adiba-banking-cloud/backoffice 0.2.46 → 0.2.48

package/build/index.cjs.js/{heatmap-Bmxx46pe.js → heatmap-Bbht91RM.js}

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

package/build/index.cjs.js/{index-gNtaTjX5.js → index-BG5W0VWJ.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-Bmxx46pe.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
+  Promise.resolve().then(function () { return require('./heatmap-Bbht91RM.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);
@@ -13009,6 +13009,29 @@ const SideMenu = _ref => {
   }));
 };
 
+const BackofficeContext = /*#__PURE__*/React.createContext(undefined);
+const defaultT = key => key;
+const BackofficeProvider = _ref => {
+  let {
+    children,
+    config
+  } = _ref;
+  const value = {
+    t: (config === null || config === void 0 ? void 0 : config.t) || defaultT,
+    locale: (config === null || config === void 0 ? void 0 : config.locale) || "en"
+  };
+  return /*#__PURE__*/React.createElement(BackofficeContext.Provider, {
+    value: value
+  }, children);
+};
+const useBackoffice = () => {
+  const context = React.useContext(BackofficeContext);
+  return context || {
+    t: defaultT,
+    locale: "en"
+  };
+};
+
 const _excluded$d = ["withPadding", "withRadius", "autoHeight", "children"],
   _excluded2$1 = ["withPadding", "title", "children"],
   _excluded3 = ["placeholder", "searchIcon", "filterIcon", "searchText", "searchState", "searchInputValue", "filterFn", "searchFn", "onPillRemove", "children"];
@@ -13066,14 +13089,14 @@ const TitledPanel = _ref2 => {
 };
 const SearchPanel = _ref3 => {
   let {
-      placeholder = "Search by name or reference",
+      placeholder,
       searchIcon = {
         name: "SearchNormal1"
       },
       filterIcon = {
         name: "Setting5"
       },
-      searchText = "Search",
+      searchText,
       searchState,
       searchInputValue,
       filterFn,
@@ -13082,6 +13105,11 @@ const SearchPanel = _ref3 => {
       children
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded3);
+  const {
+    t
+  } = useBackoffice();
+  const finalPlaceholder = placeholder || t("lib_search_placeholder");
+  const finalSearchText = searchText || t("lib_search_button");
   const [searchPills] = searchState || React.useState([]);
   const [inputValue, setInputValue] = React.useState(searchInputValue || "");
   const form$1 = form.useForm({
@@ -13142,7 +13170,7 @@ const SearchPanel = _ref3 => {
     withRemoveButton: true,
     onRemove: () => handleRemovePill(pill)
   }, pill)), /*#__PURE__*/React.createElement(core.PillsInput.Field, {
-    placeholder: placeholder,
+    placeholder: finalPlaceholder,
     value: inputValue,
     onChange: e => {
       setInputValue(e.currentTarget.value);
@@ -13158,7 +13186,7 @@ const SearchPanel = _ref3 => {
     maw: 150,
     type: "submit",
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon)
-  }, searchText))), children));
+  }, finalSearchText))), children));
 };
 
 const LabelPanelItem = _ref => {
@@ -13701,10 +13729,15 @@ const SubscriptionPlans = _ref => {
     altColor = "altiba.3",
     durationDays,
     planPrice,
-    buttonLabel = "Pay Early",
-    altButtonLabel = "Pay Now",
+    buttonLabel,
+    altButtonLabel,
     onClick
   } = _ref;
+  const {
+    t
+  } = useBackoffice();
+  const finalButtonLabel = buttonLabel || (durationDays > 0 ? t("lib_pay_early") : t("lib_pay_now"));
+  const finalAltButtonLabel = altButtonLabel || t("lib_pay_now");
   const price = planPrice.split("/");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(core.Indicator, {
     size: 20,
@@ -13732,20 +13765,20 @@ const SubscriptionPlans = _ref => {
     fz: "xs",
     c: altColor,
     fw: 300
-  }, durationDays, " ", isActive ? " days remaining" : " days")), /*#__PURE__*/React.createElement(core.Text, {
+  }, durationDays, " ", isActive ? t("lib_days_remaining") : t("lib_days"))), /*#__PURE__*/React.createElement(core.Text, {
     fz: "sm",
     fw: 500
   }, price[0], /*#__PURE__*/React.createElement(core.Text, {
     fz: "sm",
     component: "span",
     c: "dimmed"
-  }, price[1] ? "/".concat(price[1]) : " /month"))), /*#__PURE__*/React.createElement(core.Button, {
+  }, price[1] ? "/".concat(price[1]) : " /".concat(t("lib_month_short"))))), /*#__PURE__*/React.createElement(core.Button, {
     w: 100,
     size: "xs",
     fw: 500,
     onClick: onClick,
     variant: isActive ? "outline" : "filled"
-  }, durationDays > 0 ? buttonLabel : altButtonLabel)))));
+  }, durationDays > 0 ? finalButtonLabel : finalAltButtonLabel)))));
 };
 
 const InfoGrid = _ref => {
@@ -13794,6 +13827,9 @@ const UserProfileCard = _ref => {
     score,
     scoreColor = "green"
   } = _ref;
+  const {
+    t
+  } = useBackoffice();
   return /*#__PURE__*/React.createElement(core.Card, {
     p: "0",
     radius: "md",
@@ -13848,7 +13884,7 @@ const UserProfileCard = _ref => {
     size: "12px",
     c: "#5B6767",
     fw: 300
-  }, "ID: ", userId))));
+  }, t("lib_user_id_label"), ": ", userId))));
 };
 
 const VARIANT_CONFIG = {
@@ -14291,7 +14327,7 @@ const DetailCard = _ref => {
         }, /*#__PURE__*/React.createElement(core.Text, {
           fw: 300,
           size: "sm",
-          c: "#0F193D"
+          c: "adiba.6"
         }, item.label), /*#__PURE__*/React.createElement(core.Text, {
           fw: 300,
           size: "12px",
@@ -14502,6 +14538,10 @@ const SimpleTable = _ref => {
     isStriped,
     stickyAction
   } = _ref;
+  const {
+    t
+  } = useBackoffice();
+
   // Memoize the final columns array to avoid mutations on every render
   const finalColumns = React.useMemo(() => {
     // Create a new array to avoid mutating the original
@@ -14509,7 +14549,7 @@ const SimpleTable = _ref => {
     const indexColumn = {
       order: -99,
       id: "index",
-      label: "Id"
+      label: t("lib_table_id")
     };
     const actionColumn = {
       order: 99999,
@@ -14797,10 +14837,10 @@ const ChatListCard = _ref => {
   }, isGroup && senderName ? /*#__PURE__*/React.createElement(core.Text, {
     span: true,
     fw: 300,
-    c: "#0F193D"
+    c: "adiba.6"
   }, senderName, ":", " ") : null, message), unreadCount > 0 && /*#__PURE__*/React.createElement(core.Box, {
+    bg: "adiba.6",
     style: {
-      backgroundColor: "#0F193D",
       color: "white",
       borderRadius: "50%",
       minWidth: 18,
@@ -15147,7 +15187,7 @@ const Drawer = _ref => {
   }, page))));
 };
 
-const _excluded$2 = ["fields", "isEditable", "layout", "hasSubmit", "hasReset", "buttonSize", "submitButtonIcon", "cancelButtonIcon", "submitButtonLabel", "cancelButtonLabel"];
+const _excluded$2 = ["fields", "isEditable", "layout", "hasSubmit", "hasReset", "buttonSize", "submitButtonIcon", "cancelButtonIcon"];
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const SimpleForm = _ref => {
@@ -15159,17 +15199,36 @@ const SimpleForm = _ref => {
       hasReset,
       buttonSize = "lg",
       submitButtonIcon = true,
-      cancelButtonIcon = true,
-      submitButtonLabel = "Save",
-      cancelButtonLabel = "Cancel"
+      cancelButtonIcon = true
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$2);
+  const {
+    t
+  } = useBackoffice();
+  const submitButtonLabel = rest.submitButtonLabel || t("lib_save");
+  const cancelButtonLabel = rest.cancelButtonLabel || t("lib_cancel");
   const components = {
     Textarea: core.Textarea,
     TextInput: core.TextInput,
     PasswordInput: core.PasswordInput,
     NumberInput: core.NumberInput
   };
+  const santize = field => {
+    var _ref2, _field$label, _field$placeholder, _field$name, _field$name2, _field$name$split$joi, _field$name3;
+    if (typeof field === "string") {
+      const name = field === null || field === void 0 ? void 0 : field.split(" ").join("_").toLowerCase();
+      return {
+        label: field,
+        placeholder: t("lib_placeholder_enter") !== "lib_placeholder_enter" ? "".concat(t("lib_placeholder_enter"), " ").concat(field.toLowerCase()) : "Please enter ".concat(field.toLowerCase()),
+        name
+      };
+    }
+    return {
+      label: "".concat((_ref2 = (_field$label = field === null || field === void 0 ? void 0 : field.label) !== null && _field$label !== void 0 ? _field$label : field === null || field === void 0 ? void 0 : field.name) !== null && _ref2 !== void 0 ? _ref2 : ""),
+      placeholder: (_field$placeholder = field.placeholder) !== null && _field$placeholder !== void 0 ? _field$placeholder : t("lib_placeholder_enter") !== "lib_placeholder_enter" ? "".concat(t("lib_placeholder_enter"), " ").concat((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.toLowerCase()) : "Please enter ".concat((_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.toLowerCase()),
+      name: (_field$name$split$joi = (_field$name3 = field.name) === null || _field$name3 === void 0 ? void 0 : _field$name3.split(" ").join("_").toLowerCase()) !== null && _field$name$split$joi !== void 0 ? _field$name$split$joi : ""
+    };
+  };
   const form$1 = form.useForm({
     mode: "uncontrolled",
     initialValues: () => {
@@ -15253,22 +15312,6 @@ const SimpleForm = _ref => {
     cancelButtonIcon
   })));
 };
-const santize = field => {
-  var _ref2, _field$label, _field$placeholder, _field$name, _field$name$split$joi, _field$name2;
-  if (typeof field === "string") {
-    const name = field === null || field === void 0 ? void 0 : field.split(" ").join("_").toLowerCase();
-    return {
-      label: field,
-      placeholder: "Please enter ".concat(field.toLowerCase()),
-      name
-    };
-  }
-  return {
-    label: "".concat((_ref2 = (_field$label = field === null || field === void 0 ? void 0 : field.label) !== null && _field$label !== void 0 ? _field$label : field === null || field === void 0 ? void 0 : field.name) !== null && _ref2 !== void 0 ? _ref2 : ""),
-    placeholder: (_field$placeholder = field.placeholder) !== null && _field$placeholder !== void 0 ? _field$placeholder : "Please enter ".concat((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.toLowerCase()),
-    name: (_field$name$split$joi = (_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.split(" ").join("_").toLowerCase()) !== null && _field$name$split$joi !== void 0 ? _field$name$split$joi : ""
-  };
-};
 const FormButtons = _ref3 => {
   let {
     hasSubmit = false,
@@ -15472,18 +15515,18 @@ const MerchantCard = _ref => {
   }, /*#__PURE__*/React.createElement(core.Text, {
     fw: 400,
     size: "lg",
-    c: "dark.9"
+    c: "adiba.9"
   }, name), /*#__PURE__*/React.createElement(core.Badge, {
     variant: "light",
     color: "gray",
     radius: "sm",
     size: "lg",
+    c: "adiba.6",
     styles: {
       root: {
         textTransform: "none",
         fontWeight: 400,
         backgroundColor: "#F2F4F4",
-        color: "#0F193D",
         height: "auto",
         padding: "5px 7px"
       }
@@ -15513,7 +15556,7 @@ const MerchantCard = _ref => {
     size: 24,
     color: "#1C1C1C"
   })) : /*#__PURE__*/React.createElement(core.ActionIcon, {
-    bg: "#0F193D",
+    bg: "adiba.6",
     w: 32,
     h: 32,
     radius: "100%",
@@ -16140,6 +16183,7 @@ function withProviders(Component) {
       locale: "en",
       timezone: "UTC"
     },
+    backofficeConfig = {},
     cssVariablesSelector
   } = options;
   const WrappedComponent = props => {
@@ -16152,7 +16196,9 @@ function withProviders(Component) {
       cssVariablesSelector: cssVariablesSelector
     }, /*#__PURE__*/React__namespace.createElement(dates.DatesProvider, {
       settings: datesSettings
-    }, /*#__PURE__*/React__namespace.createElement(Component, props), showDevtools && /*#__PURE__*/React__namespace.createElement(reactQueryDevtools.ReactQueryDevtools, null))));
+    }, /*#__PURE__*/React__namespace.createElement(BackofficeProvider, {
+      config: backofficeConfig
+    }, /*#__PURE__*/React__namespace.createElement(Component, props), showDevtools && /*#__PURE__*/React__namespace.createElement(reactQueryDevtools.ReactQueryDevtools, null)))));
   };
   WrappedComponent.displayName = "withProviders(".concat(Component.displayName || Component.name || "Component", ")");
   return WrappedComponent;
@@ -16194,6 +16240,7 @@ const extractOutsideBraces = StringHelpers.extractOutsideBraces;
 exports.ApplicationMenu = ApplicationMenu;
 exports.ApplicationPanel = ApplicationPanel;
 exports.AvatarLabelPanel = AvatarLabelPanel;
+exports.BackofficeProvider = BackofficeProvider;
 exports.BasicHeatmap = BasicHeatmap;
 exports.CalendarHeatmap = CalendarHeatmap;
 exports.ChatBubble = ChatBubble;
@@ -16253,6 +16300,7 @@ exports.extractBetweenBraces = extractBetweenBraces;
 exports.extractOutsideBraces = extractOutsideBraces;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.theme = theme;
+exports.useBackoffice = useBackoffice;
 exports.useManagedModals = useManagedModals;
 exports.useModal = useModal;
 exports.useUrlFilters = useUrlFilters;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-gNtaTjX5.js');
+var index = require('./index-BG5W0VWJ.js');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/defineProperty');
 require('@mantine/modals');
@@ -33,6 +33,7 @@ require('@tanstack/react-query-devtools');
 exports.ApplicationMenu = index.ApplicationMenu;
 exports.ApplicationPanel = index.ApplicationPanel;
 exports.AvatarLabelPanel = index.AvatarLabelPanel;
+exports.BackofficeProvider = index.BackofficeProvider;
 exports.BasicHeatmap = index.BasicHeatmap;
 exports.CalendarHeatmap = index.CalendarHeatmap;
 exports.ChatBubble = index.ChatBubble;
@@ -91,6 +92,7 @@ exports.createApiClient = index.createApiClient;
 exports.extractBetweenBraces = index.extractBetweenBraces;
 exports.extractOutsideBraces = index.extractOutsideBraces;
 exports.theme = index.theme;
+exports.useBackoffice = index.useBackoffice;
 exports.useManagedModals = index.useManagedModals;
 exports.useModal = index.useModal;
 exports.useUrlFilters = index.useUrlFilters;

package/build/index.esm.js/{heatmap-c0t80nIF.js → heatmap-DozjC6lm.js}

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

package/build/index.esm.js/{index-BqP3cjXR.js → index-BEhZTDj7.js}

@@ -2,7 +2,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { modals } from '@mantine/modals';
 import * as React from 'react';
-import React__default, { useRef, useMemo, useEffect, useState } from 'react';
+import React__default, { useRef, useMemo, useEffect, createContext, useContext, useState } from 'react';
 import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, PillsInput, ActionIcon, Pill, Box, Title, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, AspectRatio, Overlay, rem, SimpleGrid, Indicator, Table, ScrollArea, createTheme, PinInput, UnstyledButton, Drawer as Drawer$1, NumberInput, PasswordInput, TextInput, Textarea, Grid, ThemeIcon, MantineProvider } from '@mantine/core';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import _extends from '@babel/runtime/helpers/extends';
@@ -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-c0t80nIF.js').then(function (n) { return n.h; }).then(heatmapModule => {
+  import('./heatmap-DozjC6lm.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);
@@ -12988,6 +12988,29 @@ const SideMenu = _ref => {
   }));
 };
 
+const BackofficeContext = /*#__PURE__*/createContext(undefined);
+const defaultT = key => key;
+const BackofficeProvider = _ref => {
+  let {
+    children,
+    config
+  } = _ref;
+  const value = {
+    t: (config === null || config === void 0 ? void 0 : config.t) || defaultT,
+    locale: (config === null || config === void 0 ? void 0 : config.locale) || "en"
+  };
+  return /*#__PURE__*/React__default.createElement(BackofficeContext.Provider, {
+    value: value
+  }, children);
+};
+const useBackoffice = () => {
+  const context = useContext(BackofficeContext);
+  return context || {
+    t: defaultT,
+    locale: "en"
+  };
+};
+
 const _excluded$d = ["withPadding", "withRadius", "autoHeight", "children"],
   _excluded2$1 = ["withPadding", "title", "children"],
   _excluded3 = ["placeholder", "searchIcon", "filterIcon", "searchText", "searchState", "searchInputValue", "filterFn", "searchFn", "onPillRemove", "children"];
@@ -13045,14 +13068,14 @@ const TitledPanel = _ref2 => {
 };
 const SearchPanel = _ref3 => {
   let {
-      placeholder = "Search by name or reference",
+      placeholder,
       searchIcon = {
         name: "SearchNormal1"
       },
       filterIcon = {
         name: "Setting5"
       },
-      searchText = "Search",
+      searchText,
       searchState,
       searchInputValue,
       filterFn,
@@ -13061,6 +13084,11 @@ const SearchPanel = _ref3 => {
       children
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded3);
+  const {
+    t
+  } = useBackoffice();
+  const finalPlaceholder = placeholder || t("lib_search_placeholder");
+  const finalSearchText = searchText || t("lib_search_button");
   const [searchPills] = searchState || useState([]);
   const [inputValue, setInputValue] = useState(searchInputValue || "");
   const form = useForm({
@@ -13121,7 +13149,7 @@ const SearchPanel = _ref3 => {
     withRemoveButton: true,
     onRemove: () => handleRemovePill(pill)
   }, pill)), /*#__PURE__*/React__default.createElement(PillsInput.Field, {
-    placeholder: placeholder,
+    placeholder: finalPlaceholder,
     value: inputValue,
     onChange: e => {
       setInputValue(e.currentTarget.value);
@@ -13137,7 +13165,7 @@ const SearchPanel = _ref3 => {
     maw: 150,
     type: "submit",
     leftSection: /*#__PURE__*/React__default.createElement(Icons, searchIcon)
-  }, searchText))), children));
+  }, finalSearchText))), children));
 };
 
 const LabelPanelItem = _ref => {
@@ -13680,10 +13708,15 @@ const SubscriptionPlans = _ref => {
     altColor = "altiba.3",
     durationDays,
     planPrice,
-    buttonLabel = "Pay Early",
-    altButtonLabel = "Pay Now",
+    buttonLabel,
+    altButtonLabel,
     onClick
   } = _ref;
+  const {
+    t
+  } = useBackoffice();
+  const finalButtonLabel = buttonLabel || (durationDays > 0 ? t("lib_pay_early") : t("lib_pay_now"));
+  const finalAltButtonLabel = altButtonLabel || t("lib_pay_now");
   const price = planPrice.split("/");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Indicator, {
     size: 20,
@@ -13711,20 +13744,20 @@ const SubscriptionPlans = _ref => {
     fz: "xs",
     c: altColor,
     fw: 300
-  }, durationDays, " ", isActive ? " days remaining" : " days")), /*#__PURE__*/React__default.createElement(Text, {
+  }, durationDays, " ", isActive ? t("lib_days_remaining") : t("lib_days"))), /*#__PURE__*/React__default.createElement(Text, {
     fz: "sm",
     fw: 500
   }, price[0], /*#__PURE__*/React__default.createElement(Text, {
     fz: "sm",
     component: "span",
     c: "dimmed"
-  }, price[1] ? "/".concat(price[1]) : " /month"))), /*#__PURE__*/React__default.createElement(Button, {
+  }, price[1] ? "/".concat(price[1]) : " /".concat(t("lib_month_short"))))), /*#__PURE__*/React__default.createElement(Button, {
     w: 100,
     size: "xs",
     fw: 500,
     onClick: onClick,
     variant: isActive ? "outline" : "filled"
-  }, durationDays > 0 ? buttonLabel : altButtonLabel)))));
+  }, durationDays > 0 ? finalButtonLabel : finalAltButtonLabel)))));
 };
 
 const InfoGrid = _ref => {
@@ -13773,6 +13806,9 @@ const UserProfileCard = _ref => {
     score,
     scoreColor = "green"
   } = _ref;
+  const {
+    t
+  } = useBackoffice();
   return /*#__PURE__*/React__default.createElement(Card, {
     p: "0",
     radius: "md",
@@ -13827,7 +13863,7 @@ const UserProfileCard = _ref => {
     size: "12px",
     c: "#5B6767",
     fw: 300
-  }, "ID: ", userId))));
+  }, t("lib_user_id_label"), ": ", userId))));
 };
 
 const VARIANT_CONFIG = {
@@ -14270,7 +14306,7 @@ const DetailCard = _ref => {
         }, /*#__PURE__*/React__default.createElement(Text, {
           fw: 300,
           size: "sm",
-          c: "#0F193D"
+          c: "adiba.6"
         }, item.label), /*#__PURE__*/React__default.createElement(Text, {
           fw: 300,
           size: "12px",
@@ -14481,6 +14517,10 @@ const SimpleTable = _ref => {
     isStriped,
     stickyAction
   } = _ref;
+  const {
+    t
+  } = useBackoffice();
+
   // Memoize the final columns array to avoid mutations on every render
   const finalColumns = useMemo(() => {
     // Create a new array to avoid mutating the original
@@ -14488,7 +14528,7 @@ const SimpleTable = _ref => {
     const indexColumn = {
       order: -99,
       id: "index",
-      label: "Id"
+      label: t("lib_table_id")
     };
     const actionColumn = {
       order: 99999,
@@ -14776,10 +14816,10 @@ const ChatListCard = _ref => {
   }, isGroup && senderName ? /*#__PURE__*/React__default.createElement(Text, {
     span: true,
     fw: 300,
-    c: "#0F193D"
+    c: "adiba.6"
   }, senderName, ":", " ") : null, message), unreadCount > 0 && /*#__PURE__*/React__default.createElement(Box, {
+    bg: "adiba.6",
     style: {
-      backgroundColor: "#0F193D",
       color: "white",
       borderRadius: "50%",
       minWidth: 18,
@@ -15126,7 +15166,7 @@ const Drawer = _ref => {
   }, page))));
 };
 
-const _excluded$2 = ["fields", "isEditable", "layout", "hasSubmit", "hasReset", "buttonSize", "submitButtonIcon", "cancelButtonIcon", "submitButtonLabel", "cancelButtonLabel"];
+const _excluded$2 = ["fields", "isEditable", "layout", "hasSubmit", "hasReset", "buttonSize", "submitButtonIcon", "cancelButtonIcon"];
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const SimpleForm = _ref => {
@@ -15138,17 +15178,36 @@ const SimpleForm = _ref => {
       hasReset,
       buttonSize = "lg",
       submitButtonIcon = true,
-      cancelButtonIcon = true,
-      submitButtonLabel = "Save",
-      cancelButtonLabel = "Cancel"
+      cancelButtonIcon = true
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$2);
+  const {
+    t
+  } = useBackoffice();
+  const submitButtonLabel = rest.submitButtonLabel || t("lib_save");
+  const cancelButtonLabel = rest.cancelButtonLabel || t("lib_cancel");
   const components = {
     Textarea: Textarea,
     TextInput: TextInput,
     PasswordInput: PasswordInput,
     NumberInput: NumberInput
   };
+  const santize = field => {
+    var _ref2, _field$label, _field$placeholder, _field$name, _field$name2, _field$name$split$joi, _field$name3;
+    if (typeof field === "string") {
+      const name = field === null || field === void 0 ? void 0 : field.split(" ").join("_").toLowerCase();
+      return {
+        label: field,
+        placeholder: t("lib_placeholder_enter") !== "lib_placeholder_enter" ? "".concat(t("lib_placeholder_enter"), " ").concat(field.toLowerCase()) : "Please enter ".concat(field.toLowerCase()),
+        name
+      };
+    }
+    return {
+      label: "".concat((_ref2 = (_field$label = field === null || field === void 0 ? void 0 : field.label) !== null && _field$label !== void 0 ? _field$label : field === null || field === void 0 ? void 0 : field.name) !== null && _ref2 !== void 0 ? _ref2 : ""),
+      placeholder: (_field$placeholder = field.placeholder) !== null && _field$placeholder !== void 0 ? _field$placeholder : t("lib_placeholder_enter") !== "lib_placeholder_enter" ? "".concat(t("lib_placeholder_enter"), " ").concat((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.toLowerCase()) : "Please enter ".concat((_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.toLowerCase()),
+      name: (_field$name$split$joi = (_field$name3 = field.name) === null || _field$name3 === void 0 ? void 0 : _field$name3.split(" ").join("_").toLowerCase()) !== null && _field$name$split$joi !== void 0 ? _field$name$split$joi : ""
+    };
+  };
   const form = useForm({
     mode: "uncontrolled",
     initialValues: () => {
@@ -15232,22 +15291,6 @@ const SimpleForm = _ref => {
     cancelButtonIcon
   })));
 };
-const santize = field => {
-  var _ref2, _field$label, _field$placeholder, _field$name, _field$name$split$joi, _field$name2;
-  if (typeof field === "string") {
-    const name = field === null || field === void 0 ? void 0 : field.split(" ").join("_").toLowerCase();
-    return {
-      label: field,
-      placeholder: "Please enter ".concat(field.toLowerCase()),
-      name
-    };
-  }
-  return {
-    label: "".concat((_ref2 = (_field$label = field === null || field === void 0 ? void 0 : field.label) !== null && _field$label !== void 0 ? _field$label : field === null || field === void 0 ? void 0 : field.name) !== null && _ref2 !== void 0 ? _ref2 : ""),
-    placeholder: (_field$placeholder = field.placeholder) !== null && _field$placeholder !== void 0 ? _field$placeholder : "Please enter ".concat((_field$name = field.name) === null || _field$name === void 0 ? void 0 : _field$name.toLowerCase()),
-    name: (_field$name$split$joi = (_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.split(" ").join("_").toLowerCase()) !== null && _field$name$split$joi !== void 0 ? _field$name$split$joi : ""
-  };
-};
 const FormButtons = _ref3 => {
   let {
     hasSubmit = false,
@@ -15451,18 +15494,18 @@ const MerchantCard = _ref => {
   }, /*#__PURE__*/React__default.createElement(Text, {
     fw: 400,
     size: "lg",
-    c: "dark.9"
+    c: "adiba.9"
   }, name), /*#__PURE__*/React__default.createElement(Badge, {
     variant: "light",
     color: "gray",
     radius: "sm",
     size: "lg",
+    c: "adiba.6",
     styles: {
       root: {
         textTransform: "none",
         fontWeight: 400,
         backgroundColor: "#F2F4F4",
-        color: "#0F193D",
         height: "auto",
         padding: "5px 7px"
       }
@@ -15492,7 +15535,7 @@ const MerchantCard = _ref => {
     size: 24,
     color: "#1C1C1C"
   })) : /*#__PURE__*/React__default.createElement(ActionIcon, {
-    bg: "#0F193D",
+    bg: "adiba.6",
     w: 32,
     h: 32,
     radius: "100%",
@@ -16119,6 +16162,7 @@ function withProviders(Component) {
       locale: "en",
       timezone: "UTC"
     },
+    backofficeConfig = {},
     cssVariablesSelector
   } = options;
   const WrappedComponent = props => {
@@ -16131,7 +16175,9 @@ function withProviders(Component) {
       cssVariablesSelector: cssVariablesSelector
     }, /*#__PURE__*/React.createElement(DatesProvider, {
       settings: datesSettings
-    }, /*#__PURE__*/React.createElement(Component, props), showDevtools && /*#__PURE__*/React.createElement(ReactQueryDevtools, null))));
+    }, /*#__PURE__*/React.createElement(BackofficeProvider, {
+      config: backofficeConfig
+    }, /*#__PURE__*/React.createElement(Component, props), showDevtools && /*#__PURE__*/React.createElement(ReactQueryDevtools, null)))));
   };
   WrappedComponent.displayName = "withProviders(".concat(Component.displayName || Component.name || "Component", ")");
   return WrappedComponent;
@@ -16170,4 +16216,4 @@ const StringHelpers = {
 const extractBetweenBraces = StringHelpers.extractBetweenBraces;
 const extractOutsideBraces = StringHelpers.extractOutsideBraces;
 
-export { TableStateView as $, ApplicationMenu as A, BasicHeatmap as B, CalendarHeatmap as C, DonutChart as D, EqualizerColumn as E, File as F, ErrorModal as G, InfoModal as H, InterpolatedHeatmap as I, SimpleModal as J, SuccessModal as K, LabelPanel as L, MultiAxisArea as M, TwoFactorModal as N, ChatListCard as O, PieChart as P, ChatBubble as Q, ChatHeader as R, SimpleColumn as S, TitledPanel as T, UserMenu as U, LoadingModal as V, Drawer as W, SimpleForm as X, MaskedTilePanel as Y, TilePanel as Z, MerchantCard as _, StackedColumn as a, useModal as a0, useManagedModals as a1, useUrlFilters as a2, DEFAULT_PAGE_SIZE as a3, MAX_PAGE_SIZE as a4, DEFAULT_API_TIMEOUT as a5, createApiClient as a6, apiClient as a7, ModalContentWrapper as a8, withProviders as a9, extractBetweenBraces as aa, extractOutsideBraces as ab, SimpleArea as b, StackedArea as c, Icons as d, DynamicLogo as e, DynamicShigaLogo as f, getDefaultExportFromCjs as g, SideMenu as h, SimplePanel as i, SearchPanel as j, AvatarLabelPanel as k, SimpleText as l, PageTitle as m, TitleWithIndex as n, ConnectionPanel as o, ApplicationPanel as p, SubscriptionPlans as q, InfoGrid as r, UserProfileCard as s, StatusAlert as t, CreditCard as u, DetailCard as v, PaymentMethod as w, PaymentMethodAdd as x, SimpleTable as y, theme as z };
+export { TableStateView as $, ApplicationMenu as A, BasicHeatmap as B, CalendarHeatmap as C, DonutChart as D, EqualizerColumn as E, File as F, ErrorModal as G, InfoModal as H, InterpolatedHeatmap as I, SimpleModal as J, SuccessModal as K, LabelPanel as L, MultiAxisArea as M, TwoFactorModal as N, ChatListCard as O, PieChart as P, ChatBubble as Q, ChatHeader as R, SimpleColumn as S, TitledPanel as T, UserMenu as U, LoadingModal as V, Drawer as W, SimpleForm as X, MaskedTilePanel as Y, TilePanel as Z, MerchantCard as _, StackedColumn as a, useModal as a0, useManagedModals as a1, useUrlFilters as a2, DEFAULT_PAGE_SIZE as a3, MAX_PAGE_SIZE as a4, DEFAULT_API_TIMEOUT as a5, createApiClient as a6, apiClient as a7, ModalContentWrapper as a8, withProviders as a9, extractBetweenBraces as aa, extractOutsideBraces as ab, BackofficeProvider as ac, useBackoffice as ad, SimpleArea as b, StackedArea as c, Icons as d, DynamicLogo as e, DynamicShigaLogo as f, getDefaultExportFromCjs as g, SideMenu as h, SimplePanel as i, SearchPanel as j, AvatarLabelPanel as k, SimpleText as l, PageTitle as m, TitleWithIndex as n, ConnectionPanel as o, ApplicationPanel as p, SubscriptionPlans as q, InfoGrid as r, UserProfileCard as s, StatusAlert as t, CreditCard as u, DetailCard as v, PaymentMethod as w, PaymentMethodAdd as x, SimpleTable as y, theme as z };

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-BqP3cjXR.js';
+export { A as ApplicationMenu, p as ApplicationPanel, k as AvatarLabelPanel, ac as BackofficeProvider, 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, ad as useBackoffice, a1 as useManagedModals, a0 as useModal, a2 as useUrlFilters, a9 as withProviders } from './index-BEhZTDj7.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/defineProperty';
 import '@mantine/modals';

package/build/typings/index.d.ts

@@ -7,3 +7,4 @@ export * from "./shared/components";
 export * from "./shared/types";
 export * from "./shared/hocs";
 export * from "./shared/utils";
+export * from "./shared/providers/BackofficeProvider";

package/build/typings/shared/hocs/withProviders.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { theme } from "../../components/theme";
 import { QueryClient } from "@tanstack/react-query";
 import "@mantine/dates/styles.css";
+import { BackofficeContextProps } from "../providers/BackofficeProvider";
 export interface WithProvidersOptions {
     /**
      * Custom QueryClient instance (optional)
@@ -23,6 +24,10 @@ export interface WithProvidersOptions {
         locale: string;
         timezone: string;
     };
+    /**
+     * BackofficeProvider configuration (optional)
+     */
+    backofficeConfig?: Partial<BackofficeContextProps>;
     /**
      * Target CSS selector for Mantine variables
      * Helpful for micro-frontends (Pilets) to avoid overwriting the host App Shell CSS

package/build/typings/shared/providers/BackofficeProvider.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+export interface BackofficeContextProps {
+    /**
+     * Translation function to override hardcoded library strings.
+     * If not provided, it falls back to a simple key-returner.
+     */
+    t: (key: string, options?: Record<string, any>) => string;
+    /**
+     * Current locale (optional, useful for date/number formatting)
+     */
+    locale?: string;
+}
+export declare const BackofficeProvider: React.FC<{
+    children: ReactNode;
+    config?: Partial<BackofficeContextProps>;
+}>;
+export declare const useBackoffice: () => BackofficeContextProps;

package/package.json

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