@epam/ai-dial-builder-form 1.2.0-dev.14 → 1.2.0-dev.141

package/components/BuilderFormBody/BuilderFormBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderFormBody.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormBody/BuilderFormBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAOjF,8GAA8G;AAC9G,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsBpD,CAAC"}
+{"version":3,"file":"BuilderFormBody.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormBody/BuilderFormBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAOjF,8GAA8G;AAC9G,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DpD,CAAC"}

package/components/BuilderFormContainer/BuilderFormContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderFormContainer.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormContainer/BuilderFormContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAM3F,uIAAuI;AACvI,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAqE9D,CAAC"}
+{"version":3,"file":"BuilderFormContainer.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormContainer/BuilderFormContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAM3F,uIAAuI;AACvI,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0E9D,CAAC"}

package/components/BuilderFormHeader/BuilderFormHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderFormHeader.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormHeader/BuilderFormHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAIrF,uOAAuO;AACvO,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAyExD,CAAC"}
+{"version":3,"file":"BuilderFormHeader.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormHeader/BuilderFormHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAIrF,uOAAuO;AACvO,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA8ExD,CAAC"}

package/components/EditorLayout/EditorLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditorLayout/EditorLayout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAG1E;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+F9C,CAAC"}
+{"version":3,"file":"EditorLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditorLayout/EditorLayout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAG1E;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAsG9C,CAAC"}

