impact-ui 4.0.1-alpha.8 → 4.0.1

package/dist/components/CommentsPanel/CommentsPanel.impl.js

@@ -1,6 +1,7 @@
 !function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(':root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.comment-panel-main-container{background-color:#fff;box-shadow:0 0 4px #0000001f;display:flex;flex-direction:column;opacity:0;overflow:hidden;transition:all .2s ease-in-out;visibility:hidden;width:0}.comment-panel-main-container .comment-panel-header{align-items:center;background-color:#eceefd;display:flex;justify-content:space-between;padding:12px 16px}.comment-panel-main-container .comment-panel-header h2{color:#0d152c;font-family:Manrope,sans-serif;font-size:16px;font-weight:700;margin:0}.comment-panel-main-container .comment-panel-header .close_icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/close.svg) no-repeat;background-position:50%;background-size:12px;cursor:pointer;height:12px;width:12px}.comment-panel-main-container .comment-panel-header .close_icon:hover{background:#eceefd url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/close.svg) no-repeat;background-position:50%;background-size:12px;color:#3649c6}.comment-panel-main-container .comment-panel-body{bottom:0;left:0;padding-top:8px;position:absolute;right:0;top:40px}.comment-panel-main-container .comment-panel-search-panel{align-items:center;display:flex;justify-content:space-between;padding:0 12px}.comment-panel-main-container .comment-panel-search-panel .left-input-icon{padding-top:2px}.comment-panel-main-container .comment-panel-search-panel .ia-styles.ia-btn.ia-btn-small{padding:14px!important}.comment-panel-main-container .comment-panel-search-panel .impact_inputbox_container_with_icons{width:279px}.comment-panel-main-container .comment-panel-content{bottom:0;display:flex;flex-direction:column;gap:0;left:0;line-height:20px;overflow:auto;padding:8px 12px;position:absolute;right:0;top:40px}.comment-panel-main-container .comment-panel-item{background-color:initial;cursor:pointer;padding:16px;position:relative}.comment-panel-main-container .comment-panel-item:not(:last-child){margin-bottom:16px}.comment-panel-main-container .comment-panel-item:not(:last-child):after{background:#d9dde7;bottom:-8px;content:"";height:1px;left:16px;position:absolute;right:16px}.comment-panel-main-container .comment-panel-item.active{background-color:#eceefd;border-radius:16px}.comment-panel-main-container .comment-panel-item-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.comment-panel-main-container .comment-panel-item-header .comment-panel-item-header-left{align-items:flex-start;display:flex;gap:8px}.comment-panel-main-container .comment-panel-item-header .comment-panel-author-info{display:flex;flex-direction:column;gap:2px}.comment-panel-main-container .comment-panel-item-header .comment-panel-author-info span:first-child{color:#31416e;font-size:14px;font-weight:600;line-height:21px}.comment-panel-main-container .comment-panel-item-header .comment-panel-author-info span:last-child{color:#60697d;font-size:12px;font-weight:500;line-height:16px}.comment-panel-main-container .comment-panel-item-header .comment-panel-item-header-right{align-items:baseline;display:flex}.comment-panel-main-container .comment-panel-item-header .comment-panel-item-header-right .comment-panel-action-icon{padding:8px}.comment-panel-main-container .comment-panel-item-header .comment-panel-item-header-right .comment-panel-action-button{background-color:initial;padding:8px}.comment-panel-main-container .comment-panel-item-content{color:#1f2b4d;display:-webkit-box;font-size:14px;font-weight:500;line-clamp:3;-webkit-line-clamp:3;line-height:20px;-webkit-box-orient:vertical;max-height:60px;overflow:hidden;text-overflow:ellipsis;white-space:normal}.comment-panel-main-container .comment-panel-item-footer{background:none;border:none;color:#4259ee;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;padding:0;text-align:left}.comment-panel-main-container .comment-panel-item-footer-row{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:12px;width:100%}.comment-panel-main-container .comment-panel-item-footer-link{color:#4259ee}.comment-panel-main-container .comment-panel-item-footer-muted{color:#7a8294;cursor:default}.comment-panel-main-container .impact_emptystate{border:none;border-radius:0;bottom:0;left:0;margin:0;min-height:auto;padding:0;position:absolute;right:0;top:2px;width:auto}.comment-panel-main-container .impact_emptystate .impact_center_svg_with_icon{min-height:0}.comment-panel-main-container .impact_emptystate .impact_center_svg{height:auto}.comment-panel-main-container .impact_emptystate .impact_heading{font-size:14px;line-height:21px;margin-bottom:0}.comment-panel-main-container .impact_emptystate .impact_paragraph{color:#7a8294;font-size:10px;font-weight:500;line-height:14px;margin-top:0;width:inherit;width:285px}.comment-panel-main-container.display-comment-panel{border-radius:8px;gap:8px;min-height:480px;opacity:1;padding:0;visibility:visible;width:355px;z-index:999}.comment-panel-main-container.display-comment-panel .comment-panel-header{border-bottom:none}.comment-panel-main-container.display-comment-panel .comment-panel-header .close_icon{padding:0}.header-comments-dropdown{border-radius:8px;box-shadow:0 4px 16px #00000029;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%;z-index:10000}.header-comments-dropdown .comment-panel-main-container{max-height:500px;position:relative}.header-comments-dropdown .comment-panel-main-container.display-comment-panel{bottom:unset;max-height:500px;min-height:400px}.header-comments-dropdown .comment-panel-main-container .comment-panel-body{flex:1;overflow:auto;position:relative;top:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate{border:none;border-radius:0;margin:0;min-height:auto;padding:20px;width:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_center_svg_with_icon{min-height:0}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_center_svg{height:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_heading{font-size:14px;line-height:21px;margin-bottom:0}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_paragraph{color:#7a8294;font-size:10px;font-weight:500;line-height:14px;margin-top:0;width:285px}.header-comments-dropdown .comment-panel-main-container .comment-panel-content{bottom:auto;max-height:380px;min-height:300px;position:relative;top:auto}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
+import { Search as Search_default, MaterialSymbolsSort as MaterialSymbolsSort_default, MoreHorizontal as MoreHorizontal_default, SuccessFill as SuccessFill_default, SuccessGray as SuccessGray_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import moment from "moment";
 import { getAssetUrl } from "../../utils/assetBase.js";
 import { getUserAvatarColor } from "../../utils/avatarColor.js";
@@ -13,20 +14,17 @@ import { Input } from "../Input/index.js";
 import { Menu } from "../Menu/index.js";
 import { useComments } from "./CommentsContext.js";
 
-const MenuIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/MoreHorizontal.svg"), ...props });
-const SuccessIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/success-gray.svg"), ...props });
-const SuccessFillIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/success-fill.svg"), ...props });
-const SortIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/material-symbols_sort.svg"), ...props });
+import { useTranslation } from "../../i18n/useTranslation.js";
 const EmptyStateIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/commentEmptyStateIcon.svg"), ...props });
-const SearchIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/search.svg"), ...props });
 const NoFilterResultsIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/no-filter-results.svg"), ...props });
 const COMMENT_SEARCH_OPTIONS = [
-  { label: "Sort by date", value: "opt1" },
-  { label: "Sort by unread", value: "opt2" },
-  { label: "Show resolved comments", value: "opt3" },
-  { label: "Only your threads", value: "opt4" }
+  { labelKey: "commentsPanel.sortByDate", value: "opt1" },
+  { labelKey: "commentsPanel.sortByUnread", value: "opt2" },
+  { labelKey: "commentsPanel.showResolved", value: "opt3" },
+  { labelKey: "commentsPanel.onlyYourThreads", value: "opt4" }
 ];
 function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
+  const { t } = useTranslation();
   const ctx = useComments();
   const [activeItem, setActiveItem] = useState(null);
   const [menuAnchorEl, setMenuAnchorEl] = useState(null);
@@ -63,8 +61,8 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
     const getTime = (entry) => {
       var _a, _b;
       const ts = (_b = (_a = entry == null ? void 0 : entry[1]) == null ? void 0 : _a[0]) == null ? void 0 : _b.timestamp;
-      const t = ts ? new Date(ts).getTime() : NaN;
-      return Number.isNaN(t) ? -Infinity : t;
+      const t2 = ts ? new Date(ts).getTime() : NaN;
+      return Number.isNaN(t2) ? -Infinity : t2;
     };
     const isThreadUnread = (entry) => {
       const [, value] = entry;
@@ -147,13 +145,14 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
   const availableSortOptions = visibleSortOptions ? COMMENT_SEARCH_OPTIONS.filter((option) => visibleSortOptions.includes(option.value)) : COMMENT_SEARCH_OPTIONS;
   const menuOptions = availableSortOptions.map((option) => ({
     ...option,
+    label: t(option.labelKey),
     onClick: () => handleOptionClick(option),
     selected: selectedOption === option.value
   }));
   const formatTimestamp = (timestamp) => {
     if (!timestamp) return "";
     if (moment(timestamp).isValid()) {
-      return moment.utc(timestamp).local().format("hh:mm A, MM-DD-YYYY");
+      return moment.utc(timestamp).local().format("LT, L");
     }
     return timestamp;
   };
@@ -164,7 +163,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
       style,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "comment-panel-header", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Comments" }),
+          /* @__PURE__ */ jsx("h2", { children: t("commentsPanel.title") }),
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -174,7 +173,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
               onClick: () => {
                 setShowCommentPanel(false);
                 setSelectedOption("opt1");
-                onExitResolvedCommentsView();
+                onExitResolvedCommentsView == null ? void 0 : onExitResolvedCommentsView();
                 onClose == null ? void 0 : onClose();
               },
               onKeyDown: (e) => {
@@ -182,7 +181,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                   e.preventDefault();
                   setShowCommentPanel(false);
                   setSelectedOption("opt1");
-                  onExitResolvedCommentsView();
+                  onExitResolvedCommentsView == null ? void 0 : onExitResolvedCommentsView();
                   onClose == null ? void 0 : onClose();
                 }
               }
@@ -194,8 +193,8 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
             /* @__PURE__ */ jsx(
               Input,
               {
-                leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-                placeholder: "Search comments",
+                leftIcon: /* @__PURE__ */ jsx(Search_default, {}),
+                placeholder: t("commentsPanel.searchPlaceholder"),
                 type: "text",
                 value: searchTerm,
                 onChange: (e) => {
@@ -208,7 +207,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
               {
                 className: "sortIcon",
                 disabled: false,
-                icon: /* @__PURE__ */ jsx(SortIcon, { fontSize: "small" }),
+                icon: /* @__PURE__ */ jsx(MaterialSymbolsSort_default, { fontSize: "small" }),
                 iconPlacement: "left",
                 size: "small",
                 type: "default",
@@ -220,16 +219,18 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
           Object.keys(comments).length > 0 ? /* @__PURE__ */ jsx("div", { className: "comment-panel-content", children: isLoadingResolvedComments ? /* @__PURE__ */ jsx(
             EmptyState,
             {
-              description: "Fetching resolved comments.",
+              description: t("commentsPanel.loadingResolvedDescription"),
               emptyStateIcon: /* @__PURE__ */ jsx(NoFilterResultsIcon, {}),
-              heading: "Loading resolved comments..."
+              heading: t("commentsPanel.loadingResolvedHeading")
             }
           ) : filteredEntries.length === 0 ? /* @__PURE__ */ jsx(
             EmptyState,
             {
-              description: selectedOption === "opt3" ? "No resolved comments to display." : searchTerm ? `We couldn't locate ${searchTerm}. Please try searching for something else.` : "We couldn't find any matching comments.",
+              description: selectedOption === "opt3" ? t("commentsPanel.noResolvedDescription") : searchTerm ? t("commentsPanel.searchNoMatchDescription", {
+                term: searchTerm
+              }) : t("commentsPanel.noMatchingDescription"),
               emptyStateIcon: /* @__PURE__ */ jsx(NoFilterResultsIcon, {}),
-              heading: "No results found"
+              heading: t("commentsPanel.noResultsHeading")
             }
           ) : filteredEntries.map(([key, value]) => {
             var _a, _b, _c;
@@ -289,7 +290,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                           !isRead && !isResolved && /* @__PURE__ */ jsx(
                             "span",
                             {
-                              "aria-label": "unread",
+                              "aria-label": t("commentsPanel.unread"),
                               style: {
                                 display: "inline-block",
                                 width: 8,
@@ -302,7 +303,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                             }
                           )
                         ] }),
-                        value[0].isEdited && /* @__PURE__ */ jsx("span", { children: "(edited)" })
+                        value[0].isEdited && /* @__PURE__ */ jsx("span", { children: t("commentsPanel.edited") })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs("div", { className: "comment-panel-item-header-right", children: [
@@ -311,7 +312,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                         {
                           className: "comment-panel-action-button",
                           disabled: false,
-                          icon: /* @__PURE__ */ jsx(MenuIcon, { fontSize: "small" }),
+                          icon: /* @__PURE__ */ jsx(MoreHorizontal_default, { fontSize: "small" }),
                           iconPlacement: "left",
                           size: "small",
                           type: "text",
@@ -329,7 +330,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                             e.stopPropagation();
                             if (handleUnresolve) handleUnresolve(key);
                           },
-                          children: /* @__PURE__ */ jsx(SuccessFillIcon, { fontSize: "small" })
+                          children: /* @__PURE__ */ jsx(SuccessFill_default, { fontSize: "small" })
                         }
                       ) : /* @__PURE__ */ jsx(
                         "div",
@@ -339,7 +340,7 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                             e.stopPropagation();
                             if (handleMarkAsResolved) handleMarkAsResolved(key, value);
                           },
-                          children: /* @__PURE__ */ jsx(SuccessIcon, { fontSize: "small" })
+                          children: /* @__PURE__ */ jsx(SuccessGray_default, { fontSize: "small" })
                         }
                       ) })
                     ] })
@@ -352,18 +353,14 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
                     }
                   ),
                   showFooterRow && /* @__PURE__ */ jsxs("div", { className: "comment-panel-item-footer-row", children: [
-                    replyCount > 0 ? /* @__PURE__ */ jsxs(
+                    replyCount > 0 ? /* @__PURE__ */ jsx(
                       Button,
                       {
                         variant: "url",
                         onClick: () => onCommentItemClick(key, value),
-                        children: [
-                          replyCount,
-                          " ",
-                          replyCount === 1 ? "Reply" : "Replies"
-                        ]
+                        children: replyCount === 1 ? t("commentsPanel.reply", { count: replyCount }) : t("commentsPanel.replies", { count: replyCount })
                       }
-                    ) : /* @__PURE__ */ jsx("span", { className: "comment-panel-item-footer comment-panel-item-footer-muted", children: "No Replies" }),
+                    ) : /* @__PURE__ */ jsx("span", { className: "comment-panel-item-footer comment-panel-item-footer-muted", children: t("commentsPanel.noReplies") }),
                     threadBadgeLabel && /* @__PURE__ */ jsx(
                       Badge,
                       {
@@ -381,9 +378,9 @@ function CommentsPanel({ className, style, onClose, visibleSortOptions }) {
           }) }) : /* @__PURE__ */ jsx(
             EmptyState,
             {
-              description: "To add a new comment, simply click on any cell in the table and type your comment.",
+              description: t("commentsPanel.emptyDescription"),
               emptyStateIcon: /* @__PURE__ */ jsx(EmptyStateIcon, {}),
-              heading: "No comments to display"
+              heading: t("commentsPanel.emptyHeading")
             }
           )
         ] }),

