impact-ui 4.0.14-alpha.1 → 4.0.14-tableV36-beta.1

package/README.md

@@ -130,7 +130,6 @@ Live names from the **impact-ui MCP** `list_components` tool, plus source-only p
 | `Stepper`                       | Wizard progress  | `StepperStep[]`                                                                                                                                                                                                                |
 | `Accordion` / `AccordionModern` | Collapsible      | Modern supports sortable items                                                                                                                                                                                                 |
 | `DynamicLayout`                 | Layout slots     | Injected layout props                                                                                                                                                                                                          |
-| `NewDynamicLayout`              | Layout slots     | Injected layout props                                                                                                                                                                                                          |
 | `AGLocaleMap`                   | Grid locales     | From i18n exports                                                                                                                                                                                                              |
 
 ### 💬 Feedback & overlays
@@ -164,7 +163,6 @@ Live names from the **impact-ui MCP** `list_components` tool, plus source-only p
 | `FilterPanelHeader` / `PanelSidebar` / `PanelFooter` | Filter chrome      | Companion exports                           |
 | `Notification`                                       | Inbox drawer       | List, tasks, tabs                           |
 | `CreateItemFlow`                                     | Create wizard      | Multi-step                                  |
-| `NewCreateItemFlow`                                  | Create wizard      | Multi-step                                  |
 | `CommentsPanel`                                      | Threads            | `CommentsProvider`, `useComments`           |
 
 ### 🤖 Chat, i18n & shortcuts
@@ -177,7 +175,7 @@ Live names from the **impact-ui MCP** `list_components` tool, plus source-only p
 | `ShortcutsProvider` / `ShortcutScope` / `ShortcutHint` / `ShortcutManager` | Hotkeys            | Config + display helpers                                                                  |
 | `KeyboardShortcuts` / `ShortcutModal`                                      | Shortcut UI        | List & capture                                                                            |
 
-**MCP names (components):** AGLocaleMap, Accordion, AccordionModern, Alert, AppliedFilters, Avatar, Badge, BottomSheet, Breadcrumbs, Button, ButtonGroup, Card, Chart, ChatBotComponent, Checkbox, Chips, CommentsContext, CommentsProvider, CreateItemFlow, NewCreateItemFlow, DatePicker, DateRangePicker, DynamicLayout, NewDynamicLayout, EmptyState, FileUpload, FilterDropDown, FilterPanel, FilterPanelHeader, FilterSlider, HelperText, I18nContext, I18nProvider, Input, KeyboardShortcuts, Loader, Menu, MenuHeaderInfo, Modal, MonthPicker, MonthRangePicker, OldTable, Panel, PanelFooter, PanelSidebar, Popover, Portal, ProgressBar, Prompt, RadioButtonGroup, Select, ShortcutHint, ShortcutManager, ShortcutModal, ShortcutScope, ShortcutsConfigContext, ShortcutsProvider, Slider, Stepper, Switch, Table, Tabs, Tag, TagGroup, TextArea, Toast, Tooltip
+**MCP names (components):** AGLocaleMap, Accordion, AccordionModern, Alert, AppliedFilters, Avatar, Badge, BottomSheet, Breadcrumbs, Button, ButtonGroup, Card, Chart, ChatBotComponent, Checkbox, Chips, CommentsContext, CommentsProvider, CreateItemFlow, DatePicker, DateRangePicker, DynamicLayout, EmptyState, FileUpload, FilterDropDown, FilterPanel, FilterPanelHeader, FilterSlider, HelperText, I18nContext, I18nProvider, Input, KeyboardShortcuts, Loader, Menu, MenuHeaderInfo, Modal, MonthPicker, MonthRangePicker, OldTable, Panel, PanelFooter, PanelSidebar, Popover, Portal, ProgressBar, Prompt, RadioButtonGroup, Select, ShortcutHint, ShortcutManager, ShortcutModal, ShortcutScope, ShortcutsConfigContext, ShortcutsProvider, Slider, Stepper, Switch, Table, Tabs, Tag, TagGroup, TextArea, Toast, Tooltip
 
 **MCP names (patterns):** FiltersStrip, Header, HomePage, Notification, Sidebar
 

