@mailstep/design-system 0.7.35-beta.0 → 0.7.35

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 (7) hide show
  1. package/package.json +1 -1
  2. package/ui/Forms/Input/Input.js +4 -4
  3. package/ui/Forms/Input/styles.d.ts +2 -0
  4. package/ui/Forms/Input/styles.js +4 -1
  5. package/ui/Forms/Input/types.d.ts +2 -1
  6. package/ui/index.es.js +121 -118
  7. package/ui/index.umd.js +90 -89
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.35-beta.0",
3
+ "version": "0.7.35",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Forms/Input/Input.js CHANGED
@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { useCallback, useEffect, useRef } from 'react';
25
- import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip, } from './styles';
26
- import { FieldLabel } from '../../Elements/Label';
27
- import { SpaceAroundWrap } from '../../Elements/SpaceAround';
28
25
  import { ErrorMessage } from '../../Elements/ErrorMessage';
29
26
  import { Icon } from '../../Elements/Icon';
27
+ import { FieldLabel } from '../../Elements/Label';
28
+ import { SpaceAroundWrap } from '../../Elements/SpaceAround';
30
29
  import { Spinner } from '../../Elements/Spinner';
30
+ import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
31
31
  var allowedInputTypes = ['text', 'number', 'password'];
32
32
  export var Input = function (_a) {
33
33
  var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
@@ -60,5 +60,5 @@ export var Input = function (_a) {
60
60
  onEnter === null || onEnter === void 0 ? void 0 : onEnter();
61
61
  }
62
62
  }, [onEnter]);
63
- return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
63
+ return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, "$asTextArea": asTextArea, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
64
64
  };
package/ui/Forms/Input/styles.d.ts CHANGED
@@ -10,6 +10,7 @@ type StyledInputProps = {
10
10
  variant?: string;
11
11
  value?: string | number;
12
12
  $asTextArea?: boolean;
13
+ rows?: number;
13
14
  };
14
15
  type InputIconProps = {
15
16
  right?: boolean;
@@ -35,6 +36,7 @@ export declare const InputRow: import("styled-components").StyledComponent<"div"
35
36
  $icon?: string | undefined;
36
37
  $isInvalid?: boolean | undefined;
37
38
  variant?: string | undefined;
39
+ $asTextArea?: boolean | undefined;
38
40
  }, never>;
39
41
  export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
40
42
  export {};
package/ui/Forms/Input/styles.js CHANGED
@@ -47,7 +47,7 @@ export var Suffix = styled.div(templateObject_10 || (templateObject_10 = __makeT
47
47
  return $isPointer
48
48
  ? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))) : '';
49
49
  });
50
- export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
50
+ export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: ", ";\n resize: vertical;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: ", ";\n resize: vertical;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
51
51
  var $isInvalid = _a.$isInvalid;
52
52
  return ($isInvalid ? th.color('red1') : th.color('gray'));
53
53
  }, function (_a) {
@@ -59,6 +59,9 @@ export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __mak
59
59
  }, function (_a) {
60
60
  var disabled = _a.disabled;
61
61
  return (disabled ? th.color('lightGray3') : th.color('gray5'));
62
+ }, function (_a) {
63
+ var $asTextArea = _a.$asTextArea;
64
+ return ($asTextArea ? 'auto' : '38px');
62
65
  }, InputIcon, InputIcon, function (_a) {
63
66
  var $icon = _a.$icon;
64
67
  return ($icon ? '3em' : '1em');
package/ui/Forms/Input/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
1
+ import type { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
2
2
  export type SpaceAround = boolean | SpaceAroundProps;
3
3
  export type SpaceAroundProps = {
4
4
  marginTop?: number;
@@ -45,6 +45,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
45
45
  forceFocus?: boolean;
46
46
  autoFocus?: boolean;
47
47
  asTextArea?: boolean;
48
+ rows?: number;
48
49
  };
49
50
  export type ModalData = {
50
51
  [key: string]: any;
package/ui/index.es.js CHANGED
@@ -14188,7 +14188,107 @@ const Bue = Z.div`
14188
14188
  id: (n = (r = e.title) == null ? void 0 : r.props) == null ? void 0 : n.id,
14189
14189
  message: (i = e.title) == null ? void 0 : i.props.message
14190
14190
  }) : e == null ? void 0 : e.title;
14191
- }, $ue = (e) => {
14191
+ }, $ue = st`
14192
+ span {
14193
+ display: none;
14194
+ position: absolute;
14195
+ width: 120px;
14196
+ background-color: red1;
14197
+ color: white;
14198
+ text-align: center;
14199
+ border-radius: md;
14200
+ padding: 1;
14201
+ z-index: 1;
14202
+ transition: opacity 0.3s;
14203
+ top: 0;
14204
+ margin-top: -4px;
14205
+ left: 100%;
14206
+ margin-left: 2;
14207
+ box-shadow: tooltipBoxShadow;
14208
+
14209
+ :after {
14210
+ content: '';
14211
+ position: absolute;
14212
+ top: 3px;
14213
+ right: 100%;
14214
+ border: mediumThick;
14215
+ border-color: transparent ${j.color("red1")} transparent transparent;
14216
+ }
14217
+ }
14218
+
14219
+ :hover {
14220
+ cursor: pointer;
14221
+ span {
14222
+ display: block;
14223
+ }
14224
+ }
14225
+ `, ede = Z.div`
14226
+ color: red1;
14227
+ font-size: 1;
14228
+ display: flex;
14229
+ align-items: flex-start;
14230
+ `, tde = Z.div`
14231
+ .inline {
14232
+ margin-top: 1;
14233
+ }
14234
+ .tooltip {
14235
+ ${$ue}
14236
+ }
14237
+ `, b4 = ({
14238
+ children: e,
14239
+ appearance: t
14240
+ }) => /* @__PURE__ */ g.jsx(tde, { children: /* @__PURE__ */ g.jsx(ede, { className: t, children: /* @__PURE__ */ g.jsx("span", { children: e }) }) }), qD = st`
14241
+ color: ${j.color("typoPrimary")};
14242
+ font-family: ${j("fonts.primary")};
14243
+ font-weight: bold;
14244
+ display: block;
14245
+ margin-bottom: 6px;
14246
+ `, HMe = Z.label`
14247
+ margin-left: 8px;
14248
+ ${qD};
14249
+ ${({
14250
+ fontSize: e
14251
+ }) => e ? st`
14252
+ font-size: ${e};
14253
+ ` : null}
14254
+ ${bs};
14255
+ `, Yf = Z.label`
14256
+ ${qD};
14257
+ font-size: 12px;
14258
+ `, rde = Z(Ye.div)`
14259
+ width: ${({
14260
+ $marginLeft: e,
14261
+ $marginRight: t
14262
+ }) => `calc(100% - ${e || "0px"} - ${t || "0px"})`};
14263
+ position: relative;
14264
+ box-sizing: border-box;
14265
+ ${({
14266
+ $spaceAround: e
14267
+ }) => e ? st`
14268
+ margin-top: ${e === !0 || typeof (e == null ? void 0 : e.marginTop) > "u" ? 1 : e.marginTop};
14269
+ margin-right: ${e === !0 || typeof (e == null ? void 0 : e.marginRight) > "u" ? 1 : e.marginRight};
14270
+ margin-bottom: ${e === !0 || typeof (e == null ? void 0 : e.marginBottom) > "u" ? 2 : e.marginBottom};
14271
+ margin-left: ${e === !0 || typeof (e == null ? void 0 : e.marginLeft) > "u" ? 0 : e.marginLeft};
14272
+ ` : ""};
14273
+ ${({
14274
+ $spaceBetween: e
14275
+ }) => e ? st`
14276
+ display: flex;
14277
+ justify-content: space-between;
14278
+ ` : ""};
14279
+ `, y0 = ({
14280
+ children: e,
14281
+ spaceBetween: t = !1,
14282
+ spaceAround: r = !0,
14283
+ ...n
14284
+ }) => {
14285
+ const i = yt(), o = typeof r != "boolean" && (r != null && r.marginLeft) ? j.space(r == null ? void 0 : r.marginLeft)({
14286
+ theme: i
14287
+ }) : 0, l = typeof r != "boolean" && (r != null && r.marginRight) ? j.space(r == null ? void 0 : r.marginRight)({
14288
+ theme: i
14289
+ }) : 0;
14290
+ return /* @__PURE__ */ g.jsx(rde, { $spaceAround: r, $spaceBetween: t, $marginRight: l, $marginLeft: o, ...n, children: e });
14291
+ }, nde = (e) => {
14192
14292
  const {
14193
14293
  $icon: t,
14194
14294
  $iconPlacement: r,
@@ -14218,11 +14318,11 @@ const Bue = Z.div`
14218
14318
  disabled: r
14219
14319
  }) => e ? j.color("red1") : r || !t ? j.color("lightGray6") : j.color("blue2")};