package/components/EditorSection/EditorSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSection.d.ts","sourceRoot":"","sources":["../../../src/components/EditorSection/EditorSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0BhD,CAAC"}
+{"version":3,"file":"EditorSection.d.ts","sourceRoot":"","sources":["../../../src/components/EditorSection/EditorSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2BhD,CAAC"}

package/constants/public-class-names.d.ts

@@ -0,0 +1,7 @@
+export declare const BUILDER_FORM_CLASS: {
+    /** The editor layout root, which holds the header and the content columns. */
+    readonly layout: "dial-builder-form-layout";
+    /** Every `EditorSection` box, whatever a caller puts inside it. */
+    readonly section: "dial-builder-form-section";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB;IAC7B,8EAA8E;;IAE9E,mEAAmE;;CAE3D,CAAC"}

package/index.css

@@ -1,2 +1,2 @@
-._header_8b0ws_4{border-color:var(--bfh-border,var(--stroke-tertiary,#e0e6f0))}._title_8b0ws_8{font-family:var(--bfh-font-family,inherit)}._container_d8tdv_1{background:var(--bfc-bg,var(--bg-layer-base,#f5f7fa))}._footer_d8tdv_10{background:var(--bfc-bg,var(--bg-layer-base,#f5f7fa));box-shadow:0 2px 12px 0 var(--shadow-xs-2,#161b2d08), 0 2px 6px 0 var(--shadow-xs-1,#2764d933)}._section_l1mnx_1{border-color:var(--es-border-color,var(--stroke-tertiary,#e0e6f0))}._title_l1mnx_5{color:var(--es-title-color,var(--text-primary,#161b2d))}._headerBorder_1kidu_1{border-bottom-color:var(--el-header-border-color,var(--stroke-tertiary,#e0e6f0))}._footerBorder_1kidu_5{border-top-color:var(--el-header-border-color,var(--stroke-tertiary,#e0e6f0))}._sidebarBorder_1kidu_9{border-inline-end-color:var(--el-sidebar-border-color,var(--stroke-tertiary,#e0e6f0))}._box_c9as8_1{background:var(--aa-box-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--aa-box-border,var(--stroke-tertiary,#e0e6f0))}._icon_c9as8_6{color:var(--aa-icon,var(--text-secondary,#57647a))}._caption_c9as8_10{color:var(--aa-caption,var(--text-tertiary,#848e9c))}
-/*$vite$:1*/
+._body_m2y60_2._body_m2y60_2{flex-direction:column}._sideColumn_m2y60_6._sideColumn_m2y60_6{width:100%}._reservedColumn_m2y60_10._reservedColumn_m2y60_10{display:none}@media (width>=1280px){._body_m2y60_2._body_m2y60_2{flex-direction:row}._sideColumn_m2y60_6._sideColumn_m2y60_6{flex-shrink:0;width:400px}._reservedColumn_m2y60_10._reservedColumn_m2y60_10{display:block}}._header_oo757_4._header_oo757_4{border-block-width:1px 0;padding-inline:16px}@media (width>=1280px){._header_oo757_4._header_oo757_4{border-block-width:0 1px;padding-inline:32px}}._header_oo757_4._header_oo757_4{border-color:var(--bfh-border,var(--stroke-tertiary,#e0e6f0))}._actions_oo757_20._actions_oo757_20{display:none}@media (width>=1280px){._actions_oo757_20._actions_oo757_20{display:flex}}._title_oo757_29{font-family:var(--bfh-font-family,inherit)}._container_k1awi_1{background:var(--bfc-bg,var(--bg-layer-base,#f5f7fa))}._footer_k1awi_10._footer_k1awi_10{display:flex}@media (width>=1280px){._footer_k1awi_10._footer_k1awi_10{display:none}}._footer_k1awi_10._footer_k1awi_10{background:var(--bfc-bg,var(--bg-layer-base,#f5f7fa));box-shadow:0 2px 12px 0 var(--shadow-xs-2,#161b2d08), 0 2px 6px 0 var(--shadow-xs-1,#2764d933)}._section_l1mnx_1{border-color:var(--es-border-color,var(--stroke-tertiary,#e0e6f0))}._title_l1mnx_5{color:var(--es-title-color,var(--text-primary,#161b2d))}._headerBorder_1kidu_1{border-bottom-color:var(--el-header-border-color,var(--stroke-tertiary,#e0e6f0))}._footerBorder_1kidu_5{border-top-color:var(--el-header-border-color,var(--stroke-tertiary,#e0e6f0))}._sidebarBorder_1kidu_9{border-inline-end-color:var(--el-sidebar-border-color,var(--stroke-tertiary,#e0e6f0))}._box_c9as8_1{background:var(--aa-box-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--aa-box-border,var(--stroke-tertiary,#e0e6f0))}._icon_c9as8_6{color:var(--aa-icon,var(--text-secondary,#57647a))}._caption_c9as8_10{color:var(--aa-caption,var(--text-tertiary,#848e9c))}
+/*$vite$:1*/.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.visible{visibility:visible}.absolute{position:absolute}.sticky{position:sticky}.bottom-0{bottom:0}.z-10{z-index:10}.mb-3{margin-bottom:.75rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-full{height:100%}.min-h-0{min-height:0}.w-16{width:4rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow-\[1\]{flex-grow:1}.grow-\[2\]{flex-grow:2}.basis-0{flex-basis:0px}.resize{resize:both}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:4px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-6{padding:1.5rem}.\!px-0{padding-left:0!important;padding-right:0!important}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:1280px){.desktop\:flex{display:flex}.desktop\:hidden{display:none}.desktop\:w-\[360px\]{width:360px}.desktop\:flex-1{flex:1 1 0%}.desktop\:shrink-0{flex-shrink:0}.desktop\:basis-40{flex-basis:10rem}.desktop\:flex-row{flex-direction:row}.desktop\:items-start{align-items:flex-start}.desktop\:overflow-hidden{overflow:hidden}.desktop\:overflow-y-auto{overflow-y:auto}.desktop\:border-e{border-inline-end-width:1px}.desktop\:px-8{padding-left:2rem;padding-right:2rem}.desktop\:pb-3{padding-bottom:.75rem}.desktop\:pt-3{padding-top:.75rem}}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>\*\]\:flex-1>*{flex:1 1 0%}

package/index.d.ts

@@ -17,4 +17,5 @@ export type { DeploymentCreationFormFieldErrors, DeploymentCreationFormFieldLabe
 export type { DeploymentCreationFormErrorCodes, DeploymentCreationFormValidationOptions, } from './models/validation';
 export { DeploymentCreationFieldErrorCode } from './models/validation';
 export { NAME_PATTERN, SEMVER_VERSION_PATTERN, VERSION_PATTERN, validateDeploymentCreationFields, } from './utils/validate-deployment-creation-fields';
+export { BUILDER_FORM_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,YAAY,EACV,yBAAyB,EACzB,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AACpF,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,oCAAoC,CAAC;AAC5C,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,cAAc,EACd,eAAe,EACf,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4DAA4D,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,4DAA4D,CAAC;AACpG,YAAY,EAAE,2BAA2B,EAAE,MAAM,4DAA4D,CAAC;AAC9G,YAAY,EACV,iCAAiC,EACjC,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,iCAAiC,EACjC,iCAAiC,EACjC,gCAAgC,EAChC,4BAA4B,EAC5B,iCAAiC,EACjC,kCAAkC,EAClC,kCAAkC,EAClC,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,GAC7B,MAAM,mCAAmC,CAAC;AAC3C,YAAY,EACV,gCAAgC,EAChC,uCAAuC,GACxC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,eAAe,EACf,gCAAgC,GACjC,MAAM,6CAA6C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,YAAY,EACV,yBAAyB,EACzB,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AACpF,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,oCAAoC,CAAC;AAC5C,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,cAAc,EACd,eAAe,EACf,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4DAA4D,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,4DAA4D,CAAC;AACpG,YAAY,EAAE,2BAA2B,EAAE,MAAM,4DAA4D,CAAC;AAC9G,YAAY,EACV,iCAAiC,EACjC,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,iCAAiC,EACjC,iCAAiC,EACjC,gCAAgC,EAChC,4BAA4B,EAC5B,iCAAiC,EACjC,kCAAkC,EAClC,kCAAkC,EAClC,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,GAC7B,MAAM,mCAAmC,CAAC;AAC3C,YAAY,EACV,gCAAgC,EAChC,uCAAuC,GACxC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,eAAe,EACf,gCAAgC,GACjC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,10 +1,10 @@
 import { RESIZABLE_TEXTAREA_CLASS_NAME as e, TAG_INPUT_TAG_CLASS_NAME as t, buildCssVars as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
 import { ButtonAppearance as i, ButtonVariant as a, DIAL_ICON_SIZE as o, DIAL_KIT_ICON_STROKE as s, DangerIconButton as c, ElementSize as l, GhostIconButton as u, Input as d, Label as f, LinkButton as p, NeutralButton as m, Popup as h, PrimaryButton as g, Select as _, Spinner as v, TagInput as y, Textarea as b, TextareaResize as x } from "@epam/ai-dial-ui-kit";
 import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { IconArrowLeft as T, IconArrowNarrowLeft as E, IconPhoto as D, IconPlus as O, IconTrashX as ee } from "@tabler/icons-react";
-import { Suspense as k, useCallback as A, useEffect as j, useId as M, useRef as N, useState as P } from "react";
+import { IconArrowLeft as ee, IconArrowNarrowLeft as T, IconPhoto as E, IconPlus as D, IconTrashX as te } from "@tabler/icons-react";
+import { Suspense as O, useCallback as k, useEffect as A, useId as j, useRef as M, useState as N } from "react";
 //#region src/components/BuilderFormActions/BuilderFormActions.tsx
-var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: s }) => /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(m, {
+var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: s }) => /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(m, {
 	label: e.cancelButtonLabel,
 	onClick: t,
 	disabled: r,
@@ -19,57 +19,83 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		"aria-hidden": !0,
 		children: /* @__PURE__ */ C(v, { size: o.SM })
 	}) : void 0
-})] }), I = "flex w-full flex-col desktop:w-[360px] desktop:shrink-0", L = ({ left: e, children: t, metadata: n }) => /* @__PURE__ */ w("div", {
-	className: "flex flex-1 flex-col desktop:flex-row",
-	children: [
-		e != null && /* @__PURE__ */ C("div", {
-			className: I,
-			children: e
-		}),
-		/* @__PURE__ */ C("div", {
-			className: "flex w-full min-w-0 flex-1 flex-col",
-			children: t
-		}),
-		n != null && /* @__PURE__ */ C("div", {
-			className: I,
-			children: n
-		}),
-		e != null && n == null && /* @__PURE__ */ C("div", {
-			"aria-hidden": !0,
-			className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
-		})
-	]
-}), R = {
-	header: "_header_8b0ws_4",
-	title: "_title_8b0ws_8"
-}, z = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: c = !1, isSubmitDisabled: l = !1, isSubmitting: d = !1, styles: f }) => {
-	let { colors: p, typography: m } = f ?? {}, h = m?.fontClassName ?? "dial-h1-text", g = !!m?.fontClassName;
+})] }), F = {
+	body: "_body_m2y60_2",
+	sideColumn: "_sideColumn_m2y60_6",
+	reservedColumn: "_reservedColumn_m2y60_10"
+}, I = r("flex flex-col", F.sideColumn), L = ({ left: e, children: t, metadata: n, layout: i }) => {
+	let a = e != null && n == null && i?.reserveEndColumn !== !1, o = i ? {
+		flex: `0 1 ${i.sideColumnWidth ?? "400px"}`,
+		width: "100%",
+		minWidth: `min(100%, ${i.sideColumnWidth ?? "400px"})`,
+		maxWidth: "100%"
+	} : void 0, s = i ? {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		columnGap: i.columnGap ?? "0px",
+		alignItems: "stretch"
+	} : void 0;
+	return /* @__PURE__ */ w("div", {
+		className: r("flex min-w-0 flex-1", F.body),
+		style: s,
+		children: [
+			e != null && /* @__PURE__ */ C("div", {
+				className: I,
+				style: o,
+				children: e
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "flex w-full min-w-0 flex-1 flex-col",
+				style: i ? {
+					flex: "1 1 320px",
+					minWidth: "min(100%, 320px)"
+				} : void 0,
+				children: t
+			}),
+			n != null && /* @__PURE__ */ C("div", {
+				className: I,
+				style: o,
+				children: n
+			}),
+			a && /* @__PURE__ */ C("div", {
+				"aria-hidden": !0,
+				style: o,
+				className: r(F.reservedColumn, F.sideColumn)
+			})
+		]
+	});
+}, R = {
+	header: "_header_oo757_4",
+	actions: "_actions_oo757_20",
+	title: "_title_oo757_29"
+}, z = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: c = !1, isSubmitDisabled: l = !1, isSubmitting: d = !1, backIcon: f, styles: p }) => {
+	let { colors: m, typography: h } = p ?? {}, g = h?.fontClassName ?? "dial-h1-text", _ = !!h?.fontClassName;
 	return /* @__PURE__ */ w("div", {
 		style: n({
-			"--bfh-border": p?.borderColor,
-			"--bfh-font-family": g ? void 0 : m?.fontFamily
+			"--bfh-border": m?.borderColor,
+			"--bfh-font-family": _ ? void 0 : h?.fontFamily
 		}),
-		className: r("flex h-16 items-center justify-between gap-6 border-t px-4 desktop:border-b desktop:border-t-0 desktop:px-8", R.header),
+		className: r("flex h-16 items-center justify-between gap-6", R.header),
 		children: [
 			/* @__PURE__ */ w("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
 				children: [/* @__PURE__ */ C(u, {
-					icon: /* @__PURE__ */ C(T, {
+					icon: f === void 0 ? /* @__PURE__ */ C(ee, {
 						size: o.LG,
 						className: "rtl:scale-x-[-1]",
 						"aria-hidden": !0,
 						stroke: s
-					}),
+					}) : f,
 					"aria-label": e.backButtonLabel,
 					onClick: t
 				}), /* @__PURE__ */ C("h1", {
-					className: r("truncate", R.title, h),
+					className: r("truncate", R.title, g),
 					children: e.title
 				})]
 			}),
 			/* @__PURE__ */ C("div", {
-				className: "hidden items-center gap-2 desktop:flex",
-				children: /* @__PURE__ */ C(F, {
+				className: r("items-center gap-2", R.actions),
+				children: /* @__PURE__ */ C(P, {
 					labels: e,
 					onCancel: i,
 					onSubmit: a,
@@ -87,16 +113,16 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		]
 	});
 }, B = {
-	container: "_container_d8tdv_1",
-	footer: "_footer_d8tdv_10"
-}, V = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: o = !1, isSubmitDisabled: s = !1, isSubmitting: c = !1, left: l, children: u, metadata: d, styles: f }) => {
-	let { colors: p, header: m, cssVars: h } = f ?? {};
+	container: "_container_k1awi_1",
+	footer: "_footer_k1awi_10"
+}, V = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: o = !1, isSubmitDisabled: s = !1, isSubmitting: c = !1, backIcon: l, className: u, left: d, children: f, metadata: p, layout: m, styles: h }) => {
+	let { colors: g, header: _, cssVars: v } = h ?? {};
 	return /* @__PURE__ */ w("div", {
 		style: {
-			...n({ "--bfc-bg": p?.background }),
-			...h
+			...n({ "--bfc-bg": g?.background }),
+			...v
 		},
-		className: r("flex h-full w-full flex-col overflow-y-auto", B.container),
+		className: r("flex h-full w-full flex-col overflow-y-auto", u, B.container),
 		children: [
 			/* @__PURE__ */ C(z, {
 				labels: e,
@@ -106,16 +132,18 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				isCancelDisabled: o,
 				isSubmitDisabled: s,
 				isSubmitting: c,
-				styles: m
+				backIcon: l,
+				styles: _
 			}),
 			/* @__PURE__ */ C(L, {
-				left: l,
-				metadata: d,
-				children: u
+				left: d,
+				metadata: p,
+				layout: m,
+				children: f
 			}),
 			/* @__PURE__ */ C("div", {
-				className: r("sticky bottom-0 z-10 flex items-center gap-2 p-3 desktop:hidden", B.footer),
-				children: /* @__PURE__ */ C(F, {
+				className: r("sticky bottom-0 z-10 items-center gap-2 p-3", B.footer),
+				children: /* @__PURE__ */ C(P, {
 					labels: e,
 					onCancel: i,
 					onSubmit: a,
@@ -128,34 +156,37 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		]
 	});
 }, H = {
+	layout: "dial-builder-form-layout",
+	section: "dial-builder-form-section"
+}, U = {
 	section: "_section_l1mnx_1",
 	title: "_title_l1mnx_5"
-}, U = ({ title: e, children: t, styles: i, className: a }) => {
+}, W = ({ title: e, children: t, styles: i, className: a }) => {
 	let o = n({
 		"--es-border-color": i?.colors?.borderColor,
 		"--es-title-color": i?.colors?.titleColor
 	});
 	return /* @__PURE__ */ w("section", {
-		className: r("flex flex-col gap-4 rounded border p-6", H.section, a),
+		className: r("flex flex-col gap-4 rounded border p-6", U.section, a, H.section),
 		style: o,
 		children: [e != null && /* @__PURE__ */ C("h2", {
-			className: r("dial-h3-text", H.title),
+			className: r("dial-h3-text", U.title),
 			children: e
 		}), t]
 	});
-}, W = {
+}, G = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, G = ({ title: e, onBack: t, backAriaLabel: i = "Back", actions: a, leftContent: c, rightContent: l, isSaving: d = !1, labels: f, styles: p, dir: m }) => {
-	let h = M(), g = d ? f?.savingStatusLabel ?? "Saving" : "";
+}, K = ({ title: e, onBack: t, backAriaLabel: i = "Back", actions: a, leftContent: c, rightContent: l, isSaving: d = !1, labels: f, styles: p, dir: m }) => {
+	let h = j(), g = d ? f?.savingStatusLabel ?? "Saving" : "", _ = n({
+		"--el-header-border-color": p?.colors?.headerBorderColor,
+		"--el-sidebar-border-color": p?.colors?.sidebarBorderColor
+	});
 	return /* @__PURE__ */ w("div", {
 		dir: m,
-		className: "flex min-h-0 flex-1 flex-col",
-		style: n({
-			"--el-header-border-color": p?.colors?.headerBorderColor,
-			"--el-sidebar-border-color": p?.colors?.sidebarBorderColor
-		}),
+		className: r("flex min-h-0 flex-1 flex-col", H.layout),
+		style: _,
 		children: [
 			/* @__PURE__ */ C("span", {
 				role: "status",
@@ -165,11 +196,11 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				children: g
 			}),
 			/* @__PURE__ */ w("div", {
-				className: r("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", W.headerBorder),
+				className: r("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", G.headerBorder),
 				children: [/* @__PURE__ */ w("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
 					children: [/* @__PURE__ */ C(u, {
-						icon: /* @__PURE__ */ C(E, {
+						icon: /* @__PURE__ */ C(T, {
 							size: o.LG,
 							stroke: s,
 							"aria-hidden": !0,
@@ -189,7 +220,7 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			/* @__PURE__ */ w("div", {
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
 				children: [/* @__PURE__ */ C("div", {
-					className: r(l == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", l == null ? void 0 : W.sidebarBorder),
+					className: r(l == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", l == null ? void 0 : G.sidebarBorder),
 					children: c
 				}), l != null && /* @__PURE__ */ C("div", {
 					className: "desktop:flex-1 desktop:overflow-y-auto",
@@ -197,16 +228,16 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				})]
 			}),
 			a != null && /* @__PURE__ */ C("div", {
-				className: r("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", W.footerBorder),
+				className: r("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", G.footerBorder),
 				children: a
 			})
 		]
 	});
-}, K = {
+}, q = {
 	box: "_box_c9as8_1",
 	icon: "_icon_c9as8_6",
 	caption: "_caption_c9as8_10"
-}, q = ({ label: e, avatarUrl: t, avatarAlt: i = "", addAvatarLabel: a = "Add avatar", captionText: c = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: u, styles: d, className: m }) => {
+}, J = ({ label: e, avatarUrl: t, avatarAlt: i = "", addAvatarLabel: a = "Add avatar", captionText: c = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: u, styles: d, className: m }) => {
 	let h = n({
 		"--aa-box-bg": d?.colors?.boxBackgroundColor,
 		"--aa-box-border": d?.colors?.boxBorderColor,
@@ -219,22 +250,22 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		children: [/* @__PURE__ */ C(f, { label: e }), /* @__PURE__ */ w("div", {
 			className: "flex items-start gap-3",
 			children: [/* @__PURE__ */ C("div", {
-				className: r("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", K.box),
+				className: r("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", q.box),
 				children: t ? /* @__PURE__ */ C("img", {
 					src: t,
 					alt: i,
 					className: "h-16 w-16 object-cover"
-				}) : /* @__PURE__ */ C(D, {
+				}) : /* @__PURE__ */ C(E, {
 					size: o.LG,
 					stroke: s,
 					"aria-hidden": !0,
-					className: K.icon
+					className: q.icon
 				})
 			}), /* @__PURE__ */ w("div", {
 				className: "flex flex-col gap-3",
 				children: [/* @__PURE__ */ C(p, {
 					size: l.Small,
-					iconBefore: /* @__PURE__ */ C(O, {
+					iconBefore: /* @__PURE__ */ C(D, {
 						size: o.SM,
 						stroke: s,
 						"aria-hidden": !0
@@ -243,14 +274,14 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					label: a,
 					onClick: u
 				}), /* @__PURE__ */ C("span", {
-					className: r("dial-tiny-text", K.caption),
+					className: r("dial-tiny-text", q.caption),
 					children: c
 				})]
 			})]
 		})]
 	});
-}, J = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
-	let c = A((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = A((e) => /* @__PURE__ */ C("div", {
+}, Y = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
+	let c = k((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = k((e) => /* @__PURE__ */ C("div", {
 		className: "dial-small-text px-6 py-3",
 		children: /* @__PURE__ */ C("p", {
 			className: "mb-3 text-secondary",
@@ -283,7 +314,7 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		s.deleteConfirmMultipleText,
 		s.deleteConfirmItemsLabel
 	]);
-	return /* @__PURE__ */ C(k, {
+	return /* @__PURE__ */ C(O, {
 		fallback: null,
 		children: e && /* @__PURE__ */ C(i, {
 			isOpen: e,
@@ -318,33 +349,33 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			cancelLabel: s.cancelLabel
 		})
 	});
-}, te = (e, t, n) => ({
+}, X = (e, t, n) => ({
 	id: e,
 	language: n.find((e) => !t.has(e.code))?.code ?? "",
 	name: "",
 	description: ""
-}), Y = ({ value: t, onChange: n, availableLocaleOptions: u = [], labels: f, className: m, summaryClassName: g = "dial-body-text text-secondary", rowLabelClassName: v = "dial-tiny-lead-text text-secondary" }) => {
-	let { summaryLabel: y, addLabel: S, editLabel: T, popupTitle: E, addLocaleLabel: D, localeRowLabel: k = "Locale", languageLabel: A, nameLabel: M, namePlaceholder: F, descriptionLabel: I, descriptionPlaceholder: L, deleteAriaLabel: R, cancelLabel: z = "Cancel", saveLabel: B = "Save" } = f, [V, H] = P(!1), [U, W] = P([]), G = N(0);
-	j(() => {
-		V && W(t.length > 0 ? t : [te(`locale-row-${++G.current}`, /* @__PURE__ */ new Set(), u)]);
+}), Z = ({ value: t, onChange: n, availableLocaleOptions: u = [], labels: f, className: m, summaryClassName: g = "dial-body-text text-secondary", rowLabelClassName: v = "dial-tiny-lead-text text-secondary" }) => {
+	let { summaryLabel: y, addLabel: S, editLabel: ee, popupTitle: T, addLocaleLabel: E, localeRowLabel: O = "Locale", languageLabel: k, nameLabel: j, namePlaceholder: P, descriptionLabel: F, descriptionPlaceholder: I, deleteAriaLabel: L, cancelLabel: R = "Cancel", saveLabel: z = "Save" } = f, [B, V] = N(!1), [H, U] = N([]), W = M(0);
+	A(() => {
+		B && U(t.length > 0 ? t : [X(`locale-row-${++W.current}`, /* @__PURE__ */ new Set(), u)]);
 	}, [
-		V,
+		B,
 		t,
 		u
 	]);
-	let K = () => H(!0), q = () => H(!1), J = () => {
-		n(U.filter((e) => e.language && e.name)), H(!1);
-	}, Y = () => {
-		let e = new Set(U.map((e) => e.language).filter(Boolean));
-		W((t) => [...t, te(`locale-row-${++G.current}`, e, u)]);
-	}, X = (e, t) => {
-		W((n) => n.map((n) => n.id === e ? {
+	let G = () => V(!0), K = () => V(!1), q = () => {
+		n(H.filter((e) => e.language && e.name)), V(!1);
+	}, J = () => {
+		let e = new Set(H.map((e) => e.language).filter(Boolean));
+		U((t) => [...t, X(`locale-row-${++W.current}`, e, u)]);
+	}, Y = (e, t) => {
+		U((n) => n.map((n) => n.id === e ? {
 			...n,
 			...t
 		} : n));
 	}, Z = (e) => {
-		W((t) => t.filter((t) => t.id !== e));
-	}, Q = (e) => u.find((t) => t.code === e)?.label ?? e.toUpperCase(), $ = U.some((e) => !e.language || !e.name);
+		U((t) => t.filter((t) => t.id !== e));
+	}, Q = (e) => u.find((t) => t.code === e)?.label ?? e.toUpperCase(), $ = H.some((e) => !e.language || !e.name);
 	return u.length === 0 ? null : /* @__PURE__ */ w("div", {
 		className: r("flex items-center gap-2", m),
 		children: [
@@ -353,32 +384,32 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				children: `${y}: ${t.map((e) => `[${Q(e.language)}]`).join(", ")}`
 			}),
 			/* @__PURE__ */ C(p, {
-				label: t.length > 0 ? T : S,
-				iconBefore: /* @__PURE__ */ C(O, {
+				label: t.length > 0 ? ee : S,
+				iconBefore: /* @__PURE__ */ C(D, {
 					size: o.SM,
 					"aria-hidden": !0,
 					stroke: s
 				}),
 				className: "!px-0",
-				onClick: K
+				onClick: G
 			}),
 			/* @__PURE__ */ C(h, {
-				open: V,
-				header: E,
-				onClose: q,
+				open: B,
+				header: T,
+				onClose: K,
 				mainButtons: [{
-					label: z,
-					onClick: q
+					label: R,
+					onClick: K
 				}, {
-					label: B,
+					label: z,
 					variant: a.Primary,
 					disabled: $,
-					onClick: J
+					onClick: q
 				}],
 				children: /* @__PURE__ */ w("div", {
 					className: "flex flex-col gap-8 px-6 py-3",
-					children: [U.map((t, n) => {
-						let r = new Set(U.filter((e) => e.id !== t.id).map((e) => e.language).filter(Boolean));
+					children: [H.map((t, n) => {
+						let r = new Set(H.filter((e) => e.id !== t.id).map((e) => e.language).filter(Boolean));
 						return /* @__PURE__ */ w("div", {
 							className: "flex flex-col gap-2",
 							children: [/* @__PURE__ */ w("div", {
@@ -386,31 +417,31 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 								children: [/* @__PURE__ */ w("span", {
 									className: v,
 									children: [
-										k,
+										O,
 										" ",
 										n + 1
 									]
 								}), /* @__PURE__ */ C(c, {
 									appearance: i.Ghost,
 									size: l.Small,
-									icon: /* @__PURE__ */ C(ee, {
+									icon: /* @__PURE__ */ C(te, {
 										size: o.SM,
 										"aria-hidden": !0,
 										stroke: s
 									}),
-									"aria-label": `${R} ${n + 1}`,
+									"aria-label": `${L} ${n + 1}`,
 									onClick: () => Z(t.id)
 								})]
 							}), /* @__PURE__ */ w("div", {
 								role: "group",
-								"aria-label": `${k} ${n + 1}`,
+								"aria-label": `${O} ${n + 1}`,
 								className: "flex flex-col gap-5",
 								children: [/* @__PURE__ */ w("div", {
 									className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
 									children: [/* @__PURE__ */ C(_, {
 										id: `${t.id}-language`,
 										labelProps: {
-											label: A,
+											label: k,
 											required: !0
 										},
 										className: "desktop:shrink-0 desktop:basis-40",
@@ -420,48 +451,48 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 											disabled: r.has(e.code)
 										})),
 										value: t.language,
-										onChange: (e) => X(t.id, { language: e })
+										onChange: (e) => Y(t.id, { language: e })
 									}), /* @__PURE__ */ C(d, {
 										id: `${t.id}-name`,
 										containerClassName: "min-w-0 flex-1",
 										required: !0,
 										value: t.name,
-										onChange: (e) => X(t.id, { name: e ?? "" }),
+										onChange: (e) => Y(t.id, { name: e ?? "" }),
 										labelProps: {
-											label: M,
+											label: j,
 											required: !0
 										},
-										placeholder: F
+										placeholder: P
 									})]
 								}), /* @__PURE__ */ C(b, {
 									id: `${t.id}-description`,
 									className: e,
 									resize: x.Vertical,
 									value: t.description,
-									onChange: (e) => X(t.id, { description: e }),
-									labelProps: { label: I },
-									placeholder: L
+									onChange: (e) => Y(t.id, { description: e }),
+									labelProps: { label: F },
+									placeholder: I
 								})]
 							})]
 						}, t.id);
 					}), /* @__PURE__ */ C(p, {
-						label: D,
-						iconBefore: /* @__PURE__ */ C(O, {
+						label: E,
+						iconBefore: /* @__PURE__ */ C(D, {
 							size: o.SM,
 							"aria-hidden": !0,
 							stroke: s
 						}),
 						className: "self-start",
-						onClick: Y,
-						disabled: U.length >= u.length
+						onClick: J,
+						disabled: H.length >= u.length
 					})]
 				})
 			})
 		]
 	});
-}, X = ({ values: n, errors: i, onChange: a, onNameBlur: o, onVersionBlur: s, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: f, availableLocaleOptions: p = [] }) => {
-	let m = N(null), h = N(null), g = N(!1), _ = !!(i.name || i.version);
-	return j(() => {
+}, Q = ({ values: n, errors: i, onChange: a, onNameBlur: o, onVersionBlur: s, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: f, availableLocaleOptions: p = [] }) => {
+	let m = M(null), h = M(null), g = M(!1), _ = !!(i.name || i.version);
+	return A(() => {
 		_ && !g.current && (i.name ? m : h).current?.focus(), g.current = _;
 	}, [
 		_,
@@ -472,7 +503,7 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		"aria-label": u.ariaLabel,
 		className: r("flex flex-col gap-4", f?.root),
 		children: [
-			/* @__PURE__ */ C(q, {
+			/* @__PURE__ */ C(J, {
 				label: u.iconUrl.label,
 				avatarUrl: c,
 				addAvatarLabel: u.iconUrl.addAvatarLabel,
@@ -519,7 +550,7 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				className: e,
 				resize: x.Vertical
 			}),
-			/* @__PURE__ */ C(Y, {
+			/* @__PURE__ */ C(Z, {
 				value: n.otherLocales,
 				onChange: (e) => a({ otherLocales: e }),
 				availableLocaleOptions: p,
@@ -539,13 +570,13 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			})
 		]
 	});
-}, Z = /* @__PURE__ */ function(e) {
+}, $ = /* @__PURE__ */ function(e) {
 	return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e;
-}({}), Q = /^[a-zA-Z0-9 _.-]+$/, $ = /^[a-zA-Z0-9._-]+$/, ne = /^\d+(\.\d+)*$/, re = (e, t = {}) => {
+}({}), ne = /^[a-zA-Z0-9 _.-]+$/, re = /^[a-zA-Z0-9._-]+$/, ie = /^\d+(\.\d+)*$/, ae = (e, t = {}) => {
 	let n = {}, r = e.name.trim();
-	r ? t.validateNamePattern && !Q.test(r) && (n.name = Z.InvalidFormat) : n.name = Z.Required;
+	r ? t.validateNamePattern && !ne.test(r) && (n.name = $.InvalidFormat) : n.name = $.Required;
 	let i = e.version.trim();
-	return t.validateVersionPattern && i && ((t.validateVersionPattern instanceof RegExp ? t.validateVersionPattern : $).test(i) || (n.version = Z.InvalidFormat)), n;
+	return t.validateVersionPattern && i && ((t.validateVersionPattern instanceof RegExp ? t.validateVersionPattern : re).test(i) || (n.version = $.InvalidFormat)), n;
 };
 //#endregion
-export { q as AddAvatar, J as AvatarPickerModal, V as BuilderFormContainer, Z as DeploymentCreationFieldErrorCode, X as DeploymentCreationForm, Y as DeploymentLocalesField, G as EditorLayout, U as EditorSection, Q as NAME_PATTERN, ne as SEMVER_VERSION_PATTERN, $ as VERSION_PATTERN, re as validateDeploymentCreationFields };
+export { J as AddAvatar, Y as AvatarPickerModal, H as BUILDER_FORM_CLASS, V as BuilderFormContainer, $ as DeploymentCreationFieldErrorCode, Q as DeploymentCreationForm, Z as DeploymentLocalesField, K as EditorLayout, W as EditorSection, ne as NAME_PATTERN, ie as SEMVER_VERSION_PATTERN, re as VERSION_PATTERN, ae as validateDeploymentCreationFields };

package/models/builder-form-body-props.d.ts

@@ -7,5 +7,14 @@ export interface BuilderFormBodyProps {
     children: ReactNode;
     /** End-edge column, matching `left`'s width. When omitted while `left` is set, an empty column of the same width is reserved so the main column stays optically centered. */
     metadata?: ReactNode;
+    /** Optional container-responsive column sizing; omitted preserves the existing desktop layout. */
+    layout?: {
+        /** Width of side columns. Defaults to '400px'. */
+        sideColumnWidth?: string;
+        /** Gap between columns. Defaults to '0px'. */
+        columnGap?: string;
+        /** Reserve an empty end column for centering. Defaults to true. */
+        reserveEndColumn?: boolean;
+    };
 }
 //# sourceMappingURL=builder-form-body-props.d.ts.map

package/models/builder-form-body-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder-form-body-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-body-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,uDAAuD;AACvD,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,6KAA6K;IAC7K,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}
+{"version":3,"file":"builder-form-body-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-body-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,uDAAuD;AACvD,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,6KAA6K;IAC7K,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kGAAkG;IAClG,MAAM,CAAC,EAAE;QACP,kDAAkD;QAClD,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,8CAA8C;QAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mEAAmE;QACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACH"}

package/models/builder-form-container-props.d.ts

@@ -37,6 +37,10 @@ export interface BuilderFormContainerProps {
     isSubmitDisabled?: boolean;
     /** When `true`, the submit action shows a spinner and reports `aria-busy` on both surfaces. Defaults to `false`. */
     isSubmitting?: boolean;
+    /** Optional replacement for the header's default back icon. */
+    backIcon?: ReactNode;
+    /** Additional class name for the container root. */
+    className?: string;
     /** Body's start-edge column. Full width on mobile, a fixed-width column on desktop. */
     left?: ReactNode;
     /** Body's main column, filling the space left by `left` and `metadata`. */
@@ -45,5 +49,7 @@ export interface BuilderFormContainerProps {
     metadata?: ReactNode;
     /** Style overrides. */
     styles?: BuilderFormContainerStyles;
+    /** Optional container-responsive body sizing. */
+    layout?: import('./builder-form-body-props').BuilderFormBodyProps['layout'];
 }
 //# sourceMappingURL=builder-form-container-props.d.ts.map

package/models/builder-form-container-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder-form-container-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-container-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAErC;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,sEAAsE;AACtE,MAAM,WAAW,0BAA0B;IACzC,wDAAwD;IACxD,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,uCAAuC;IACvC,MAAM,EAAE,uBAAuB,CAAC;IAChC,gEAAgE;IAChE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,4GAA4G;IAC5G,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,4GAA4G;IAC5G,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oHAAoH;IACpH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,oLAAoL;IACpL,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC"}
+{"version":3,"file":"builder-form-container-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-container-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAErC;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,sEAAsE;AACtE,MAAM,WAAW,0BAA0B;IACzC,wDAAwD;IACxD,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,uCAAuC;IACvC,MAAM,EAAE,uBAAuB,CAAC;IAChC,gEAAgE;IAChE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,4GAA4G;IAC5G,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,4GAA4G;IAC5G,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wFAAwF;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oHAAoH;IACpH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,oLAAoL;IACpL,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,2BAA2B,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;CAC7E"}

package/models/builder-form-header-props.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BuilderFormActionsLabels } from './builder-form-actions-props';
 /** Localized labels used by the {@link BuilderFormHeader} component. */
 export interface BuilderFormHeaderLabels extends BuilderFormActionsLabels {
@@ -46,6 +47,8 @@ export interface BuilderFormHeaderProps {
     isSubmitDisabled?: boolean;
     /** When `true`, the submit action shows a spinner and reports `aria-busy`. Defaults to `false`. */
     isSubmitting?: boolean;
+    /** Optional replacement for the default back icon; `null` suppresses it. */
+    backIcon?: ReactNode;
     /** Style overrides. */
     styles?: BuilderFormHeaderStyles;
 }

package/models/builder-form-header-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder-form-header-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-header-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAE7E,wEAAwE;AACxE,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,oIAAoI;IACpI,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wEAAwE;AACxE,MAAM,WAAW,2BAA2B;IAC1C,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,mEAAmE;AACnE,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,iDAAiD;IACjD,UAAU,CAAC,EAAE,2BAA2B,CAAC;CAC1C;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,MAAM,EAAE,uBAAuB,CAAC;IAChC,uDAAuD;IACvD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mGAAmG;IACnG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uBAAuB;IACvB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC"}
+{"version":3,"file":"builder-form-header-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-header-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAE7E,wEAAwE;AACxE,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,oIAAoI;IACpI,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wEAAwE;AACxE,MAAM,WAAW,2BAA2B;IAC1C,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,mEAAmE;AACnE,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,iDAAiD;IACjD,UAAU,CAAC,EAAE,2BAA2B,CAAC;CAC1C;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,MAAM,EAAE,uBAAuB,CAAC;IAChC,uDAAuD;IACvD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mGAAmG;IACnG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-builder-form",
   "description": "Presentational builder form shells, editor layouts, and shared deployment field sets for composing and editing DIAL entities",
-  "version": "1.2.0-dev.14",
+  "version": "1.2.0-dev.141",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,8 +20,8 @@
     "@tabler/icons-react": "^3.44.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.14",
-    "@epam/ai-dial-ui-kit": "^0.14.2",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.141",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.18",
     "react": "^19.2.8"
   },
   "repository": {