@telefonica/mistica 16.0.0 → 16.1.0

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 (152) hide show
  1. package/README.md +11 -9
  2. package/css/mistica.css +1 -1
  3. package/dist/box.d.ts +1 -0
  4. package/dist/box.js +12 -12
  5. package/dist/card.d.ts +14 -2
  6. package/dist/card.js +210 -206
  7. package/dist/credit-card-expiration-field.d.ts +1 -1
  8. package/dist/credit-card-expiration-field.js +53 -52
  9. package/dist/credit-card-number-field.d.ts +1 -1
  10. package/dist/credit-card-number-field.js +47 -45
  11. package/dist/cvv-field.d.ts +1 -1
  12. package/dist/cvv-field.js +38 -37
  13. package/dist/date-field.d.ts +1 -1
  14. package/dist/date-field.js +15 -13
  15. package/dist/date-time-field.d.ts +1 -1
  16. package/dist/date-time-field.js +13 -11
  17. package/dist/decimal-field.d.ts +1 -1
  18. package/dist/decimal-field.js +39 -38
  19. package/dist/email-field.d.ts +1 -1
  20. package/dist/email-field.js +21 -19
  21. package/dist/form-context.d.ts +7 -2
  22. package/dist/form-context.js +69 -62
  23. package/dist/form.d.ts +2 -1
  24. package/dist/form.js +94 -80
  25. package/dist/iban-field.d.ts +1 -1
  26. package/dist/iban-field.js +32 -30
  27. package/dist/index.d.ts +12 -3
  28. package/dist/index.js +19 -8
  29. package/dist/inline.d.ts +2 -1
  30. package/dist/inline.js +16 -15
  31. package/dist/integer-field.d.ts +1 -1
  32. package/dist/integer-field.js +30 -30
  33. package/dist/month-field.d.ts +1 -1
  34. package/dist/month-field.js +15 -13
  35. package/dist/package-version.js +1 -1
  36. package/dist/password-field.d.ts +1 -1
  37. package/dist/password-field.js +24 -22
  38. package/dist/phone-number-field.d.ts +4 -1
  39. package/dist/phone-number-field.js +84 -52
  40. package/dist/pin-field.js +21 -20
  41. package/dist/radio-button.d.ts +1 -0
  42. package/dist/radio-button.js +42 -41
  43. package/dist/rating.css-mistica.js +44 -0
  44. package/dist/rating.css.d.ts +11 -0
  45. package/dist/rating.css.ts.vanilla.css-mistica.js +11 -0
  46. package/dist/rating.d.ts +37 -0
  47. package/dist/rating.js +320 -0
  48. package/dist/search-field.d.ts +1 -0
  49. package/dist/search-field.js +18 -16
  50. package/dist/select.js +36 -33
  51. package/dist/sheet-action-row.css-mistica.js +13 -0
  52. package/dist/sheet-action-row.css.d.ts +1 -0
  53. package/dist/sheet-actions-list.d.ts +26 -0
  54. package/dist/sheet-actions-list.js +147 -0
  55. package/dist/sheet-actions.d.ts +23 -0
  56. package/dist/sheet-actions.js +175 -0
  57. package/dist/{sheet.css-mistica.js → sheet-common.css-mistica.js} +15 -21
  58. package/dist/{sheet.css.d.ts → sheet-common.css.d.ts} +0 -2
  59. package/dist/sheet-common.css.ts.vanilla.css-mistica.js +11 -0
  60. package/dist/sheet-common.d.ts +24 -0
  61. package/dist/sheet-common.js +429 -0
  62. package/dist/sheet-info.css-mistica.js +12 -0
  63. package/dist/sheet-info.css.d.ts +1 -0
  64. package/dist/sheet-info.d.ts +28 -0
  65. package/dist/sheet-info.js +156 -0
  66. package/dist/sheet-native.d.ts +2 -0
  67. package/dist/sheet-native.js +173 -0
  68. package/dist/sheet-radio-list.d.ts +22 -0
  69. package/dist/sheet-radio-list.js +143 -0
  70. package/dist/sheet-root.d.ts +4 -85
  71. package/dist/sheet-root.js +48 -322
  72. package/dist/sheet-types.d.ts +88 -0
  73. package/dist/sheet-web.d.ts +8 -0
  74. package/dist/sheet-web.js +183 -0
  75. package/dist/slider.js +40 -39
  76. package/dist/switch-component.js +18 -17
  77. package/dist/text-field-base.d.ts +3 -1
  78. package/dist/text-field-base.js +74 -66
  79. package/dist/text-field-components.css-mistica.js +14 -14
  80. package/dist/text-field-components.css.d.ts +2 -2
  81. package/dist/text-field-components.js +49 -39
  82. package/dist/text-field.d.ts +1 -0
  83. package/dist/text-field.js +24 -22
  84. package/dist/text-tokens.d.ts +14 -0
  85. package/dist/text-tokens.js +145 -89
  86. package/dist/theme-context-provider.js +6 -5
  87. package/dist/theme.d.ts +2 -0
  88. package/dist/utils/credit-card.d.ts +2 -2
  89. package/dist/utils/credit-card.js +1 -1
  90. package/dist/vivinho-loading-animation/in-lottie.json.js +544 -612
  91. package/dist/vivinho-loading-animation/out-lottie.json.js +828 -896
  92. package/dist/vivinho-loading-animation/pulse-lottie.json.js +798 -866
  93. package/dist/vivinho-loading-animation/wave-lottie.json.js +4303 -4409
  94. package/dist-es/box.js +18 -18
  95. package/dist-es/card.js +305 -301
  96. package/dist-es/credit-card-expiration-field.js +57 -56
  97. package/dist-es/credit-card-number-field.js +74 -72
  98. package/dist-es/cvv-field.js +82 -81
  99. package/dist-es/date-field.js +29 -27
  100. package/dist-es/date-time-field.js +29 -27
  101. package/dist-es/decimal-field.js +46 -45
  102. package/dist-es/email-field.js +26 -24
  103. package/dist-es/form-context.js +70 -63
  104. package/dist-es/form.js +102 -88
  105. package/dist-es/iban-field.js +35 -33
  106. package/dist-es/index.js +1822 -1817
  107. package/dist-es/inline.js +26 -25
  108. package/dist-es/integer-field.js +31 -31
  109. package/dist-es/month-field.js +28 -26
  110. package/dist-es/package-version.js +1 -1
  111. package/dist-es/password-field.js +37 -35
  112. package/dist-es/phone-number-field.js +92 -60
  113. package/dist-es/pin-field.js +32 -31
  114. package/dist-es/radio-button.js +42 -41
  115. package/dist-es/rating.css-mistica.js +6 -0
  116. package/dist-es/rating.css.ts.vanilla.css-mistica.js +2 -0
  117. package/dist-es/rating.js +257 -0
  118. package/dist-es/search-field.js +33 -31
  119. package/dist-es/select.js +49 -46
  120. package/dist-es/sheet-action-row.css-mistica.js +4 -0
  121. package/dist-es/sheet-actions-list.js +92 -0
  122. package/dist-es/sheet-actions.js +125 -0
  123. package/dist-es/sheet-common.css-mistica.js +4 -0
  124. package/dist-es/sheet-common.css.ts.vanilla.css-mistica.js +2 -0
  125. package/dist-es/sheet-common.js +366 -0
  126. package/dist-es/sheet-info.css-mistica.js +3 -0
  127. package/dist-es/sheet-info.js +101 -0
  128. package/dist-es/sheet-native.js +164 -0
  129. package/dist-es/sheet-radio-list.js +88 -0
  130. package/dist-es/sheet-root.js +50 -319
  131. package/dist-es/sheet-web.js +128 -0
  132. package/dist-es/slider.js +49 -48
  133. package/dist-es/style.css +1 -1
  134. package/dist-es/switch-component.js +27 -26
  135. package/dist-es/text-field-base.js +108 -100
  136. package/dist-es/text-field-components.css-mistica.js +2 -2
  137. package/dist-es/text-field-components.js +70 -60
  138. package/dist-es/text-field.js +33 -31
  139. package/dist-es/text-tokens.js +80 -45
  140. package/dist-es/theme-context-provider.js +20 -19
  141. package/dist-es/utils/credit-card.js +1 -1
  142. package/dist-es/vivinho-loading-animation/in-lottie.json.js +534 -599
  143. package/dist-es/vivinho-loading-animation/out-lottie.json.js +821 -886
  144. package/dist-es/vivinho-loading-animation/pulse-lottie.json.js +790 -855
  145. package/dist-es/vivinho-loading-animation/wave-lottie.json.js +4297 -4400
  146. package/package.json +4 -3
  147. package/dist/sheet.d.ts +0 -107
  148. package/dist/sheet.js +0 -642
  149. package/dist-es/sheet.css-mistica.js +0 -4
  150. package/dist-es/sheet.js +0 -567
  151. /package/dist/{sheet.css.ts.vanilla.css-mistica.js → sheet-action-row.css.ts.vanilla.css-mistica.js} +0 -0
  152. /package/dist-es/{sheet.css.ts.vanilla.css-mistica.js → sheet-action-row.css.ts.vanilla.css-mistica.js} +0 -0
