@epam/ai-dial-ui-kit 0.2.0-rc.27 → 0.2.0-rc.28

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 (6) hide show
  1. package/dist/dial-ui-kit.cjs.js +1 -1
  2. package/dist/dial-ui-kit.es.js +461 -441
  3. package/dist/index.css +1 -1
  4. package/dist/src/components/LabelledText/LabelledText.d.ts +25 -0
  5. package/dist/src/index.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/dial-ui-kit.es.js CHANGED
@@ -1,29 +1,29 @@
1
- import { jsx as r, jsxs as f, Fragment as oe } from "react/jsx-runtime";
1
+ import { jsx as r, jsxs as m, Fragment as le } from "react/jsx-runtime";
2
2
  import c from "classnames";
3
- import { IconCircleCheck as le, IconAlertTriangle as ie, IconAlertCircle as ce, IconInfoCircle as de, IconX as W, IconLoader as ue, IconMinus as me, IconCheck as $, IconExclamationCircle as fe, IconClipboardX as pe, IconChevronsLeft as xe, IconChevronsRight as he, IconEyeOff as ge, IconEye as be, IconSearch as ye } from "@tabler/icons-react";
4
- import { createContext as Ce, useState as T, useRef as ve, useMemo as Ne, useContext as we, forwardRef as U, isValidElement as De, cloneElement as Ie, useCallback as S, useEffect as ke } from "react";
5
- import { useFloating as G, offset as Re, flip as Se, shift as Fe, arrow as Ee, autoUpdate as Te, useHover as Pe, useFocus as Le, useDismiss as K, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Ae, FloatingOverlay as Oe, FloatingFocusManager as ze } from "@floating-ui/react";
6
- const _ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), j = ({
3
+ import { IconCircleCheck as oe, IconAlertTriangle as ie, IconAlertCircle as ce, IconInfoCircle as de, IconX as W, IconLoader as ue, IconMinus as me, IconCheck as $, IconExclamationCircle as fe, IconClipboardX as pe, IconChevronsLeft as xe, IconChevronsRight as he, IconEyeOff as ge, IconEye as be, IconSearch as ye } from "@tabler/icons-react";
4
+ import { createContext as Ce, useState as E, useRef as ve, useMemo as Ne, useContext as we, forwardRef as U, isValidElement as De, cloneElement as Ie, useCallback as S, useEffect as ke } from "react";
5
+ import { useFloating as G, offset as Re, flip as Se, shift as Fe, arrow as Te, autoUpdate as Ee, useHover as Pe, useFocus as Le, useDismiss as K, useRole as Z, useInteractions as X, useMergeRefs as q, FloatingPortal as Q, FloatingArrow as Ae, FloatingOverlay as Oe, FloatingFocusManager as ze } from "@floating-ui/react";
6
+ const _ = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), V = ({
7
7
  fieldTitle: e,
8
- htmlFor: n,
9
- optional: t,
10
- optionalText: a,
11
- cssClass: s
12
- }) => e ? /* @__PURE__ */ f(
8
+ htmlFor: t,
9
+ optional: n,
10
+ optionalText: s,
11
+ cssClass: a
12
+ }) => e ? /* @__PURE__ */ m(
13
13
  "label",
14
14
  {
15
15
  className: c(
16
16
  "dial-tiny text-secondary",
17
- s,
18
- !s?.includes("mb") && "mb-2"
17
+ a,
18
+ !a?.includes("mb") && "mb-2"
19
19
  ),
20
- htmlFor: n,
20
+ htmlFor: t,
21
21
  children: [
22
22
  /* @__PURE__ */ r("span", { className: "min-h-4", children: e }),
23
- t && /* @__PURE__ */ r("span", { className: "ml-1", children: a ?? "(Optional)" })
23
+ n && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
24
24
  ]
25
25
  }
26
- ) : null, D = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: c("flex-shrink-0", n), children: e }) : null;
26
+ ) : null, D = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: c("flex-shrink-0", t), children: e }) : null;
27
27
  var v = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(v || {});
