@knovator/pagecreator-admin 0.9.5 → 1.0.0

package/index.cjs

@@ -1705,108 +1705,92 @@ const TRANSLATION_PAIRS_COMMON = {
   pleaseType: 'Please type',
   toProceedOrCancel: 'to processed or close this modal to cancel.',
   confirm: 'Confirm',
-  nextContent: 'Next',
-  previousContent: 'Previous',
-  page: 'Page',
   next: 'Next',
+  previous: 'Previous',
+  page: 'Page',
   indicatesRequired: 'Indicates fields are required',
-  addButtonText: 'Add',
-  cancelButtonText: 'Cancel',
-  yesButtonText: 'Yes',
-  deleteButtonText: 'Delete',
-  createButtonText: 'Create',
-  updateButtonText: 'Update',
+  cancel: 'Cancel',
+  yes: 'Yes',
+  delete: 'Delete',
+  create: 'Create',
+  update: 'Update',
   showing: 'Showing',
+  add: 'Add',
   of: 'of',
-  typeHerePlaceholder: 'Type Here'
+  typeHerePlaceholder: 'Type Here',
+  code: 'Code',
+  codePlaceholder: 'Enter code',
+  codeRequired: 'Code is required',
+  name: 'Name',
+  namePlaceholder: 'Enter name',
+  nameRequired: 'Name is required',
+  title: 'Title',
+  titlePlaceholder: 'Enter title',
+  titleRequired: 'Title is required',
+  active: 'Active',
+  actions: 'Actions'
 };
 const TRANSLATION_PAIRS_WIDGET = {
-  'widget.name': 'Name',
-  'widget.namePlaceholder': 'Enter name',
-  'widget.nameRequired': 'Name is required',
-  'widget.widgetTitle': 'Widget Title',
-  'widget.widgetTitlePlaceholder': 'Enter Widget Title',
-  'widget.widgetTitleRequired': 'Widget Title is required',
-  'widget.itemsType': 'Items Type',
-  'widget.itemsTypePlaceholder': 'Select Items Type',
-  'widget.widgetType': 'Widget Type',
-  'widget.widgetTypeRequired': 'Widget Type is required',
-  'widget.color': 'Color',
-  'widget.code': 'Code',
-  'widget.codePlaceholder': 'Enter code',
-  'widget.codeRequired': 'Code is required',
-  'widget.webPerRow': 'Web Per Row',
-  'widget.webPerRowPlaceholder': 'Enter web per row',
-  'widget.mobilePerRow': 'Mobile Per Row',
-  'widget.mobilePerRowPlaceholder': 'Enter mobile per row',
-  'widget.tabletPerRow': 'Tablet Per Row',
-  'widget.tabletPerRowPlaceholder': 'Enter tablet per row',
-  'widget.mobileItems': 'Mobile Items',
-  'widget.webItems': 'Web Items',
-  'widget.searchPlaceholder': 'Search Widgets...',
-  'widget.autoPlay': 'Auto Play',
-  'widget.tableName': 'Name',
-  'widget.tableCode': 'Code',
-  'widget.tableActive': 'Active',
-  'widget.addWidgetTitle': 'Add Widget',
-  'widget.updateWidgetTitle': 'Update Widget',
-  'widget.webPerRowRequired': 'Web Per Row is required',
-  'widget.tabletPerRowRequired': 'Tablet Per Row is required',
-  'widget.mobilePerRowRequired': 'Mobile Per Row is required',
-  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?',
-  'widget.widgetTitleInfo': 'HTML is supported',
-  'widget.minPerRow': 'Value must be greater than zero',
-  'widget.actionsLabel': 'Actions',
-  'widget.tabNameRequired': 'Tab Name is required'
-};
-const TRANSLATION_PAIRS_ITEM = {
-  'item.title': 'Title',
-  'item.titlePlaceholder': 'Enter title',
-  'item.subtitle': 'Subtitle',
-  'item.subTitlePlaceholder': 'Enter Subtitle',
-  'item.altText': 'Alt Text',
-  'item.altTextPlaceholder': 'Enter alt text',
-  'item.link': 'Link',
-  'item.linkPlaceholder': 'Enter link',
-  'item.image': 'Image',
-  'item.uploadFile': 'Upload File',
-  'item.dragDrop': 'or drag and drop',
-  'item.allowedFormat': 'PNG, JPG, SVG up to 2 MB',
-  'item.srcset': 'Srcset',
-  'item.screenSizeRequired': 'ScreenSize is required',
-  'item.widthRequired': 'Width is required',
-  'item.heightRequired': 'Height is required',
-  'item.minScreenSize': 'ScreenSize should be greater than 0',
-  'item.minWidth': 'Width should be greater than 0',
-  'item.minHeight': 'Height should be greater than 0',
-  'item.titleRequired': 'Title is required',
-  'item.deleteTitle': 'Are you sure you want to delete this item?'
+  itemsType: 'Items Type',
+  itemsTypePlaceholder: 'Select Items Type',
+  widgetType: 'Widget Type',
+  widgetTypeRequired: 'Widget Type is required',
+  color: 'Color',
+  webPerRow: 'Web Per Row',
+  webPerRowPlaceholder: 'Enter web per row',
+  mobilePerRow: 'Mobile Per Row',
+  mobilePerRowPlaceholder: 'Enter mobile per row',
+  tabletPerRow: 'Tablet Per Row',
+  tabletPerRowPlaceholder: 'Enter tablet per row',
+  mobileItems: 'Mobile Items',
+  webItems: 'Web Items',
+  searchPlaceholder: 'Search Widgets...',
+  autoPlay: 'Auto Play',
+  addWidgetTitle: 'Add Widget',
+  updateWidgetTitle: 'Update Widget',
+  webPerRowRequired: 'Web Per Row is required',
+  tabletPerRowRequired: 'Tablet Per Row is required',
+  mobilePerRowRequired: 'Mobile Per Row is required',
+  tabDeleteTitle: 'Are you sure you want to delete this tab?',
+  widgetTitleInfo: 'HTML is supported',
+  minPerRow: 'Value must be greater than zero',
+  // actionsLabel': 'Actions', -> 'actions'
+  tabNameRequired: 'Tab Name is required',
+  subtitle: 'Subtitle',
+  subTitlePlaceholder: 'Enter Subtitle',
+  altText: 'Alt Text',
+  altTextPlaceholder: 'Enter alt text',
+  link: 'Link',
+  linkPlaceholder: 'Enter link',
+  image: 'Image',
+  uploadFile: 'Upload File',
+  dragDrop: 'or drag and drop',
+  allowedFormat: 'PNG, JPG, SVG up to 2 MB',
+  srcset: 'Srcset',
+  screenSizeRequired: 'ScreenSize is required',
+  widthRequired: 'Width is required',
+  heightRequired: 'Height is required',
+  minScreenSize: 'ScreenSize should be greater than 0',
+  minWidth: 'Width should be greater than 0',
+  minHeight: 'Height should be greater than 0',
+  deleteTitle: 'Are you sure you want to delete this item?'
 };
 const TRANSLATION_PAIRS_PAGE = {
-  'page.name': 'Name',
-  'page.namePlaceholder': 'Enter name',
-  'page.nameRequired': 'Name is required',
-  'page.code': 'Code',
-  'page.codePlaceholder': 'Enter code',
-  'page.codeRequired': 'Code is required',
-  'page.slug': 'Slug',
-  'page.slugPlaceholder': 'Enter Slug',
-  'page.slugRequired': 'Slug is required',
-  'page.addPageTitle': 'Add Page',
-  'page.updatePageTitle': 'Update Page',
-  'page.searchPages': 'Search Pages...',
-  'page.tableName': 'Name',
-  'page.tableCode': 'Code',
-  'page.widgets': 'Widgets',
-  'page.actionsLabel': 'Actions'
-};
-
-/* eslint-disable @typescript-eslint/no-empty-function */
+  widgets: 'Widgets',
+  slug: 'Slug',
+  slugPlaceholder: 'Enter Slug',
+  slugRequired: 'Slug is required',
+  addPage: 'Add Page',
+  updatePage: 'Update Page',
+  searchPages: 'Search Pages...'
+};
+
 const ProviderContext = /*#__PURE__*/React.createContext(null);
 const Provider = ({
   children,
   baseUrl,
   token,
+  translations,
   onError: _onError = () => {},
   onSuccess: _onSuccess = () => {},
   onLogout: _onLogout = () => {},
@@ -1823,7 +1807,8 @@ const Provider = ({
       onLogout: _onLogout,
       switchClass: _switchClass,
       widgetRoutesPrefix: _widgetRoutesPrefix,
-      pageRoutesPrefix: _pageRoutesPrefix
+      pageRoutesPrefix: _pageRoutesPrefix,
+      commonTranslations: Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), translations || {})
     }
   }, children);
 };