14220
14320
  }
14221
- `, ede = Z(Nc)`
14321
+ `, ide = Z(Nc)`
14222
14322
  svg {
14223
14323
  color: gray1;
14224
14324
  }
14225
- `, tde = Z.div`
14325
+ `, ade = Z.div`
14226
14326
  position: absolute;
14227
14327
  top: 0.2em;
14228
14328
  right: 0.5em;
@@ -14234,7 +14334,7 @@ const Bue = Z.div`
14234
14334
  color: blue2;
14235
14335
  }
14236
14336
  }
14237
- `, rde = Z.input.attrs((e) => ({
14337
+ `, ode = Z.input.attrs((e) => ({
14238
14338
  as: e.$asTextArea ? "textarea" : "input"
14239
14339
  }))`
14240
14340
  ${bs};
@@ -14246,7 +14346,7 @@ const Bue = Z.div`
14246
14346
  background-clip: padding-box;
14247
14347
  padding-top: 0.5em;
14248
14348
  padding-bottom: 0.5em;
14249
- padding-right: ${(e) => $ue(e)}em;
14349
+ padding-right: ${(e) => nde(e)}em;
14250
14350
  display: block;
14251
14351
  width: ${(e) => e.type !== "checkbox" ? "100%" : "auto"};
14252
14352
  font-family: ${j("fonts.primary")};
@@ -14310,9 +14410,9 @@ const Bue = Z.div`
14310
14410
  ::-webkit-inner-spin-button {
14311
14411
  -webkit-appearance: none;
14312
14412
  }
14313
- `, nde = Z.div`
14413
+ `, sde = Z.div`
14314
14414
  position: relative;
14315
- `, ide = Z.div`
14415
+ `, lde = Z.div`
14316
14416
  position: absolute;
14317
14417
  right: 0;
14318
14418
  top: 0;
@@ -14342,7 +14442,7 @@ const Bue = Z.div`
14342
14442
  textarea:focus ~ & {
14343
14443
  border-color: blue2;
14344
14444
  }
14345
- `, ade = Z.div`
14445
+ `, cde = Z.div`
14346
14446
  position: relative;
14347
14447
  color: ${({
14348
14448
  $isInvalid: e
@@ -14366,7 +14466,10 @@ const Bue = Z.div`
14366
14466
  }
14367
14467
  .primary {
14368
14468
  line-height: 0;
14369
- height: 38px;
14469
+ height: ${({
14470
+ $asTextArea: e
14471
+ }) => e ? "auto" : "38px"};
14472
+ resize: vertical;
14370
14473
  border-radius: lg;
14371
14474
  ~ ${Nc} {
14372
14475
  top: 10px;
@@ -14388,7 +14491,7 @@ const Bue = Z.div`
14388
14491
  padding-right: 1.4em;
14389
14492
  padding-left: 1em;
14390
14493
  }
14391
- `, ode = Z.div`
14494
+ `, ude = Z.div`
14392
14495
  span {
14393
14496
  display: none;
14394
14497
  position: absolute;
@@ -14424,107 +14527,7 @@ const Bue = Z.div`
14424
14527
  display: block;
14425
14528
  }
14426
14529
  }
14427
- `, qD = st`
14428
- color: ${j.color("typoPrimary")};
14429
- font-family: ${j("fonts.primary")};
14430
- font-weight: bold;
14431
- display: block;
14432
- margin-bottom: 6px;
14433
- `, HMe = Z.label`
14434
- margin-left: 8px;
14435
- ${qD};
14436
- ${({
14437
- fontSize: e
14438
- }) => e ? st`
14439
- font-size: ${e};
14440
- ` : null}
14441
- ${bs};
14442
- `, Yf = Z.label`
14443
- ${qD};
14444
- font-size: 12px;
14445
- `, sde = Z(Ye.div)`
14446
- width: ${({
14447
- $marginLeft: e,
14448
- $marginRight: t
14449
- }) => `calc(100% - ${e || "0px"} - ${t || "0px"})`};
14450
- position: relative;
14451
- box-sizing: border-box;
14452
- ${({
14453
- $spaceAround: e
14454
- }) => e ? st`
14455
- margin-top: ${e === !0 || typeof (e == null ? void 0 : e.marginTop) > "u" ? 1 : e.marginTop};
14456
- margin-right: ${e === !0 || typeof (e == null ? void 0 : e.marginRight) > "u" ? 1 : e.marginRight};
14457
- margin-bottom: ${e === !0 || typeof (e == null ? void 0 : e.marginBottom) > "u" ? 2 : e.marginBottom};
14458
- margin-left: ${e === !0 || typeof (e == null ? void 0 : e.marginLeft) > "u" ? 0 : e.marginLeft};
14459
- ` : ""};
14460
- ${({
14461
- $spaceBetween: e
14462
- }) => e ? st`
14463
- display: flex;
14464
- justify-content: space-between;
14465
- ` : ""};
14466
- `, y0 = ({
14467
- children: e,
14468
- spaceBetween: t = !1,
14469
- spaceAround: r = !0,
14470
- ...n
14471
- }) => {
14472
- const i = yt(), o = typeof r != "boolean" && (r != null && r.marginLeft) ? j.space(r == null ? void 0 : r.marginLeft)({
14473
- theme: i
14474
- }) : 0, l = typeof r != "boolean" && (r != null && r.marginRight) ? j.space(r == null ? void 0 : r.marginRight)({
14475
- theme: i
14476
- }) : 0;
14477
- return /* @__PURE__ */ g.jsx(sde, { $spaceAround: r, $spaceBetween: t, $marginRight: l, $marginLeft: o, ...n, children: e });
14478
- }, lde = st`
14479
- span {
14480
- display: none;
14481
- position: absolute;
14482
- width: 120px;
14483
- background-color: red1;
14484
- color: white;
14485
- text-align: center;
14486
- border-radius: md;
14487
- padding: 1;
14488
- z-index: 1;
14489
- transition: opacity 0.3s;
14490
- top: 0;
14491
- margin-top: -4px;
14492
- left: 100%;
14493
- margin-left: 2;
14494
- box-shadow: tooltipBoxShadow;
14495
-
14496
- :after {
14497
- content: '';
14498
- position: absolute;
14499
- top: 3px;
14500
- right: 100%;
14501
- border: mediumThick;
14502
- border-color: transparent ${j.color("red1")} transparent transparent;
14503
- }
14504
- }
14505
-
14506
- :hover {
14507
- cursor: pointer;
14508
- span {
14509
- display: block;
14510
- }
14511
- }
14512
- `, cde = Z.div`
14513
- color: red1;
14514
- font-size: 1;
14515
- display: flex;
14516
- align-items: flex-start;
14517
- `, ude = Z.div`
14518
- .inline {
14519
- margin-top: 1;
14520
- }
14521
- .tooltip {
14522
- ${lde}
14523
- }
14524
- `, b4 = ({
14525
- children: e,
14526
- appearance: t
14527
- }) => /* @__PURE__ */ g.jsx(ude, { children: /* @__PURE__ */ g.jsx(cde, { className: t, children: /* @__PURE__ */ g.jsx("span", { children: e }) }) }), dde = ["text", "number", "password"], ps = ({
14530
+ `, dde = ["text", "number", "password"], ps = ({
14528
14531
  appearance: e = "primary",
14529
14532
  type: t,
14530
14533
  name: r,
@@ -14572,20 +14575,20 @@ const Bue = Z.div`
14572
14575
  $.key === "Enter" && (U == null || U());
14573
14576
  }, [U]);
14574
14577
  return /* @__PURE__ */ g.jsxs(y0, { spaceAround: p, className: y, children: [
14575
- /* @__PURE__ */ g.jsxs(nde, { children: [
14578
+ /* @__PURE__ */ g.jsxs(sde, { children: [
14576
14579
  n && /* @__PURE__ */ g.jsx(Yf, { htmlFor: r, children: n }),
14577
- /* @__PURE__ */ g.jsxs(ade, { hasValue: !!i, $isInvalid: ee, disabled: !!c, $icon: o, variant: l, children: [
14578
- /* @__PURE__ */ g.jsx(rde, { autoFocus: H, className: `${e} ${de}`, type: t, name: r, "data-cy": `${r}Inp`, value: i, $isInvalid: ee, $isClearable: ce, $hasSuffix: ve, disabled: c || m, ref: oe, autoComplete: v, onKeyDown: ae, big: M, onBlur: he, $asTextArea: te, variant: l, ...X }),
14579
- o && /* @__PURE__ */ g.jsx(Nc, { right: B ? !1 : I === "right", hasValue: !!i, $isInvalid: ee, disabled: c, onClick: P, children: /* @__PURE__ */ g.jsxs(ode, { children: [
14580
+ /* @__PURE__ */ g.jsxs(cde, { hasValue: !!i, $isInvalid: ee, disabled: !!c, $icon: o, variant: l, $asTextArea: te, children: [
14581
+ /* @__PURE__ */ g.jsx(ode, { autoFocus: H, className: `${e} ${de}`, type: t, name: r, "data-cy": `${r}Inp`, value: i, $isInvalid: ee, $isClearable: ce, $hasSuffix: ve, disabled: c || m, ref: oe, autoComplete: v, onKeyDown: ae, big: M, onBlur: he, $asTextArea: te, variant: l, ...X }),
14582
+ o && /* @__PURE__ */ g.jsx(Nc, { right: B ? !1 : I === "right", hasValue: !!i, $isInvalid: ee, disabled: c, onClick: P, children: /* @__PURE__ */ g.jsxs(ude, { children: [
14580
14583
  /* @__PURE__ */ g.jsx(wt, { icon: o }),
14581
14584
  O && /* @__PURE__ */ g.jsx("span", { children: O })
14582
14585
  ] }) }),
14583
- B && /* @__PURE__ */ g.jsxs(tde, { children: [
14586
+ B && /* @__PURE__ */ g.jsxs(ade, { children: [
14584
14587
  /* @__PURE__ */ g.jsx(nI, { onClick: Y, children: /* @__PURE__ */ g.jsx(wt, { icon: "goUp", fill: "gray1" }) }),
14585
14588
  /* @__PURE__ */ g.jsx(nI, { onClick: Q, children: /* @__PURE__ */ g.jsx(wt, { icon: "goDown", fill: "gray1" }) })
14586
14589
  ] }),
14587
- ce && /* @__PURE__ */ g.jsx(ede, { right: !0, onClick: F, children: /* @__PURE__ */ g.jsx(wt, { icon: "deleteX", size: "16px", fill: "gray1" }) }),
14588
- C && !m && /* @__PURE__ */ g.jsx(ide, { onClick: x, $isPointer: !!x, $isInvalid: ee, children: C }),
14590
+ ce && /* @__PURE__ */ g.jsx(ide, { right: !0, onClick: F, children: /* @__PURE__ */ g.jsx(wt, { icon: "deleteX", size: "16px", fill: "gray1" }) }),
14591
+ C && !m && /* @__PURE__ */ g.jsx(lde, { onClick: x, $isPointer: !!x, $isInvalid: ee, children: C }),
14589
14592
  m && /* @__PURE__ */ g.jsx(Nc, { right: !0, children: /* @__PURE__ */ g.jsx(t4, { variant: "sm" }) })
14590
14593
  ] })
14591
14594
  ] }),
package/ui/index.umd.js CHANGED
@@ -1386,7 +1386,83 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1386
1386
  }
1387
1387
  }
1388
1388
  }
1389
- `,Lh={greenWhite:{color:"green60",textColor:"white"},blueBlue:{color:"blue20",textColor:"blue80"},magentaWhite:{color:"magenta60",textColor:"white"},magentaMagenta:{color:"magenta20",textColor:"magenta80"},tealTeal:{color:"teal20",textColor:"teal90"},orangeOrange:{color:"orange20",textColor:"orange80"},grayGray:{color:"neutral20",textColor:"typoPrimary"},redWhite:{color:"red1",textColor:"white"},redRed:{color:"red30",textColor:"red1"},purplePurple:{color:"purple20",textColor:"purple80"}},Kde=()=>{const[e,t]=I.useState(!1);return I.useEffect(()=>{const r=()=>{window.innerWidth<1024?t==null||t(!0):t(!1)};return window.addEventListener("resize",r),r(),()=>window.removeEventListener("resize",r)},[]),{isMobile:e}},GT=e=>{var t,r,n,i;return e&&HJ(e==null?void 0:e.title)?"props"in e.title&&((t=e.title)==null?void 0:t.props)&&He._({id:(n=(r=e.title)==null?void 0:r.props)==null?void 0:n.id,message:(i=e.title)==null?void 0:i.props.message}):e==null?void 0:e.title},qde=e=>{const{$icon:t,$iconPlacement:r,$isClearable:n,$hasSuffix:i}=e;let o=2;return t&&r==="right"&&(o+=1),n&&(o+=1),i&&(o+=2),String(o)},Hl=Y.div`
1389
+ `,Lh={greenWhite:{color:"green60",textColor:"white"},blueBlue:{color:"blue20",textColor:"blue80"},magentaWhite:{color:"magenta60",textColor:"white"},magentaMagenta:{color:"magenta20",textColor:"magenta80"},tealTeal:{color:"teal20",textColor:"teal90"},orangeOrange:{color:"orange20",textColor:"orange80"},grayGray:{color:"neutral20",textColor:"typoPrimary"},redWhite:{color:"red1",textColor:"white"},redRed:{color:"red30",textColor:"red1"},purplePurple:{color:"purple20",textColor:"purple80"}},Kde=()=>{const[e,t]=I.useState(!1);return I.useEffect(()=>{const r=()=>{window.innerWidth<1024?t==null||t(!0):t(!1)};return window.addEventListener("resize",r),r(),()=>window.removeEventListener("resize",r)},[]),{isMobile:e}},GT=e=>{var t,r,n,i;return e&&HJ(e==null?void 0:e.title)?"props"in e.title&&((t=e.title)==null?void 0:t.props)&&He._({id:(n=(r=e.title)==null?void 0:r.props)==null?void 0:n.id,message:(i=e.title)==null?void 0:i.props.message}):e==null?void 0:e.title},qde=rt`
1390
+ span {
1391
+ display: none;
1392
+ position: absolute;
1393
+ width: 120px;
1394
+ background-color: red1;
1395
+ color: white;
1396
+ text-align: center;
1397
+ border-radius: md;
1398
+ padding: 1;
1399
+ z-index: 1;
1400
+ transition: opacity 0.3s;
1401
+ top: 0;
1402
+ margin-top: -4px;
1403
+ left: 100%;
1404
+ margin-left: 2;
1405
+ box-shadow: tooltipBoxShadow;
1406
+
1407
+ :after {
1408
+ content: '';
1409
+ position: absolute;
1410
+ top: 3px;
1411
+ right: 100%;
1412
+ border: mediumThick;
1413
+ border-color: transparent ${W.color("red1")} transparent transparent;
1414
+ }
1415
+ }
1416
+
1417
+ :hover {
1418
+ cursor: pointer;
1419
+ span {
1420
+ display: block;
1421
+ }
1422
+ }
1423
+ `,$de=Y.div`
1424
+ color: red1;
1425
+ font-size: 1;
1426
+ display: flex;
1427
+ align-items: flex-start;
1428
+ `,e0e=Y.div`
1429
+ .inline {
1430
+ margin-top: 1;
1431
+ }
1432
+ .tooltip {
1433
+ ${qde}
1434
+ }
1435
+ `,a1=({children:e,appearance:t})=>g.jsx(e0e,{children:g.jsx($de,{className:t,children:g.jsx("span",{children:e})})}),_T=rt`
1436
+ color: ${W.color("typoPrimary")};
1437
+ font-family: ${W("fonts.primary")};
1438
+ font-weight: bold;
1439
+ display: block;
1440
+ margin-bottom: 6px;
1441
+ `,t0e=Y.label`
1442
+ margin-left: 8px;
1443
+ ${_T};
1444
+ ${({fontSize:e})=>e?rt`
1445
+ font-size: ${e};
1446
+ `:null}
1447
+ ${Fo};
1448
+ `,Au=Y.label`
1449
+ ${_T};
1450
+ font-size: 12px;
1451
+ `,r0e=Y(Ue.div)`
1452
+ width: ${({$marginLeft:e,$marginRight:t})=>`calc(100% - ${e||"0px"} - ${t||"0px"})`};
1453
+ position: relative;
1454
+ box-sizing: border-box;
1455
+ ${({$spaceAround:e})=>e?rt`
1456
+ margin-top: ${e===!0||typeof(e==null?void 0:e.marginTop)>"u"?1:e.marginTop};
1457
+ margin-right: ${e===!0||typeof(e==null?void 0:e.marginRight)>"u"?1:e.marginRight};
1458
+ margin-bottom: ${e===!0||typeof(e==null?void 0:e.marginBottom)>"u"?2:e.marginBottom};
1459
+ margin-left: ${e===!0||typeof(e==null?void 0:e.marginLeft)>"u"?0:e.marginLeft};
1460
+ `:""};
1461
+ ${({$spaceBetween:e})=>e?rt`
1462
+ display: flex;
1463
+ justify-content: space-between;
1464
+ `:""};
1465
+ `,Ms=({children:e,spaceBetween:t=!1,spaceAround:r=!0,...n})=>{const i=ht(),o=typeof r!="boolean"&&(r!=null&&r.marginLeft)?W.space(r==null?void 0:r.marginLeft)({theme:i}):0,l=typeof r!="boolean"&&(r!=null&&r.marginRight)?W.space(r==null?void 0:r.marginRight)({theme:i}):0;return g.jsx(r0e,{$spaceAround:r,$spaceBetween:t,$marginRight:l,$marginLeft:o,...n,children:e})},n0e=e=>{const{$icon:t,$iconPlacement:r,$isClearable:n,$hasSuffix:i}=e;let o=2;return t&&r==="right"&&(o+=1),n&&(o+=1),i&&(o+=2),String(o)},Hl=Y.div`
1390
1466
  position: absolute;
1391
1467
 
1392
1468
  // top: 52%; // TODO fix
@@ -1399,15 +1475,15 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1399
1475
  cursor: pointer;
1400
1476
  color: ${({$isInvalid:e,hasValue:t,disabled:r})=>e?W.color("red1"):r||!t?W.color("lightGray6"):W.color("blue2")};
1401
1477
  }
1402
- `,$de=Y(Hl)`
1478
+ `,i0e=Y(Hl)`
1403
1479
  svg {
1404
1480
  color: gray1;
1405
1481
  }
1406
- `,e0e=Y.div`
1482
+ `,a0e=Y.div`
1407
1483
  position: absolute;
1408
1484
  top: 0.2em;
1409
1485
  right: 0.5em;
1410
- `,_T=Y.div`
1486
+ `,UT=Y.div`
1411
1487
  display: flex;
1412
1488
  svg {
1413
1489
  :hover {
@@ -1415,7 +1491,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1415
1491
  color: blue2;
1416
1492
  }
1417
1493
  }
1418
- `,t0e=Y.input.attrs(e=>({as:e.$asTextArea?"textarea":"input"}))`
1494
+ `,o0e=Y.input.attrs(e=>({as:e.$asTextArea?"textarea":"input"}))`
1419
1495
  ${Fo};
1420
1496
  border: slim;
1421
1497
  border-color: ${({$isInvalid:e})=>e?W.color("red1"):W.color("lightGray6")};
@@ -1423,7 +1499,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1423
1499
  background-clip: padding-box;
1424
1500
  padding-top: 0.5em;
1425
1501
  padding-bottom: 0.5em;
1426
- padding-right: ${e=>qde(e)}em;
1502
+ padding-right: ${e=>n0e(e)}em;
1427
1503
  display: block;
1428
1504
  width: ${e=>e.type!=="checkbox"?"100%":"auto"};
1429
1505
  font-family: ${W("fonts.primary")};
@@ -1483,9 +1559,9 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1483
1559
  ::-webkit-inner-spin-button {
1484
1560
  -webkit-appearance: none;
1485
1561
  }
1486
- `,r0e=Y.div`
1562
+ `,s0e=Y.div`
1487
1563
  position: relative;
1488
- `,n0e=Y.div`
1564
+ `,l0e=Y.div`
1489
1565
  position: absolute;
1490
1566
  right: 0;
1491
1567
  top: 0;
@@ -1513,7 +1589,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1513
1589
  textarea:focus ~ & {
1514
1590
  border-color: blue2;
1515
1591
  }
1516
- `,i0e=Y.div`
1592
+ `,c0e=Y.div`
1517
1593
  position: relative;
1518
1594
  color: ${({$isInvalid:e})=>e?W.color("red1"):W.color("gray")};
1519
1595
  & > * {
@@ -1528,7 +1604,8 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1528
1604
  }
1529
1605
  .primary {
1530
1606
  line-height: 0;
1531
- height: 38px;
1607
+ height: ${({$asTextArea:e})=>e?"auto":"38px"};
1608
+ resize: vertical;
1532
1609
  border-radius: lg;
1533
1610
  ~ ${Hl} {
1534
1611
  top: 10px;
@@ -1548,7 +1625,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1548
1625
  padding-right: 1.4em;
1549
1626
  padding-left: 1em;
1550
1627
  }
1551
- `,a0e=Y.div`
1628
+ `,u0e=Y.div`
1552
1629
  span {
1553
1630
  display: none;
1554
1631
  position: absolute;
@@ -1584,83 +1661,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L6=e=>typeof e=="function",MT=
1584
1661
  display: block;
1585
1662
  }
1586
1663
  }
1587
- `,UT=rt`
1588
- color: ${W.color("typoPrimary")};
1589
- font-family: ${W("fonts.primary")};
1590
- font-weight: bold;
1591
- display: block;
1592
- margin-bottom: 6px;
1593
- `,o0e=Y.label`
1594
- margin-left: 8px;
1595
- ${UT};
1596
- ${({fontSize:e})=>e?rt`
1597
- font-size: ${e};
1598
- `:null}
1599
- ${Fo};
1600
- `,Au=Y.label`
1601
- ${UT};
1602
- font-size: 12px;
1603
- `,s0e=Y(Ue.div)`
1604
- width: ${({$marginLeft:e,$marginRight:t})=>`calc(100% - ${e||"0px"} - ${t||"0px"})`};
1605
- position: relative;
1606
- box-sizing: border-box;
1607
- ${({$spaceAround:e})=>e?rt`
1608
- margin-top: ${e===!0||typeof(e==null?void 0:e.marginTop)>"u"?1:e.marginTop};
1609
- margin-right: ${e===!0||typeof(e==null?void 0:e.marginRight)>"u"?1:e.marginRight};
1610
- margin-bottom: ${e===!0||typeof(e==null?void 0:e.marginBottom)>"u"?2:e.marginBottom};
1611
- margin-left: ${e===!0||typeof(e==null?void 0:e.marginLeft)>"u"?0:e.marginLeft};
1612
- `:""};
1613
- ${({$spaceBetween:e})=>e?rt`
1614
- display: flex;
1615
- justify-content: space-between;
1616
- `:""};
1617
- `,Ms=({children:e,spaceBetween:t=!1,spaceAround:r=!0,...n})=>{const i=ht(),o=typeof r!="boolean"&&(r!=null&&r.marginLeft)?W.space(r==null?void 0:r.marginLeft)({theme:i}):0,l=typeof r!="boolean"&&(r!=null&&r.marginRight)?W.space(r==null?void 0:r.marginRight)({theme:i}):0;return g.jsx(s0e,{$spaceAround:r,$spaceBetween:t,$marginRight:l,$marginLeft:o,...n,children:e})},l0e=rt`
1618
- span {
1619
- display: none;
1620
- position: absolute;
1621
- width: 120px;
1622
- background-color: red1;
1623
- color: white;
1624
- text-align: center;
1625
- border-radius: md;
1626
- padding: 1;
1627
- z-index: 1;
1628
- transition: opacity 0.3s;
1629
- top: 0;
1630
- margin-top: -4px;
1631
- left: 100%;
1632
- margin-left: 2;
1633
- box-shadow: tooltipBoxShadow;
1634
-
1635
- :after {
1636
- content: '';
1637
- position: absolute;
1638
- top: 3px;
1639
- right: 100%;
1640
- border: mediumThick;
1641
- border-color: transparent ${W.color("red1")} transparent transparent;
1642
- }
1643
- }
1644
-
1645
- :hover {
1646
- cursor: pointer;
1647
- span {
1648
- display: block;
1649
- }
1650
- }
1651
- `,c0e=Y.div`
1652
- color: red1;
1653
- font-size: 1;
1654
- display: flex;
1655
- align-items: flex-start;
1656
- `,u0e=Y.div`
1657
- .inline {
1658
- margin-top: 1;
1659
- }
1660
- .tooltip {
1661
- ${l0e}
1662
- }
1663
- `,a1=({children:e,appearance:t})=>g.jsx(u0e,{children:g.jsx(c0e,{className:t,children:g.jsx("span",{children:e})})}),d0e=["text","number","password"],fo=({appearance:e="primary",type:t,name:r,label:n,value:i,icon:o,variant:l="default",disabled:c,error:u,isInvalid:f=void 0,spaceAround:p=!1,inputRef:h,autoComplete:v,isLoading:m,className:y,suffix:C,suffixOnClick:x,errorAppearance:w,iconPlacement:k="left",iconOnClick:T,iconTooltip:P,big:L,showArrowsController:F=!1,onClear:V,alwaysShowClear:H,setNumber:G,onEnter:Z,forceFocus:R=!1,autoFocus:z=!1,onBlur:j,asTextArea:re=!1,...Q})=>{const te=f!==void 0?f:!!u,de=!!V&&(!!i||H)&&!c&&!m,me=!!C,pe=F?"left":k,J=I.useCallback(()=>G&&G(ee=>ee+1),[G]),K=I.useCallback(()=>{G&&G(ee=>ee>1?ee-1:1)},[G]),ce=I.useRef(),le=h||ce;I.useEffect(()=>{var ee;R&&!c&&!m&&((ee=le==null?void 0:le.current)==null||ee.focus())},[c,R,m]);const Ae=I.useCallback(ee=>{var oe,fe,ge,Te,we;j==null||j(ee),R&&(((fe=(oe=ee.relatedTarget)==null?void 0:oe.tagName)==null?void 0:fe.toLowerCase())!=="input"||!d0e.includes((Te=(ge=ee.relatedTarget)==null?void 0:ge.type)==null?void 0:Te.toLowerCase()))&&((we=ee.target)==null||we.focus())},[R,j]),se=I.useCallback(ee=>{ee.key==="Enter"&&(Z==null||Z())},[Z]);return g.jsxs(Ms,{spaceAround:p,className:y,children:[g.jsxs(r0e,{children:[n&&g.jsx(Au,{htmlFor:r,children:n}),g.jsxs(i0e,{hasValue:!!i,$isInvalid:te,disabled:!!c,$icon:o,variant:l,children:[g.jsx(t0e,{autoFocus:z,className:`${e} ${pe}`,type:t,name:r,"data-cy":`${r}Inp`,value:i,$isInvalid:te,$isClearable:de,$hasSuffix:me,disabled:c||m,ref:le,autoComplete:v,onKeyDown:se,big:L,onBlur:Ae,$asTextArea:re,variant:l,...Q}),o&&g.jsx(Hl,{right:F?!1:k==="right",hasValue:!!i,$isInvalid:te,disabled:c,onClick:T,children:g.jsxs(a0e,{children:[g.jsx(At,{icon:o}),P&&g.jsx("span",{children:P})]})}),F&&g.jsxs(e0e,{children:[g.jsx(_T,{onClick:J,children:g.jsx(At,{icon:"goUp",fill:"gray1"})}),g.jsx(_T,{onClick:K,children:g.jsx(At,{icon:"goDown",fill:"gray1"})})]}),de&&g.jsx($de,{right:!0,onClick:V,children:g.jsx(At,{icon:"deleteX",size:"16px",fill:"gray1"})}),C&&!m&&g.jsx(n0e,{onClick:x,$isPointer:!!x,$isInvalid:te,children:C}),m&&g.jsx(Hl,{right:!0,children:g.jsx(Q0,{variant:"sm"})})]})]}),u&&g.jsx(a1,{appearance:w,children:u})]})},gu=e=>{const t=I.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return I.useLayoutEffect(()=>{t.current=e}),I.useCallback((...r)=>{var n;return(n=t.current)==null?void 0:n.apply(null,r)},[])},f0e=Y.ul`
1664
+ `,d0e=["text","number","password"],fo=({appearance:e="primary",type:t,name:r,label:n,value:i,icon:o,variant:l="default",disabled:c,error:u,isInvalid:f=void 0,spaceAround:p=!1,inputRef:h,autoComplete:v,isLoading:m,className:y,suffix:C,suffixOnClick:x,errorAppearance:w,iconPlacement:k="left",iconOnClick:T,iconTooltip:P,big:L,showArrowsController:F=!1,onClear:V,alwaysShowClear:H,setNumber:G,onEnter:Z,forceFocus:R=!1,autoFocus:z=!1,onBlur:j,asTextArea:re=!1,...Q})=>{const te=f!==void 0?f:!!u,de=!!V&&(!!i||H)&&!c&&!m,me=!!C,pe=F?"left":k,J=I.useCallback(()=>G&&G(ee=>ee+1),[G]),K=I.useCallback(()=>{G&&G(ee=>ee>1?ee-1:1)},[G]),ce=I.useRef(),le=h||ce;I.useEffect(()=>{var ee;R&&!c&&!m&&((ee=le==null?void 0:le.current)==null||ee.focus())},[c,R,m]);const Ae=I.useCallback(ee=>{var oe,fe,ge,Te,we;j==null||j(ee),R&&(((fe=(oe=ee.relatedTarget)==null?void 0:oe.tagName)==null?void 0:fe.toLowerCase())!=="input"||!d0e.includes((Te=(ge=ee.relatedTarget)==null?void 0:ge.type)==null?void 0:Te.toLowerCase()))&&((we=ee.target)==null||we.focus())},[R,j]),se=I.useCallback(ee=>{ee.key==="Enter"&&(Z==null||Z())},[Z]);return g.jsxs(Ms,{spaceAround:p,className:y,children:[g.jsxs(s0e,{children:[n&&g.jsx(Au,{htmlFor:r,children:n}),g.jsxs(c0e,{hasValue:!!i,$isInvalid:te,disabled:!!c,$icon:o,variant:l,$asTextArea:re,children:[g.jsx(o0e,{autoFocus:z,className:`${e} ${pe}`,type:t,name:r,"data-cy":`${r}Inp`,value:i,$isInvalid:te,$isClearable:de,$hasSuffix:me,disabled:c||m,ref:le,autoComplete:v,onKeyDown:se,big:L,onBlur:Ae,$asTextArea:re,variant:l,...Q}),o&&g.jsx(Hl,{right:F?!1:k==="right",hasValue:!!i,$isInvalid:te,disabled:c,onClick:T,children:g.jsxs(u0e,{children:[g.jsx(At,{icon:o}),P&&g.jsx("span",{children:P})]})}),F&&g.jsxs(a0e,{children:[g.jsx(UT,{onClick:J,children:g.jsx(At,{icon:"goUp",fill:"gray1"})}),g.jsx(UT,{onClick:K,children:g.jsx(At,{icon:"goDown",fill:"gray1"})})]}),de&&g.jsx(i0e,{right:!0,onClick:V,children:g.jsx(At,{icon:"deleteX",size:"16px",fill:"gray1"})}),C&&!m&&g.jsx(l0e,{onClick:x,$isPointer:!!x,$isInvalid:te,children:C}),m&&g.jsx(Hl,{right:!0,children:g.jsx(Q0,{variant:"sm"})})]})]}),u&&g.jsx(a1,{appearance:w,children:u})]})},gu=e=>{const t=I.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return I.useLayoutEffect(()=>{t.current=e}),I.useCallback((...r)=>{var n;return(n=t.current)==null?void 0:n.apply(null,r)},[])},f0e=Y.ul`
1664
1665
  background-color: white;
1665
1666
  box-shadow: dropShadow;
1666
1667
  border-radius: 10px;
@@ -4667,4 +4668,4 @@ function print() { __p += __j.call(arguments, '') }
4667
4668
  `,HMe=Y.div`
4668
4669
  display: flex;
4669
4670
  position: relative;
4670
- `,zMe=({name:e,label:t,value:r,disabled:n,error:i,spaceAround:o=!1,isInvalid:l=void 0,className:c,resize:u,icon:f,rows:p=4,Footer:h,...v})=>{const m=l!==void 0?l:!!i;return g.jsxs(Ms,{spaceAround:o,children:[g.jsxs(jMe,{children:[t&&g.jsx(Au,{htmlFor:e,children:t}),g.jsxs(WMe,{$isInvalid:m,disabled:n,children:[g.jsxs(HMe,{children:[f&&g.jsx(FMe,{children:g.jsx(At,{icon:f})}),g.jsx(VMe,{name:e,value:r,disabled:n,className:c,$isInvalid:m,$resize:u,...v,rows:p})]}),h]})]}),i&&g.jsx(a1,{children:i})]})};ae.Add=mY,ae.AddPhoto=bk,ae.Admin=SY,ae.Alert=XTe,ae.ArrowDown=Jp,ae.ArrowForward=vY,ae.ArrowUp=Ck,ae.AsyncSelect=QTe,ae.Avatar=$Te,ae.Badge=rMe,ae.BarcodeScan=zZ,ae.BoolIconCell=Ywe,ae.BorderedBox=iMe,ae.Box=YZ,ae.Button=Pr,ae.ButtonInCell=qwe,ae.Calendar=sY,ae.Cancel=u5,ae.Card=oMe,ae.Checkbox=D1,ae.CheckedBox=XZ,ae.CommonGrid=fEe,ae.Company=uY,ae.Complaint=TZ,ae.Consolidation=QZ,ae.Container=CY,ae.CornerDialog=wIe,ae.CustomSelectButton=l8e,ae.Dashboard=wY,ae.DateCell=Hwe,ae.DatePicker=CA,ae.DatePickerRepeat=js,ae.DateTimeCell=Gwe,ae.Desktop=AY,ae.Dispatch=KZ,ae.Dropdown=lMe,ae.DropdownSelect=LB,ae.EmptyRack=qZ,ae.EnumInCell=vxe,ae.ErrorMessage=a1,ae.Expeditions=MZ,ae.FieldLabel=Au,ae.FlagCZ=xZ,ae.FlagEL=SZ,ae.FlagESP=EZ,ae.FlagITA=IZ,ae.FlagRUS=kZ,ae.FlagSVK=OZ,ae.FlagUK=PZ,ae.FlagUSA=wZ,ae.Foldable=kY,ae.Fragile=bY,ae.Gift=$Z,ae.Group=yk,ae.H1=Gde,ae.H2=WT,ae.H3=_de,ae.H4=Ude,ae.H5=HT,ae.H6=Wl,ae.H7=zT,ae.HamburgerMenu=hk,ae.HamburgerMenuButton=GPe,ae.HelpCircle1=LZ,ae.HorizontalLines=xY,ae.HoverBubble=yxe,ae.Icon=At,ae.IconButtonInCell=Y7,ae.Image=ZF,ae.ImageCell=uxe,ae.ImageList=vOe,ae.ImagePlaceholder=HZ,ae.Income=DZ,ae.Info=eY,ae.Input=fo,ae.Integrations=hY,ae.Inventory=NZ,ae.Inventory2=GZ,ae.KeyPress=ST,ae.Label=o0e,ae.LanguageSwitch=oj,ae.LightBox=nj,ae.Line=uMe,ae.Link=Oh,ae.LinkInCell=Kwe,ae.Liquid=IY,ae.Location=tY,ae.LoginPage=nPe,ae.Logo=lj,ae.Logout1=_Z,ae.MachinePackingForbidden=OY,ae.MakePhoto=rY,ae.MenuItems=Ak,ae.Message=gY,ae.MobileCancel=gk,ae.Modal=Ju,ae.MultiSelect=nB,ae.Notification2=BZ,ae.OpenBox=ZZ,ae.Pagination=kk,ae.Pallet=EY,ae.Paragraph1=zde,ae.Paragraph2=VT,ae.Paragraph3=B6,ae.Paragraph4=R6,ae.Paragraph5=jT,ae.Plus1=RZ,ae.Popover=e3,ae.Portal=_1,ae.Print=nY,ae.Product=WZ,ae.Products=FZ,ae.Profile=vk,ae.ProgressBar=mMe,ae.Puzzle1=UZ,ae.QRCode=lY,ae.Rack=JZ,ae.RadioButton=RMe,ae.RemoveCell=Qwe,ae.Return=VZ,ae.RowActionsCell=YF,ae.Rows=cY,ae.Scheduler=HPe,ae.Select=ZA,ae.Settings2=mk,ae.ShoppingBag=dY,ae.SideMenu=fTe,ae.SimpleLink=HF,ae.SingleSelect=T8,ae.SpaceAround=Ms,ae.SpaceAroundWrap=Ms,ae.Spinner=Q0,ae.StepCircle=bj,ae.Stepper=ITe,ae.StringJoinCell=_we,ae.SwitchInCell=zF,ae.TabContent=BTe,ae.Tabs=NTe,ae.Tag=Mh,ae.Text=Ts,ae.TextArea=zMe,ae.ThemeProvider=yne,ae.ThreeDots=oY,ae.TimePickerRepeat=Kl,ae.Toast=PMe,ae.ToastError=xk,ae.ToastSuccess=wk,ae.Toggle=N1,ae.ToggleCell=wxe,ae.Transfer=jZ,ae.TrashBin=yY,ae.Truck=fY,ae.TwoBoxes=iY,ae.TwoCheckedBoxes=aY,ae.TwoUsers=pY,ae.Types=R6e,ae.Typography=Ts,ae.Valuable=PY,ae.actionPrefix=Fr,ae.actionTypes=dt,ae.compactMenuWidth=hj,ae.createActions=cV,ae.createFullSelector=dV,ae.createRgba=Ps,ae.createSelectors=uV,ae.expandedMenuWidth=Aj,ae.iconDictionary=Yp,ae.palletes=Lh,ae.reducer=tEe,ae.themes=c6,ae.useAddFilter=D8,ae.useClickOutside=zo,ae.useEvent=gu,ae.useFloatingButton=pIe,ae.useLightBox=ij,ae.useModal=ru,ae.useStepper=kTe,ae.useTabs=RTe,ae.utils=ode,ae.withReduxActions=fIe,Object.defineProperty(ae,Symbol.toStringTag,{value:"Module"})});
4671
+ `,zMe=({name:e,label:t,value:r,disabled:n,error:i,spaceAround:o=!1,isInvalid:l=void 0,className:c,resize:u,icon:f,rows:p=4,Footer:h,...v})=>{const m=l!==void 0?l:!!i;return g.jsxs(Ms,{spaceAround:o,children:[g.jsxs(jMe,{children:[t&&g.jsx(Au,{htmlFor:e,children:t}),g.jsxs(WMe,{$isInvalid:m,disabled:n,children:[g.jsxs(HMe,{children:[f&&g.jsx(FMe,{children:g.jsx(At,{icon:f})}),g.jsx(VMe,{name:e,value:r,disabled:n,className:c,$isInvalid:m,$resize:u,...v,rows:p})]}),h]})]}),i&&g.jsx(a1,{children:i})]})};ae.Add=mY,ae.AddPhoto=bk,ae.Admin=SY,ae.Alert=XTe,ae.ArrowDown=Jp,ae.ArrowForward=vY,ae.ArrowUp=Ck,ae.AsyncSelect=QTe,ae.Avatar=$Te,ae.Badge=rMe,ae.BarcodeScan=zZ,ae.BoolIconCell=Ywe,ae.BorderedBox=iMe,ae.Box=YZ,ae.Button=Pr,ae.ButtonInCell=qwe,ae.Calendar=sY,ae.Cancel=u5,ae.Card=oMe,ae.Checkbox=D1,ae.CheckedBox=XZ,ae.CommonGrid=fEe,ae.Company=uY,ae.Complaint=TZ,ae.Consolidation=QZ,ae.Container=CY,ae.CornerDialog=wIe,ae.CustomSelectButton=l8e,ae.Dashboard=wY,ae.DateCell=Hwe,ae.DatePicker=CA,ae.DatePickerRepeat=js,ae.DateTimeCell=Gwe,ae.Desktop=AY,ae.Dispatch=KZ,ae.Dropdown=lMe,ae.DropdownSelect=LB,ae.EmptyRack=qZ,ae.EnumInCell=vxe,ae.ErrorMessage=a1,ae.Expeditions=MZ,ae.FieldLabel=Au,ae.FlagCZ=xZ,ae.FlagEL=SZ,ae.FlagESP=EZ,ae.FlagITA=IZ,ae.FlagRUS=kZ,ae.FlagSVK=OZ,ae.FlagUK=PZ,ae.FlagUSA=wZ,ae.Foldable=kY,ae.Fragile=bY,ae.Gift=$Z,ae.Group=yk,ae.H1=Gde,ae.H2=WT,ae.H3=_de,ae.H4=Ude,ae.H5=HT,ae.H6=Wl,ae.H7=zT,ae.HamburgerMenu=hk,ae.HamburgerMenuButton=GPe,ae.HelpCircle1=LZ,ae.HorizontalLines=xY,ae.HoverBubble=yxe,ae.Icon=At,ae.IconButtonInCell=Y7,ae.Image=ZF,ae.ImageCell=uxe,ae.ImageList=vOe,ae.ImagePlaceholder=HZ,ae.Income=DZ,ae.Info=eY,ae.Input=fo,ae.Integrations=hY,ae.Inventory=NZ,ae.Inventory2=GZ,ae.KeyPress=ST,ae.Label=t0e,ae.LanguageSwitch=oj,ae.LightBox=nj,ae.Line=uMe,ae.Link=Oh,ae.LinkInCell=Kwe,ae.Liquid=IY,ae.Location=tY,ae.LoginPage=nPe,ae.Logo=lj,ae.Logout1=_Z,ae.MachinePackingForbidden=OY,ae.MakePhoto=rY,ae.MenuItems=Ak,ae.Message=gY,ae.MobileCancel=gk,ae.Modal=Ju,ae.MultiSelect=nB,ae.Notification2=BZ,ae.OpenBox=ZZ,ae.Pagination=kk,ae.Pallet=EY,ae.Paragraph1=zde,ae.Paragraph2=VT,ae.Paragraph3=B6,ae.Paragraph4=R6,ae.Paragraph5=jT,ae.Plus1=RZ,ae.Popover=e3,ae.Portal=_1,ae.Print=nY,ae.Product=WZ,ae.Products=FZ,ae.Profile=vk,ae.ProgressBar=mMe,ae.Puzzle1=UZ,ae.QRCode=lY,ae.Rack=JZ,ae.RadioButton=RMe,ae.RemoveCell=Qwe,ae.Return=VZ,ae.RowActionsCell=YF,ae.Rows=cY,ae.Scheduler=HPe,ae.Select=ZA,ae.Settings2=mk,ae.ShoppingBag=dY,ae.SideMenu=fTe,ae.SimpleLink=HF,ae.SingleSelect=T8,ae.SpaceAround=Ms,ae.SpaceAroundWrap=Ms,ae.Spinner=Q0,ae.StepCircle=bj,ae.Stepper=ITe,ae.StringJoinCell=_we,ae.SwitchInCell=zF,ae.TabContent=BTe,ae.Tabs=NTe,ae.Tag=Mh,ae.Text=Ts,ae.TextArea=zMe,ae.ThemeProvider=yne,ae.ThreeDots=oY,ae.TimePickerRepeat=Kl,ae.Toast=PMe,ae.ToastError=xk,ae.ToastSuccess=wk,ae.Toggle=N1,ae.ToggleCell=wxe,ae.Transfer=jZ,ae.TrashBin=yY,ae.Truck=fY,ae.TwoBoxes=iY,ae.TwoCheckedBoxes=aY,ae.TwoUsers=pY,ae.Types=R6e,ae.Typography=Ts,ae.Valuable=PY,ae.actionPrefix=Fr,ae.actionTypes=dt,ae.compactMenuWidth=hj,ae.createActions=cV,ae.createFullSelector=dV,ae.createRgba=Ps,ae.createSelectors=uV,ae.expandedMenuWidth=Aj,ae.iconDictionary=Yp,ae.palletes=Lh,ae.reducer=tEe,ae.themes=c6,ae.useAddFilter=D8,ae.useClickOutside=zo,ae.useEvent=gu,ae.useFloatingButton=pIe,ae.useLightBox=ij,ae.useModal=ru,ae.useStepper=kTe,ae.useTabs=RTe,ae.utils=ode,ae.withReduxActions=fIe,Object.defineProperty(ae,Symbol.toStringTag,{value:"Module"})});