package/dist/components/CreateItemFlow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CreateItemFlow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EAAE,mBAAmB,EAA0B,MAAM,wBAAwB,CAAC;AAC1F,OAAO,8BAA8B,CAAC;AAItC,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAiFlE,eAAO,MAAM,cAAc,iDA0DzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CreateItemFlow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAM7C,OAAO,KAAK,EAAE,mBAAmB,EAA0B,MAAM,wBAAwB,CAAC;AAC1F,OAAO,8BAA8B,CAAC;AAItC,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAuFlE,eAAO,MAAM,cAAc,iDA+DzB,CAAC"}

package/dist/components/CreateItemFlow/index.js

@@ -6,18 +6,27 @@ import { Button } from "../Button/index.js";
 import { DynamicLayout } from "../DynamicLayout/index.js";
 import { Stepper } from "../Stepper/index.js";
 
+import { useTranslation } from "../../i18n/useTranslation.js";
 const createFlowImage = getAssetUrl("icons/createFlowImage.svg");
 function LeftPanelContent({
   leftPanelTitle,
   leftPanelDescription,
   leftPanelImage
 }) {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "left-panel-content", children: [
     /* @__PURE__ */ jsxs("div", { className: "left-panel-title", children: [
       /* @__PURE__ */ jsx("h1", { children: leftPanelTitle }),
       /* @__PURE__ */ jsx("p", { children: leftPanelDescription })
     ] }),
-    leftPanelImage ?? /* @__PURE__ */ jsx("img", { alt: "Create Item Flow", className: "left-panel-image", src: createFlowImage })
+    leftPanelImage ?? /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: t("createItemFlow.imageAlt"),
+        className: "left-panel-image",
+        src: createFlowImage
+      }
+    )
   ] });
 }
 function RightContentPanel({
@@ -36,6 +45,7 @@ function RightContentPanel({
   onNext,
   totalSteps
 }) {
+  const { t } = useTranslation();
   const childArray = React__default.Children.toArray(children ?? []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showStepper && /* @__PURE__ */ jsx(
@@ -60,8 +70,8 @@ function RightContentPanel({
       }
     ),
     actionsChildren != null ? /* @__PURE__ */ jsx("div", { className: "actions", children: actionsChildren }) : /* @__PURE__ */ jsxs("div", { className: "actions", children: [
-      step === 1 ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }) : /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onPrev, children: "Previous" }),
-      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onNext, children: step === totalSteps ? "Submit" : "Next" })
+      step === 1 ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: t("common.cancel") }) : /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onPrev, children: t("common.previous") }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onNext, children: step === totalSteps ? t("common.submit") : t("common.next") })
     ] })
   ] });
 }