@@ -2545,12 +2530,6 @@ const isEmpty = data => {
   if ([undefined, null, ''].includes(data)) return true;
   return false;
 };
-function createTranslation(t, obj) {
-  return function (key) {
-    if (typeof t === 'function') return t(key);
-    return obj[key] || '';
-  };
-}
 const build_path = (...args) => {
   return args.map((part, i) => {
     if (i === 0) {
@@ -3027,8 +3006,6 @@ const usePage = ({
 
 const PageContext = /*#__PURE__*/React.createContext(null);
 const PageContextProvider = ({
-  t: _t = key => Object.assign({}, TRANSLATION_PAIRS_COMMON)[key],
-  // Form
   searchText: _searchText = '',
   changeSearch: _changeSearch = () => {},
   list: _list = [],
@@ -3059,12 +3036,12 @@ const PageContextProvider = ({
   data: _data = [],
   canDelete: _canDelete = false,
   loader: _loader = undefined,
+  pageTranslations,
   // other
   children
 }) => {
   return /*#__PURE__*/React__default["default"].createElement(PageContext.Provider, {
     value: {
-      t: _t,
       // Form
       list: _list,
       searchText: _searchText,
@@ -3095,7 +3072,8 @@ const PageContextProvider = ({
       columns: _columns,
       data: _data,
       canDelete: _canDelete,
-      loader: _loader
+      loader: _loader,
+      pageTranslations: Object.assign(Object.assign({}, TRANSLATION_PAIRS_PAGE), pageTranslations || {})
     }
   }, children);
 };
@@ -3216,10 +3194,12 @@ const PageTable = ({
   extraActions,
   extraColumns
 }) => {
+  const {
+    commonTranslations
+  } = useProviderState();
   const {
     list,
     onChangeFormState,
-    t,
     loading,
     loader,
     canUpdate,
@@ -3232,14 +3212,14 @@ const PageTable = ({
     loader: loader,
     loading: loading,
     dataKeys: [{
-      label: t('page.tableName'),
+      label: commonTranslations.name,
       dataKey: 'name',
       highlight: true
     }, {
-      label: t('page.tableCode'),
+      label: commonTranslations.code,
       dataKey: 'code'
     }],
-    actionsLabel: t('page.actionsLabel'),
+    actionsLabel: commonTranslations.actions,
     actions: {
       edit: canUpdate ? onUpdateClick : undefined,
       delete: canDelete ? onDeleteClick : undefined
@@ -3501,7 +3481,12 @@ const SrcSet = ({
   errors,
   name,
   disabled: _disabled2 = false,
-  t
+  screenSizeRequired,
+  heightRequired,
+  minHeight,
+  minScreenSize,
+  minWidth,
+  widthRequired
 }) => {
   const {
     fields,
@@ -3531,8 +3516,8 @@ const SrcSet = ({
       size: _size,
       placeholder: "Screen Size",
       rest: register(`${name}.${index}.screenSize`, {
-        required: t('item.screenSizeRequired'),
-        validate: value => Number(value) <= 0 ? t('item.minScreenSize') : true
+        required: screenSizeRequired,
+        validate: value => Number(value) <= 0 ? minScreenSize : true
       }),
       disabled: _disabled2
     }), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -3541,8 +3526,8 @@ const SrcSet = ({
       error: (_f = (_e = (_d = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _d === void 0 ? void 0 : _d['width']) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
       index: index,
       rest: register(`${name}.${index}.width`, {
-        required: t('item.widthRequired'),
-        validate: value => Number(value) <= 0 ? t('item.minWidth') : true
+        required: widthRequired,
+        validate: value => Number(value) <= 0 ? minWidth : true
       }),
       className: className,
       size: _size,
@@ -3554,8 +3539,8 @@ const SrcSet = ({
       error: (_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _g === void 0 ? void 0 : _g['height']) === null || _h === void 0 ? void 0 : _h.message) === null || _j === void 0 ? void 0 : _j.toString(),
       index: index,
       rest: register(`${name}.${index}.height`, {
-        required: t('item.heightRequired'),
-        validate: value => Number(value) <= 0 ? t('item.minHeight') : true
+        required: heightRequired,
+        validate: value => Number(value) <= 0 ? minHeight : true
       }),
       className: className,
       size: _size,
@@ -3592,7 +3577,7 @@ var Input = Object.assign(Input$1, {
 
 const PageSearch = () => {
   const {
-    t,
+    pageTranslations,
     canList,
     changeSearch,
     setCurrentPage
@@ -3612,7 +3597,7 @@ const PageSearch = () => {
     value: search,
     disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
-    placeholder: t('page.searchPages')
+    placeholder: pageTranslations.searchPages
   });
 };
 
@@ -3930,7 +3915,9 @@ const PageForm = ({
   formRef
 }) => {
   const {
-    t,
+    commonTranslations
+  } = useProviderState();
+  const {
     data,
     formState,
     onPageFormSubmit,
@@ -3940,7 +3927,8 @@ const PageForm = ({
     getWidgets,
     onChangeWidgetSequence,
     canAdd,
-    canUpdate
+    canUpdate,
+    pageTranslations
   } = usePageState();
   const {
     register,
@@ -4011,39 +3999,39 @@ const PageForm = ({
   };
   // Schemas
   const pageFormSchema = [{
-    label: `${t('page.name')}`,
+    label: commonTranslations.name,
     required: true,
     accessor: 'name',
     type: 'text',
-    placeholder: t('page.namePlaceholder'),
+    placeholder: commonTranslations.namePlaceholder,
     onInput: handleCapitalize,
     validations: {
-      required: t('page.nameRequired')
+      required: commonTranslations.nameRequired
     }
   }, {
-    label: `${t('page.code')}`,
+    label: commonTranslations.code,
     accessor: 'code',
     required: true,
     type: 'text',
     onInput: handleCode,
     editable: false,
-    placeholder: t('page.codePlaceholder'),
+    placeholder: commonTranslations.codePlaceholder,
     validations: {
-      required: t('page.codeRequired')
+      required: commonTranslations.codeRequired
     }
   }, {
-    label: `${t('page.slug')}`,
+    label: pageTranslations.slug,
     accessor: 'slug',
     required: true,
     type: 'text',
     onInput: handleSlug,
     editable: false,
-    placeholder: t('page.slugPlaceholder'),
+    placeholder: pageTranslations.slugPlaceholder,
     validations: {
-      required: t('page.slugRequired')
+      required: pageTranslations.slugRequired
     }
   }, {
-    label: t('page.widgets'),
+    label: pageTranslations.widgets,
     accessor: 'widgets',
     type: 'ReactSelect',
     options: widgets,
@@ -4098,15 +4086,17 @@ const Button = ({
 };
 
 const AddButton$1 = () => {
+  const {
+    commonTranslations
+  } = useProviderState();
   const {
     onChangeFormState,
-    t,
     canAdd
   } = usePageState();
   return /*#__PURE__*/React__default["default"].createElement(Button, {
     disabled: !canAdd,
     onClick: () => onChangeFormState('ADD')
-  }, t('addButtonText') || t('common:addButtonText'));
+  }, commonTranslations.add);
 };
 
 const ChevronLeft = ({
@@ -4210,7 +4200,9 @@ const Pagination = ({
 
 const PagePagination = () => {
   const {
-    t,
+    commonTranslations
+  } = useProviderState();
+  const {
     totalPages,
     totalRecords,
     currentPage,
@@ -4218,11 +4210,11 @@ const PagePagination = () => {
     setCurrentPage
   } = usePageState();
   return /*#__PURE__*/React__default["default"].createElement(Pagination, {
-    ofText: t('of') || t('common:of'),
-    pageText: t('confirm') || t('common:confirm'),
-    showingText: t('showing') || t('common:showing'),
-    nextContent: t('nextContent') || t('common:nextContent'),
-    previousContent: t('previousContent') || t('common:previousContent'),
+    ofText: commonTranslations.of,
+    pageText: commonTranslations.confirm,
+    showingText: commonTranslations.showing,
+    nextContent: commonTranslations.next,
+    previousContent: commonTranslations.previous,
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -4231,6 +4223,65 @@ const PagePagination = () => {
   });
 };
 
+const Drawer = ({
+  children,
+  open,
+  onClose,
+  title,
+  footerContent
+}) => {
+  const nodeRef = React.useRef(null);
+  return /*#__PURE__*/React__default["default"].createElement(CSSTransition__default["default"], {
+    ref: nodeRef,
+    in: open,
+    timeout: {
+      enter: 250,
+      exit: 350
+    },
+    classNames: "khb_drawer",
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-wrapper-1",
+    "aria-labelledby": "modal",
+    role: "dialog",
+    "aria-modal": "true",
+    ref: nodeRef,
+    "data-testid": "drawer"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-wrapper-2"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-backdrop",
+    role: "button",
+    onClick: onClose,
+    onKeyDown: onClose,
+    tabIndex: 0
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-container-1"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-container-2"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-close-section"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: "khb_drawer-close-btn",
+    onClick: onClose,
+    "data-testid": "drawer-close"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "khb_sr-only"
+  }, "Close panel"), /*#__PURE__*/React__default["default"].createElement(Close, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-main"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-header"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "khb_drawer-header-title"
+  }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_darwer-content"
+  }, children), footerContent && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_drawer-footer"
+  }, footerContent)))))));
+};
+
 const Modal = ({
   open,
   onClose,
@@ -4327,65 +4378,6 @@ const DeleteModal = ({
   }, confirm || TRANSLATION_PAIRS_COMMON.confirm)))) : null;
 };
 
-const Drawer = ({
-  children,
-  open,
-  onClose,
-  title,
-  footerContent
-}) => {
-  const nodeRef = React.useRef(null);
-  return /*#__PURE__*/React__default["default"].createElement(CSSTransition__default["default"], {
-    ref: nodeRef,
-    in: open,
-    timeout: {
-      enter: 250,
-      exit: 350
-    },
-    classNames: "khb_drawer",
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-wrapper-1",
-    "aria-labelledby": "modal",
-    role: "dialog",
-    "aria-modal": "true",
-    ref: nodeRef,
-    "data-testid": "drawer"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-wrapper-2"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-backdrop",
-    role: "button",
-    onClick: onClose,
-    onKeyDown: onClose,
-    tabIndex: 0
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-container-1"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-container-2"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-close-section"
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: "khb_drawer-close-btn",
-    onClick: onClose,
-    "data-testid": "drawer-close"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "khb_sr-only"
-  }, "Close panel"), /*#__PURE__*/React__default["default"].createElement(Close, null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-main"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-header"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "khb_drawer-header-title"
-  }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_darwer-content"
-  }, children), footerContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_drawer-footer"
-  }, footerContent)))))));
-};
-
 const FormActions = ({
   loading: _loading = false,
   primaryLabel: _primaryLabel = 'Submit',
@@ -4407,14 +4399,14 @@ const PageFormActions = ({
   formRef
 }) => {
   const {
-    onError
+    onError,
+    commonTranslations
   } = useProviderState();
   const {
     closeForm,
     loading,
     canAdd,
     canUpdate,
-    t,
     formState
   } = usePageState();
   const onSubmitClick = e => {
@@ -4434,10 +4426,10 @@ const PageFormActions = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React__default["default"].createElement(FormActions, {
     loading: loading,
-    primaryLabel: formState === 'ADD' ? t('createButtonText') || t('common:createButtonText') : t('updateButtonText') || t('common:updateButtonText'),
+    primaryLabel: formState === 'ADD' ? commonTranslations.create : commonTranslations.update,
     onPrimaryButtonClick: onSubmitClick,
     onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText') || t('common:cancelButtonText')
+    secondaryLabel: commonTranslations.cancel
   });
 };
 
@@ -4456,8 +4448,8 @@ const PageFormWrapper = ({
 };
 
 const Page = ({
-  t,
   loader,
+  translations,
   explicitForm: _explicitForm = false,
   children,
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -4465,9 +4457,12 @@ const Page = ({
   permissions: _permissions = {},
   preConfirmDelete
 }) => {
+  const {
+    commonTranslations
+  } = useProviderState();
   const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const formRef = React.useRef(null);
-  const derivedT = createTranslation(t, Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_PAGE));
+  const combinedTranslations = Object.assign(Object.assign({}, TRANSLATION_PAIRS_PAGE), translations);
   const {
     list,
     widgets,
@@ -4496,7 +4491,6 @@ const Page = ({
     canList: derivedPermissions.list
   });
   return /*#__PURE__*/React__default["default"].createElement(PageContextProvider, {
-    t: derivedT,
     loader: loader,
     list: list,
     searchText: searchText,
@@ -4522,13 +4516,14 @@ const Page = ({
     canAdd: derivedPermissions.add,
     canDelete: derivedPermissions.delete,
     canUpdate: derivedPermissions.update,
-    canList: derivedPermissions.list
+    canList: derivedPermissions.list,
+    pageTranslations: translations
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton$1, null), /*#__PURE__*/React__default["default"].createElement(PageSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(PageTable, null), /*#__PURE__*/React__default["default"].createElement(PagePagination, null))), !_explicitForm && /*#__PURE__*/React__default["default"].createElement(Drawer, {
     open: formState === 'ADD' || formState === 'UPDATE',
     onClose: onCloseForm,
-    title: formState === 'ADD' ? derivedT('page.addPageTitle') : formState === 'UPDATE' ? derivedT('page.updatePageTitle') : '',
+    title: formState === 'ADD' ? combinedTranslations.addPage : formState === 'UPDATE' ? combinedTranslations.updatePage : '',
     footerContent: /*#__PURE__*/React__default["default"].createElement(PageFormActions, {
       formRef: formRef
     })
@@ -4539,13 +4534,13 @@ const Page = ({
     itemData: itemData,
     onClose: onCloseForm,
     onConfirmDelete: onCofirmDeletePage,
-    confirmationRequired: derivedT('confirmationRequired') || derivedT('common:confirmationRequired'),
-    confirm: derivedT('confirm') || derivedT('common:confirm'),
-    lossOfData: derivedT('lossOfData') || derivedT('common:lossOfData'),
-    permanentlyDelete: derivedT('permanentlyDelete') || derivedT('common:permanentlyDelete'),
-    pleaseType: derivedT('pleaseType') || derivedT('common:pleaseType'),
-    toProceedOrCancel: derivedT('toProceedOrCancel') || derivedT('common:toProceedOrCancel'),
-    typeHerePlaceholder: derivedT('typeHerePlaceholder') || derivedT('common:typeHerePlaceholder')
+    confirmationRequired: commonTranslations.confirmationRequired,
+    confirm: commonTranslations.confirm,
+    lossOfData: commonTranslations.lossOfData,
+    permanentlyDelete: commonTranslations.permanentlyDelete,
+    pleaseType: commonTranslations.pleaseType,
+    toProceedOrCancel: commonTranslations.toProceedOrCancel,
+    typeHerePlaceholder: commonTranslations.typeHerePlaceholder
   }));
 };
 Page.Table = PageTable;
@@ -6057,7 +6052,6 @@ $$1({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
 
 const WidgetContext = /*#__PURE__*/React.createContext(null);
 const WidgetContextProvider = ({
-  t: _t = () => '',
   // Form
   list: _list = [],
   languages: _languages = [],
@@ -6101,12 +6095,12 @@ const WidgetContextProvider = ({
   onPartialUpdateWidget: _onPartialUpdateWidget = () => Promise.resolve(),
   reactSelectStyles: _reactSelectStyles = {},
   imageMaxSize: _imageMaxSize = 10485760,
+  widgetTranslations,
   // other
   children
 }) => {
   return /*#__PURE__*/React__default["default"].createElement(WidgetContext.Provider, {
     value: {
-      t: _t,
       // Form
       list: _list,
       languages: _languages,
@@ -6149,7 +6143,8 @@ const WidgetContextProvider = ({
       data: _data,
       canDelete: _canDelete,
       loader: _loader,
-      imageMaxSize: _imageMaxSize
+      imageMaxSize: _imageMaxSize,
+      widgetTranslations: Object.assign(Object.assign({}, TRANSLATION_PAIRS_WIDGET), widgetTranslations || {})
     }
   }, children);
 };
@@ -6183,6 +6178,7 @@ const WidgetTable = ({
   extraColumns
 }) => {
   const {
+    commonTranslations,
     switchClass
   } = useProviderState();
   const {
@@ -6193,8 +6189,7 @@ const WidgetTable = ({
     onChangeFormState,
     onPartialUpdateWidget,
     loading,
-    loader,
-    t
+    loader
   } = useWidgetState();
   const updateClosure = React.useCallback((item, key, value) => {
     onPartialUpdateWidget({
@@ -6204,15 +6199,15 @@ const WidgetTable = ({
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
   const dataKeys = [{
-    label: t('widget.tableName'),
+    label: commonTranslations.name,
     dataKey: 'name',
     highlight: true
   }, {
-    label: t('widget.tableCode'),
+    label: commonTranslations.code,
     dataKey: 'code'
   }];
   if (canPartialUpdate) dataKeys.push({
-    label: t('widget.tableActive'),
+    label: commonTranslations.active,
     dataKey: 'isActive',
     Cell: ({
       row
@@ -6227,7 +6222,7 @@ const WidgetTable = ({
     loader: loader,
     loading: loading,
     dataKeys: dataKeys,
-    actionsLabel: t('widget.actionsLabel'),
+    actionsLabel: commonTranslations.actions,
     extraColumns: extraColumns,
     extraActions: extraActions,
     actions: {
@@ -6558,14 +6553,15 @@ const ItemsAccordian = ({
   deleteText: _deleteText = 'Delete'
 }) => {
   const {
-    baseUrl
+    baseUrl,
+    commonTranslations
   } = useProviderState();
   const {
     onImageUpload,
     onImageRemove,
-    t,
     imageBaseUrl,
-    imageMaxSize
+    imageMaxSize,
+    widgetTranslations
   } = useWidgetState();
   const [itemsShow, setItemsShow] = React.useState([]);
   const {
@@ -6626,9 +6622,9 @@ const ItemsAccordian = ({
       id: `${id}-item-${index}`,
       footerContent: /*#__PURE__*/React__default["default"].createElement(ConfirmPopOver, {
         onConfirm: () => removeItem(index),
-        title: t('item.deleteTitle'),
-        confirmText: t('yesButtonText') || t('common:yesButtonText'),
-        cancelText: t('cancelButtonText') || t('common:cancelButtonText')
+        title: widgetTranslations.deleteTitle,
+        confirmText: commonTranslations.yes,
+        cancelText: commonTranslations.cancel
       }, /*#__PURE__*/React__default["default"].createElement(Button, {
         type: "danger",
         size: "sm",
@@ -6640,67 +6636,72 @@ const ItemsAccordian = ({
       var _a, _b, _c, _d, _e, _f, _g, _h;
       return /*#__PURE__*/React__default["default"].createElement(Input, {
         rest: register(`${name}.${index}.titles.${lang.code}`, {
-          required: t('item.titleRequired')
+          required: commonTranslations.titleRequired
         }),
-        label: t('item.title') + ` (${lang.name})`,
+        label: commonTranslations.title + ` (${lang.name})`,
         error: ((_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) ? ((_h = (_g = (_f = (_e = (_d = errors[name]) === null || _d === void 0 ? void 0 : _d[index]) === null || _e === void 0 ? void 0 : _e['titles']) === null || _f === void 0 ? void 0 : _f[lang.code]) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString()) + ` (${lang.name})` : '',
         type: "text",
         className: "w-full p-2",
-        placeholder: t('item.titlePlaceholder') + ` (${lang.name})`,
+        placeholder: commonTranslations.titlePlaceholder + ` (${lang.name})`,
         required: true
       });
     })) : /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.title`, {
-        required: t('item.titleRequired')
+        required: commonTranslations.titleRequired
       }),
-      label: t('item.title'),
+      label: commonTranslations.title,
       error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['title']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
       type: "text",
       className: "w-full p-2",
-      placeholder: t('item.titlePlaceholder'),
+      placeholder: commonTranslations.titlePlaceholder,
       required: true
     }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.subtitles.${lang.code}`),
-      label: t('item.subtitle') + ` (${lang.name})`,
+      label: widgetTranslations.subtitle + ` (${lang.name})`,
       type: "text",
       className: "w-full p-2",
-      placeholder: t('item.subTitlePlaceholder') + ` (${lang.name})`
+      placeholder: widgetTranslations.subTitlePlaceholder + ` (${lang.name})`
     }))) : /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.subtitle`),
-      label: t('item.subtitle'),
+      label: widgetTranslations.subtitle,
       type: "text",
       className: "w-full p-2",
-      placeholder: t('item.subTitlePlaceholder')
+      placeholder: widgetTranslations.subTitlePlaceholder
     }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.altTexts.${lang.code}`),
-      label: t('item.altText') + ` (${lang.name})`,
-      type: 'text',
+      label: widgetTranslations.altText + ` (${lang.name})`,
+      type: "text",
       className: "w-full p-2",
-      placeholder: t('item.altTextPlaceholder') + ` (${lang.name})`
+      placeholder: widgetTranslations.altTextPlaceholder + ` (${lang.name})`
     }))) : /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.altText`),
-      label: t('item.altText'),
-      type: 'text',
+      label: widgetTranslations.altText,
+      type: "text",
       className: "w-full p-2",
-      placeholder: t('item.altTextPlaceholder')
+      placeholder: widgetTranslations.altTextPlaceholder
     }), /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.link`),
-      label: t('item.link'),
-      type: 'url',
+      label: widgetTranslations.link,
+      type: "url",
       className: "w-full p-2",
-      placeholder: t('item.linkPlaceholder')
+      placeholder: widgetTranslations.linkPlaceholder
     }), /*#__PURE__*/React__default["default"].createElement(Input.SrcSet, {
       control: control,
       register: register,
-      label: t(`item.srcset`),
+      label: widgetTranslations.srcset,
       name: `${name}.${index}.srcset`,
       errors: (_f = (_e = errors[name]) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f['srcset'],
-      t: t
+      screenSizeRequired: widgetTranslations.screenSizeRequired,
+      heightRequired: widgetTranslations.heightRequired,
+      minHeight: widgetTranslations.minHeight,
+      minScreenSize: widgetTranslations.minScreenSize,
+      minWidth: widgetTranslations.minWidth,
+      widthRequired: widgetTranslations.widthRequired
     }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => {
       var _a, _b, _c, _d, _e;
       return /*#__PURE__*/React__default["default"].createElement(ImageInput, {
         key: lang.code,
-        label: t('item.image') + ` (${lang.name})`,
+        label: widgetTranslations.image + ` (${lang.name})`,
         control: control,
         name: `${name}.${index}.imgs.${lang.code}`,
         error: (_e = (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['imgs']) === null || _c === void 0 ? void 0 : _c[lang.code]) === null || _d === void 0 ? void 0 : _d.message) === null || _e === void 0 ? void 0 : _e.toString(),
@@ -6714,14 +6715,14 @@ const ItemsAccordian = ({
           className: "khb_img-text-wrapper"
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "khb_img-text-label"
-        }, /*#__PURE__*/React__default["default"].createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React__default["default"].createElement("p", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", null, widgetTranslations.uploadFile)), /*#__PURE__*/React__default["default"].createElement("p", {
           className: "khb_img-text-1"
-        }, t('item.dragDrop'))), /*#__PURE__*/React__default["default"].createElement("p", {
+        }, widgetTranslations.dragDrop)), /*#__PURE__*/React__default["default"].createElement("p", {
           className: "khb_img-text-2"
-        }, t('item.allowedFormat')))
+        }, widgetTranslations.allowedFormat))
       });
     })) : /*#__PURE__*/React__default["default"].createElement(ImageInput, {
-      label: t('item.image'),
+      label: widgetTranslations.image,
       control: control,
       name: `${name}.${index}.img`,
       error: (_k = (_j = (_h = (_g = errors[name]) === null || _g === void 0 ? void 0 : _g[index]) === null || _h === void 0 ? void 0 : _h['img']) === null || _j === void 0 ? void 0 : _j.message) === null || _k === void 0 ? void 0 : _k.toString(),
@@ -6735,11 +6736,11 @@ const ItemsAccordian = ({
         className: "khb_img-text-wrapper"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "khb_img-text-label"
-      }, /*#__PURE__*/React__default["default"].createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React__default["default"].createElement("p", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, widgetTranslations.uploadFile)), /*#__PURE__*/React__default["default"].createElement("p", {
         className: "khb_img-text-1"
-      }, t('item.dragDrop'))), /*#__PURE__*/React__default["default"].createElement("p", {
+      }, widgetTranslations.dragDrop)), /*#__PURE__*/React__default["default"].createElement("p", {
         className: "khb_img-text-2"
-      }, t('item.allowedFormat')))
+      }, widgetTranslations.allowedFormat))
     })));
   })));
 };
@@ -6950,10 +6951,10 @@ const WidgetForm = ({
     shouldUnregister: false
   });
   const {
-    switchClass
+    switchClass,
+    commonTranslations
   } = useProviderState();
   const {
-    t,
     data,
     canAdd,
     canUpdate,
@@ -6962,6 +6963,7 @@ const WidgetForm = ({
     widgetTypes,
     loading,
     languages,
+    widgetTranslations,
     onWidgetFormSubmit,
     getCollectionData,
     collectionData,
@@ -7106,7 +7108,7 @@ const WidgetForm = ({
             if (!tabItem.names[lang.code]) {
               setError(`tabs.${index}.names.${lang.code}`, {
                 type: 'manual',
-                message: `${t('widget.tabNameRequired')} (${lang.name})`
+                message: `${widgetTranslations.tabNameRequired} (${lang.name})`
               });
               isTabsValid = false;
             }
@@ -7114,7 +7116,7 @@ const WidgetForm = ({
         } else if (!tabItem.name) {
           setError(`tabs.${index}.name`, {
             type: 'manual',
-            message: t('widget.tabNameRequired')
+            message: widgetTranslations.tabNameRequired
           });
           isTabsValid = false;
         }
@@ -7158,15 +7160,13 @@ const WidgetForm = ({
     items = items.map(_a => {
       var item = __rest(_a, ["_id", "__v", "widgetId"]);
       if (typeof item['imgs'] === 'object' && item['imgs']) {
-        const obj = {};
-        languages.forEach(lng => {
-          if (typeof item['imgs'][lng.code] === 'object') {
-            obj[lng.code] = item['imgs'][lng.code]['_id'];
-          } else {
-            obj[lng.code] = item['imgs'][lng.code];
+        Object.keys(item['imgs']).forEach(key => {
+          if (item['imgs'][key] && item['imgs'][key]['_id']) {
+            item['imgs'][key] = item['imgs'][key]['_id'];
+          } else if (typeof item['imgs'][key] !== 'string' || !item['imgs'][key]) {
+            delete item['imgs'][key];
           }
         });
-        item['imgs'] = obj;
       }
       if (item['img'] && item['img']['_id']) {
         item['img'] = item['img']['_id'];
@@ -7214,123 +7214,123 @@ const WidgetForm = ({
   }, [watch, onWidgetFormInputChange]);
   // Schemas
   const widgetFormSchema = [{
-    label: `${t('widget.name')}`,
+    label: commonTranslations.name,
     required: true,
     accessor: 'name',
     type: 'text',
-    placeholder: t('widget.namePlaceholder'),
+    placeholder: commonTranslations.namePlaceholder,
     onInput: handleCapitalize,
     validations: {
-      required: t('widget.nameRequired')
+      required: commonTranslations.nameRequired
     },
     wrapperClassName: 'khb_grid-item-1of2 khb_padding-right-1 khb_align-top'
   }, {
-    label: `${t('widget.code')}`,
+    label: commonTranslations.code,
     accessor: 'code',
     required: true,
     type: 'text',
     onInput: handleCode,
     editable: false,
-    placeholder: t('widget.codePlaceholder'),
+    placeholder: commonTranslations.codePlaceholder,
     validations: {
-      required: t('widget.codeRequired')
+      required: commonTranslations.codeRequired
     },
     wrapperClassName: 'khb_grid-item-1of2 khb_padding-left-1 khb_align-top khb_margin-top-0'
   }, Array.isArray(languages) && languages.length > 0 ? {
-    label: `${t('widget.widgetTitle')}`,
+    label: commonTranslations.title,
     accessor: 'widgetTitles',
     required: true,
     type: customInputs && customInputs['widgetTitles'] ? undefined : 'text',
     validations: {
-      required: t('widget.widgetTitleRequired')
+      required: commonTranslations.titleRequired
     },
-    info: t('widget.widgetTitleInfo'),
-    placeholder: t('widget.widgetTitlePlaceholder'),
+    info: widgetTranslations.widgetTitleInfo,
+    placeholder: commonTranslations.titlePlaceholder,
     onInput: handleCapitalize,
     Input: customInputs && customInputs['widgetTitles'] ? customInputs['widgetTitles'] : undefined
   } : {
-    label: `${t('widget.widgetTitle')}`,
+    label: commonTranslations.title,
     accessor: 'widgetTitle',
     required: true,
     type: customInputs && customInputs['widgetTitle'] ? undefined : 'text',
     onInput: handleCapitalize,
-    placeholder: t('widget.widgetTitlePlaceholder'),
+    placeholder: commonTranslations.titlePlaceholder,
     validations: {
-      required: t('widget.widgetTitleRequired')
+      required: commonTranslations.titleRequired
     },
-    info: t('widget.widgetTitleInfo'),
+    info: widgetTranslations.widgetTitleInfo,
     Input: customInputs && customInputs['widgetTitle'] ? customInputs['widgetTitle'] : undefined
   }, {
-    label: `${t('widget.widgetType')}`,
+    label: widgetTranslations.widgetType,
     required: true,
     editable: false,
     accessor: 'widgetType',
     type: 'select',
     validations: {
-      required: t('widget.widgetTypeRequired')
+      required: widgetTranslations.widgetTypeRequired
     },
     options: widgetTypes
   }, {
-    label: t('widget.autoPlay'),
+    label: widgetTranslations.autoPlay,
     accessor: 'autoPlay',
     type: 'checkbox',
     show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Carousel',
     switchClass: switchClass
   }, {
-    label: `${t('widget.itemsType')}`,
+    label: widgetTranslations.itemsType,
     required: true,
     editable: false,
     accessor: 'itemsType',
     type: 'select',
     validations: {
-      required: t('widget.itemsTypePlaceholder')
+      required: widgetTranslations.itemsTypePlaceholder
     },
     options: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Tabs' || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.collectionsOnly) ? itemsTypes.filter(item => item.label !== 'Image') : (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.imageOnly) ? itemsTypes.filter(item => item.label === 'Image') : itemsTypes
   }, {
-    label: t('widget.color'),
+    label: widgetTranslations.color,
     accessor: 'backgroundColor',
     type: 'color',
     className: 'khb_input-color'
   }, {
-    label: t('widget.webPerRow'),
+    label: widgetTranslations.webPerRow,
     accessor: 'webPerRow',
     type: 'number',
     required: true,
-    placeholder: t('widget.webPerRowPlaceholder'),
+    placeholder: widgetTranslations.webPerRowPlaceholder,
     wrapperClassName: 'khb_grid-item-1of3 khb_padding-right-1',
     validations: {
-      required: t('widget.webPerRowRequired'),
+      required: widgetTranslations.webPerRowRequired,
       min: {
         value: 1,
-        message: t('widget.minPerRow')
+        message: widgetTranslations.minPerRow
       }
     }
   }, {
-    label: t('widget.tabletPerRow'),
+    label: widgetTranslations.tabletPerRow,
     accessor: 'tabletPerRow',
     type: 'number',
     required: true,
-    placeholder: t('widget.tabletPerRowPlaceholder'),
+    placeholder: widgetTranslations.tabletPerRowPlaceholder,
     wrapperClassName: 'khb_grid-item-1of3 khb_padding-left-1',
     validations: {
-      required: t('widget.tabletPerRowRequired'),
+      required: widgetTranslations.tabletPerRowRequired,
       min: {
         value: 1,
-        message: t('widget.minPerRow')
+        message: widgetTranslations.minPerRow
       }
     }
   }, {
-    label: t('widget.mobilePerRow'),
+    label: widgetTranslations.mobilePerRow,
     accessor: 'mobilePerRow',
     type: 'number',
     required: true,
-    placeholder: t('widget.mobilePerRowPlaceholder'),
+    placeholder: widgetTranslations.mobilePerRowPlaceholder,
     wrapperClassName: 'khb_grid-item-1of3 khb_padding-right-1 khb_padding-left-1',
     validations: {
-      required: t('widget.mobilePerRowRequired'),
+      required: widgetTranslations.mobilePerRowRequired,
       min: {
         value: 1,
-        message: t('widget.minPerRow')
+        message: widgetTranslations.minPerRow
       }
     }
   }, {
@@ -7372,9 +7372,9 @@ const WidgetForm = ({
     setValue: setValue,
     control: control,
     languages: languages,
-    deleteTitle: t('widget.tabDeleteTitle'),
-    yesButtonText: t('yesButtonText') || t('common:yesButtonText'),
-    noButtonText: t('cancelButtonText') || t('common:cancelButtonText'),
+    deleteTitle: widgetTranslations.tabDeleteTitle,
+    yesButtonText: commonTranslations.yes,
+    noButtonText: commonTranslations.cancel,
     errors: errors,
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
@@ -7396,7 +7396,7 @@ const WidgetForm = ({
     languages: languages,
     clearError: clearErrors,
     collapseId: constants.webItems,
-    title: t('widget.webItems'),
+    title: widgetTranslations.webItems,
     id: constants.webItems,
     setError: setError,
     show: webItemsVisible || !!(errors && (errors === null || errors === void 0 ? void 0 : errors[constants.webItems])),
@@ -7407,13 +7407,13 @@ const WidgetForm = ({
     control: control,
     register: register,
     loading: loading,
-    addText: t('addButtonText'),
-    deleteText: t('deleteButtonText') || t('common:deleteButtonText')
+    addText: commonTranslations.add,
+    deleteText: commonTranslations.delete
   }), /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
     languages: languages,
     clearError: clearErrors,
     collapseId: constants.mobileItems,
-    title: t('widget.mobileItems'),
+    title: widgetTranslations.mobileItems,
     id: constants.mobileItems,
     name: constants.mobileItems,
     setError: setError,
@@ -7424,26 +7424,30 @@ const WidgetForm = ({
     errors: errors,
     control: control,
     register: register,
-    addText: t('addButtonText'),
-    deleteText: t('deleteButtonText') || t('common:deleteButtonText')
+    addText: commonTranslations.add,
+    deleteText: commonTranslations.delete
   })));
 };
 
 const AddButton = () => {
+  const {
+    commonTranslations
+  } = useProviderState();
   const {
     onChangeFormState,
-    t,
     canAdd
   } = useWidgetState();
   return /*#__PURE__*/React__default["default"].createElement(Button, {
     disabled: !canAdd,
     onClick: () => onChangeFormState('ADD')
-  }, t('addButtonText') || t('common:addButtonText'));
+  }, commonTranslations.add);
 };
 
 const WidgetPagination = () => {
   const {
-    t,
+    commonTranslations
+  } = useProviderState();
+  const {
     totalPages,
     totalRecords,
     currentPage,
@@ -7451,11 +7455,11 @@ const WidgetPagination = () => {
     setCurrentPage
   } = useWidgetState();
   return /*#__PURE__*/React__default["default"].createElement(Pagination, {
-    ofText: t('of') || t('common:of'),
-    pageText: t('confirm') || t('common:confirm'),
-    showingText: t('showing') || t('common:showing'),
-    nextContent: t('nextContent') || t('common:nextContent'),
-    previousContent: t('previousContent') || t('common:previousContent'),
+    ofText: commonTranslations.of,
+    pageText: commonTranslations.page,
+    showingText: commonTranslations.showing,
+    nextContent: commonTranslations.next,
+    previousContent: commonTranslations.previous,
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -7467,7 +7471,7 @@ const WidgetPagination = () => {
 const WidgetSearch = () => {
   const {
     changeSearch,
-    t,
+    widgetTranslations,
     canList,
     setCurrentPage
   } = useWidgetState();
@@ -7486,7 +7490,7 @@ const WidgetSearch = () => {
     value: searchVal,
     disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
-    placeholder: t('widget.searchPlaceholder')
+    placeholder: widgetTranslations.searchPlaceholder
   });
 };
 
@@ -7494,14 +7498,14 @@ const WidgetFormActions = ({
   formRef
 }) => {
   const {
-    onError
+    onError,
+    commonTranslations
   } = useProviderState();
   const {
     closeForm,
     loading,
     canAdd,
     canUpdate,
-    t,
     formState
   } = useWidgetState();
   const onSubmitClick = e => {
@@ -7521,10 +7525,10 @@ const WidgetFormActions = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React__default["default"].createElement(FormActions, {
     loading: loading,
-    primaryLabel: formState === 'ADD' ? t('createButtonText') || t('common:createButtonText') : t('updateButtonText') || t('common:updateButtonText'),
+    primaryLabel: formState === 'ADD' ? commonTranslations.create : commonTranslations.update,
     onPrimaryButtonClick: onSubmitClick,
     onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText') || t('common:cancelButtonText')
+    secondaryLabel: commonTranslations.cancel
   });
 };
 
@@ -7543,7 +7547,6 @@ const WiddgetFormWrapper = ({
 };
 
 const Widget = ({
-  t,
   routes,
   loader,
   explicitForm: _explicitForm = false,
@@ -7555,11 +7558,15 @@ const Widget = ({
   formatListItem,
   formatOptionLabel,
   imageMaxSize,
+  translations,
   children
 }) => {
+  const {
+    commonTranslations
+  } = useProviderState();
   const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const widgetFormRef = React.useRef(null);
-  const derivedT = createTranslation(t, Object.assign(Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_WIDGET), TRANSLATION_PAIRS_ITEM));
+  const derivedT = Object.assign(Object.assign({}, TRANSLATION_PAIRS_WIDGET), translations || {});
   const {
     list,
     loading,
@@ -7600,7 +7607,6 @@ const Widget = ({
     languages: languages,
     imageBaseUrl: imageBaseUrl,
     onChangeFormState: onChangeFormState,
-    t: derivedT,
     searchText: searchText,
     changeSearch: changeSearch,
     loader: loader,
@@ -7631,13 +7637,14 @@ const Widget = ({
     canPartialUpdate: derivedPermissions.partialUpdate,
     formState: formState,
     closeForm: onCloseForm,
-    imageMaxSize: imageMaxSize
+    imageMaxSize: imageMaxSize,
+    widgetTranslations: translations
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton, null), /*#__PURE__*/React__default["default"].createElement(WidgetSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(WidgetTable, null), /*#__PURE__*/React__default["default"].createElement(WidgetPagination, null))), !_explicitForm && /*#__PURE__*/React__default["default"].createElement(Drawer, {
     open: formState === 'ADD' || formState === 'UPDATE',
     onClose: onCloseForm,
-    title: formState === 'ADD' ? derivedT('widget.addWidgetTitle') : formState === 'UPDATE' ? derivedT('widget.updateWidgetTitle') : '',
+    title: formState === 'ADD' ? derivedT.addWidgetTitle : formState === 'UPDATE' ? derivedT.updateWidgetTitle : '',
     footerContent: /*#__PURE__*/React__default["default"].createElement(WidgetFormActions, {
       formRef: widgetFormRef
     })
@@ -7648,13 +7655,13 @@ const Widget = ({
     itemData: itemData,
     onClose: onCloseForm,
     onConfirmDelete: onCofirmDeleteWidget,
-    confirmationRequired: derivedT('confirmationRequired') || derivedT('common:confirmationRequired'),
-    confirm: derivedT('confirm') || derivedT('common:confirm'),
-    lossOfData: derivedT('lossOfData') || derivedT('common:lossOfData'),
-    permanentlyDelete: derivedT('permanentlyDelete') || derivedT('common:permanentlyDelete'),
-    pleaseType: derivedT('pleaseType') || derivedT('common:pleaseType'),
-    toProceedOrCancel: derivedT('toProceedOrCancel') || derivedT('common:toProceedOrCancel'),
-    typeHerePlaceholder: derivedT('typeHerePlaceholder') || derivedT('common:typeHerePlaceholder')
+    confirmationRequired: commonTranslations.confirmationRequired,
+    confirm: commonTranslations.confirm,
+    lossOfData: commonTranslations.lossOfData,
+    permanentlyDelete: commonTranslations.permanentlyDelete,
+    pleaseType: commonTranslations.pleaseType,
+    toProceedOrCancel: commonTranslations.toProceedOrCancel,
+    typeHerePlaceholder: commonTranslations.typeHerePlaceholder
   }));
 };
 Widget.Table = WidgetTable;