@epam/ai-dial-builder-form 1.2.0-dev.21 → 1.2.0-dev.217

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/components/AvatarPickerModal/AvatarPickerModal.d.ts.map +1 -1
  2. package/components/BuilderFormBody/BuilderFormBody.d.ts.map +1 -1
  3. package/components/BuilderFormContainer/BuilderFormContainer.d.ts.map +1 -1
  4. package/components/BuilderFormHeader/BuilderFormHeader.d.ts.map +1 -1
  5. package/components/DeploymentCreationForm/DeploymentCreationForm.d.ts +5 -1
  6. package/components/DeploymentCreationForm/DeploymentCreationForm.d.ts.map +1 -1
  7. package/components/EditorLayout/EditorLayout.d.ts.map +1 -1
  8. package/components/EditorSection/EditorSection.d.ts.map +1 -1
  9. package/components/EntityEditor/EntityEditor.d.ts +4 -0
  10. package/components/EntityEditor/EntityEditor.d.ts.map +1 -0
  11. package/components/MetadataForm/MetadataForm.d.ts +4 -0
  12. package/components/MetadataForm/MetadataForm.d.ts.map +1 -0
  13. package/constants/metadata-form.d.ts +7 -0
  14. package/constants/metadata-form.d.ts.map +1 -0
  15. package/constants/public-class-names.d.ts +11 -0
  16. package/constants/public-class-names.d.ts.map +1 -0
  17. package/hooks/useMetadataForm.d.ts +13 -0
  18. package/hooks/useMetadataForm.d.ts.map +1 -0
  19. package/index.css +2 -2
  20. package/index.d.ts +9 -0
  21. package/index.d.ts.map +1 -1
  22. package/index.js +585 -315
  23. package/models/avatar-picker-modal.d.ts +2 -10
  24. package/models/avatar-picker-modal.d.ts.map +1 -1
  25. package/models/builder-form-body-props.d.ts +9 -0
  26. package/models/builder-form-body-props.d.ts.map +1 -1
  27. package/models/builder-form-container-props.d.ts +6 -0
  28. package/models/builder-form-container-props.d.ts.map +1 -1
  29. package/models/builder-form-header-props.d.ts +3 -0
  30. package/models/builder-form-header-props.d.ts.map +1 -1
  31. package/models/deployment-creation-form.d.ts +31 -16
  32. package/models/deployment-creation-form.d.ts.map +1 -1
  33. package/models/entity-editor-props.d.ts +70 -0
  34. package/models/entity-editor-props.d.ts.map +1 -0
  35. package/models/metadata-field.d.ts +18 -0
  36. package/models/metadata-field.d.ts.map +1 -0
  37. package/models/metadata-form-props.d.ts +62 -0
  38. package/models/metadata-form-props.d.ts.map +1 -0
  39. package/models/use-metadata-form.d.ts +36 -0
  40. package/models/use-metadata-form.d.ts.map +1 -0
  41. package/models/validation.d.ts +5 -1
  42. package/models/validation.d.ts.map +1 -1
  43. package/package.json +3 -3
  44. package/utils/metadata-form.d.ts +7 -0
  45. package/utils/metadata-form.d.ts.map +1 -0
  46. package/utils/validate-deployment-creation-fields.d.ts.map +1 -1
package/index.js CHANGED
@@ -1,263 +1,296 @@
1
- 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";
2
- 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";
3
- import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
4
- import { IconArrowLeft as T, IconArrowNarrowLeft as E, IconPhoto as D, IconPlus as O, IconTrashX as ee } from "@tabler/icons-react";
5
- import { Suspense as k, useCallback as A, useEffect as j, useId as M, useRef as N, useState as P } from "react";
1
+ import { ENTITY_DESCRIPTION_MAX_LENGTH as e, ENTITY_NAME_MAX_LENGTH as t, RESIZABLE_TEXTAREA_CLASS_NAME as n, TAG_INPUT_TAG_CLASS_NAME as r, buildCssVars as i, exceedsMaxLength as a, hasControlCharacters as o, mergeClasses as s } from "@epam/ai-dial-chat-shared";
2
+ import { ButtonAppearance as c, ButtonVariant as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, DangerIconButton as f, ElementSize as p, GhostIconButton as m, Input as h, Label as g, LinkButton as _, NeutralButton as v, Popup as y, PrimaryButton as b, Select as x, Spinner as S, TagInput as C, Textarea as w, TextareaResize as ee } from "@epam/ai-dial-ui-kit";
3
+ import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
4
+ import { IconArrowLeft as O, IconArrowNarrowLeft as k, IconPhoto as A, IconPlus as j, IconTrashX as M } from "@tabler/icons-react";
5
+ import { Suspense as N, memo as P, useCallback as F, useEffect as te, useId as ne, useLayoutEffect as re, useMemo as I, useRef as L, useState as R } from "react";
6
6
  //#region src/components/BuilderFormActions/BuilderFormActions.tsx