@@ -76,18 +86,23 @@ const CreateItemFlow = memo(function CreateItemFlow2({
   onPrev,
   onStepClick,
   stepperVariant = "progress",
-  leftPanelTitle = "Create item",
+  leftPanelTitle,
   leftPanelDescription = "",
   leftPanelImage = null,
   actionsChildren = null,
   showStepper = true
 }) {
+  const { t } = useTranslation();
+  const resolvedLeftPanelTitle = leftPanelTitle ?? t("createItemFlow.defaultTitle");
   const steps = useMemo(
     () => Array.from({ length: totalSteps }, (_, idx) => ({
-      label: `Step ${idx + 1}`,
-      description: `Step ${idx + 1} of ${totalSteps}`
+      label: t("createItemFlow.stepLabel", { number: idx + 1 }),
+      description: t("createItemFlow.stepDescription", {
+        number: idx + 1,
+        total: totalSteps
+      })
     })),
-    [totalSteps]
+    [totalSteps, t]
   );
   const rightContent = /* @__PURE__ */ jsx(
     RightContentPanel,
@@ -114,7 +129,7 @@ const CreateItemFlow = memo(function CreateItemFlow2({
         {
           leftPanelDescription,
           leftPanelImage,
-          leftPanelTitle
+          leftPanelTitle: resolvedLeftPanelTitle
         }
       ),
       leftPanelWidth,

package/dist/components/DatePicker/datePickerFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerFooter.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,MAAM,WAAW,qBAAqB;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,GAClB,EAAE,qBAAqB,2CA2CvB"}
+{"version":3,"file":"datePickerFooter.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerFooter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,MAAM,WAAW,qBAAqB;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,GAClB,EAAE,qBAAqB,2CA4CvB"}

package/dist/components/DatePicker/datePickerFooter.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../Button/index.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 function DatePickerFooter({
   tertiaryButtonProps,
   secondaryButtonProps,
@@ -14,6 +15,7 @@ function DatePickerFooter({
   hideSecondaryButton,
   hidePrimaryButton
 }) {
+  const { t } = useTranslation();
   const allButtonsHidden = hideTertiaryButton && hideSecondaryButton && hidePrimaryButton;
   const handleClear = () => {
     setSelectedDate == null ? void 0 : setSelectedDate(null);
@@ -34,9 +36,9 @@ function DatePickerFooter({
     {
       className: `datePicker-buttons-container ${allButtonsHidden ? "datePicker-buttons-container--hidden" : ""}`,
       children: [
-        !hideTertiaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "url", onClick: handleClear, ...tertiaryButtonProps, children: "Clear" }),
-        !hideSecondaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: handleCancel, ...secondaryButtonProps, children: "Cancel" }),
-        !hidePrimaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: handleApply, ...primaryButtonProps, children: "Apply" })
+        !hideTertiaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "url", onClick: handleClear, ...tertiaryButtonProps, children: t("common.clear") }),
+        !hideSecondaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: handleCancel, ...secondaryButtonProps, children: t("common.cancel") }),
+        !hidePrimaryButton && /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: handleApply, ...primaryButtonProps, children: t("common.apply") })
       ]
     }
   );