package/dist/_virtual/index2.js

@@ -1,4 +1,4 @@
-var reactIs = { exports: {} };
+var propTypes = { exports: {} };
 export {
-  reactIs as __module
+  propTypes as __module
 };

package/dist/_virtual/index3.js

@@ -1,4 +1,4 @@
-var propTypes = { exports: {} };
+var reactIs = { exports: {} };
 export {
-  propTypes as __module
+  reactIs as __module
 };

package/dist/components/CreateItemFlow/CreateItemFlow.types.d.ts

@@ -1,44 +1,21 @@
-import { ReactNode } from 'react';
-import { BaseComponentProps } from '../../types';
-import { InjectedLayoutProps } from '../DynamicLayout';
-import { StepperStep } from '../Stepper/Stepper.types';
+import { ReactNode, CSSProperties, Ref } from 'react';
+import { ButtonProps } from '../Button/Button.types';
 
-export interface CreateItemFlowProps extends BaseComponentProps {
-    /** Current step (1-based) */
-    step?: number;
-    totalSteps?: number;
-    /** Width of the left panel (e.g. "375px") */
+export interface CreateItemFlowProps {
     leftPanelWidth?: string | number;
-    /** Headings for each step section in the right content */
-    headings?: string[];
-    /** One React node per step (matched with headings by index) */
-    children?: ReactNode | ReactNode[];
-    onCancel?: () => void;
-    onNext?: () => void;
-    onPrev?: () => void;
-    onStepClick?: (step: number) => void;
-    /** Stepper variant: default (MUI) or progress */
-    stepperVariant?: 'default' | 'progress' | 'mui';
-    leftPanelTitle?: string;
-    leftPanelDescription?: string;
-    /** Custom left panel image (overrides default) */
-    leftPanelImage?: ReactNode | null;
-    /** Custom actions (overrides default Prev/Next buttons) */
-    actionsChildren?: ReactNode | null;
-    showStepper?: boolean;
+    leftPanelContent?: ReactNode;
+    leftPanelImage?: ReactNode;
+    rightContent?: ReactNode;
+    title?: string;
+    description?: string;
+    prevButtonProps?: Partial<ButtonProps>;
+    extraButtonProp?: ReactNode;
+    nextButtonProps?: Partial<ButtonProps>;
+    customCSS?: CSSProperties;
+    className?: string;
 }
-export interface RightContentPanelProps extends Partial<InjectedLayoutProps> {
-    showStepper: boolean;
-    steps: StepperStep[];
-    step: number;
-    stepperVariant: 'default' | 'progress' | 'mui';
-    onStepClick?: (step: number) => void;
-    headings: string[];
-    children?: ReactNode | ReactNode[];
-    actionsChildren?: ReactNode | null;
-    onCancel?: () => void;
-    onPrev?: () => void;
-    onNext?: () => void;
-    totalSteps: number;
+export interface RightContentPanelProps {
+    contentRef?: Ref<HTMLDivElement>;
+    children?: ReactNode;
 }
 //# sourceMappingURL=CreateItemFlow.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreateItemFlow.types.d.ts","sourceRoot":"","sources":["../../../src/components/CreateItemFlow/CreateItemFlow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iDAAiD;IACjD,cAAc,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kDAAkD;IAClD,cAAc,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAClC,2DAA2D;IAC3D,eAAe,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,sBAAuB,SAAQ,OAAO,CAAC,mBAAmB,CAAC;IAC1E,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"CreateItemFlow.types.d.ts","sourceRoot":"","sources":["../../../src/components/CreateItemFlow/CreateItemFlow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

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

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { CreateItemFlowProps } from './CreateItemFlow.types';
 
-export type { CreateItemFlowProps } from './CreateItemFlow.types';
-export declare const CreateItemFlow: React.NamedExoticComponent<CreateItemFlowProps>;
+export declare const CreateItemFlow: React.MemoExoticComponent<({ leftPanelWidth, leftPanelContent, leftPanelImage, rightContent, title, description, prevButtonProps, extraButtonProp, nextButtonProps, customCSS, className, }: CreateItemFlowProps) => React.JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CreateItemFlow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAOpC,OAAO,EAAE,KAAK,mBAAmB,EAA+B,MAAM,wBAAwB,CAAC;AAC/F,OAAO,8BAA8B,CAAC;AAgGtC,eAAO,MAAM,cAAc,+LAnDxB,mBAAmB,uBAmDqC,CAAC"}

package/dist/components/CreateItemFlow/index.js

@@ -1,25 +1,19 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".field .field-label{color:#666;font-size:14px;margin-bottom:8px}.form-section .field{margin-bottom:24px}.form-section .field:last-child{margin-bottom:0}.left-panel-content{display:flex;flex-direction:column;height:100%;justify-content:space-between}.left-panel-content .left-panel-title h1{margin-bottom:16px}.right-content .ia-stepper.progress .progress-steps{margin-bottom:32px}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { memo, useMemo } from "react";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,: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}.content-wrapper{flex:1;min-height:100%}.form-section{width:100%}.form-section .form-section-title{color:#0d152c;font-size:16px;font-weight:600;margin-bottom:12px}.form-section .form-filter-block{background:#f7f9fd;border-radius:8px;margin-top:20px;padding:12px}.form-section .form-filter-block .form-filter-title{color:#0d152c;font-size:14px;font-weight:600;margin-bottom:16px}.form-section .form-filter-block .form-filter-fields{display:flex;flex-wrap:wrap;gap:24px}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { memo } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/ChevronLeft.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/ChevronRight.js";
 import { getAssetUrl } from "../../utils/assetBase.js";
 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 createFlowImage = getAssetUrl("icons/create-item-flow-img.webp");
+const LeftPanelContent = ({ leftPanelContent, 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(
+    leftPanelContent,
+    leftPanelImage ? leftPanelImage : /* @__PURE__ */ jsx(
       "img",
       {
         alt: t("createItemFlow.imageAlt"),
@@ -28,116 +22,72 @@ function LeftPanelContent({
       }
     )
   ] });
-}
-function RightContentPanel({
-  showStepper,
-  steps,
-  step,
-  stepperVariant,
-  onStepClick,
-  headings,
-  children,
-  contentRef,
-  hasScroll,
-  actionsChildren,
-  onCancel,
-  onPrev,
-  onNext,
-  totalSteps
-}) {
-  const { t } = useTranslation();
-  const childArray = React__default.Children.toArray(children ?? []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    showStepper && /* @__PURE__ */ jsx(
-      Stepper,
-      {
-        activeStep: step - 1,
-        handleStep: (index) => onStepClick == null ? void 0 : onStepClick(index + 1),
-        orientation: "horizontal",
-        steps,
-        variant: stepperVariant
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: `content-wrapper ${hasScroll === false ? "no-scroll" : ""}`,
-        children: headings.map((heading, index) => /* @__PURE__ */ jsxs("div", { className: "heading", children: [
-          /* @__PURE__ */ jsx("h2", { children: heading }),
-          childArray[index]
-        ] }, index))
-      }
-    ),
-    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: 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") })
-    ] })
-  ] });
-}
-const CreateItemFlow = memo(function CreateItemFlow2({
-  step = 1,
-  totalSteps = 3,
+};
+const RightContentPanel = ({ contentRef, children }) => /* @__PURE__ */ jsx("div", { ref: contentRef, className: "content-wrapper", children });
+const CreateItemFlowComponent = ({
   leftPanelWidth,
-  headings = [],
-  children,
-  onCancel,
-  onNext,
-  onPrev,
-  onStepClick,
-  stepperVariant = "progress",
-  leftPanelTitle,
-  leftPanelDescription = "",
+  leftPanelContent = null,
   leftPanelImage = null,
-  actionsChildren = null,
-  showStepper = true
-}) {
+  rightContent,
+  title,
+  description = "",
+  prevButtonProps = {},
+  extraButtonProp,
+  nextButtonProps = {},
+  customCSS,
+  className
+}) => {
   const { t } = useTranslation();
-  const resolvedLeftPanelTitle = leftPanelTitle ?? t("createItemFlow.defaultTitle");
-  const steps = useMemo(
-    () => Array.from({ length: totalSteps }, (_, idx) => ({
-      label: t("createItemFlow.stepLabel", { number: idx + 1 }),
-      description: t("createItemFlow.stepDescription", {
-        number: idx + 1,
-        total: totalSteps
-      })
-    })),
-    [totalSteps, t]
-  );
-  const rightContent = /* @__PURE__ */ jsx(
-    RightContentPanel,
-    {
-      actionsChildren,
-      headings,
-      showStepper,
-      step,
-      stepperVariant,
-      steps,
-      totalSteps,
-      onCancel,
-      onNext,
-      onPrev,
-      onStepClick,
-      children
-    }
-  );
+  const {
+    children: prevLabel = t("createItemFlow.back"),
+    icon: prevIcon,
+    ...restPrevProps
+  } = prevButtonProps;
+  const {
+    children: nextLabel = t("createItemFlow.next"),
+    icon: nextIcon,
+    ...restNextProps
+  } = nextButtonProps;
+  const resolvedTitle = title ?? t("createItemFlow.defaultTitle");
   return /* @__PURE__ */ jsx(
     DynamicLayout,
     {
-      leftPanel: /* @__PURE__ */ jsx(
-        LeftPanelContent,
-        {
-          leftPanelDescription,
-          leftPanelImage,
-          leftPanelTitle: resolvedLeftPanelTitle
-        }
-      ),
+      className,
+      description,
+      footer: /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: "icon" in prevButtonProps ? prevIcon : /* @__PURE__ */ jsx(default_1, {}),
+            variant: restPrevProps.variant ?? "tertiary",
+            ...restPrevProps,
+            children: prevLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "footer-right-group", children: [
+          extraButtonProp,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: "icon" in nextButtonProps ? nextIcon : /* @__PURE__ */ jsx(default_1$1, {}),
+              iconPlacement: nextButtonProps.iconPlacement ?? "right",
+              variant: restNextProps.variant ?? "primary",
+              ...restNextProps,
+              children: nextLabel
+            }
+          )
+        ] })
+      ] }),
+      leftPanel: /* @__PURE__ */ jsx(LeftPanelContent, { leftPanelContent, leftPanelImage }),
       leftPanelWidth,