7
- 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, {
7
+ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: o }) => /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(v, {
8
8
  label: e.cancelButtonLabel,
9
9
  onClick: t,
10
10
  disabled: r,
11
- className: s
12
- }), /* @__PURE__ */ C(g, {
11
+ className: o
12
+ }), /* @__PURE__ */ E(b, {
13
13
  label: e.submitButtonLabel,
14
14
  onClick: n,
15
15
  disabled: i,
16
16
  "aria-busy": a,
17
- className: s,
18
- iconBefore: a ? /* @__PURE__ */ C("span", {
17
+ className: o,
18
+ iconBefore: a ? /* @__PURE__ */ E("span", {
19
19
  "aria-hidden": !0,
20
- children: /* @__PURE__ */ C(v, { size: o.SM })
20
+ children: /* @__PURE__ */ E(S, { size: u.SM })
21
21
  }) : void 0
22
- })] }), I = "flex w-full flex-col desktop:w-[360px] desktop:shrink-0", L = ({ left: e, children: t, metadata: n }) => /* @__PURE__ */ w("div", {
23
- className: "flex flex-1 flex-col desktop:flex-row",
24
- children: [
25
- e != null && /* @__PURE__ */ C("div", {
26
- className: I,
27
- children: e
28
- }),
29
- /* @__PURE__ */ C("div", {
30
- className: "flex w-full min-w-0 flex-1 flex-col",
31
- children: t
32
- }),
33
- n != null && /* @__PURE__ */ C("div", {
34
- className: I,
35
- children: n
36
- }),
37
- e != null && n == null && /* @__PURE__ */ C("div", {
38
- "aria-hidden": !0,
39
- className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
40
- })
41
- ]
42
- }), R = {
43
- header: "_header_8b0ws_4",
44
- title: "_title_8b0ws_8"
45
- }, z = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: c = !1, isSubmitDisabled: l = !1, isSubmitting: d = !1, styles: f }) => {
46
- let { colors: p, typography: m } = f ?? {}, h = m?.fontClassName ?? "dial-h1-text", g = !!m?.fontClassName;
47
- return /* @__PURE__ */ w("div", {
48
- style: n({
22
+ })] }), B = {
23
+ body: "_body_m2y60_2",
24
+ sideColumn: "_sideColumn_m2y60_6",
25
+ reservedColumn: "_reservedColumn_m2y60_10"
26
+ }, V = s("flex flex-col", B.sideColumn), H = ({ left: e, children: t, metadata: n, layout: r }) => {
27
+ let i = e != null && n == null && r?.reserveEndColumn !== !1, a = r ? {
28
+ flex: `0 1 ${r.sideColumnWidth ?? "400px"}`,
29
+ width: "100%",
30
+ minWidth: `min(100%, ${r.sideColumnWidth ?? "400px"})`,
31
+ maxWidth: "100%"
32
+ } : void 0, o = r ? {
33
+ flexDirection: "row",
34
+ flexWrap: "wrap",
35
+ columnGap: r.columnGap ?? "0px",
36
+ alignItems: "stretch"
37
+ } : void 0;
38
+ return /* @__PURE__ */ D("div", {
39
+ className: s("flex min-w-0 flex-1", B.body),
40
+ style: o,
41
+ children: [
42
+ e != null && /* @__PURE__ */ E("div", {
43
+ className: V,
44
+ style: a,
45
+ children: e
46
+ }),
47
+ /* @__PURE__ */ E("div", {
48
+ className: "flex w-full min-w-0 flex-1 flex-col",
49
+ style: r ? {
50
+ flex: "1 1 320px",
51
+ minWidth: "min(100%, 320px)"
52
+ } : void 0,
53
+ children: t
54
+ }),
55
+ n != null && /* @__PURE__ */ E("div", {
56
+ className: V,
57
+ style: a,
58
+ children: n
59
+ }),
60
+ i && /* @__PURE__ */ E("div", {
61
+ "aria-hidden": !0,
62
+ style: a,
63
+ className: s(B.reservedColumn, B.sideColumn)
64
+ })
65
+ ]
66
+ });
67
+ }, U = {
68
+ header: "_header_oo757_4",
69
+ actions: "_actions_oo757_20",
70
+ title: "_title_oo757_29"
71
+ }, W = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, styles: f }) => {
72
+ let { colors: p, typography: h } = f ?? {}, g = h?.fontClassName ?? "dial-h1-text", _ = !!h?.fontClassName;
73
+ return /* @__PURE__ */ D("div", {
74
+ style: i({
49
75
  "--bfh-border": p?.borderColor,
50
- "--bfh-font-family": g ? void 0 : m?.fontFamily
76
+ "--bfh-font-family": _ ? void 0 : h?.fontFamily
51
77
  }),
52
- 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),
78
+ className: s("flex h-16 items-center justify-between gap-6", U.header),
53
79
  children: [
54
- /* @__PURE__ */ w("div", {
80
+ /* @__PURE__ */ D("div", {
55
81
  className: "flex min-w-0 flex-1 items-center gap-2",
56
- children: [/* @__PURE__ */ C(u, {
57
- icon: /* @__PURE__ */ C(T, {
58
- size: o.LG,
82
+ children: [/* @__PURE__ */ E(m, {
83
+ icon: l === void 0 ? /* @__PURE__ */ E(O, {
84
+ size: u.LG,
59
85
  className: "rtl:scale-x-[-1]",
60
86
  "aria-hidden": !0,
61
- stroke: s
62
- }),
87
+ stroke: d
88
+ }) : l,
63
89
  "aria-label": e.backButtonLabel,
64
90
  onClick: t
65
- }), /* @__PURE__ */ C("h1", {
66
- className: r("truncate", R.title, h),
91
+ }), /* @__PURE__ */ E("h1", {
92
+ className: s("truncate", U.title, g),
67
93
  children: e.title
68
94
  })]
69
95
  }),
70
- /* @__PURE__ */ C("div", {
71
- className: "hidden items-center gap-2 desktop:flex",
72
- children: /* @__PURE__ */ C(F, {
96
+ /* @__PURE__ */ E("div", {
97
+ className: s("items-center gap-2", U.actions),
98
+ children: /* @__PURE__ */ E(z, {
73
99
  labels: e,
74
- onCancel: i,
75
- onSubmit: a,
76
- isCancelDisabled: c,
77
- isSubmitDisabled: l,
78
- isSubmitting: d
100
+ onCancel: n,
101
+ onSubmit: r,
102
+ isCancelDisabled: a,
103
+ isSubmitDisabled: o,
104
+ isSubmitting: c
79
105
  })
80
106
  }),
81
- /* @__PURE__ */ C("span", {
107
+ /* @__PURE__ */ E("span", {
82
108
  role: "status",
83
109
  "aria-live": "polite",
84
110
  className: "sr-only",
85
- children: d ? e.submittingLabel ?? "Submitting" : ""
111
+ children: c ? e.submittingLabel ?? "Submitting" : ""
86
112
  })
87
113
  ]
88
114
  });
89
- }, B = {
90
- container: "_container_d8tdv_1",
91
- footer: "_footer_d8tdv_10"
92
- }, 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 }) => {
93
- let { colors: p, header: m, cssVars: h } = f ?? {};
94
- return /* @__PURE__ */ w("div", {
115
+ }, G = {
116
+ container: "_container_k1awi_1",
117
+ footer: "_footer_k1awi_10"
118
+ }, ie = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, className: u, left: d, children: f, metadata: p, layout: m, styles: h }) => {
119
+ let { colors: g, header: _, cssVars: v } = h ?? {};
120
+ return /* @__PURE__ */ D("div", {
95
121
  style: {
96
- ...n({ "--bfc-bg": p?.background }),
97
- ...h
122
+ ...i({ "--bfc-bg": g?.background }),
123
+ ...v
98
124
  },
99
- className: r("flex h-full w-full flex-col overflow-y-auto", B.container),
125
+ className: s("flex h-full w-full flex-col overflow-y-auto", u, G.container),
100
126
  children: [
101
- /* @__PURE__ */ C(z, {
127
+ /* @__PURE__ */ E(W, {
102
128
  labels: e,
103
129
  onBack: t,
104
- onCancel: i,
105
- onSubmit: a,
106
- isCancelDisabled: o,
107
- isSubmitDisabled: s,
130
+ onCancel: n,
131
+ onSubmit: r,
132
+ isCancelDisabled: a,
133
+ isSubmitDisabled: o,
108
134
  isSubmitting: c,
109
- styles: m
135
+ backIcon: l,
136
+ styles: _
110
137
  }),
111
- /* @__PURE__ */ C(L, {
112
- left: l,
113
- metadata: d,
114
- children: u
138
+ /* @__PURE__ */ E(H, {
139
+ left: d,
140
+ metadata: p,
141
+ layout: m,
142
+ children: f
115
143
  }),
116
- /* @__PURE__ */ C("div", {
117
- className: r("sticky bottom-0 z-10 flex items-center gap-2 p-3 desktop:hidden", B.footer),
118
- children: /* @__PURE__ */ C(F, {
144
+ /* @__PURE__ */ E("div", {
145
+ className: s("sticky bottom-0 z-10 items-center gap-2 p-3", G.footer),
146
+ children: /* @__PURE__ */ E(z, {
119
147
  labels: e,
120
- onCancel: i,
121
- onSubmit: a,
122
- isCancelDisabled: o,
123
- isSubmitDisabled: s,
148
+ onCancel: n,
149
+ onSubmit: r,
150
+ isCancelDisabled: a,
151
+ isSubmitDisabled: o,
124
152
  isSubmitting: c,
125
153
  buttonClassName: "flex-1"
126
154
  })
127
155
  })
128
156
  ]
129
157
  });
130
- }, H = {
158
+ }, K = {
159
+ layout: "dial-builder-form-layout",
160
+ section: "dial-builder-form-section",
161
+ metadataSection: "dial-builder-form-metadata-section",
162
+ setupSection: "dial-builder-form-setup-section"
163
+ }, q = {
131
164
  section: "_section_l1mnx_1",
132
165
  title: "_title_l1mnx_5"
133
- }, U = ({ title: e, children: t, styles: i, className: a }) => {
134
- let o = n({
135
- "--es-border-color": i?.colors?.borderColor,
136
- "--es-title-color": i?.colors?.titleColor
166
+ }, J = ({ title: e, children: t, styles: n, className: r }) => {
167
+ let a = i({
168
+ "--es-border-color": n?.colors?.borderColor,
169
+ "--es-title-color": n?.colors?.titleColor
137
170
  });
138
- return /* @__PURE__ */ w("section", {
139
- className: r("flex flex-col gap-4 rounded border p-6", H.section, a),
140
- style: o,
141
- children: [e != null && /* @__PURE__ */ C("h2", {
142
- className: r("dial-h3-text", H.title),
171
+ return /* @__PURE__ */ D("section", {
172
+ className: s("flex h-full flex-col gap-4 rounded border p-6", q.section, r, K.section),
173
+ style: a,
174
+ children: [e != null && /* @__PURE__ */ E("h2", {
175
+ className: s("dial-h3-text", q.title),
143
176
  children: e
144
177
  }), t]
145
178
  });
146
- }, W = {
179
+ }, Y = {
147
180
  headerBorder: "_headerBorder_1kidu_1",
148
181
  footerBorder: "_footerBorder_1kidu_5",
149
182
  sidebarBorder: "_sidebarBorder_1kidu_9"
150
- }, G = ({ title: e, onBack: t, backAriaLabel: i = "Back", actions: a, leftContent: c, rightContent: l, isSaving: d = !1, labels: f, styles: p, dir: m }) => {
151
- let h = M(), g = d ? f?.savingStatusLabel ?? "Saving" : "";
152
- return /* @__PURE__ */ w("div", {
153
- dir: m,
154
- className: "flex min-h-0 flex-1 flex-col",
155
- style: n({
156
- "--el-header-border-color": p?.colors?.headerBorderColor,
157
- "--el-sidebar-border-color": p?.colors?.sidebarBorderColor
158
- }),
183
+ }, ae = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: a, rightContent: o, isSaving: c = !1, labels: l, styles: f, dir: p }) => {
184
+ let h = ne(), g = c ? l?.savingStatusLabel ?? "Saving" : "", _ = i({
185
+ "--el-header-border-color": f?.colors?.headerBorderColor,
186
+ "--el-sidebar-border-color": f?.colors?.sidebarBorderColor
187
+ });
188
+ return /* @__PURE__ */ D("div", {
189
+ dir: p,
190
+ className: s("flex min-h-0 flex-1 flex-col", K.layout),
191
+ style: _,
159
192
  children: [
160
- /* @__PURE__ */ C("span", {
193
+ /* @__PURE__ */ E("span", {
161
194
  role: "status",
162
195
  "aria-live": "polite",
163
196
  className: "sr-only",
164
197
  id: h,
165
198
  children: g
166
199
  }),
167
- /* @__PURE__ */ w("div", {
168
- 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),
169
- children: [/* @__PURE__ */ w("div", {
200
+ /* @__PURE__ */ D("div", {
201
+ className: s("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", Y.headerBorder),
202
+ children: [/* @__PURE__ */ D("div", {
170
203
  className: "flex min-w-0 flex-1 items-center gap-2",
171
- children: [/* @__PURE__ */ C(u, {
172
- icon: /* @__PURE__ */ C(E, {
173
- size: o.LG,
174
- stroke: s,
204
+ children: [/* @__PURE__ */ E(m, {
205
+ icon: /* @__PURE__ */ E(k, {
206
+ size: u.LG,
207
+ stroke: d,
175
208
  "aria-hidden": !0,
176
209
  className: "rtl:scale-x-[-1]"
177
210
  }),
178
- "aria-label": i,
211
+ "aria-label": n,
179
212
  onClick: t
180
- }), /* @__PURE__ */ C("h1", {
213
+ }), /* @__PURE__ */ E("h1", {
181
214
  className: "dial-h2-text min-w-0 truncate",
182
215
  children: e
183
216
  })]
184
- }), a != null && /* @__PURE__ */ C("div", {
217
+ }), r != null && /* @__PURE__ */ E("div", {
185
218
  className: "hidden shrink-0 items-center gap-2 desktop:flex",
186
- children: a
219
+ children: r
187
220
  })]
188
221
  }),
189
- /* @__PURE__ */ w("div", {
222
+ /* @__PURE__ */ D("div", {
190
223
  className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
191
- children: [/* @__PURE__ */ C("div", {
192
- 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),
193
- children: c
194
- }), l != null && /* @__PURE__ */ C("div", {
195
- className: "desktop:flex-1 desktop:overflow-y-auto",
196
- children: l
224
+ children: [/* @__PURE__ */ E("div", {
225
+ className: s(o == null ? "desktop:flex-1" : "desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", o == null ? void 0 : Y.sidebarBorder),
226
+ children: a
227
+ }), o != null && /* @__PURE__ */ E("div", {
228
+ className: "desktop:flex desktop:min-h-0 desktop:flex-1 desktop:flex-col desktop:overflow-y-auto",
229
+ children: o
197
230
  })]
198
231
  }),
199
- a != null && /* @__PURE__ */ C("div", {
200
- className: r("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", W.footerBorder),
201
- children: a
232
+ r != null && /* @__PURE__ */ E("div", {
233
+ className: s("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", Y.footerBorder),
234
+ children: r
202
235
  })
203
236
  ]
204
237
  });
205
- }, K = {
238
+ }, X = {
206
239
  box: "_box_c9as8_1",
207
240
  icon: "_icon_c9as8_6",
208
241
  caption: "_caption_c9as8_10"
209
- }, 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 }) => {
210
- let h = n({
211
- "--aa-box-bg": d?.colors?.boxBackgroundColor,
212
- "--aa-box-border": d?.colors?.boxBorderColor,
213
- "--aa-icon": d?.colors?.placeholderIconColor,
214
- "--aa-caption": d?.colors?.captionColor
242
+ }, oe = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: a = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: o, styles: c, className: l }) => {
243
+ let f = i({
244
+ "--aa-box-bg": c?.colors?.boxBackgroundColor,
245
+ "--aa-box-border": c?.colors?.boxBorderColor,
246
+ "--aa-icon": c?.colors?.placeholderIconColor,
247
+ "--aa-caption": c?.colors?.captionColor
215
248
  });
216
- return /* @__PURE__ */ w("div", {
217
- className: r("flex flex-col gap-2", m),
218
- style: h,
219
- children: [/* @__PURE__ */ C(f, { label: e }), /* @__PURE__ */ w("div", {
249
+ return /* @__PURE__ */ D("div", {
250
+ className: s("flex flex-col gap-2", l),
251
+ style: f,
252
+ children: [/* @__PURE__ */ E(g, { label: e }), /* @__PURE__ */ D("div", {
220
253
  className: "flex items-start gap-3",
221
- children: [/* @__PURE__ */ C("div", {
222
- className: r("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", K.box),
223
- children: t ? /* @__PURE__ */ C("img", {
254
+ children: [/* @__PURE__ */ E("div", {
255
+ className: s("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", X.box),
256
+ children: t ? /* @__PURE__ */ E("img", {
224
257
  src: t,
225
- alt: i,
258
+ alt: n,
226
259
  className: "h-16 w-16 object-cover"
227
- }) : /* @__PURE__ */ C(D, {
228
- size: o.LG,
229
- stroke: s,
260
+ }) : /* @__PURE__ */ E(A, {
261
+ size: u.LG,
262
+ stroke: d,
230
263
  "aria-hidden": !0,
231
- className: K.icon
264
+ className: X.icon
232
265
  })
233
- }), /* @__PURE__ */ w("div", {
266
+ }), /* @__PURE__ */ D("div", {
234
267
  className: "flex flex-col gap-3",
235
- children: [/* @__PURE__ */ C(p, {
236
- size: l.Small,
237
- iconBefore: /* @__PURE__ */ C(O, {
238
- size: o.SM,
239
- stroke: s,
268
+ children: [/* @__PURE__ */ E(_, {
269
+ size: p.Small,
270
+ iconBefore: /* @__PURE__ */ E(j, {
271
+ size: u.SM,
272
+ stroke: d,
240
273
  "aria-hidden": !0
241
274
  }),
242
275
  className: "w-fit",
243
- label: a,
244
- onClick: u
245
- }), /* @__PURE__ */ C("span", {
246
- className: r("dial-tiny-text", K.caption),
247
- children: c
276
+ label: r,
277
+ onClick: o
278
+ }), /* @__PURE__ */ E("span", {
279
+ className: s("dial-tiny-text", X.caption),
280
+ children: a
248
281
  })]
249
282
  })]
250
283
  })]
251
284
  });
252
- }, J = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
253
- let c = A((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = A((e) => /* @__PURE__ */ C("div", {
285
+ }, se = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
286
+ let c = F((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = F((e) => /* @__PURE__ */ E("div", {
254
287
  className: "dial-small-text px-6 py-3",
255
- children: /* @__PURE__ */ C("p", {
288
+ children: /* @__PURE__ */ E("p", {
256
289
  className: "mb-3 text-secondary",
257
- children: e.length === 1 ? /* @__PURE__ */ w(S, { children: [
290
+ children: e.length === 1 ? /* @__PURE__ */ D(T, { children: [
258
291
  s.deleteConfirmSingleText,
259
292
  " ",
260
- /* @__PURE__ */ w("span", {
293
+ /* @__PURE__ */ D("span", {
261
294
  className: "break-words text-primary",
262
295
  children: [
263
296
  "\"",
@@ -265,10 +298,10 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
265
298
  "\"?"
266
299
  ]
267
300
  })
268
- ] }) : /* @__PURE__ */ w(S, { children: [
301
+ ] }) : /* @__PURE__ */ D(T, { children: [
269
302
  s.deleteConfirmMultipleText,
270
303
  " ",
271
- /* @__PURE__ */ w("span", {
304
+ /* @__PURE__ */ D("span", {
272
305
  className: "text-primary",
273
306
  children: [
274
307
  e.length,
@@ -283,9 +316,9 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
283
316
  s.deleteConfirmMultipleText,
284
317
  s.deleteConfirmItemsLabel
285
318
  ]);
286
- return /* @__PURE__ */ C(k, {
319
+ return /* @__PURE__ */ E(N, {
287
320
  fallback: null,
288
- children: e && /* @__PURE__ */ C(i, {
321
+ children: e && /* @__PURE__ */ E(i, {
289
322
  isOpen: e,
290
323
  onClose: t,
291
324
  onAttach: n,
@@ -313,239 +346,476 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
313
346
  deleteConfirmTitle: c,
314
347
  deleteConfirmBody: l,
315
348
  deleteConfirmLabel: s.deleteConfirmLabel,
316
- deleteCancelLabel: s.deleteCancelLabel,
317
- uploadProgressTitle: s.uploadProgressTitle,
318
- cancelLabel: s.cancelLabel
349
+ deleteCancelLabel: s.deleteCancelLabel
319
350
  })
320
351
  });
321
- }, te = (e, t, n) => ({
352
+ }, Z = /* @__PURE__ */ function(e) {
353
+ return e.Avatar = "avatar", e.Name = "name", e.Version = "version", e.Description = "description", e.Locales = "locales", e.Tags = "tags", e;
354
+ }({}), ce = [
355
+ "avatar",
356
+ "name",
357
+ "version",
358
+ "description",
359
+ "locales",
360
+ "tags"
361
+ ], le = (e, t, n) => ({
322
362
  id: e,
323
363
  language: n.find((e) => !t.has(e.code))?.code ?? "",
324
364
  name: "",
325
365
  description: ""
326
- }), 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" }) => {
327
- 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);
328
- j(() => {
329
- V && W(t.length > 0 ? t : [te(`locale-row-${++G.current}`, /* @__PURE__ */ new Set(), u)]);
366
+ }), ue = ({ value: e, onChange: t, availableLocaleOptions: r = [], labels: i, className: a, summaryClassName: o = "dial-body-text text-secondary", rowLabelClassName: m = "dial-tiny-lead-text text-secondary" }) => {
367
+ let { summaryLabel: g, addLabel: v, editLabel: b, popupTitle: S, addLocaleLabel: C, localeRowLabel: T = "Locale", languageLabel: O, nameLabel: k, namePlaceholder: A, descriptionLabel: N, descriptionPlaceholder: P, deleteAriaLabel: F, cancelLabel: ne = "Cancel", saveLabel: re = "Save" } = i, [I, z] = R(!1), [B, V] = R([]), H = L(0);
368
+ te(() => {
369
+ I && V(e.length > 0 ? e : [le(`locale-row-${++H.current}`, /* @__PURE__ */ new Set(), r)]);
330
370
  }, [
331
- V,
332
- t,
333
- u
371
+ I,
372
+ e,
373
+ r
334
374
  ]);
335
- let K = () => H(!0), q = () => H(!1), J = () => {
336
- n(U.filter((e) => e.language && e.name)), H(!1);
337
- }, Y = () => {
338
- let e = new Set(U.map((e) => e.language).filter(Boolean));
339
- W((t) => [...t, te(`locale-row-${++G.current}`, e, u)]);
340
- }, X = (e, t) => {
341
- W((n) => n.map((n) => n.id === e ? {
375
+ let U = () => z(!0), W = () => z(!1), G = () => {
376
+ t(B.filter((e) => e.language && e.name)), z(!1);
377
+ }, ie = () => {
378
+ let e = new Set(B.map((e) => e.language).filter(Boolean));
379
+ V((t) => [...t, le(`locale-row-${++H.current}`, e, r)]);
380
+ }, K = (e, t) => {
381
+ V((n) => n.map((n) => n.id === e ? {
342
382
  ...n,
343
383
  ...t
344
384
  } : n));
345
- }, Z = (e) => {
346
- W((t) => t.filter((t) => t.id !== e));
347
- }, Q = (e) => u.find((t) => t.code === e)?.label ?? e.toUpperCase(), $ = U.some((e) => !e.language || !e.name);
348
- return u.length === 0 ? null : /* @__PURE__ */ w("div", {
349
- className: r("flex items-center gap-2", m),
385
+ }, q = (e) => {
386
+ V((t) => t.filter((t) => t.id !== e));
387
+ }, J = (e) => r.find((t) => t.code === e)?.label ?? e.toUpperCase(), Y = B.some((e) => !e.language || !e.name);
388
+ return r.length === 0 ? null : /* @__PURE__ */ D("div", {
389
+ className: s("flex items-center gap-2", a),
350
390
  children: [
351
- t.length > 0 && /* @__PURE__ */ C("span", {
352
- className: g,
353
- children: `${y}: ${t.map((e) => `[${Q(e.language)}]`).join(", ")}`
391
+ e.length > 0 && /* @__PURE__ */ E("span", {
392
+ className: o,
393
+ children: `${g}: ${e.map((e) => `[${J(e.language)}]`).join(", ")}`
354
394
  }),
355
- /* @__PURE__ */ C(p, {
356
- label: t.length > 0 ? T : S,
357
- iconBefore: /* @__PURE__ */ C(O, {
358
- size: o.SM,
395
+ /* @__PURE__ */ E(_, {
396
+ label: e.length > 0 ? b : v,
397
+ iconBefore: /* @__PURE__ */ E(j, {
398
+ size: u.SM,
359
399
  "aria-hidden": !0,
360
- stroke: s
400
+ stroke: d
361
401
  }),
362
402
  className: "!px-0",
363
- onClick: K
403
+ onClick: U
364
404
  }),
365
- /* @__PURE__ */ C(h, {
366
- open: V,
367
- header: E,
368
- onClose: q,
405
+ /* @__PURE__ */ E(y, {
406
+ open: I,
407
+ header: S,
408
+ onClose: W,
369
409
  mainButtons: [{
370
- label: z,
371
- onClick: q
410
+ label: ne,
411
+ onClick: W
372
412
  }, {
373
- label: B,
374
- variant: a.Primary,
375
- disabled: $,
376
- onClick: J
413
+ label: re,
414
+ variant: l.Primary,
415
+ disabled: Y,
416
+ onClick: G
377
417
  }],
378
- children: /* @__PURE__ */ w("div", {
418
+ children: /* @__PURE__ */ D("div", {
379
419
  className: "flex flex-col gap-8 px-6 py-3",
380
- children: [U.map((t, n) => {
381
- let r = new Set(U.filter((e) => e.id !== t.id).map((e) => e.language).filter(Boolean));
382
- return /* @__PURE__ */ w("div", {
420
+ children: [B.map((e, t) => {
421
+ let i = new Set(B.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
422
+ return /* @__PURE__ */ D("div", {
383
423
  className: "flex flex-col gap-2",
384
- children: [/* @__PURE__ */ w("div", {
424
+ children: [/* @__PURE__ */ D("div", {
385
425
  className: "flex items-center justify-between",
386
- children: [/* @__PURE__ */ w("span", {
387
- className: v,
426
+ children: [/* @__PURE__ */ D("span", {
427
+ className: m,
388
428
  children: [
389
- k,
429
+ T,
390
430
  " ",
391
- n + 1
431
+ t + 1
392
432
  ]
393
- }), /* @__PURE__ */ C(c, {
394
- appearance: i.Ghost,
395
- size: l.Small,
396
- icon: /* @__PURE__ */ C(ee, {
397
- size: o.SM,
433
+ }), /* @__PURE__ */ E(f, {
434
+ appearance: c.Ghost,
435
+ size: p.Small,
436
+ icon: /* @__PURE__ */ E(M, {
437
+ size: u.SM,
398
438
  "aria-hidden": !0,
399
- stroke: s
439
+ stroke: d
400
440
  }),
401
- "aria-label": `${R} ${n + 1}`,
402
- onClick: () => Z(t.id)
441
+ "aria-label": `${F} ${t + 1}`,
442
+ onClick: () => q(e.id)
403
443
  })]
404
- }), /* @__PURE__ */ w("div", {
444
+ }), /* @__PURE__ */ D("div", {
405
445
  role: "group",
406
- "aria-label": `${k} ${n + 1}`,
446
+ "aria-label": `${T} ${t + 1}`,
407
447
  className: "flex flex-col gap-5",
408
- children: [/* @__PURE__ */ w("div", {
448
+ children: [/* @__PURE__ */ D("div", {
409
449
  className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
410
- children: [/* @__PURE__ */ C(_, {
411
- id: `${t.id}-language`,
450
+ children: [/* @__PURE__ */ E(x, {
451
+ id: `${e.id}-language`,
412
452
  labelProps: {
413
- label: A,
453
+ label: O,
414
454
  required: !0
415
455
  },
416
456
  className: "desktop:shrink-0 desktop:basis-40",
417
- options: u.map((e) => ({
457
+ options: r.map((e) => ({
418
458
  value: e.code,
419
459
  label: e.label,
420
- disabled: r.has(e.code)
460
+ disabled: i.has(e.code)
421
461
  })),
422
- value: t.language,
423
- onChange: (e) => X(t.id, { language: e })
424
- }), /* @__PURE__ */ C(d, {
425
- id: `${t.id}-name`,
462
+ value: e.language,
463
+ onChange: (t) => K(e.id, { language: t })
464
+ }), /* @__PURE__ */ E(h, {
465
+ id: `${e.id}-name`,
426
466
  containerClassName: "min-w-0 flex-1",
427
467
  required: !0,
428
- value: t.name,
429
- onChange: (e) => X(t.id, { name: e ?? "" }),
468
+ value: e.name,
469
+ onChange: (t) => K(e.id, { name: t ?? "" }),
430
470
  labelProps: {
431
- label: M,
471
+ label: k,
432
472
  required: !0
433
473
  },
434
- placeholder: F
474
+ placeholder: A
435
475
  })]
436
- }), /* @__PURE__ */ C(b, {
437
- id: `${t.id}-description`,
438
- className: e,
439
- resize: x.Vertical,
440
- value: t.description,
441
- onChange: (e) => X(t.id, { description: e }),
442
- labelProps: { label: I },
443
- placeholder: L
476
+ }), /* @__PURE__ */ E(w, {
477
+ id: `${e.id}-description`,
478
+ className: n,
479
+ resize: ee.Vertical,
480
+ value: e.description,
481
+ onChange: (t) => K(e.id, { description: t }),
482
+ labelProps: { label: N },
483
+ placeholder: P
444
484
  })]
445
485
  })]
446
- }, t.id);
447
- }), /* @__PURE__ */ C(p, {
448
- label: D,
449
- iconBefore: /* @__PURE__ */ C(O, {
450
- size: o.SM,
486
+ }, e.id);
487
+ }), /* @__PURE__ */ E(_, {
488
+ label: C,
489
+ iconBefore: /* @__PURE__ */ E(j, {
490
+ size: u.SM,
451
491
  "aria-hidden": !0,
452
- stroke: s
492
+ stroke: d
453
493
  }),
454
494
  className: "self-start",
455
- onClick: Y,
456
- disabled: U.length >= u.length
495
+ onClick: ie,
496
+ disabled: B.length >= r.length
457
497
  })]
458
498
  })
459
499
  })
460
500
  ]
461
501
  });
462
- }, X = ({ values: n, errors: i, onChange: a, onNameBlur: o, onVersionBlur: s, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: f, availableLocaleOptions: p = [] }) => {
463
- let m = N(null), h = N(null), g = N(!1), _ = !!(i.name || i.version);
464
- return j(() => {
465
- _ && !g.current && (i.name ? m : h).current?.focus(), g.current = _;
502
+ }, de = "Add tags, comma separated", fe = "deployment-creation-form-description", pe = ({ values: e, errors: t, onChange: i, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = ce, isNameReadOnly: m = !1, nameCaption: g, isDescriptionRequired: _ = !1, renderDescription: v, focusRequestKey: y }) => {
503
+ let b = L(null), x = L(null), S = L(null), T = L(!1), O = (e) => p.includes(e), k = O(Z.Name), A = O(Z.Version), j = !!(t.name || t.version || t.description), M = L(y);
504
+ te(() => {
505
+ let e = () => {
506
+ t.name ? b.current?.focus() : t.version ? x.current?.focus() : t.description && S.current?.focus();
507
+ };
508
+ if (y !== void 0) {
509
+ y !== M.current && (M.current = y, e());
510
+ return;
511
+ }
512
+ j && !T.current && e(), T.current = j;
466
513
  }, [
467
- _,
468
- i.name,
469
- i.version
470
- ]), /* @__PURE__ */ w("div", {
514
+ y,
515
+ j,
516
+ t.name,
517
+ t.version,
518
+ t.description
519
+ ]);
520
+ let N = /* @__PURE__ */ E(w, {
521
+ id: fe,
522
+ ref: S,
523
+ value: e.description,
524
+ onChange: (e) => i({ description: e }),
525
+ "aria-required": _ || void 0,
526
+ labelProps: v ? void 0 : {
527
+ label: u.description.label,
528
+ required: _
529
+ },
530
+ placeholder: u.description.placeholder,
531
+ error: t.description || void 0,
532
+ invalid: !!t.description,
533
+ containerClassName: v ? void 0 : d?.field,
534
+ className: n,
535
+ resize: ee.Vertical
536
+ });
537
+ return /* @__PURE__ */ D("div", {
471
538
  role: u.ariaLabel ? "group" : void 0,
472
539
  "aria-label": u.ariaLabel,
473
- className: r("flex flex-col gap-4", f?.root),
540
+ className: s("flex flex-col gap-4", d?.root),
474
541
  children: [
475
- /* @__PURE__ */ C(q, {
542
+ O(Z.Avatar) && /* @__PURE__ */ E(oe, {
476
543
  label: u.iconUrl.label,
477
544
  avatarUrl: c,
478
545
  addAvatarLabel: u.iconUrl.addAvatarLabel,
479
546
  captionText: u.iconUrl.captionText,
480
547
  onAddAvatarClick: l,
481
- className: f?.field
548
+ className: d?.field
482
549
  }),
483
- /* @__PURE__ */ w("div", {
484
- className: r("flex items-start gap-4", f?.field),
485
- children: [/* @__PURE__ */ C(d, {
550
+ (k || A) && /* @__PURE__ */ D("div", {
551
+ className: s("flex items-start gap-4", d?.field),
552
+ children: [k && /* @__PURE__ */ E(h, {
486
553
  id: "deployment-creation-form-name",
487
- inputRef: m,
488
- value: n.name,
489
- onChange: (e) => a({ name: e ?? "" }),
490
- onBlur: o,
554
+ inputRef: b,
555
+ value: e.name,
556
+ onChange: (e) => i({ name: e ?? "" }),
557
+ onBlur: a,
558
+ readOnly: m,
491
559
  labelProps: {
492
560
  label: u.name.label,
493
561
  required: !0
494
562
  },
495
563
  placeholder: u.name.placeholder,
496
- error: i.name || void 0,
497
- invalid: !!i.name,
498
- containerClassName: "min-w-0 basis-0 grow-[2]"
499
- }), /* @__PURE__ */ C(d, {
564
+ caption: g,
565
+ error: t.name || void 0,
566
+ invalid: !!t.name,
567
+ containerClassName: A ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
568
+ }), A && /* @__PURE__ */ E(h, {
500
569
  id: "deployment-creation-form-version",
501
- inputRef: h,
502
- value: n.version,
503
- onChange: (e) => a({ version: e ?? "" }),
504
- onBlur: s,
570
+ inputRef: x,
571
+ value: e.version,
572
+ onChange: (e) => i({ version: e ?? "" }),
573
+ onBlur: o,
505
574
  labelProps: { label: u.version.label },
506
575
  placeholder: u.version.placeholder,
507
- error: i.version || void 0,
508
- invalid: !!i.version,
509
- containerClassName: "min-w-0 basis-0 grow-[1]"
576
+ error: t.version || void 0,
577
+ invalid: !!t.version,
578
+ containerClassName: k ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
510
579
  })]
511
580
  }),
512
- /* @__PURE__ */ C(b, {
513
- id: "deployment-creation-form-description",
514
- value: n.description,
515
- onChange: (e) => a({ description: e }),
516
- labelProps: { label: u.description.label },
517
- placeholder: u.description.placeholder,
518
- containerClassName: f?.field,
519
- className: e,
520
- resize: x.Vertical
521
- }),
522
- /* @__PURE__ */ C(Y, {
523
- value: n.otherLocales,
524
- onChange: (e) => a({ otherLocales: e }),
525
- availableLocaleOptions: p,
581
+ O(Z.Description) && (v ? /* @__PURE__ */ E("div", {
582
+ className: d?.field,
583
+ children: v(N, fe)
584
+ }) : N),
585
+ O(Z.Locales) && /* @__PURE__ */ E(ue, {
586
+ value: e.otherLocales,
587
+ onChange: (e) => i({ otherLocales: e }),
588
+ availableLocaleOptions: f,
526
589
  labels: u.otherLocales,
527
- className: f?.field
590
+ className: d?.field
528
591
  }),
529
- /* @__PURE__ */ C("div", {
530
- className: f?.field,
531
- children: /* @__PURE__ */ C(y, {
592
+ O(Z.Tags) && /* @__PURE__ */ E("div", {
593
+ className: d?.field,
594
+ children: /* @__PURE__ */ E(C, {
532
595
  id: "deployment-creation-form-topics",
533
596
  labelProps: { label: u.topics.label },
534
- placeholder: u.topics.placeholder,
535
- value: n.topics,
536
- onChange: (e) => a({ topics: e }),
537
- tagClassName: t
597
+ placeholder: u.topics.placeholder ?? de,
598
+ value: e.topics,
599
+ onChange: (e) => i({ topics: e }),
600
+ tagClassName: r
538
601
  })
539
602
  })
540
603
  ]
541
604
  });
542
- }, Z = /* @__PURE__ */ function(e) {
543
- return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e;
544
- }({}), Q = /^[a-zA-Z0-9 _.-]+$/, $ = /^[a-zA-Z0-9._-]+$/, ne = /^\d+(\.\d+)*$/, re = (e, t = {}) => {
545
- let n = {}, r = e.name.trim();
546
- r ? t.validateNamePattern && !Q.test(r) && (n.name = Z.InvalidFormat) : n.name = Z.Required;
547
- let i = e.version.trim();
548
- return t.validateVersionPattern && i && ((t.validateVersionPattern instanceof RegExp ? t.validateVersionPattern : $).test(i) || (n.version = Z.InvalidFormat)), n;
605
+ }, me = "border-0 p-4 desktop:p-6", he = "desktop:flex-1", ge = "px-4 pt-4 desktop:px-6 desktop:pt-6", _e = P(({ title: e, onBack: t, onCancel: n, onSubmit: r, submitLabel: i, isSubmitting: a = !1, isSubmitDisabled: o = !1, extraActions: c, hideStandardActions: l = !1, metadata: u, metadataTitle: d, metadataFooter: f, setup: p, setupTitle: m, alert: h, metadataSectionClassName: g, setupSectionClassName: _, labels: y, styles: x, dir: S }) => {
606
+ let C = h == null ? null : /* @__PURE__ */ E("div", {
607
+ role: "alert",
608
+ className: ge,
609
+ children: h
610
+ }), w = p != null;
611
+ return /* @__PURE__ */ E(ae, {
612
+ title: e,
613
+ onBack: t,
614
+ backAriaLabel: y?.backAriaLabel ?? "Back",
615
+ isSaving: a,
616
+ labels: { savingStatusLabel: y?.savingStatusLabel ?? "Saving" },
617
+ styles: x?.layout,
618
+ dir: S,
619
+ actions: /* @__PURE__ */ D(T, { children: [c, !l && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(v, {
620
+ label: y?.cancelLabel ?? "Cancel",
621
+ disabled: a,
622
+ onClick: n
623
+ }), /* @__PURE__ */ E(b, {
624
+ label: i,
625
+ disabled: a || o,
626
+ onClick: r
627
+ })] })] }),
628
+ leftContent: /* @__PURE__ */ D(T, { children: [
629
+ !w && C,
630
+ /* @__PURE__ */ E(J, {
631
+ title: d === null ? void 0 : d ?? y?.metadataTitle ?? "Metadata",
632
+ styles: x?.section,
633
+ className: s(me, g, K.metadataSection),
634
+ children: u
635
+ }),
636
+ f
637
+ ] }),
638
+ rightContent: w ? /* @__PURE__ */ D(T, { children: [C, /* @__PURE__ */ E(J, {
639
+ title: m ?? y?.setupTitle ?? "Setup",
640
+ styles: x?.section,
641
+ className: s(me, he, _, K.setupSection),
642
+ children: p
643
+ })] }) : void 0
644
+ });
645
+ }), ve = {
646
+ name: {
647
+ label: "Name",
648
+ placeholder: "Enter name"
649
+ },
650
+ description: {
651
+ label: "Description",
652
+ placeholder: "Enter description"
653
+ },
654
+ iconUrl: {
655
+ label: "Avatar",
656
+ addAvatarLabel: "Add avatar",
657
+ captionText: "PNG, JPG or SVG (max 1 MB)"
658
+ },
659
+ version: {
660
+ label: "Version",
661
+ placeholder: "e.g. 1.0.0"
662
+ },
663
+ topics: {
664
+ label: "Tags",
665
+ placeholder: "Add tags, comma separated"
666
+ },
667
+ otherLocales: {
668
+ summaryLabel: "Locales",
669
+ addLabel: "Add locales",
670
+ editLabel: "Edit locales",
671
+ popupTitle: "Add locale",
672
+ addLocaleLabel: "Add locale",
673
+ localeRowLabel: "Locale",
674
+ languageLabel: "Language",
675
+ nameLabel: "Name",
676
+ namePlaceholder: "Enter name",
677
+ descriptionLabel: "About",
678
+ descriptionPlaceholder: "Enter brief description",
679
+ deleteAriaLabel: "Delete locale",
680
+ cancelLabel: "Cancel",
681
+ saveLabel: "Save"
682
+ },
683
+ ariaLabel: "Metadata"
684
+ }, ye = {
685
+ title: "Add avatar",
686
+ attachLabel: "Attach",
687
+ emptyTitle: "This folder is empty",
688
+ emptyDescription: "",
689
+ errorMessage: "Failed to load files",
690
+ retryLabel: "Retry",
691
+ hiddenFilesLabel: "Hidden files",
692
+ showHiddenFilesLabel: "Show hidden files",
693
+ hideHiddenFilesLabel: "Hide hidden files",
694
+ getSelectionLabel: (e) => e === 1 ? "item selected" : "items selected",
695
+ uploadFilesLabel: "Files",
696
+ newFolderLabel: "Folder",
697
+ downloadLabel: "Download",
698
+ downloadingLabel: "Preparing download…",
699
+ deleteLabel: "Delete",
700
+ deletingLabel: "Deleting…",
701
+ deleteConfirmTitleSingle: "Confirm deleting",
702
+ deleteConfirmTitleMultiple: "Confirm deleting items",
703
+ deleteConfirmSingleText: "Are you sure you want to delete",
704
+ deleteConfirmMultipleText: "Do you want to delete following",
705
+ deleteConfirmItemsLabel: "items?",
706
+ deleteConfirmLabel: "Delete",
707
+ deleteCancelLabel: "Cancel"
708
+ }, be = P(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = ce, isNameReadOnly: c, nameCaption: l, isDescriptionRequired: u, renderDescription: d, focusRequestKey: f, labels: p }) => {
709
+ let [m, h] = R(!1), g = I(() => a ? s : s.filter((e) => e !== Z.Avatar), [a, s]), _ = e.iconUrl, v = a?.resolveIconUrl, y = I(() => v ? v(_) : void 0, [_, v]), b = F(() => h(!0), []), x = F(() => h(!1), []), S = a?.resolveAttachedIconUrl, C = F((e) => {
710
+ let t = S?.(e);
711
+ t && n({ iconUrl: t }), h(!1);
712
+ }, [n, S]);
713
+ return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(pe, {
714
+ values: e,
715
+ errors: t,
716
+ onChange: n,
717
+ onNameBlur: r,
718
+ onVersionBlur: i,
719
+ iconPreviewUrl: y,
720
+ onAddAvatarClick: b,
721
+ labels: p?.form ?? ve,
722
+ availableLocaleOptions: o,
723
+ fields: g,
724
+ isNameReadOnly: c,
725
+ nameCaption: l,
726
+ isDescriptionRequired: u,
727
+ renderDescription: d,
728
+ focusRequestKey: f
729
+ }), a && /* @__PURE__ */ E(se, {
730
+ isOpen: m,
731
+ onClose: x,
732
+ onAttach: C,
733
+ bucket: a.bucket,
734
+ FileManagerModal: a.FileManagerModal,
735
+ allowedMimeTypes: a.allowedMimeTypes,
736
+ maxFileSizeBytes: a.maxFileSizeBytes,
737
+ labels: p?.avatarPicker ?? ye
738
+ })] });
739
+ }), Q = /* @__PURE__ */ function(e) {
740
+ return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e.ControlCharacters = "control-characters", e;
741
+ }({}), xe = (e, t) => e.length === t.length && e.every((e, n) => e.id === t[n].id && e.language === t[n].language && e.name === t[n].name && e.description === t[n].description), Se = (e, t) => e.name === t.name && e.description === t.description && e.iconUrl === t.iconUrl && e.version === t.version && e.topics.length === t.topics.length && e.topics.every((e, n) => e === t.topics[n]) && xe(e.otherLocales, t.otherLocales), Ce = (e) => Object.values(e).every((e) => e == null), we = /^[a-zA-Z0-9 _.-]+$/, Te = /^[a-zA-Z0-9._-]+$/, Ee = /^\d+(\.\d+)*$/, De = (n, r = {}) => {
742
+ let i = {}, s = n.name.trim();
743
+ s ? a(s, t) ? i.name = Q.TooLong : r.validateNamePattern && !we.test(s) ? i.name = Q.InvalidFormat : o(s) && (i.name = Q.ControlCharacters) : i.name = Q.Required, a(n.description, e) && (i.description = Q.TooLong);
744
+ let c = n.version.trim();
745
+ return r.validateVersionPattern && c && ((r.validateVersionPattern instanceof RegExp ? r.validateVersionPattern : Te).test(c) || (i.version = Q.InvalidFormat)), i;
746
+ }, Oe = new Set([Q.TooLong, Q.ControlCharacters]), $ = (e, t) => ({
747
+ reseedKey: t,
748
+ values: e,
749
+ baseline: e,
750
+ touched: {},
751
+ hasAttemptedSubmit: !1,
752
+ submitAttemptCount: 0
753
+ }), ke = ({ initialValues: e, validationOptions: t, reseedKey: n }) => {
754
+ let [r, i] = R(() => $(e, n));
755
+ r.reseedKey !== n && i($(e, n));
756
+ let a = t?.validateNamePattern, o = t?.validateVersionPattern, s = I(() => De(r.values, {
757
+ validateNamePattern: a,
758
+ validateVersionPattern: o
759
+ }), [
760
+ r.values,
761
+ a,
762
+ o
763
+ ]), c = I(() => {
764
+ if (r.hasAttemptedSubmit) return s;
765
+ let e = (e, t) => e && (t || Oe.has(e)) ? e : void 0;
766
+ return {
767
+ name: e(s.name, r.touched[Z.Name]),
768
+ version: e(s.version, r.touched[Z.Version]),
769
+ description: e(s.description, r.touched[Z.Description])
770
+ };
771
+ }, [
772
+ s,
773
+ r.hasAttemptedSubmit,
774
+ r.touched
775
+ ]), l = L(s), u = L(e);
776
+ re(() => {
777
+ l.current = s, u.current = e;
778
+ });
779
+ let d = F((e) => i((t) => ({
780
+ ...t,
781
+ values: {
782
+ ...t.values,
783
+ ...e
784
+ }
785
+ })), []), f = F((e) => i((t) => t.touched[e] ? t : {
786
+ ...t,
787
+ touched: {
788
+ ...t.touched,
789
+ [e]: !0
790
+ }
791
+ }), []), p = F(() => (i((e) => ({
792
+ ...e,
793
+ hasAttemptedSubmit: !0,
794
+ submitAttemptCount: e.submitAttemptCount + 1
795
+ })), Ce(l.current)), []), m = F((e) => i((t) => $(e ?? u.current, t.reseedKey)), []), h = I(() => !Se(r.values, r.baseline), [r.values, r.baseline]);
796
+ return I(() => ({
797
+ values: r.values,
798
+ setValues: d,
799
+ touched: r.touched,
800
+ markTouched: f,
801
+ errorCodes: s,
802
+ visibleErrorCodes: c,
803
+ attemptSubmit: p,
804
+ submitAttemptCount: r.submitAttemptCount,
805
+ isDirty: h,
806
+ reset: m
807
+ }), [
808
+ r.submitAttemptCount,
809
+ r.values,
810
+ d,
811
+ r.touched,
812
+ f,
813
+ s,
814
+ c,
815
+ p,
816
+ h,
817
+ m
818
+ ]);
549
819
  };
550
820
  //#endregion
551
- 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 };
821
+ export { oe as AddAvatar, se as AvatarPickerModal, K as BUILDER_FORM_CLASS, ie as BuilderFormContainer, ve as DEFAULT_METADATA_FORM_LABELS, Q as DeploymentCreationFieldErrorCode, pe as DeploymentCreationForm, ue as DeploymentLocalesField, ae as EditorLayout, J as EditorSection, _e as EntityEditor, Z as MetadataField, be as MetadataForm, we as NAME_PATTERN, Ee as SEMVER_VERSION_PATTERN, Te as VERSION_PATTERN, ke as useMetadataForm, De as validateDeploymentCreationFields };