28
28
  const Be = {
29
29
  [v.Primary]: "dial-primary-button",
@@ -32,37 +32,37 @@ const Be = {
32
32
  [v.Danger]: "dial-danger-button"
33
33
  }, P = ({
34
34
  title: e,
35
- variant: n,
36
- cssClass: t,
37
- textCssClass: a,
38
- ref: s,
39
- onClick: o,
40
- disable: l,
35
+ variant: t,
36
+ cssClass: n,
37
+ textCssClass: s,
38
+ ref: a,
39
+ onClick: l,
40
+ disable: o,
41
41
  iconAfter: u,
42
42
  iconBefore: d,
43
43
  hideTitleOnMobile: i,
44
- ariaLabel: m
44
+ ariaLabel: f
45
45
  }) => {
46
46
  const x = c(
47
47
  "dial-small-semi",
48
48
  u ? "mr-2" : "",
49
49
  d ? "ml-2" : "",
50
50
  i ? "hidden sm:inline" : "inline",
51
- a
51
+ s
52
52
  ), h = c(
53
- n && Be[n],
54
- t,
53
+ t && Be[t],
54
+ n,
55
55
  "focus-visible:outline outline-offset-0"
56
56
  );
57
- return /* @__PURE__ */ f(
57
+ return /* @__PURE__ */ m(
58
58
  "button",
59
59
  {
60
- ref: s,
60
+ ref: a,
61
61
  type: "button",
62
62
  className: h,
63
- onClick: (p) => o?.(p),
64
- disabled: l,
65
- "aria-label": e || m,
63
+ onClick: (p) => l?.(p),
64
+ disabled: o,
65
+ "aria-label": e || f,
66
66
  children: [
67
67
  /* @__PURE__ */ r(D, { icon: d }),
68
68
  e && /* @__PURE__ */ r("span", { className: x, children: e }),
@@ -76,7 +76,7 @@ const je = {
76
76
  info: /* @__PURE__ */ r(de, { size: 24, stroke: 2 }),
77
77
  error: /* @__PURE__ */ r(ce, { size: 24, stroke: 2 }),
78
78
  warning: /* @__PURE__ */ r(ie, { size: 24, stroke: 2 }),
79
- success: /* @__PURE__ */ r(le, { size: 24, stroke: 2 })
79
+ success: /* @__PURE__ */ r(oe, { size: 24, stroke: 2 })
80
80
  }, Ve = {
81
81
  [k.Info]: "bg-info border-info text-info",
82
82
  [k.Success]: "bg-success border-success text-success",
@@ -84,50 +84,50 @@ const je = {
84
84
  [k.Error]: "bg-error border-error text-error"
85
85
  }, Me = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Fr = ({
86
86
  variant: e = k.Info,
87
- message: n,
88
- cssClass: t,
89
- closable: a = !1,
90
- onClose: s
91
- }) => /* @__PURE__ */ f(
87
+ message: t,
88
+ cssClass: n,
89
+ closable: s = !1,
90
+ onClose: a
91
+ }) => /* @__PURE__ */ m(
92
92
  "div",
93
93
  {
94
94
  role: "alert",
95
95
  className: c(
96
96
  Me,
97
97
  Ve[e],
98
- t
98
+ n
99
99
  ),
100
100
  children: [
101
- /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
101
+ /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
102
102
  /* @__PURE__ */ r(D, { icon: je[e] }),
103
- /* @__PURE__ */ r("div", { className: "text-primary", children: n })
103
+ /* @__PURE__ */ r("div", { className: "text-primary", children: t })
104
104
  ] }),
105
- a && /* @__PURE__ */ r(
105
+ s && /* @__PURE__ */ r(
106
106
  P,
107
107
  {
108
108
  cssClass: "ml-2 text-secondary hover:text-primary",
109
109
  ariaLabel: "Close alert",
110
110
  iconBefore: /* @__PURE__ */ r(W, { size: 16 }),
111
- onClick: (o) => s?.(o)
111
+ onClick: (l) => a?.(l)
112
112
  }
113
113
  )
114
114
  ]
115
115
  }
116
116
  ), We = "flex items-center justify-center text-secondary", _e = "shrink-0 grow-0 basis-auto animate-spin-steps", He = ({
117
117
  size: e = 18,
118
- cssClass: n,
119
- iconClass: t,
120
- fullWidth: a = !0,
121
- ariaLabel: s = "Loading"
118
+ cssClass: t,
119
+ iconClass: n,
120
+ fullWidth: s = !0,
121
+ ariaLabel: a = "Loading"
122
122
  }) => /* @__PURE__ */ r(
123
123
  "div",
124
124
  {
125
125
  role: "status",
126
- "aria-label": s,
126
+ "aria-label": a,
127
127
  className: c({
128
128
  [We]: !0,
129
- "w-full h-full": a,
130
- [n || ""]: !!n
129
+ "w-full h-full": s,
130
+ [t || ""]: !!t
131
131
  }),
132
132
  children: /* @__PURE__ */ r(
133
133
  D,
@@ -137,7 +137,7 @@ const je = {
137
137
  {
138
138
  width: e,
139
139
  height: e,
140
- className: c(_e, t)
140
+ className: c(_e, n)
141
141
  }
142
142
  )
143
143
  }
@@ -150,74 +150,74 @@ const je = {
150
150
  return e;
151
151
  }, Ge = ({
152
152
  initialOpen: e = !1,
153
- placement: n = "bottom",
154
- isTriggerClickable: t = !1,
155
- open: a,
156
- onOpenChange: s
153
+ placement: t = "bottom",
154
+ isTriggerClickable: n = !1,
155
+ open: s,
156
+ onOpenChange: a
157
157
  } = {}) => {
158
- const [o, l] = T(e), u = ve(null), d = a ?? o, i = s ?? l, m = G({
159
- placement: n,
158
+ const [l, o] = E(e), u = ve(null), d = s ?? l, i = a ?? o, f = G({
159
+ placement: t,
160
160
  open: d,
161
161
  onOpenChange: i,
162
- whileElementsMounted: Te,
162
+ whileElementsMounted: Ee,
163
163
  middleware: [
164
164
  Re($e + Ue),
165
165
  Se({
166
- crossAxis: n.includes("-"),
166
+ crossAxis: t.includes("-"),
167
167
  fallbackAxisSideDirection: "start",
168
168
  padding: 5
169
169
  }),
170
170
  Fe({ padding: 5 }),
171
- Ee({
171
+ Te({
172
172
  element: u
173
173
  })
174
174
  ]
175
- }), x = Pe(m.context, {
175
+ }), x = Pe(f.context, {
176
176
  move: !1,
177
- enabled: a == null,
178
- mouseOnly: t,
177
+ enabled: s == null,
178
+ mouseOnly: n,
179
179
  delay: { open: 500, close: 0 }
180
- }), h = Le(m.context, {
181
- enabled: a == null
182
- }), p = K(m.context), y = Z(m.context, { role: "tooltip" }), g = X([x, h, p, y]);
180
+ }), h = Le(f.context, {
181
+ enabled: s == null
182
+ }), p = K(f.context), y = Z(f.context, { role: "tooltip" }), g = X([x, h, p, y]);
183
183
  return Ne(
184
184
  () => ({
185
185
  open: d,
186
186
  setOpen: i,
187
187
  arrowRef: u,
188
188
  ...g,
189
- ...m
189
+ ...f
190
190
  }),
191
- [d, i, g, m]
191
+ [d, i, g, f]
192
192
  );
193
193
  }, Ke = ({
194
194
  children: e,
195
- ...n
195
+ ...t
196
196
  }) => {
197
- const t = Ge(n);
198
- return /* @__PURE__ */ r(Y.Provider, { value: t, children: e });
199
- }, Ze = U(function({ style: n, ...t }, a) {
200
- const s = J(), o = q([s.refs.setFloating, a]);
201
- return s.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ f(
197
+ const n = Ge(t);
198
+ return /* @__PURE__ */ r(Y.Provider, { value: n, children: e });
199
+ }, Ze = U(function({ style: t, ...n }, s) {
200
+ const a = J(), l = q([a.refs.setFloating, s]);
201
+ return a.open ? /* @__PURE__ */ r(Q, { id: "tooltip-portal", children: /* @__PURE__ */ m(
202
202
  "div",
203
203
  {
204
- ref: o,
204
+ ref: l,
205
205
  style: {
206
- ...s.floatingStyles,
207
- ...n
206
+ ...a.floatingStyles,
207
+ ...t
208
208
  },
209
- ...s.getFloatingProps(t),
209
+ ...a.getFloatingProps(n),
210
210
  className: c(
211
211
  "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
212
- s.getFloatingProps(t).className
212
+ a.getFloatingProps(n).className
213
213
  ),
214
214
  children: [
215
- t.children,
215
+ n.children,
216
216
  /* @__PURE__ */ r(
217
217
  Ae,
218
218
  {
219
- ref: s.arrowRef,
220
- context: s.context,
219
+ ref: a.arrowRef,
220
+ context: a.context,
221
221
  fill: "currentColor",
222
222
  strokeWidth: 1,
223
223
  className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -226,91 +226,91 @@ const je = {
226
226
  ]
227
227
  }
228
228
  ) }) : null;
229
- }), Xe = U(function({ children: n, asChild: t = !1, ...a }, s) {
230
- const o = J(), u = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = q([o.refs.setReference, s, u]);
231
- return t && De(n) ? Ie(
232
- n,
233
- o.getReferenceProps({
229
+ }), Xe = U(function({ children: t, asChild: n = !1, ...s }, a) {
230
+ const l = J(), u = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, d = q([l.refs.setReference, a, u]);
231
+ return n && De(t) ? Ie(
232
+ t,
233
+ l.getReferenceProps({
234
234
  ref: d,
235
- ...a,
236
- ...n.props
235
+ ...s,
236
+ ...t.props
237
237
  })
238
238
  ) : /* @__PURE__ */ r(
239
239
  "span",
240
240
  {
241
241
  ref: d,
242
- ...o.getReferenceProps(a),
243
- className: a.className ?? "dial-tooltip-trigger text-left",
244
- children: n
242
+ ...l.getReferenceProps(s),
243
+ className: s.className ?? "dial-tooltip-trigger text-left",
244
+ children: t
245
245
  }
246
246
  );
247
- }), V = ({
247
+ }), L = ({
248
248
  hideTooltip: e,
249
- tooltip: n,
250
- children: t,
251
- triggerClassName: a,
252
- contentClassName: s,
253
- ...o
254
- }) => /* @__PURE__ */ f(Ke, { ...o, children: [
255
- /* @__PURE__ */ r(Xe, { className: c(a, "truncate"), children: t }),
249
+ tooltip: t,
250
+ children: n,
251
+ triggerClassName: s,
252
+ contentClassName: a,
253
+ ...l
254
+ }) => /* @__PURE__ */ m(Ke, { ...l, children: [
255
+ /* @__PURE__ */ r(Xe, { className: c(s, "truncate"), children: n }),
256
256
  /* @__PURE__ */ r(
257
257
  Ze,
258
258
  {
259
259
  className: c(
260
260
  "text-primary",
261
- s,
261
+ a,
262
262
  "max-w-[300px]",
263
- (e || !n) && "hidden"
263
+ (e || !t) && "hidden"
264
264
  ),
265
- children: n
265
+ children: t
266
266
  }
267
267
  )
268
268
  ] }), ee = 18, F = {
269
269
  size: ee,
270
270
  stroke: 2
271
- }, Er = ({
271
+ }, Tr = ({
272
272
  label: e,
273
- id: n,
274
- checked: t,
275
- indeterminate: a,
276
- disabled: s,
277
- ariaLabel: o,
278
- onChange: l
273
+ id: t,
274
+ checked: n,
275
+ indeterminate: s,
276
+ disabled: a,
277
+ ariaLabel: l,
278
+ onChange: o
279
279
  }) => {
280
280
  const u = S(
281
- (m) => {
282
- m.stopPropagation(), l?.(m.target.checked, n);
281
+ (f) => {
282
+ f.stopPropagation(), o?.(f.target.checked, t);
283
283
  },
284
- [l, n]
284
+ [o, t]
285
285
  ), d = c(
286
286
  "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
287
- `${t ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
288
- s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
287
+ `${n ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
288
+ a ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
289
289
  ), i = c(
290
290
  "mr-2 border rounded",
291
- s ? "bg-layer-4 border-icon-secondary" : ""
291
+ a ? "bg-layer-4 border-icon-secondary" : ""
292
292
  );
293
- return /* @__PURE__ */ f("label", { className: d, htmlFor: n, children: [
294
- t && (a ? /* @__PURE__ */ r(me, { className: i, ...F }) : /* @__PURE__ */ r($, { className: i, ...F })),
295
- e && /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
293
+ return /* @__PURE__ */ m("label", { className: d, htmlFor: t, children: [
294
+ n && (s ? /* @__PURE__ */ r(me, { className: i, ...F }) : /* @__PURE__ */ r($, { className: i, ...F })),
295
+ e && /* @__PURE__ */ r(L, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
296
296
  /* @__PURE__ */ r(
297
297
  "input",
298
298
  {
299
299
  type: "checkbox",
300
300
  onChange: u,
301
- id: n,
302
- checked: t,
303
- "aria-checked": a ? "mixed" : t,
304
- "aria-disabled": s || void 0,
305
- "aria-label": e ? void 0 : o,
301
+ id: t,
302
+ checked: n,
303
+ "aria-checked": s ? "mixed" : n,
304
+ "aria-disabled": a || void 0,
305
+ "aria-label": e ? void 0 : l,
306
306
  className: "invisible w-0 h-0"
307
307
  }
308
308
  )
309
309
  ] });
310
310
  };
311
311
  var C = /* @__PURE__ */ ((e) => (e.VALID = "valid", e.ERROR = "error", e))(C || {});
312
- const qe = (e, n) => {
313
- if (n === e.id)
312
+ const qe = (e, t) => {
313
+ if (t === e.id)
314
314
  switch (e.status) {
315
315
  case C.VALID:
316
316
  return "border-accent-secondary text-primary";
@@ -327,8 +327,8 @@ const qe = (e, n) => {
327
327
  default:
328
328
  return "border-primary text-secondary";
329
329
  }
330
- }, Qe = (e, n) => {
331
- if (n === e.id)
330
+ }, Qe = (e, t) => {
331
+ if (t === e.id)
332
332
  switch (e.status) {
333
333
  case C.VALID:
334
334
  return "bg-accent-secondary";
@@ -347,168 +347,168 @@ const qe = (e, n) => {
347
347
  }
348
348
  }, Ye = ({
349
349
  step: e,
350
- index: n,
351
- currentStep: t,
352
- onChangeStep: a
350
+ index: t,
351
+ currentStep: n,
352
+ onChangeStep: s
353
353
  }) => {
354
- const s = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", o = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", l = () => t === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(fe, { stroke: 2, size: 16 }) : t !== e.id && e.status === C.VALID ? /* @__PURE__ */ r($, { stroke: 2, size: 16 }) : n + 1;
355
- return /* @__PURE__ */ f(
354
+ const a = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer", l = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", o = () => n === e.id && e.status === C.ERROR ? /* @__PURE__ */ r(fe, { stroke: 2, size: 16 }) : n !== e.id && e.status === C.VALID ? /* @__PURE__ */ r($, { stroke: 2, size: 16 }) : t + 1;
355
+ return /* @__PURE__ */ m(
356
356
  "button",
357
357
  {
358
- className: c(s, qe(e, t)),
359
- onClick: () => a(e.id),
358
+ className: c(a, qe(e, n)),
359
+ onClick: () => s(e.id),
360
360
  children: [
361
361
  /* @__PURE__ */ r(
362
362
  "span",
363
363
  {
364
- className: c(o, Qe(e, t)),
365
- children: l()
364
+ className: c(l, Qe(e, n)),
365
+ children: o()
366
366
  }
367
367
  ),
368
368
  /* @__PURE__ */ r("span", { children: e.name })
369
369
  ]
370
370
  }
371
371
  );
372
- }, Tr = ({
372
+ }, Er = ({
373
373
  steps: e,
374
- currentStep: n,
375
- onChangeStep: t
374
+ currentStep: t,
375
+ onChangeStep: n
376
376
  }) => {
377
- const a = (s) => {
378
- const o = e.findIndex((u) => u.id === n), l = e.findIndex((u) => u.id === s);
379
- (s !== n && e[o].status === C.VALID || l < o) && t(s);
377
+ const s = (a) => {
378
+ const l = e.findIndex((u) => u.id === t), o = e.findIndex((u) => u.id === a);
379
+ (a !== t && e[l].status === C.VALID || o < l) && n(a);
380
380
  };
381
- return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
381
+ return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((a, l) => /* @__PURE__ */ r(
382
382
  Ye,
383
383
  {
384
- currentStep: n,
385
- onChangeStep: a,
386
- step: s,
387
- index: o
384
+ currentStep: t,
385
+ onChangeStep: s,
386
+ step: a,
387
+ index: l
388
388
  },
389
- s.id
389
+ a.id
390
390
  )) });
391
391
  }, Je = ({
392
392
  name: e,
393
- value: n,
394
- title: t,
395
- description: a,
396
- checked: s = !1,
397
- inputId: o,
398
- cssClass: l,
393
+ value: t,
394
+ title: n,
395
+ description: s,
396
+ checked: a = !1,
397
+ inputId: l,
398
+ cssClass: o,
399
399
  labelCssClass: u,
400
400
  disabled: d,
401
401
  onChange: i,
402
- descriptionCssClass: m
402
+ descriptionCssClass: f
403
403
  }) => {
404
- const x = `${o}-desc`, h = c(
404
+ const x = `${l}-desc`, h = c(
405
405
  "dial-small cursor-pointer",
406
406
  d ? "text-secondary" : "text-primary",
407
407
  u
408
408
  ), p = c(
409
409
  "cursor-pointer dial-input-radio",
410
- t && "mr-2",
411
- l
412
- ), y = c("flex flex-col", !!a && "mb-2"), g = c(
410
+ n && "mr-2",
411
+ o
412
+ ), y = c("flex flex-col", !!s && "mb-2"), g = c(
413
413
  "dial-tiny mt-2 ml-[26px] text-secondary",
414
- m
414
+ f
415
415
  );
416
- return /* @__PURE__ */ f("div", { className: y, children: [
417
- /* @__PURE__ */ f("div", { className: "flex flex-row items-center", children: [
416
+ return /* @__PURE__ */ m("div", { className: y, children: [
417
+ /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
418
418
  /* @__PURE__ */ r(
419
419
  "input",
420
420
  {
421
421
  type: "radio",
422
- id: o,
422
+ id: l,
423
423
  name: e,
424
- value: n,
425
- checked: s,
424
+ value: t,
425
+ checked: a,
426
426
  disabled: d,
427
- "aria-describedby": s && a ? x : void 0,
427
+ "aria-describedby": a && s ? x : void 0,
428
428
  className: p,
429
429
  onChange: (w) => {
430
- d || w.target.checked && i?.(n);
430
+ d || w.target.checked && i?.(t);
431
431
  }
432
432
  }
433
433
  ),
434
- t ? /* @__PURE__ */ r("label", { className: h, htmlFor: o, children: t }) : null
434
+ n ? /* @__PURE__ */ r("label", { className: h, htmlFor: l, children: n }) : null
435
435
  ] }),
436
- s && a && /* @__PURE__ */ r("div", { id: x, className: g, children: a })
436
+ a && s && /* @__PURE__ */ r("div", { id: x, className: g, children: s })
437
437
  ] });
438
438
  };
439
439
  var M = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(M || {});
440
- const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
440
+ const er = "flex flex-col gap-2", rr = "flex", tr = "pb-1 mt-2", nr = {
441
441
  [M.Column]: "flex-col gap-y-3",
442
442
  [M.Row]: "flex-row gap-x-6"
443
443
  }, Pr = ({
444
444
  fieldTitle: e,
445
- radioCssClass: n,
446
- labelCssClass: t,
447
- disabled: a,
448
- elementId: s,
449
- radioButtons: o,
450
- activeRadioButton: l,
445
+ radioCssClass: t,
446
+ labelCssClass: n,
447
+ disabled: s,
448
+ elementId: a,
449
+ radioButtons: l,
450
+ activeRadioButton: o,
451
451
  orientation: u,
452
452
  onChange: d
453
- }) => /* @__PURE__ */ f("div", { className: er, children: [
454
- e && /* @__PURE__ */ r(j, { fieldTitle: e, htmlFor: s }),
453
+ }) => /* @__PURE__ */ m("div", { className: er, children: [
454
+ e && /* @__PURE__ */ r(V, { fieldTitle: e, htmlFor: a }),
455
455
  /* @__PURE__ */ r(
456
456
  "div",
457
457
  {
458
458
  role: "radiogroup",
459
459
  "aria-label": e,
460
- "aria-disabled": a || void 0,
460
+ "aria-disabled": s || void 0,
461
461
  className: c(
462
462
  rr,
463
- tr[u]
463
+ nr[u]
464
464
  ),
465
- children: o.map((i) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
465
+ children: l.map((i) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
466
466
  /* @__PURE__ */ r(
467
467
  Je,
468
468
  {
469
- name: s,
469
+ name: a,
470
470
  value: i.id,
471
471
  inputId: i.id,
472
- disabled: a,
473
- cssClass: n,
474
- labelCssClass: t,
472
+ disabled: s,
473
+ cssClass: t,
474
+ labelCssClass: n,
475
475
  title: i.name,
476
- checked: i.id === l,
476
+ checked: i.id === o,
477
477
  onChange: () => d(i.id)
478
478
  }
479
479
  ),
480
- i.id === l && i.content ? /* @__PURE__ */ r("div", { className: nr, children: i.content }) : null
480
+ i.id === o && i.content ? /* @__PURE__ */ r("div", { className: tr, children: i.content }) : null
481
481
  ] }, i.id))
482
482
  }
483
483
  )
484
484
  ] }), Lr = ({
485
485
  icon: e,
486
- title: n,
487
- description: t
488
- }) => /* @__PURE__ */ f("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
486
+ title: t,
487
+ description: n
488
+ }) => /* @__PURE__ */ m("div", { className: "h-full w-full flex flex-col items-center justify-center text-secondary", children: [
489
489
  e || /* @__PURE__ */ r(pe, { width: 60, height: 60 }),
490
- /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: n }),
491
- t && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: t })
490
+ /* @__PURE__ */ r("span", { className: "small mt-2 text-primary", children: t }),
491
+ n && /* @__PURE__ */ r("span", { className: "mt-1 text-primary", children: n })
492
492
  ] }), sr = 60, Ar = ({
493
493
  containerCssClass: e,
494
- children: n,
495
- width: t,
496
- title: a,
497
- iconSize: s = ee,
498
- titleCssClass: o,
499
- additionalButtons: l
494
+ children: t,
495
+ width: n,
496
+ title: s,
497
+ iconSize: a = ee,
498
+ titleCssClass: l,
499
+ additionalButtons: o
500
500
  }) => {
501
- const [u, d] = T(t), [i, m] = T(!0), x = c([
501
+ const [u, d] = E(n), [i, f] = E(!0), x = c([
502
502
  "transform rotate-180 [writing-mode:tb-rl]",
503
503
  i && "hidden",
504
- o
504
+ l
505
505
  ]), h = c([
506
506
  "flex flex-row gap-2 cursor-pointer text-secondary",
507
507
  i ? "justify-end" : "justify-center"
508
508
  ]), p = () => {
509
- d(i ? sr : t), m(!i);
509
+ d(i ? sr : n), f(!i);
510
510
  };
511
- return /* @__PURE__ */ f(
511
+ return /* @__PURE__ */ m(
512
512
  "div",
513
513
  {
514
514
  className: c([
@@ -524,12 +524,12 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
524
524
  "flex-1 min-h-0 overflow-auto",
525
525
  !i && "hidden"
526
526
  ]),
527
- children: n
527
+ children: t
528
528
  }
529
529
  ),
530
- /* @__PURE__ */ r("div", { className: x, children: a }),
531
- /* @__PURE__ */ f("div", { className: h, children: [
532
- i && l,
530
+ /* @__PURE__ */ r("div", { className: x, children: s }),
531
+ /* @__PURE__ */ m("div", { className: h, children: [
532
+ i && o,
533
533
  /* @__PURE__ */ r(
534
534
  P,
535
535
  {
@@ -538,13 +538,13 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
538
538
  iconBefore: i ? /* @__PURE__ */ r(
539
539
  xe,
540
540
  {
541
- size: s,
541
+ size: a,
542
542
  stroke: F.stroke
543
543
  }
544
544
  ) : /* @__PURE__ */ r(
545
545
  he,
546
546
  {
547
- size: s,
547
+ size: a,
548
548
  stroke: F.stroke
549
549
  }
550
550
  )
@@ -554,45 +554,65 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
554
554
  ]
555
555
  }
556
556
  );
557
- }, ar = ({
557
+ }, Or = ({
558
+ label: e,
559
+ text: t,
560
+ children: n,
561
+ postfix: s
562
+ }) => /* @__PURE__ */ m(
563
+ "div",
564
+ {
565
+ className: c(
566
+ "flex flex-col text-secondary",
567
+ n ? "" : "max-w-[200px]"
568
+ ),
569
+ children: [
570
+ /* @__PURE__ */ r("label", { className: "dial-tiny mb-2", children: e }),
571
+ n || /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
572
+ /* @__PURE__ */ r(L, { triggerClassName: "text-primary", tooltip: t, children: t }),
573
+ s || null
574
+ ] })
575
+ ]
576
+ }
577
+ ), ar = ({
558
578
  ariaLabel: e,
559
- cssClass: n,
560
- size: t = 24,
561
- onClose: a
579
+ cssClass: t,
580
+ size: n = 24,
581
+ onClose: s
562
582
  }) => /* @__PURE__ */ r(
563
583
  P,
564
584
  {
565
585
  ariaLabel: e,
566
- cssClass: c("text-secondary hover:text-accent-primary", n),
567
- onClick: a,
568
- iconBefore: /* @__PURE__ */ r(W, { size: t })
586
+ cssClass: c("text-secondary hover:text-accent-primary", t),
587
+ onClick: s,
588
+ iconBefore: /* @__PURE__ */ r(W, { size: n })
569
589
  }
570
- ), or = ({
590
+ ), lr = ({
571
591
  value: e,
572
- textareaId: n,
573
- placeholder: t,
574
- cssClass: a = "",
575
- disabled: s,
576
- invalid: o,
577
- readonly: l,
592
+ textareaId: t,
593
+ placeholder: n,
594
+ cssClass: s = "",
595
+ disabled: a,
596
+ invalid: l,
597
+ readonly: o,
578
598
  onChange: u
579
- }) => /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
599
+ }) => /* @__PURE__ */ r(L, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
580
600
  "textarea",
581
601
  {
582
- id: n,
583
- placeholder: t,
602
+ id: t,
603
+ placeholder: n,
584
604
  value: e || "",
585
- disabled: s,
605
+ disabled: a,
586
606
  className: c(
587
607
  "dial-textarea dial-input px-3 py-2",
588
- o ? "dial-input-error" : "",
589
- s && "dial-input-disable",
590
- l && "dial-input-readonly",
591
- a
608
+ l ? "dial-input-error" : "",
609
+ a && "dial-input-disable",
610
+ o && "dial-input-readonly",
611
+ s
592
612
  ),
593
- onChange: (d) => !l && u?.(d.currentTarget.value)
613
+ onChange: (d) => !o && u?.(d.currentTarget.value)
594
614
  }
595
- ) }), lr = [
615
+ ) }), or = [
596
616
  "ArrowLeft",
597
617
  "ArrowRight",
598
618
  "ArrowUp",
@@ -604,38 +624,38 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
604
624
  "Escape",
605
625
  "Home",
606
626
  "End"
607
- ], ir = (e, n, t, a) => {
608
- if ((n === "number" || t !== void 0 || a !== void 0) && !lr.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && n === "number" && !e.currentTarget.value.includes("."))) {
627
+ ], ir = (e, t, n, s) => {
628
+ if ((t === "number" || n !== void 0 || s !== void 0) && !or.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
609
629
  if (!/^[0-9]$/.test(e.key)) {
610
630
  e.preventDefault();
611
631
  return;
612
632
  }
613
- if (t !== void 0 || a !== void 0) {
614
- const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, u = o.slice(0, l) + e.key + o.slice(l), d = parseFloat(u);
633
+ if (n !== void 0 || s !== void 0) {
634
+ const l = e.currentTarget.value, o = e.currentTarget.selectionStart || 0, u = l.slice(0, o) + e.key + l.slice(o), d = parseFloat(u);
615
635
  if (!isNaN(d)) {
616
- if (t !== void 0 && d < t) {
636
+ if (n !== void 0 && d < n) {
617
637
  e.preventDefault();
618
638
  return;
619
639
  }
620
- if (a !== void 0 && d > a) {
640
+ if (s !== void 0 && d > s) {
621
641
  e.preventDefault();
622
642
  return;
623
643
  }
624
644
  }
625
645
  }
626
646
  }
627
- }, O = ({
647
+ }, z = ({
628
648
  iconBefore: e,
629
- iconAfter: n,
630
- hideBorder: t,
631
- value: a,
632
- elementId: s,
633
- placeholder: o = "",
634
- cssClass: l = "",
649
+ iconAfter: t,
650
+ hideBorder: n,
651
+ value: s,
652
+ elementId: a,
653
+ placeholder: l = "",
654
+ cssClass: o = "",
635
655
  containerCssClass: u,
636
656
  tooltipTriggerClassName: d,
637
657
  type: i = "text",
638
- disabled: m,
658
+ disabled: f,
639
659
  readonly: x,
640
660
  invalid: h,
641
661
  onChange: p,
@@ -644,87 +664,86 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
644
664
  prefix: N,
645
665
  suffix: w,
646
666
  textBeforeInput: b,
647
- textAfterInput: L
667
+ textAfterInput: A
648
668
  }) => {
649
- const ne = (I) => I.target.blur(), te = i === "number" || y !== void 0 || g !== void 0, se = (I) => {
669
+ const te = (I) => I.target.blur(), ne = i === "number" || y !== void 0 || g !== void 0, se = (I) => {
650
670
  ir(I, i, y, g);
651
671
  }, ae = (I) => {
652
- const E = I.currentTarget.value;
653
- if (te && E !== "") {
654
- const A = parseFloat(E);
655
- if (isNaN(A) && E !== "-" && E !== "." || !isNaN(A) && (y !== void 0 && A < y || g !== void 0 && A > g))
672
+ const T = I.currentTarget.value;
673
+ if (ne && T !== "") {
674
+ const O = parseFloat(T);
675
+ if (isNaN(O) && T !== "-" && T !== "." || !isNaN(O) && (y !== void 0 && O < y || g !== void 0 && O > g))
656
676
  return;
657
677
  }
658
- p?.(E);
678
+ p?.(T);
659
679
  };
660
- return /* @__PURE__ */ f(
680
+ return /* @__PURE__ */ m(
661
681
  "div",
662
682
  {
663
683
  className: c(
664
684
  "dial-input-field flex flex-row items-center justify-between py-2",
665
- t ? "dial-input-no-border" : "dial-input",
685
+ n ? "dial-input-no-border" : "dial-input",
666
686
  h && "dial-input-error",
667
- m && "dial-input-disable",
687
+ f && "dial-input-disable",
668
688
  x && "dial-input-readonly",
669
689
  !b && "pl-3",
670
- !L && "pr-3",
690
+ !A && "pr-3",
671
691
  u
672
692
  ),
673
693
  children: [
674
694
  b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
675
- O,
695
+ z,
676
696
  {
677
697
  hideBorder: !0,
678
698
  containerCssClass: "rounded-r-none border-r-0",
679
- cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
699
+ cssClass: "overflow-hidden overflow-ellipsis dial-small",
680
700
  value: b,
681
701
  disabled: !0,
682
702
  elementId: b + "textBefore"
683
703
  }
684
704
  ) }),
685
- N && /* @__PURE__ */ f("p", { className: "text-secondary dial-small", children: [
705
+ N && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
686
706
  " ",
687
707
  N
688
708
  ] }),
689
709
  /* @__PURE__ */ r(D, { icon: e }),
690
710
  /* @__PURE__ */ r(
691
- V,
711
+ L,
692
712
  {
693
- tooltip: a,
713
+ tooltip: s,
694
714
  triggerClassName: c(d, "flex-1"),
695
715
  children: /* @__PURE__ */ r(
696
716
  "input",
697
717
  {
698
718
  type: i,
699
719
  autoComplete: "off",
700
- id: s,
701
- placeholder: o,
702
- value: a ?? "",
703
- disabled: m,
704
- className: c("border-0 bg-transparent px-2", l),
720
+ id: a,
721
+ placeholder: l,
722
+ value: s ?? "",
723
+ disabled: f,
724
+ className: c("border-0 bg-transparent", o),
705
725
  onChange: (I) => !x && ae?.(I),
706
726
  onKeyDown: se,
707
- onWheel: ne,
727
+ onWheel: te,
708
728
  min: y,
709
729
  max: g
710
730
  }
711
731
  )
712
732
  }
713
733
  ),
714
- /* @__PURE__ */ r(D, { icon: n }),
715
- w && /* @__PURE__ */ f("p", { className: "text-secondary dial-small", children: [
734
+ /* @__PURE__ */ r(D, { icon: t }),
735
+ w && /* @__PURE__ */ m("p", { className: "text-secondary dial-small", children: [
716
736
  " ",
717
737
  w
718
738
  ] }),
719
- L && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
720
- O,
739
+ A && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
740
+ z,
721
741
  {
722
742
  hideBorder: !0,
723
743
  containerCssClass: "rounded-l-none border-l-0",
724
- cssClass: "px-2",
725
- value: L,
744
+ value: A,
726
745
  disabled: !0,
727
- elementId: L + "textAfter"
746
+ elementId: A + "textAfter"
728
747
  }
729
748
  ) })
730
749
  ]
@@ -732,131 +751,131 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
732
751
  );
733
752
  }, cr = /^0+\.(\d+)?$/, dr = /^0+/, re = ({
734
753
  fieldTitle: e,
735
- errorText: n,
736
- optional: t,
737
- elementCssClass: a,
738
- elementContainerCssClass: s,
739
- elementId: o,
740
- containerCssClass: l,
754
+ errorText: t,
755
+ optional: n,
756
+ elementCssClass: s,
757
+ elementContainerCssClass: a,
758
+ elementId: l,
759
+ containerCssClass: o,
741
760
  readonly: u,
742
761
  defaultEmptyText: d,
743
762
  min: i,
744
- max: m,
763
+ max: f,
745
764
  ...x
746
- }) => /* @__PURE__ */ f("div", { className: c("flex flex-col", l), children: [
765
+ }) => /* @__PURE__ */ m("div", { className: c("flex flex-col", o), children: [
747
766
  /* @__PURE__ */ r(
748
- j,
767
+ V,
749
768
  {
750
769
  fieldTitle: e,
751
- optional: t,
752
- htmlFor: o
770
+ optional: n,
771
+ htmlFor: l
753
772
  }
754
773
  ),
755
- u ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ f(oe, { children: [
774
+ u ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ m(le, { children: [
756
775
  /* @__PURE__ */ r(
757
- O,
776
+ z,
758
777
  {
759
- elementId: o,
760
- cssClass: a,
761
- containerCssClass: s,
762
- invalid: n != null,
778
+ elementId: l,
779
+ cssClass: s,
780
+ containerCssClass: a,
781
+ invalid: t != null,
763
782
  min: i,
764
- max: m,
783
+ max: f,
765
784
  ...x
766
785
  }
767
786
  ),
768
- /* @__PURE__ */ r(_, { errorText: n })
787
+ /* @__PURE__ */ r(_, { errorText: t })
769
788
  ] })
770
- ] }), Or = ({
789
+ ] }), zr = ({
771
790
  onChange: e,
772
- value: n,
773
- min: t,
774
- max: a,
775
- ...s
791
+ value: t,
792
+ min: n,
793
+ max: s,
794
+ ...a
776
795
  }) => {
777
- const o = (l) => String(l)?.match(cr) ? String(l)?.replace(dr, "0") : Number(l);
796
+ const l = (o) => String(o)?.match(cr) ? String(o)?.replace(dr, "0") : Number(o);
778
797
  return /* @__PURE__ */ r(
779
798
  re,
780
799
  {
781
800
  type: "number",
782
- onChange: (l) => e?.(o(l)),
783
- value: n,
784
- min: t,
785
- max: a,
786
- ...s
801
+ onChange: (o) => e?.(l(o)),
802
+ value: t,
803
+ min: n,
804
+ max: s,
805
+ ...a
787
806
  }
788
807
  );
789
- }, zr = ({
808
+ }, Br = ({
790
809
  onChange: e,
791
- ...n
810
+ ...t
792
811
  }) => /* @__PURE__ */ r(
793
812
  re,
794
813
  {
795
814
  type: "text",
796
- onChange: (t) => e?.(t),
797
- ...n
815
+ onChange: (n) => e?.(n),
816
+ ...t
798
817
  }
799
- ), Br = ({
818
+ ), jr = ({
800
819
  fieldTitle: e,
801
- optional: n,
802
- elementId: t,
803
- elementCssClass: a,
804
- errorText: s,
805
- ...o
806
- }) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
820
+ optional: t,
821
+ elementId: n,
822
+ elementCssClass: s,
823
+ errorText: a,
824
+ ...l
825
+ }) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
807
826
  /* @__PURE__ */ r(
808
- j,
827
+ V,
809
828
  {
810
829
  fieldTitle: e,
811
- optional: n,
812
- htmlFor: t
830
+ optional: t,
831
+ htmlFor: n
813
832
  }
814
833
  ),
815
834
  /* @__PURE__ */ r(
816
- or,
835
+ lr,
817
836
  {
818
- textareaId: t,
819
- cssClass: a,
820
- ...o
837
+ textareaId: n,
838
+ cssClass: s,
839
+ ...l
821
840
  }
822
841
  ),
823
- /* @__PURE__ */ r(_, { errorText: s })
824
- ] }), jr = ({
842
+ /* @__PURE__ */ r(_, { errorText: a })
843
+ ] }), Vr = ({
825
844
  title: e,
826
- switchId: n,
827
- isOn: t = !1,
828
- disabled: a,
829
- onChange: s
845
+ switchId: t,
846
+ isOn: n = !1,
847
+ disabled: s,
848
+ onChange: a
830
849
  }) => {
831
- const o = c(
850
+ const l = c(
832
851
  "flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
833
- t ? "flex-row-reverse" : "flex-row",
834
- a ? "pointer-events-none" : "",
835
- a ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
836
- ), l = S(
852
+ n ? "flex-row-reverse" : "flex-row",
853
+ s ? "pointer-events-none" : "",
854
+ s ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
855
+ ), o = S(
837
856
  (u) => {
838
- u.stopPropagation(), s?.(!t);
857
+ u.stopPropagation(), a?.(!n);
839
858
  },
840
- [s, t]
859
+ [a, n]
841
860
  );
842
- return /* @__PURE__ */ f("div", { className: "flex flex-row items-center", children: [
861
+ return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
843
862
  /* @__PURE__ */ r(
844
863
  "input",
845
864
  {
846
865
  type: "checkbox",
847
- onChange: l,
848
- id: n,
849
- disabled: a,
866
+ onChange: o,
867
+ id: t,
868
+ disabled: s,
850
869
  className: "invisible w-0 h-0",
851
- checked: t
870
+ checked: n
852
871
  }
853
872
  ),
854
- /* @__PURE__ */ r("label", { htmlFor: n, className: o, children: /* @__PURE__ */ r(
873
+ /* @__PURE__ */ r("label", { htmlFor: t, className: l, children: /* @__PURE__ */ r(
855
874
  "span",
856
875
  {
857
876
  className: c(
858
877
  "size-3 rounded-full",
859
- a ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
878
+ s ? n ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
860
879
  )
861
880
  }
862
881
  ) }),
@@ -870,16 +889,16 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
870
889
  [R.Lg]: "max-w-full md:max-w-[1200px]"
871
890
  }, hr = ({
872
891
  open: e = !1,
873
- title: n,
874
- portalId: t,
875
- cssClass: a,
876
- overlayClass: s,
877
- headingClass: o,
878
- dividers: l = !0,
892
+ title: t,
893
+ portalId: n,
894
+ cssClass: s,
895
+ overlayClass: a,
896
+ headingClass: l,
897
+ dividers: o = !0,
879
898
  children: u,
880
899
  footer: d,
881
900
  onClose: i,
882
- size: m = R.Md
901
+ size: f = R.Md
883
902
  }) => {
884
903
  const { refs: x, context: h } = G({
885
904
  open: e,
@@ -888,18 +907,18 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
888
907
  }
889
908
  }), p = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: g } = X([p, y]);
890
909
  if (!e) return null;
891
- const N = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
910
+ const N = typeof t == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
892
911
  "h3",
893
912
  {
894
913
  id: N,
895
914
  className: c(
896
915
  "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
897
- o
916
+ l
898
917
  ),
899
- children: /* @__PURE__ */ r(V, { tooltip: b, children: b })
918
+ children: /* @__PURE__ */ r(L, { tooltip: b, children: b })
900
919
  }
901
920
  ) : b : /* @__PURE__ */ r("span", {});
902
- return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Oe, { className: c(ur, s), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ f(
921
+ return /* @__PURE__ */ r(Q, { id: n, children: /* @__PURE__ */ r(Oe, { className: c(ur, a), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ m(
903
922
  "div",
904
923
  {
905
924
  ref: x.setFloating,
@@ -909,13 +928,13 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
909
928
  "aria-labelledby": N,
910
929
  className: c(
911
930
  mr,
912
- xr[m],
913
- l && fr,
914
- a
931
+ xr[f],
932
+ o && fr,
933
+ s
915
934
  ),
916
935
  children: [
917
- /* @__PURE__ */ f("div", { className: pr, children: [
918
- w(n),
936
+ /* @__PURE__ */ m("div", { className: pr, children: [
937
+ w(t),
919
938
  /* @__PURE__ */ r(
920
939
  ar,
921
940
  {
@@ -930,43 +949,43 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
930
949
  }
931
950
  ) }) }) });
932
951
  };
933
- var z = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(z || {});
952
+ var B = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(B || {});
934
953
  const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-150 px-6 py-4", yr = "Cancel", H = {
935
- [z.Info]: {
954
+ [B.Info]: {
936
955
  confirmVariant: v.Primary,
937
956
  cancelVariant: v.Secondary
938
957
  },
939
- [z.Danger]: {
958
+ [B.Danger]: {
940
959
  container: "border-t-4 border-error",
941
960
  confirmVariant: v.Danger,
942
961
  cancelVariant: v.Secondary
943
962
  }
944
- }, Vr = ({
963
+ }, Mr = ({
945
964
  title: e,
946
- description: n,
947
- descriptionCssClass: t,
948
- open: a = !1,
949
- confirmLabel: s,
950
- cancelLabel: o = yr,
951
- isLoading: l = !1,
965
+ description: t,
966
+ descriptionCssClass: n,
967
+ open: s = !1,
968
+ confirmLabel: a,
969
+ cancelLabel: l = yr,
970
+ isLoading: o = !1,
952
971
  disableConfirmButton: u = !1,
953
972
  cssClass: d,
954
973
  confirmClassName: i,
955
- onClose: m,
974
+ onClose: f,
956
975
  onConfirm: x,
957
976
  onCancel: h,
958
977
  children: p,
959
978
  dividers: y = !1,
960
- variant: g = z.Info,
979
+ variant: g = B.Info,
961
980
  size: N = R.Sm
962
981
  }) => {
963
- const w = l ? null : /* @__PURE__ */ f("div", { className: gr, children: [
982
+ const w = o ? null : /* @__PURE__ */ m("div", { className: gr, children: [
964
983
  /* @__PURE__ */ r(
965
984
  P,
966
985
  {
967
986
  variant: v.Secondary,
968
- title: o,
969
- onClick: () => h ? h() : m?.()
987
+ title: l,
988
+ onClick: () => h ? h() : f?.()
970
989
  }
971
990
  ),
972
991
  /* @__PURE__ */ r(
@@ -974,26 +993,26 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
974
993
  {
975
994
  variant: H[g].confirmVariant,
976
995
  cssClass: i,
977
- title: s,
996
+ title: a,
978
997
  disable: u,
979
998
  onClick: () => x()
980
999
  }
981
1000
  )
982
- ] }), b = S(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : p ?? (n ? /* @__PURE__ */ r(
1001
+ ] }), b = S(() => o ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : p ?? (t ? /* @__PURE__ */ r(
983
1002
  "div",
984
1003
  {
985
- className: c(br, t),
986
- children: n
1004
+ className: c(br, n),
1005
+ children: t
987
1006
  }
988
- ) : null), [p, n, l, t]);
1007
+ ) : null), [p, t, o, n]);
989
1008
  return /* @__PURE__ */ r(
990
1009
  hr,
991
1010
  {
992
- open: a,
1011
+ open: s,
993
1012
  title: e,
994
1013
  cssClass: c(H[g].container, d),
995
1014
  dividers: y,
996
- onClose: () => m?.(),
1015
+ onClose: () => f?.(),
997
1016
  footer: w,
998
1017
  size: N,
999
1018
  children: b()
@@ -1007,74 +1026,74 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
1007
1026
  onClick: e
1008
1027
  }
1009
1028
  ), vr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...F, className: "text-primary", onClick: e }), Nr = ({ ...e }) => {
1010
- const [n, t] = T(!1), a = S((s) => {
1011
- t(s);
1029
+ const [t, n] = E(!1), s = S((a) => {
1030
+ n(a);
1012
1031
  }, []);
1013
1032
  return /* @__PURE__ */ r(
1014
- O,
1033
+ z,
1015
1034
  {
1016
- type: n ? "text" : "password",
1035
+ type: t ? "text" : "password",
1017
1036
  ...e,
1018
- iconAfter: n ? /* @__PURE__ */ r(Cr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(vr, { onClick: () => a(!0) })
1037
+ iconAfter: t ? /* @__PURE__ */ r(Cr, { onClick: () => s(!1) }) : /* @__PURE__ */ r(vr, { onClick: () => s(!0) })
1019
1038
  }
1020
1039
  );
1021
- }, Mr = ({
1040
+ }, Wr = ({
1022
1041
  fieldTitle: e,
1023
- optional: n,
1024
- elementCssClass: t,
1025
- elementId: a,
1026
- errorText: s,
1027
- ...o
1028
- }) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
1042
+ optional: t,
1043
+ elementCssClass: n,
1044
+ elementId: s,
1045
+ errorText: a,
1046
+ ...l
1047
+ }) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
1029
1048
  /* @__PURE__ */ r(
1030
- j,
1049
+ V,
1031
1050
  {
1032
1051
  fieldTitle: e,
1033
- optional: n,
1034
- htmlFor: a
1052
+ optional: t,
1053
+ htmlFor: s
1035
1054
  }
1036
1055
  ),
1037
1056
  /* @__PURE__ */ r(
1038
1057
  Nr,
1039
1058
  {
1040
- cssClass: t,
1041
- elementId: a,
1042
- invalid: !!s,
1043
- ...o
1059
+ cssClass: n,
1060
+ elementId: s,
1061
+ invalid: !!a,
1062
+ ...l
1044
1063
  }
1045
1064
  ),
1046
- /* @__PURE__ */ r(_, { errorText: s })
1065
+ /* @__PURE__ */ r(_, { errorText: a })
1047
1066
  ] });
1048
- var B = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(B || {});
1067
+ var j = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(j || {});
1049
1068
  const wr = {
1050
- [B.Small]: {
1069
+ [j.Small]: {
1051
1070
  textClass: "text-xs px-1",
1052
1071
  containerClass: "px-[6px] py-1 h-[22px]",
1053
1072
  iconSize: 10,
1054
1073
  iconStroke: 1
1055
1074
  },
1056
- [B.Base]: {
1075
+ [j.Base]: {
1057
1076
  textClass: "text-sm px-2",
1058
1077
  containerClass: "px-3 py-2 h-[38px]",
1059
1078
  iconSize: 18,
1060
1079
  iconStroke: 1.5
1061
1080
  }
1062
- }, Wr = ({
1081
+ }, _r = ({
1063
1082
  elementId: e,
1064
- value: n,
1065
- placeholder: t,
1066
- disabled: a,
1067
- readonly: s,
1068
- invalid: o,
1069
- cssClass: l,
1083
+ value: t,
1084
+ placeholder: n,
1085
+ disabled: s,
1086
+ readonly: a,
1087
+ invalid: l,
1088
+ cssClass: o,
1070
1089
  containerCssClass: u,
1071
1090
  onChange: d,
1072
- size: i = B.Base
1091
+ size: i = j.Base
1073
1092
  }) => {
1074
- const [m, x] = T(n || "");
1093
+ const [f, x] = E(t || "");
1075
1094
  ke(() => {
1076
- x(n || "");
1077
- }, [n]);
1095
+ x(t || "");
1096
+ }, [t]);
1078
1097
  const h = S(
1079
1098
  (g) => {
1080
1099
  x(g), d?.(g);
@@ -1083,14 +1102,14 @@ const wr = {
1083
1102
  ), p = wr[i], y = S(() => {
1084
1103
  h("");
1085
1104
  }, [h]);
1086
- return /* @__PURE__ */ f(
1105
+ return /* @__PURE__ */ m(
1087
1106
  "div",
1088
1107
  {
1089
1108
  className: c(
1090
1109
  "dial-input flex flex-row items-center justify-between",
1091
- o && "dial-input-error",
1092
- a && "dial-input-disable",
1093
- s && "dial-input-readonly",
1110
+ l && "dial-input-error",
1111
+ s && "dial-input-disable",
1112
+ a && "dial-input-readonly",
1094
1113
  p.containerClass,
1095
1114
  u
1096
1115
  ),
@@ -1098,7 +1117,7 @@ const wr = {
1098
1117
  /* @__PURE__ */ r(
1099
1118
  D,
1100
1119
  {
1101
- className: c(a ? "text-secondary" : "text-primary"),
1120
+ className: c(s ? "text-secondary" : "text-primary"),
1102
1121
  icon: /* @__PURE__ */ r(
1103
1122
  ye,
1104
1123
  {
@@ -1114,19 +1133,19 @@ const wr = {
1114
1133
  id: e,
1115
1134
  type: "text",
1116
1135
  autoComplete: "off",
1117
- placeholder: t,
1118
- value: m ?? "",
1119
- disabled: a,
1120
- readOnly: s,
1136
+ placeholder: n,
1137
+ value: f ?? "",
1138
+ disabled: s,
1139
+ readOnly: a,
1121
1140
  className: c(
1122
1141
  "border-0 bg-transparent w-full",
1123
- l,
1142
+ o,
1124
1143
  p.textClass
1125
1144
  ),
1126
- onChange: (g) => !s && h(g.currentTarget.value)
1145
+ onChange: (g) => !a && h(g.currentTarget.value)
1127
1146
  }
1128
1147
  ),
1129
- m && !s && !a && /* @__PURE__ */ r(
1148
+ f && !a && !s && /* @__PURE__ */ r(
1130
1149
  D,
1131
1150
  {
1132
1151
  className: "text-primary cursor-pointer",
@@ -1149,34 +1168,35 @@ const wr = {
1149
1168
  export {
1150
1169
  k as AlertVariant,
1151
1170
  v as ButtonVariant,
1152
- z as ConfirmationPopupVariant,
1171
+ B as ConfirmationPopupVariant,
1153
1172
  Fr as DialAlert,
1154
1173
  P as DialButton,
1155
- Er as DialCheckbox,
1174
+ Tr as DialCheckbox,
1156
1175
  ar as DialCloseButton,
1157
1176
  Ar as DialCollapsibleSidebar,
1158
- Vr as DialConfirmationPopup,
1177
+ Mr as DialConfirmationPopup,
1159
1178
  _ as DialErrorText,
1160
- j as DialFieldLabel,
1179
+ V as DialFieldLabel,
1161
1180
  D as DialIcon,
1162
- O as DialInput,
1181
+ z as DialInput,
1182
+ Or as DialLabelledText,
1163
1183
  He as DialLoader,
1164
1184
  Lr as DialNoDataContent,
1165
- Or as DialNumberInputField,
1185
+ zr as DialNumberInputField,
1166
1186
  Nr as DialPasswordInput,
1167
- Mr as DialPasswordInputField,
1187
+ Wr as DialPasswordInputField,
1168
1188
  hr as DialPopup,
1169
1189
  Je as DialRadioButton,
1170
1190
  Pr as DialRadioGroup,
1171
- Wr as DialSearch,
1172
- Tr as DialSteps,
1173
- jr as DialSwitch,
1174
- Br as DialTextAreaField,
1175
- zr as DialTextInputField,
1176
- or as DialTextarea,
1177
- V as DialTooltip,
1191
+ _r as DialSearch,
1192
+ Er as DialSteps,
1193
+ Vr as DialSwitch,
1194
+ jr as DialTextAreaField,
1195
+ Br as DialTextInputField,
1196
+ lr as DialTextarea,
1197
+ L as DialTooltip,
1178
1198
  R as PopupSize,
1179
1199
  M as RadioGroupOrientation,
1180
- B as SearchSize,
1200
+ j as SearchSize,
1181
1201
  C as StepStatus
1182
1202
  };