@@ -51,7 +51,7 @@ function _object_spread_props(target, source) {
51
51
  }
52
52
  return target;
53
53
  }
54
- import { jsx as s, Fragment as x, jsxs as b } from "react/jsx-runtime";
54
+ import { jsx as l, Fragment as x, jsxs as b } from "react/jsx-runtime";
55
55
  import * as o from "react";
56
56
  import { debounce as C } from "./utils/helpers.js";
57
57
  import { SPACE as D } from "./utils/keys.js";
@@ -62,31 +62,32 @@ import { useTheme as g } from "./hooks.js";
62
62
  import { getPrefixedDataAttributes as E } from "./utils/dom.js";
63
63
  import { containerDisabled as P, container as A, interactiveArea as j, disabled as K, checkboxVariants as M, switchCheckboxContainerVariants as R, switchCheckboxLabel as T, barVariants as $, ballVariants as F } from "./switch-component.css-mistica.js";
64
64
  const L = (e)=>{
65
- const { isIos: d, isDarkMode: f } = g(), u = o.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: c, onChange: a, focusableRef: v, disabled: t } = S({
65
+ const { isIos: d, isDarkMode: f } = g(), u = o.useId(), n = e["aria-labelledby"] || u, { defaultValue: k, value: s, onChange: a, focusableRef: v, disabled: i } = S({
66
66
  name: e.name,
67
+ label: e["aria-label"],
67
68
  value: e.checked,
68
69
  defaultValue: e.defaultChecked,
69
70
  onChange: e.onChange,
70
71
  disabled: e.disabled
71
- }), [l, I] = o.useState(!!k), r = c !== null && c !== void 0 ? c : l, N = o.useMemo(()=>process.env.NODE_ENV === "test" ? (i)=>a == null ? void 0 : a(i) : C((i)=>{
72
- a == null || a(i);
72
+ }), [c, I] = o.useState(!!k), r = s !== null && s !== void 0 ? s : c, N = o.useMemo(()=>process.env.NODE_ENV === "test" ? (t)=>a == null ? void 0 : a(t) : C((t)=>{
73
+ a == null || a(t);
73
74
  }, 300), [
74
75
  a
75
76
  ]), m = ()=>{
76
- c !== void 0 ? a == null || a(!c) : (I(!l), N(!l));
77
- }, w = (i)=>{
78
- i.key === D && (i.preventDefault(), i.stopPropagation(), m());
79
- }, h = /* @__PURE__ */ s("div", {
80
- className: M[d ? t ? "disabledIos" : "ios" : t ? "disabled" : "default"],
81
- children: /* @__PURE__ */ s("div", {
77
+ s !== void 0 ? a == null || a(!s) : (I(!c), N(!c));
78
+ }, w = (t)=>{
79
+ t.key === D && (t.preventDefault(), t.stopPropagation(), m());
80
+ }, h = /* @__PURE__ */ l("div", {
81
+ className: M[d ? i ? "disabledIos" : "ios" : i ? "disabled" : "default"],
82
+ children: /* @__PURE__ */ l("div", {
82
83
  className: R[d ? "ios" : "default"],
83
84
  children: /* @__PURE__ */ b("div", {
84
85
  className: T,
85
86
  children: [
86
- /* @__PURE__ */ s("span", {
87
+ /* @__PURE__ */ l("span", {
87
88
  className: $[d ? r ? "checkedIos" : f ? "iosDark" : "ios" : r ? "checked" : "default"]
88
89
  }),
89
- /* @__PURE__ */ s("span", {
90
+ /* @__PURE__ */ l("span", {
90
91
  className: F[d ? r ? "checkedIos" : "ios" : r ? "checked" : "default"]
91
92
  })
92
93
  ]
@@ -95,26 +96,26 @@ const L = (e)=>{
95
96
  });
96
97
  return(// When the switch is disabled, it shouldn't be focusable
97
98
  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
98
- /* @__PURE__ */ s("span", _object_spread_props(_object_spread({
99
+ /* @__PURE__ */ l("span", _object_spread_props(_object_spread({
99
100
  role: "switch",
100
- "aria-checked": c !== null && c !== void 0 ? c : l,
101
- onClick: (i)=>{
102
- i.stopPropagation(), t || m();
101
+ "aria-checked": s !== null && s !== void 0 ? s : c,
102
+ onClick: (t)=>{
103
+ t.stopPropagation(), i || m();
103
104
  },
104
- onKeyDown: t ? void 0 : w,
105
- tabIndex: t ? void 0 : 0,
105
+ onKeyDown: i ? void 0 : w,
106
+ tabIndex: i ? void 0 : 0,
106
107
  ref: v,
107
- className: t ? P : A,
108
- "aria-disabled": t,
108
+ className: i ? P : A,
109
+ "aria-disabled": i,
109
110
  "aria-label": e["aria-label"],
110
111
  "aria-labelledby": e["aria-label"] ? void 0 : n
111
112
  }, E(e.dataAttributes, "Switch")), {
112
- children: e.render ? /* @__PURE__ */ s(x, {
113
+ children: e.render ? /* @__PURE__ */ l(x, {
113
114
  children: e.render({
114
115
  controlElement: h,
115
116
  labelId: n,
116
- disabled: !!t,
117
- checked: c !== null && c !== void 0 ? c : l
117
+ disabled: !!i,
118
+ checked: s !== null && s !== void 0 ? s : c
118
119
  })
119
120
  }) : /* @__PURE__ */ b(y, {
120
121
  space: 16,
@@ -122,12 +123,12 @@ const L = (e)=>{
122
123
  className: j,
123
124
  children: [
124
125
  h,
125
- e.children && /* @__PURE__ */ s(V, {
126
+ e.children && /* @__PURE__ */ l(V, {
126
127
  regular: !0,
127
128
  as: "div",
128
129
  id: n,
129
- children: /* @__PURE__ */ s("span", {
130
- className: t ? K : "",
130
+ children: /* @__PURE__ */ l("span", {
131
+ className: i ? K : "",
131
132
  children: e.children
132
133
  })
133
134
  })
@@ -78,49 +78,51 @@ function _object_without_properties_loose(source, excluded) {
78
78
  }
79
79
  return target;
80
80
  }
81
- import { jsx as n, jsxs as ie } from "react/jsx-runtime";
81
+ import { jsx as n, jsxs as le } from "react/jsx-runtime";
82
82
  import * as r from "react";
83
- import { FieldContainer as ne, HelperText as ae, Label as re } from "./text-field-components.js";
84
- import { LABEL_SCALE_MOBILE as le, LABEL_SCALE_DESKTOP as oe } from "./text-field-components.css-mistica.js";
85
- import { Text3 as F } from "./text.js";
86
- import { isFirefox as de, isRunningAcceptanceTest as se } from "./utils/platform.js";
87
- import { useScreenSize as ce, useIsomorphicLayoutEffect as ue, useTheme as fe } from "./hooks.js";
88
- import v from "classnames";
89
- import { combineRefs as j } from "./utils/common.js";
90
- import { startIcon as me, prefix as he, inputWithLabel as z, inputWithoutLabel as _, fullWidth as ge, fieldRightPadding as G, fieldLeftPadding as T, textArea as pe, textAreaWithLabel as Se, textAreaWithoutLabel as xe, input as be, inputFirefoxStyles as ye, hiddenDatePlaceholder as Ie, emptyDateValue as Ce, endIconContainer as Ee, menuItem as Re, menuItemSelected as Le, suggestionsContainer as Te, fieldEndIconContainer as ve, fieldElementsGap as Ae, iconButtonSize as $e, fieldEndIconGap as We } from "./text-field-base.css-mistica.js";
91
- import { vars as Fe } from "./skins/skin-contract.css-mistica.js";
92
- import { InternalToggleIconButton as Ne, InternalIconButton as we } from "./icon-button.js";
93
- import { ThemeVariant as Pe } from "./theme-variant-context.js";
94
- import { iconSize as Oe } from "./icon-button.css-mistica.js";
95
- import { menuLabelSuffix as Be } from "./text-tokens.js";
96
- const De = (d, u)=>{
83
+ import { FieldContainer as oe, HelperText as de, Label as se } from "./text-field-components.js";
84
+ import { LABEL_SCALE_MOBILE as ce, LABEL_SCALE_DESKTOP as ue } from "./text-field-components.css-mistica.js";
85
+ import { Text3 as N } from "./text.js";
86
+ import { isFirefox as fe, isRunningAcceptanceTest as me } from "./utils/platform.js";
87
+ import { useTheme as k, useScreenSize as he, useIsomorphicLayoutEffect as ge } from "./hooks.js";
88
+ import T from "classnames";
89
+ import { combineRefs as K } from "./utils/common.js";
90
+ import { startIcon as pe, prefix as Se, inputWithLabel as _, inputWithoutLabel as G, fullWidth as xe, fieldRightPadding as j, fieldLeftPadding as L, textArea as be, textAreaWithLabel as ye, textAreaWithoutLabel as Ie, input as Ce, inputFirefoxStyles as Ee, hiddenDatePlaceholder as Re, emptyDateValue as ve, endIconContainer as Le, menuItem as Te, menuItemSelected as Ae, suggestionsContainer as $e, fieldEndIconContainer as Fe, fieldElementsGap as We, iconButtonSize as Ne, fieldEndIconGap as we } from "./text-field-base.css-mistica.js";
91
+ import { vars as Pe } from "./skins/skin-contract.css-mistica.js";
92
+ import { InternalToggleIconButton as De, InternalIconButton as Oe } from "./icon-button.js";
93
+ import { ThemeVariant as Be } from "./theme-variant-context.js";
94
+ import { iconSize as qe } from "./icon-button.css-mistica.js";
95
+ import { menuLabelSuffix as ze } from "./text-tokens.js";
96
+ const _e = (l, u)=>{
97
97
  if (!u) return !0;
98
98
  const t = document.createElement("input");
99
- return t.type = u, t.value = d || "", t.value !== "";
100
- }, et = (param)=>{
101
- let { hasBackgroundColor: d = !0, onPress: u, onChange: t, disabled: m, Icon: S, checkedProps: l, uncheckedProps: a, "aria-label": h } = param;
99
+ return t.type = u, t.value = l || "", t.value !== "";
100
+ }, nt = (param)=>{
101
+ let { hasBackgroundColor: l = !0, onPress: u, onChange: t, disabled: m, Icon: S, checkedProps: o, uncheckedProps: a, "aria-label": h } = param;
102
102
  return /* @__PURE__ */ n("div", {
103
- className: ve,
104
- children: l ? /* @__PURE__ */ n(Ne, {
105
- checkedProps: _object_spread_props(_object_spread({}, l), {
106
- "aria-label": l["aria-label"] || ""
103
+ className: Fe,
104
+ children: o ? /* @__PURE__ */ n(De, {
105
+ checkedProps: _object_spread_props(_object_spread({}, o), {
106
+ "aria-label": o["aria-label"] || ""
107
107
  }),
108
108
  uncheckedProps: _object_spread_props(_object_spread({}, a), {
109
109
  "aria-label": a["aria-label"] || ""
110
110
  }),
111
111
  onChange: t,
112
- hasOverlay: d,
112
+ hasOverlay: l,
113
113
  disabled: m
114
- }) : /* @__PURE__ */ n(we, {
114
+ }) : /* @__PURE__ */ n(Oe, {
115
115
  Icon: S,
116
116
  disabled: m,
117
117
  "aria-label": h || "",
118
118
  onPress: u,
119
- hasOverlay: d
119
+ hasOverlay: l
120
120
  })
121
121
  });
122
- }, W = /*#__PURE__*/ r.forwardRef((_param, Q)=>{
123
- var { error: d, helperText: u, label: t, inputProps: m, inputRef: S, defaultValue: l, value: a, onFocus: h, onBlur: b, inputComponent: L, prefix: y, startIcon: f, endIcon: x, endIconOverlay: i, shrinkLabel: g, multiline: p = !1, focus: I, fieldRef: k, maxLength: C, id: H, autoComplete: K, fullWidth: M, dataAttributes: J } = _param, o = _object_without_properties(_param, [
122
+ }, H = (l)=>{
123
+ l.preventDefault();
124
+ }, W = /*#__PURE__*/ r.forwardRef((_param, Y)=>{
125
+ var { error: l, helperText: u, label: t, inputProps: m, inputRef: S, defaultValue: o, value: a, onFocus: h, onBlur: b, inputComponent: v, prefix: y, startIcon: f, endIcon: x, endIconOverlay: i, shrinkLabel: g, multiline: p = !1, focus: I, fieldRef: M, maxLength: C, id: J, autoComplete: Q, fullWidth: U, dataAttributes: X, preventCopy: A } = _param, d = _object_without_properties(_param, [
124
126
  "error",
125
127
  "helperText",
126
128
  "label",
@@ -143,88 +145,100 @@ const De = (d, u)=>{
143
145
  "id",
144
146
  "autoComplete",
145
147
  "fullWidth",
146
- "dataAttributes"
148
+ "dataAttributes",
149
+ "preventCopy"
147
150
  ]);
151
+ const { preventCopyInFormFields: Z } = k();
152
+ A = A !== null && A !== void 0 ? A : Z;
148
153
  var _ref;
149
- const U = r.useId(), N = H || U, w = r.useId(), [s, c] = r.useState(l != null && l.length || a != null && a.length ? "filled" : "default"), { isTabletOrSmaller: X } = ce(), [P, O] = r.useState((_ref = l == null ? void 0 : l.length) !== null && _ref !== void 0 ? _ref : 0), A = !!t || !o.required, E = o.type === "date" || o.type === "datetime-local" || o.type === "month", B = r.useRef(void 0);
150
- ue(()=>{
151
- const e = E && !De(a, o.type) ? "" : a;
154
+ const V = r.useId(), w = J || V, P = r.useId(), [s, c] = r.useState(o != null && o.length || a != null && a.length ? "filled" : "default"), { isTabletOrSmaller: ee } = he(), [D, O] = r.useState((_ref = o == null ? void 0 : o.length) !== null && _ref !== void 0 ? _ref : 0), $ = !!t || !d.required, E = d.type === "date" || d.type === "datetime-local" || d.type === "month", B = r.useRef(void 0);
155
+ ge(()=>{
156
+ const e = E && !_e(a, d.type) ? "" : a;
152
157
  B.current !== a && E && !(e != null && e.length) && s === "filled" && I === void 0 && c("default"), B.current = a, s !== "focused" && e != null && e.length && (O(e.length), c("filled")), I && c("focused"), I === !1 && !(e != null && e.length) && c("default"), I === !1 && e != null && e.length && c("filled");
153
158
  }, [
154
159
  s,
155
160
  a,
156
161
  I,
157
162
  E,
158
- o.type
163
+ d.type
159
164
  ]), r.useEffect(()=>{
160
- o.autoFocus && c("focused");
165
+ d.autoFocus && c("focused");
161
166
  }, [
162
- o.autoFocus
167
+ d.autoFocus
163
168
  ]);
164
- const Y = p ? "textarea" : "input", Z = L ? {
169
+ const te = p ? "textarea" : "input", ie = v ? {
165
170
  inputRef: S
166
171
  } : {
167
- ref: j(Q, S)
168
- }, R = _object_spread(_object_spread_props(_object_spread({}, o), {
172
+ ref: K(Y, S)
173
+ }, R = _object_spread(_object_spread_props(_object_spread({}, d), {
169
174
  maxLength: C,
170
- autoComplete: K
171
- }), m), $ = `calc(${Oe.default} + ${Ae}px)`, D = `calc(${$e} + ${We}px)`, V = g || s === "focused" || s === "filled" ? X ? le : oe : 1, ee = {
172
- left: `calc(${T}px + ${f ? $ : "0px"})`,
175
+ autoComplete: Q
176
+ }), m), F = `calc(${qe.default} + ${We}px)`, q = `calc(${Ne} + ${we}px)`, ne = g || s === "focused" || s === "filled" ? ee ? ce : ue : 1, ae = {
177
+ left: `calc(${L}px + ${f ? F : "0px"})`,
173
178
  // shrinking means applying a scale transformation, so width will be proportionally reduced.
174
179
  // Let's keep the original width.
175
- width: `calc((100% - ${T}px - ${f ? $ : "0px"} - ${x || i ? D : `${G}px`}) / ${V})`
176
- }, te = o.type === "password" && P > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
177
- return /* @__PURE__ */ n(ne, {
178
- disabled: o.disabled,
179
- helperText: /* @__PURE__ */ n(ae, {
180
- error: d,
180
+ width: `calc((100% - ${L}px - ${f ? F : "0px"} - ${x || i ? q : `${j}px`}) / ${ne})`
181
+ }, re = d.type === "password" && D > 0 ? "Lucida Grande, Arial, sans-serif" : "inherit";
182
+ return /* @__PURE__ */ n(oe, {
183
+ disabled: d.disabled,
184
+ helperText: /* @__PURE__ */ n(de, {
185
+ error: l,
181
186
  leftText: u,
182
- id: w,
183
- rightText: p && C ? `${P}/${C}` : void 0
187
+ id: P,
188
+ rightText: p && C ? `${D}/${C}` : void 0
184
189
  }),
185
190
  multiline: p,
186
- fullWidth: M,
187
- fieldRef: k,
188
- readOnly: o.readOnly,
189
- dataAttributes: J,
190
- children: /* @__PURE__ */ ie(Pe, {
191
- isInverse: !1,
191
+ fullWidth: U,
192
+ fieldRef: M,
193
+ readOnly: d.readOnly,
194
+ dataAttributes: X,
195
+ children: /* @__PURE__ */ le(Be, {
196
+ variant: "default",
192
197
  children: [
193
198
  f && /* @__PURE__ */ n("div", {
194
- className: me,
199
+ className: pe,
195
200
  children: f
196
201
  }),
197
202
  y && /* @__PURE__ */ n("div", {
198
- className: v(he, A ? z : _),
203
+ className: T(Se, $ ? _ : G),
199
204
  style: {
200
205
  opacity: s === "default" ? 0 : 1
201
206
  },
202
- children: /* @__PURE__ */ n(F, {
203
- color: Fe.colors.textSecondary,
207
+ children: /* @__PURE__ */ n(N, {
208
+ color: Pe.colors.textSecondary,
204
209
  regular: !0,
205
210
  wordBreak: !1,
206
211
  children: y
207
212
  })
208
213
  }),
214
+ t && /* @__PURE__ */ n(se, {
215
+ style: ae,
216
+ error: l,
217
+ forId: w,
218
+ inputState: s,
219
+ shrinkLabel: g,
220
+ optional: !d.required,
221
+ children: t
222
+ }),
209
223
  /* @__PURE__ */ n("div", {
210
- className: ge,
211
- children: /* @__PURE__ */ n(F, {
224
+ className: xe,
225
+ children: /* @__PURE__ */ n(N, {
212
226
  as: "div",
213
227
  regular: !0,
214
- children: /*#__PURE__*/ r.createElement(L || Y, _object_spread(_object_spread_props(_object_spread({}, Z, R), {
215
- id: N,
228
+ children: /*#__PURE__*/ r.createElement(v || te, _object_spread(_object_spread_props(_object_spread({}, ie, R), {
229
+ id: w,
216
230
  style: _object_spread_props(_object_spread({
217
- paddingRight: x ? 0 : i ? D : G,
218
- paddingLeft: y ? 0 : f ? `calc(${$} + ${T}px)` : T
231
+ paddingRight: x ? 0 : i ? q : j,
232
+ paddingLeft: y ? 0 : f ? `calc(${F} + ${L}px)` : L
219
233
  }, R.style), {
220
- fontFamily: te
234
+ fontFamily: re
221
235
  }),
222
- className: p ? v(pe, A ? Se : xe) : v(be, A ? z : _, {
223
- [ye]: de(),
236
+ className: p ? T(be, $ ? ye : Ie) : T(Ce, $ ? _ : G, {
237
+ [Ee]: fe(),
224
238
  // Hide webkit placeholder when label is not shrinked and value is empty
225
- [Ie]: E && s === "default",
239
+ [Re]: E && s === "default",
226
240
  // Force height of input when value is empty to avoid field from having height 0 in iOS
227
- [Ce]: E && s !== "filled"
241
+ [ve]: E && s !== "filled"
228
242
  }),
229
243
  onFocus: (e)=>{
230
244
  c("focused"), h == null || h(e);
@@ -233,50 +247,44 @@ const De = (d, u)=>{
233
247
  e.target.value.length > 0 ? c("filled") : c("default"), b == null || b(e);
234
248
  },
235
249
  onChange: (e)=>{
236
- var q;
237
- C === void 0 || e.target.value.length <= C ? (O(e.target.value.length), e.target.value.length > 0 && s !== "focused" && c(e.target.value.length > 0 ? "filled" : "default"), (q = R.onChange) == null || q.call(R, e)) : (e.stopPropagation(), e.preventDefault());
250
+ var z;
251
+ C === void 0 || e.target.value.length <= C ? (O(e.target.value.length), e.target.value.length > 0 && s !== "focused" && c(e.target.value.length > 0 ? "filled" : "default"), (z = R.onChange) == null || z.call(R, e)) : (e.stopPropagation(), e.preventDefault());
238
252
  },
239
- defaultValue: l,
253
+ defaultValue: o,
240
254
  value: a
241
- }), d && {
255
+ }), l && {
242
256
  "aria-invalid": !0
243
257
  }, u && {
244
- "aria-describedby": w
258
+ "aria-describedby": P
259
+ }, A && {
260
+ onCopy: H,
261
+ onCut: H
245
262
  }))
246
263
  })
247
264
  }),
248
- t && /* @__PURE__ */ n(re, {
249
- style: ee,
250
- error: d,
251
- forId: N,
252
- inputState: s,
253
- shrinkLabel: g,
254
- optional: !o.required,
255
- children: t
256
- }),
257
265
  x && /* @__PURE__ */ n("div", {
258
- className: Ee,
266
+ className: Le,
259
267
  children: x
260
268
  }),
261
269
  i
262
270
  ]
263
271
  })
264
272
  });
265
- }), qe = /*#__PURE__*/ r.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), tt = /*#__PURE__*/ r.forwardRef((_param, m)=>{
266
- var { getSuggestions: d, id: u } = _param, t = _object_without_properties(_param, [
273
+ }), Ge = /*#__PURE__*/ r.lazy(()=>import(/* webpackChunkName: "react-autosuggest" */ "react-autosuggest")), at = /*#__PURE__*/ r.forwardRef((_param, m)=>{
274
+ var { getSuggestions: l, id: u } = _param, t = _object_without_properties(_param, [
267
275
  "getSuggestions",
268
276
  "id"
269
277
  ]);
270
- const [S, l] = r.useState([]), a = r.useRef(null), { platformOverrides: h, texts: b, t: L } = fe(), y = r.useId(), f = u || y, x = r.useId();
271
- if (d && (t.value === void 0 || t.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
272
- return d ? /* @__PURE__ */ n(r.Suspense, {
278
+ const [S, o] = r.useState([]), a = r.useRef(null), { platformOverrides: h, texts: b, t: v } = k(), y = r.useId(), f = u || y, x = r.useId();
279
+ if (l && (t.value === void 0 || t.defaultValue !== void 0)) throw Error("Fields with suggestions must be used in controlled mode");
280
+ return l ? /* @__PURE__ */ n(r.Suspense, {
273
281
  fallback: /* @__PURE__ */ n(W, _object_spread_props(_object_spread({}, t), {
274
- label: se(h) ? "" : t.label,
282
+ label: me(h) ? "" : t.label,
275
283
  autoComplete: "off",
276
284
  ref: m,
277
285
  id: f
278
286
  })),
279
- children: /* @__PURE__ */ n(qe, {
287
+ children: /* @__PURE__ */ n(Ge, {
280
288
  id: x,
281
289
  inputProps: _object_spread_props(_object_spread({}, t), {
282
290
  id: f,
@@ -293,23 +301,23 @@ const De = (d, u)=>{
293
301
  }
294
302
  }),
295
303
  renderInputComponent: (i)=>/* @__PURE__ */ n(W, _object_spread_props(_object_spread({}, i), {
296
- inputRef: j(a, t.inputRef, m)
304
+ inputRef: K(a, t.inputRef, m)
297
305
  })),
298
306
  suggestions: S,
299
307
  onSuggestionsFetchRequested: (param)=>{
300
308
  let { value: i } = param;
301
- return l(d(i));
309
+ return o(l(i));
302
310
  },
303
- onSuggestionsClearRequested: ()=>l([]),
311
+ onSuggestionsClearRequested: ()=>o([]),
304
312
  getSuggestionValue: (i)=>i,
305
313
  renderSuggestion: (i, param)=>{
306
314
  let { isHighlighted: g } = param;
307
315
  return /* @__PURE__ */ n("div", {
308
316
  role: "menuitem",
309
- className: v(Re, {
310
- [Le]: g
317
+ className: T(Te, {
318
+ [Ae]: g
311
319
  }),
312
- children: /* @__PURE__ */ n(F, {
320
+ children: /* @__PURE__ */ n(N, {
313
321
  regular: !0,
314
322
  children: i
315
323
  })
@@ -319,8 +327,8 @@ const De = (d, u)=>{
319
327
  style: {
320
328
  width: a.current ? a.current.clientWidth + 2 : 0
321
329
  },
322
- className: Te,
323
- "aria-label": `${t.label} ${b.menuLabelSuffix || L(Be)}`,
330
+ className: $e,
331
+ "aria-label": `${t.label} ${b.menuLabelSuffix || v(ze)}`,
324
332
  children: i.children
325
333
  }))
326
334
  })
@@ -329,4 +337,4 @@ const De = (d, u)=>{
329
337
  ref: m
330
338
  }));
331
339
  });
332
- export { et as FieldEndIcon, W as TextFieldBase, tt as TextFieldBaseAutosuggest };
340
+ export { nt as FieldEndIcon, W as TextFieldBase, at as TextFieldBaseAutosuggest };
@@ -2,5 +2,5 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
2
2
  import "./icon-button.css.ts.vanilla.css-mistica.js";
3
3
  import "./text-field-base.css.ts.vanilla.css-mistica.js";
4
4
  import "./text-field-components.css.ts.vanilla.css-mistica.js";
5
- var a = 328, f = 0.78, e = 0.75, k = "_15k6ur97", i = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", y = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", t = "_1y2v1nfi7", l = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", h = "_15k6ur9d", u = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", o = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", d = "_15k6ur9e", p = "_15k6ur99 _1y2v1nfi7", L = "_15k6ur9f", E = "_15k6ur94";
6
- export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, k as disabled, i as field, y as fieldContainer, t as fullWidth, l as helperContainer, h as helperText, u as labelContainer, o as labelText, d as leftText, p as normalWidth, L as rightText, E as shrinked };
5
+ var a = 328, f = 0.78, e = 0.75, y = "_15k6ur97", k = "_1y2v1nfkl _1y2v1nfk1 _1y2v1nfhk _1y2v1nfka _1y2v1nfhe", i = "_15k6ur96 _1y2v1nfhk _1y2v1nfhq", l = "_1y2v1nfi7", h = "_1y2v1nfa7 _1y2v1nfbj _1y2v1nfhk", t = "_1y2v1nfi5 _1y2v1nf7j", o = "_15k6ur91 _1y2v1nfhf _1y2v1nfhk _1y2v1nfhp", p = "_15k6ur93 _1y2v1nfkl _1y2v1nfi3", u = "_15k6ur9e _1y2v1nfhk", L = "_15k6ur99 _1y2v1nfi7", d = "_15k6ur94", E = "_15k6ur9g";
6
+ export { a as DEFAULT_WIDTH, f as LABEL_SCALE_DESKTOP, e as LABEL_SCALE_MOBILE, y as disabled, k as field, i as fieldContainer, l as fullWidth, h as helperContainer, t as helperText, o as labelContainer, p as labelText, u as leftHelperText, L as normalWidth, d as shrinked, E as warnIcon };