package/dist/components/DatePicker/datePickerInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerInput.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+D,MAAM,OAAO,CAAC;AACpF,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAW7C,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,eAAO,MAAM,eAAe,sGAqQ3B,CAAC"}
+{"version":3,"file":"datePickerInput.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/datePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AACpF,OAAe,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAY7C,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,eAAO,MAAM,eAAe,sGAsQ3B,CAAC"}

package/dist/components/DatePicker/datePickerInput.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
 import moment from "moment";
+import { useTranslation } from "../../i18n/useTranslation.js";
 const FORMAT_MAP = {
   "DD-MM-YYYY": { day: [0, 2], month: [3, 5], year: [6, 10] },
   "MM-DD-YYYY": { day: [3, 5], month: [0, 2], year: [6, 10] },
@@ -11,7 +12,7 @@ const NUMBER_POSITIONS_YYYY_MM_DD = [0, 1, 2, 3, 5, 6, 8, 9];
 const DatePickerInput = forwardRef(
   ({
     dateString,
-    placeholder = "Select Date",
+    placeholder,
     isDisabled,
     isError,
     inputContainerRef,
@@ -30,6 +31,7 @@ const DatePickerInput = forwardRef(
     "data-testid": dataTestId,
     ...rest
   }, ref) => {
+    const { t } = useTranslation();
     const [isFocused, setIsFocused] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const inputRef = useRef(null);
@@ -228,7 +230,7 @@ const DatePickerInput = forwardRef(
               "data-testid": dataTestId,
               disabled: isDisabled,
               id,
-              placeholder,
+              placeholder: placeholder ?? t("datePicker.selectDate"),
               readOnly,
               type: "text",
               value: inputValue,

package/dist/components/DateRangePicker/dateRangePickerCustom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateRangePickerCustom.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/dateRangePickerCustom.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,CAAC,EAAE,yBAAyB,EAAE,aAAa,EAAE,EAAE,GAAG,2CActF"}
+{"version":3,"file":"dateRangePickerCustom.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/dateRangePickerCustom.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,CAAC,EAAE,yBAAyB,EAAE,aAAa,EAAE,EAAE,GAAG,2CAetF"}

package/dist/components/DateRangePicker/dateRangePickerCustom.js

@@ -1,14 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { rangeSelectorTypes } from "./utils.js";
+import { getRangeSelectorTypes } from "./utils.js";
 import { RadioButtonGroup } from "../RadioButtonGroup/index.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 function DateRangePickerCustom({ handleRangeSelectorChange, selectedRange }) {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "dateRangePicker-show-range-main-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "dateRangePicker-shortcut-heading", children: "Date Range" }),
+    /* @__PURE__ */ jsx("div", { className: "dateRangePicker-shortcut-heading", children: t("dateRangePicker.rangeHeading") }),
     /* @__PURE__ */ jsx("div", { className: "dateRangePicker-shortcut-list", children: /* @__PURE__ */ jsx(
       RadioButtonGroup,
       {
         className: "dateRangePicker-shortcut-list-item",
-        options: rangeSelectorTypes,
+        options: getRangeSelectorTypes(t),
         value: selectedRange,
         onChange: handleRangeSelectorChange
       }

package/dist/components/DateRangePicker/dateRangePickerFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateRangePickerFooter.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/dateRangePickerFooter.tsx"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,CAAC,EACpC,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,GACf,EAAE,GAAG,2CAkCL"}
+{"version":3,"file":"dateRangePickerFooter.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/dateRangePickerFooter.tsx"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,CAAC,EACpC,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,GACf,EAAE,GAAG,2CAsCL"}

package/dist/components/DateRangePicker/dateRangePickerFooter.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../Button/index.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 function DateRangePickerFooter({
   selectedDaysNumber,
   handleResetDates,
@@ -10,16 +11,15 @@ function DateRangePickerFooter({
   primaryButtonProps,
   hasInputErrors
 }) {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "dateRangePicker-footer-container", children: [
     /* @__PURE__ */ jsx("div", { className: "dateRangePicker-buttons-left-container", children: /* @__PURE__ */ jsxs("div", { className: "dateRangePicker-footer-label-container", children: [
-      "Selected: ",
-      /* @__PURE__ */ jsxs("span", { className: "dateRangePicker-footer-value", children: [
-        selectedDaysNumber,
-        " days"
-      ] })
+      t("dateRangePicker.selectedLabel"),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "dateRangePicker-footer-value", children: t("dateRangePicker.daysCount", { count: selectedDaysNumber }) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "dateRangePicker-buttons-right-container", children: [
-      /* @__PURE__ */ jsx(Button, { size: "small", variant: "url", onClick: handleResetDates, children: "Clear" }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "url", onClick: handleResetDates, children: t("common.clear") }),
       onSecondaryButtonClick && /* @__PURE__ */ jsx(
         Button,
         {
@@ -27,7 +27,7 @@ function DateRangePickerFooter({
           variant: "secondary",
           onClick: handleCancelDates,
           ...tertiaryButtonProps,
-          children: "Cancel"
+          children: t("common.cancel")
         }
       ),
       /* @__PURE__ */ jsx(
@@ -38,7 +38,7 @@ function DateRangePickerFooter({
           variant: "primary",
           onClick: handleApplyDates,
           ...primaryButtonProps,
-          children: "Apply"
+          children: t("common.apply")
         }
       )
     ] })

package/dist/components/DateRangePicker/dateRangePickerInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateRangePickerInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/dateRangePickerInput.tsx"],"names":[],"mappings":"AAMA,wBAAgB,oBAAoB,CAAC,EACnC,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,aAA4B,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,UAAU,GACX,EAAE,GAAG,2CAkfL"}
+{"version":3,"file":"dateRangePickerInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/dateRangePickerInput.tsx"],"names":[],"mappings":"AAOA,wBAAgB,oBAAoB,CAAC,EACnC,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,aAA4B,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,UAAU,GACX,EAAE,GAAG,2CAmfL"}

package/dist/components/DateRangePicker/dateRangePickerInput.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import moment from "moment";
 import { getAssetUrl } from "../../utils/assetBase.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 const calendarIcon = getAssetUrl("icons/calendar.svg");
 function DateRangePickerInput({
   inputContainerRef,
@@ -27,6 +28,7 @@ function DateRangePickerInput({
   resetTrigger,
   customIcon
 }) {
+  const { t } = useTranslation();
   const [startInputValue, setStartInputValue] = useState("");
   const [endInputValue, setEndInputValue] = useState("");
   const [startErrorState, setStartErrorState] = useState(false);
@@ -345,7 +347,7 @@ function DateRangePickerInput({
           "input",
           {
             ref: startDateInputRef,
-            placeholder: "Start Date",
+            placeholder: t("dateRangePicker.startPlaceholder"),
             readOnly,
             type: "text",
             value: startInputValue,
@@ -363,7 +365,7 @@ function DateRangePickerInput({
           "input",
           {
             ref: endDateInputRef,
-            placeholder: "End Date",
+            placeholder: t("dateRangePicker.endPlaceholder"),
             readOnly,
             type: "text",
             value: endInputValue,

package/dist/components/DateRangePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,+BAA+B,CAAC;AAIvC,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,eAAO,MAAM,eAAe,kFAyW3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,+BAA+B,CAAC;AAIvC,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,eAAO,MAAM,eAAe,kFA6W3B,CAAC"}