-      rightContent,
-      showStepper
+      rightContent: /* @__PURE__ */ jsx(RightContentPanel, { children: rightContent }),
+      style: customCSS,
+      title: resolvedTitle
     }
   );
-});
+};
+const CreateItemFlow = memo(CreateItemFlowComponent);
+CreateItemFlow.displayName = "CreateItemFlow";
 export {
   CreateItemFlow
 };

package/dist/components/DynamicLayout/index.d.ts

@@ -1,13 +1,15 @@
 import { default as React } from 'react';
-import { DynamicLayoutProps } from './DynamicLayout.types';
 
-export type { DynamicLayoutProps, InjectedLayoutProps } from './DynamicLayout.types';
-/**
- * Two-panel layout: left panel (fixed width) and right content that receives
- * contentRef and hasScroll for scroll detection.
- */
-export declare function DynamicLayout({ leftPanel, rightContent, leftPanelWidth, className, showStepper, ...props }: DynamicLayoutProps): React.JSX.Element;
-export declare namespace DynamicLayout {
-    var displayName: string;
+interface DynamicLayoutProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    leftPanel?: React.ReactNode;
+    rightContent: React.ReactElement;
+    leftPanelWidth?: string | number;
+    className?: string;
+    footer?: React.ReactNode;
+    [key: string]: unknown;
 }
+export declare const DynamicLayout: ({ title, description, leftPanel, rightContent, leftPanelWidth, className, footer, ...props }: DynamicLayoutProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,6BAA6B,CAAC;AAErC,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAErF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,cAAc,EACd,SAAc,EACd,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,qBA+CpB;yBAtDe,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,6BAA6B,CAAC;AAGrC,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,GAAI,8FAS3B,kBAAkB,sBAgCpB,CAAC"}

package/dist/components/DynamicLayout/index.js

@@ -1,48 +1,45 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.dynamic-layout-container{background-color:#fff;border-radius:8px;box-shadow:0 0 4px #ababab40;box-sizing:border-box;display:flex;top:90px;right:230px;bottom:90px;left:230px;position:absolute}.dynamic-layout-container .left-panel{border-right:1px solid #d9dde7;box-sizing:border-box;padding:100px 48px;width:375px}.dynamic-layout-container .left-panel h1{color:#1a1a1a;font-size:24px;font-weight:600;margin-bottom:16px}.dynamic-layout-container .left-panel p{color:#666;font-size:14px;line-height:1.5}.dynamic-layout-container .right-content{background-color:#fff;border-radius:0 8px 8px 0;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;padding:100px 120px;width:calc(100% - 375px)}.dynamic-layout-container .right-content.with-stepper{padding-top:50px}.dynamic-layout-container .right-content .content-wrapper{flex:1;overflow-y:auto}.dynamic-layout-container .right-content .content-wrapper.no-scroll+.actions:before{display:none}.dynamic-layout-container .right-content .content-wrapper .heading{margin-bottom:32px}.dynamic-layout-container .right-content .content-wrapper .heading h2{color:#1a1a1a;font-size:20px;font-weight:600;margin-bottom:8px}.dynamic-layout-container .right-content .content-wrapper .heading .field-label{color:#666;font-size:14px;margin-bottom:8px}.dynamic-layout-container .right-content .content-wrapper .form-section{margin-bottom:32px}.dynamic-layout-container .right-content .content-wrapper .form-section .field-group{display:flex;flex-wrap:wrap;gap:24px;justify-content:flex-start;margin-bottom:24px}.dynamic-layout-container .right-content .actions{background:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;padding-top:12px;position:relative}.dynamic-layout-container .right-content .actions:before{background:#d9dde7;content:"";height:1px;left:-25px;position:absolute;right:-25px;top:0}@media screen and (min-width:1400px) and (max-width:1600px){.dynamic-layout-container{top:90px;right:150px;bottom:90px;left:150px}.dynamic-layout-container .right-content{padding:50px 90px}.dynamic-layout-container .left-panel-image{width:100%}}@media screen and (max-width:1399px){.dynamic-layout-container .left-panel{width:300px}.dynamic-layout-container .right-content{width:calc(100% - 300px)}.dynamic-layout-container{top:90px;right:100px;bottom:90px;left:100px}.dynamic-layout-container .right-content{padding:50px 60px}.dynamic-layout-container .left-panel-image{width:100%}}')),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,: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}.dynamic-layout-container{background-color:#fff;border-radius:24px!important;box-shadow:0 0 4px #ababab40;display:flex;flex-direction:column;top:0;right:24px;bottom:24px;left:24px;justify-content:center;position:absolute}.dynamic-layout-container .dynamic-layout-header{border-bottom:1px solid #d9dde7;display:flex;flex-direction:column;gap:8px;padding:24px}.dynamic-layout-container .dynamic-layout-header h1{color:#0d152c;font-size:24px;font-weight:800;line-height:36px}.dynamic-layout-container .dynamic-layout-header p{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}.dynamic-layout-container .dynamic-layout-body{background-position:100% 0;background-repeat:no-repeat;background-size:contain;border-bottom-right-radius:24px;display:flex;flex:1;min-height:0;overflow:hidden;padding:24px}.dynamic-layout-container .dynamic-layout-body .left-panel{border-right:1px solid #d9dde7;padding-right:24px;width:var(--left-panel-width,220px)}.dynamic-layout-container .dynamic-layout-body .left-panel .left-panel-content{display:flex;flex-direction:column;height:100%;justify-content:space-between}.dynamic-layout-container .dynamic-layout-body .left-panel .left-panel-image{height:130px;margin:0 auto;width:132px}.dynamic-layout-container .dynamic-layout-body .right-column{display:flex;flex-direction:column;justify-content:space-between;min-height:0;padding-left:24px;width:calc(100% - var(--left-panel-width, 220px))}.dynamic-layout-container .dynamic-layout-body .right-column .right-content{display:flex;flex:1;flex-direction:column;min-height:0;overflow-x:hidden;overflow-y:auto}.dynamic-layout-container .dynamic-layout-body .right-column .dynamic-layout-footer{border-top:1px solid #d9dde7;display:flex;justify-content:space-between;padding-top:24px}.dynamic-layout-container .dynamic-layout-body .right-column .dynamic-layout-footer .footer-right-group{align-items:center;display:flex;gap:12px}@media screen and (min-width:1400px) and (max-width:1600px){.dynamic-layout-body{padding:20px}.left-panel-image{width:100%}}@media screen and (max-width:1399px){.dynamic-layout-body{padding:16px}.left-panel{flex-shrink:0;padding-right:16px;width:fit-content}.right-column{flex:1;padding-left:16px;width:auto}.left-panel-image{height:auto;max-width:132px;width:100%}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useRef, useState, useLayoutEffect } from "react";
+import React__default, { useRef } from "react";
 
-function DynamicLayout({
+import { getAssetUrl } from "../../utils/assetBase.js";
+import Box from "../../node_modules/@mui/material/Box/Box.js";
+const DynamicLayout = ({
+  title,
+  description,
   leftPanel,
   rightContent,
   leftPanelWidth,
-  className = "",
-  showStepper = false,
+  className,
+  footer,
   ...props
-}) {
+}) => {
   const contentRef = useRef(null);
-  const [hasScroll, setHasScroll] = useState(false);
-  useLayoutEffect(() => {
-    const el = contentRef.current;
-    const checkScroll = () => {
-      if (!el) return;
-      setHasScroll(el.scrollHeight > el.clientHeight);
-    };
-    checkScroll();
-    window.addEventListener("resize", checkScroll);
-    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(checkScroll) : null;
-    if (resizeObserver && el) resizeObserver.observe(el);
-    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(checkScroll) : null;
-    if (mutationObserver && el) {
-      mutationObserver.observe(el, {
-        childList: true,
-        subtree: true,
-        characterData: true,
-        attributes: true
-      });
-    }
-    return () => {
-      window.removeEventListener("resize", checkScroll);
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      mutationObserver == null ? void 0 : mutationObserver.disconnect();
-    };
-  }, [rightContent]);
-  return /* @__PURE__ */ jsxs("div", { className: `dynamic-layout-container ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "left-panel", style: { width: leftPanelWidth }, children: leftPanel }),
-    /* @__PURE__ */ jsx("div", { className: `right-content ${showStepper ? "with-stepper" : ""}`, children: React__default.cloneElement(rightContent, { contentRef, hasScroll }) })
+  const contentBackgroundImage = getAssetUrl("images/review-tech-bg.webp");
+  return /* @__PURE__ */ jsxs(Box, { className: `dynamic-layout-container ${className || ""}`, ...props, children: [
+    /* @__PURE__ */ jsxs(Box, { className: "dynamic-layout-header", children: [
+      /* @__PURE__ */ jsx("h1", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: "dynamic-layout-body",
+        style: leftPanelWidth ? {
+          "--left-panel-width": typeof leftPanelWidth === "number" ? `${leftPanelWidth}px` : leftPanelWidth
+        } : void 0,
+        sx: { backgroundImage: `url(${contentBackgroundImage})` },
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: "left-panel", children: leftPanel }),
+          /* @__PURE__ */ jsxs(Box, { className: "right-column", children: [
+            /* @__PURE__ */ jsx(Box, { className: "right-content", children: React__default.cloneElement(rightContent, { contentRef }) }),
+            footer && /* @__PURE__ */ jsx(Box, { className: "dynamic-layout-footer", children: footer })
+          ] })
+        ]
+      }
+    )
   ] });
-}
-DynamicLayout.displayName = "DynamicLayout";
+};
 export {
   DynamicLayout
 };