@basis-theory/react-elements 2.0.0 → 2.2.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 (4) hide show
  1. package/main/index.js +49 -23
  2. package/module/module.js +50 -24
  3. package/package.json +2 -2
  4. package/types/index.d.ts +96 -62
package/main/index.js CHANGED
@@ -107,10 +107,11 @@ const $311cac811dba7e3c$export$8855c0c49ada8fa3 = (apiKey, options)=>{
107
107
  var $09db7b15c2691edc$exports = {};
108
108
 
109
109
  $parcel$export($09db7b15c2691edc$exports, "CardElement", () => $b68de9bc89cba8c8$export$642653cabb64aed9);
110
- $parcel$export($09db7b15c2691edc$exports, "TextElement", () => $5056c1f1f96da4b6$export$764077542c4bf9bd);
111
- $parcel$export($09db7b15c2691edc$exports, "CardNumberElement", () => $89a8c5992dc7cf9a$export$a2311b18160d2f3f);
112
110
  $parcel$export($09db7b15c2691edc$exports, "CardExpirationDateElement", () => $a598ed1fc49faa5f$export$d5128efc3cebc889);
111
+ $parcel$export($09db7b15c2691edc$exports, "CardNumberElement", () => $89a8c5992dc7cf9a$export$a2311b18160d2f3f);
113
112
  $parcel$export($09db7b15c2691edc$exports, "CardVerificationCodeElement", () => $9bb5cbc1cc445953$export$36d668a024913c87);
113
+ $parcel$export($09db7b15c2691edc$exports, "CopyButtonElement", () => $4a127cfedb958479$export$6b67f0b47b983f4f);
114
+ $parcel$export($09db7b15c2691edc$exports, "TextElement", () => $5056c1f1f96da4b6$export$764077542c4bf9bd);
114
115
 
115
116
 
116
117
 
@@ -257,24 +258,21 @@ function CardElement(props, ref) {
257
258
 
258
259
 
259
260
 
260
- const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, title: title, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
261
+ const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
261
262
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
262
- const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
263
+ const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
263
264
  'aria-label': ariaLabel,
264
265
  autoComplete: autoComplete,
266
+ copyIconStyles: copyIconStyles,
265
267
  disabled: disabled,
268
+ enableCopy: enableCopy,
266
269
  inputMode: inputMode,
267
- mask: mask,
268
- maxLength: maxLength,
269
- password: password,
270
270
  placeholder: placeholder,
271
271
  readOnly: readOnly,
272
272
  style: style,
273
273
  targetId: id,
274
274
  title: title,
275
- transform: transform,
276
275
  validateOnChange: validateOnChange,
277
- validation: validation,
278
276
  value: value
279
277
  }, bt, elementRef, valueRef);
280
278
  (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
@@ -287,9 +285,8 @@ const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoCompl
287
285
  ref: wrapperRef
288
286
  });
289
287
  };
290
- const $5056c1f1f96da4b6$export$764077542c4bf9bd = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(// eslint-disable-next-line get-off-my-lawn/prefer-arrow-functions
291
- function TextElement(props, ref) {
292
- return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($5056c1f1f96da4b6$var$TextElementC, {
288
+ const $a598ed1fc49faa5f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardExpirationDateElement(props, ref) {
289
+ return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($a598ed1fc49faa5f$var$CardExpirationDateElementC, {
293
290
  ...props,
294
291
  elementRef: ref
295
292
  });
@@ -343,11 +340,12 @@ const $89a8c5992dc7cf9a$export$a2311b18160d2f3f = /*#__PURE__*/ (0, ($parcel$int
343
340
 
344
341
 
345
342
 
346
- const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
343
+ const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
347
344
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
348
- const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
345
+ const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
349
346
  'aria-label': ariaLabel,
350
347
  autoComplete: autoComplete,
348
+ cardBrand: cardBrand,
351
349
  copyIconStyles: copyIconStyles,
352
350
  disabled: disabled,
353
351
  enableCopy: enableCopy,
@@ -370,8 +368,8 @@ const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLa
370
368
  ref: wrapperRef
371
369
  });
372
370
  };
373
- const $a598ed1fc49faa5f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardExpirationDateElement(props, ref) {
374
- return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($a598ed1fc49faa5f$var$CardExpirationDateElementC, {
371
+ const $9bb5cbc1cc445953$export$36d668a024913c87 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardVerificationCodeElement(props, ref) {
372
+ return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($9bb5cbc1cc445953$var$CardVerificationCodeElementC, {
375
373
  ...props,
376
374
  elementRef: ref
377
375
  });
@@ -382,22 +380,49 @@ const $a598ed1fc49faa5f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, ($parcel$int
382
380
 
383
381
 
384
382
 
385
- const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
383
+ const $4a127cfedb958479$var$CopyButtonElementC = ({ bt: bt, elementRef: elementRef, id: id, text: text, onClick: onClick, style: style, valueRef: valueRef })=>{
386
384
  const wrapperRef = (0, $6ZdRe$react.useRef)(null);
387
- const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
385
+ const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'copyButton', wrapperRef, {
386
+ targetId: id,
387
+ style: style,
388
+ text: text
389
+ }, bt, elementRef, valueRef);
390
+ (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('click', element, onClick);
391
+ return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)("div", {
392
+ id: id,
393
+ ref: wrapperRef
394
+ });
395
+ };
396
+ const $4a127cfedb958479$export$6b67f0b47b983f4f = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardNumberElement(props, ref) {
397
+ return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($4a127cfedb958479$var$CopyButtonElementC, {
398
+ ...props,
399
+ elementRef: ref
400
+ });
401
+ });
402
+
403
+
404
+
405
+
406
+
407
+
408
+ const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, title: title, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
409
+ const wrapperRef = (0, $6ZdRe$react.useRef)(null);
410
+ const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
388
411
  'aria-label': ariaLabel,
389
412
  autoComplete: autoComplete,
390
- cardBrand: cardBrand,
391
- copyIconStyles: copyIconStyles,
392
413
  disabled: disabled,
393
- enableCopy: enableCopy,
394
414
  inputMode: inputMode,
415
+ mask: mask,
416
+ maxLength: maxLength,
417
+ password: password,
395
418
  placeholder: placeholder,
396
419
  readOnly: readOnly,
397
420
  style: style,
398
421
  targetId: id,
399
422
  title: title,
423
+ transform: transform,
400
424
  validateOnChange: validateOnChange,
425
+ validation: validation,
401
426
  value: value
402
427
  }, bt, elementRef, valueRef);
403
428
  (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
@@ -410,8 +435,9 @@ const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': aria
410
435
  ref: wrapperRef
411
436
  });
412
437
  };
413
- const $9bb5cbc1cc445953$export$36d668a024913c87 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardVerificationCodeElement(props, ref) {
414
- return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($9bb5cbc1cc445953$var$CardVerificationCodeElementC, {
438
+ const $5056c1f1f96da4b6$export$764077542c4bf9bd = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(// eslint-disable-next-line get-off-my-lawn/prefer-arrow-functions
439
+ function TextElement(props, ref) {
440
+ return /*#__PURE__*/ (0, $6ZdRe$reactjsxruntime.jsx)($5056c1f1f96da4b6$var$TextElementC, {
415
441
  ...props,
416
442
  elementRef: ref
417
443
  });
package/module/module.js CHANGED
@@ -72,10 +72,11 @@ const $af3ff746464f54fa$export$8855c0c49ada8fa3 = (apiKey, options)=>{
72
72
  var $6b778c3bc65591b7$exports = {};
73
73
 
74
74
  $parcel$export($6b778c3bc65591b7$exports, "CardElement", () => $22a85849b67e3ab0$export$642653cabb64aed9);
75
- $parcel$export($6b778c3bc65591b7$exports, "TextElement", () => $098244fc1ecf3b22$export$764077542c4bf9bd);
76
- $parcel$export($6b778c3bc65591b7$exports, "CardNumberElement", () => $c9d0638264a6246e$export$a2311b18160d2f3f);
77
75
  $parcel$export($6b778c3bc65591b7$exports, "CardExpirationDateElement", () => $b04bbbda03b8923f$export$d5128efc3cebc889);
76
+ $parcel$export($6b778c3bc65591b7$exports, "CardNumberElement", () => $c9d0638264a6246e$export$a2311b18160d2f3f);
78
77
  $parcel$export($6b778c3bc65591b7$exports, "CardVerificationCodeElement", () => $6f922196262b492d$export$36d668a024913c87);
78
+ $parcel$export($6b778c3bc65591b7$exports, "CopyButtonElement", () => $b1b4bfddfa231c63$export$6b67f0b47b983f4f);
79
+ $parcel$export($6b778c3bc65591b7$exports, "TextElement", () => $098244fc1ecf3b22$export$764077542c4bf9bd);
79
80
 
80
81
 
81
82
 
@@ -222,24 +223,21 @@ function CardElement(props, ref) {
222
223
 
223
224
 
224
225
 
225
- const $098244fc1ecf3b22$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, title: title, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
226
+ const $b04bbbda03b8923f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
226
227
  const wrapperRef = (0, $gb0K4$useRef)(null);
227
- const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
228
+ const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
228
229
  'aria-label': ariaLabel,
229
230
  autoComplete: autoComplete,
231
+ copyIconStyles: copyIconStyles,
230
232
  disabled: disabled,
233
+ enableCopy: enableCopy,
231
234
  inputMode: inputMode,
232
- mask: mask,
233
- maxLength: maxLength,
234
- password: password,
235
235
  placeholder: placeholder,
236
236
  readOnly: readOnly,
237
237
  style: style,
238
238
  targetId: id,
239
239
  title: title,
240
- transform: transform,
241
240
  validateOnChange: validateOnChange,
242
- validation: validation,
243
241
  value: value
244
242
  }, bt, elementRef, valueRef);
245
243
  (0, $1b6d06f13820d117$export$b6487193f4d880e0)('ready', element, onReady);
@@ -252,9 +250,8 @@ const $098244fc1ecf3b22$var$TextElementC = ({ 'aria-label': ariaLabel, autoCompl
252
250
  ref: wrapperRef
253
251
  });
254
252
  };
255
- const $098244fc1ecf3b22$export$764077542c4bf9bd = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(// eslint-disable-next-line get-off-my-lawn/prefer-arrow-functions
256
- function TextElement(props, ref) {
257
- return /*#__PURE__*/ (0, $gb0K4$jsx)($098244fc1ecf3b22$var$TextElementC, {
253
+ const $b04bbbda03b8923f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(function CardExpirationDateElement(props, ref) {
254
+ return /*#__PURE__*/ (0, $gb0K4$jsx)($b04bbbda03b8923f$var$CardExpirationDateElementC, {
258
255
  ...props,
259
256
  elementRef: ref
260
257
  });
@@ -308,11 +305,12 @@ const $c9d0638264a6246e$export$a2311b18160d2f3f = /*#__PURE__*/ (0, $gb0K4$react
308
305
 
309
306
 
310
307
 
311
- const $b04bbbda03b8923f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
308
+ const $6f922196262b492d$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
312
309
  const wrapperRef = (0, $gb0K4$useRef)(null);
313
- const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
310
+ const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
314
311
  'aria-label': ariaLabel,
315
312
  autoComplete: autoComplete,
313
+ cardBrand: cardBrand,
316
314
  copyIconStyles: copyIconStyles,
317
315
  disabled: disabled,
318
316
  enableCopy: enableCopy,
@@ -335,8 +333,8 @@ const $b04bbbda03b8923f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLa
335
333
  ref: wrapperRef
336
334
  });
337
335
  };
338
- const $b04bbbda03b8923f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(function CardExpirationDateElement(props, ref) {
339
- return /*#__PURE__*/ (0, $gb0K4$jsx)($b04bbbda03b8923f$var$CardExpirationDateElementC, {
336
+ const $6f922196262b492d$export$36d668a024913c87 = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(function CardVerificationCodeElement(props, ref) {
337
+ return /*#__PURE__*/ (0, $gb0K4$jsx)($6f922196262b492d$var$CardVerificationCodeElementC, {
340
338
  ...props,
341
339
  elementRef: ref
342
340
  });
@@ -347,22 +345,49 @@ const $b04bbbda03b8923f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, $gb0K4$react
347
345
 
348
346
 
349
347
 
350
- const $6f922196262b492d$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, title: title, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
348
+ const $b1b4bfddfa231c63$var$CopyButtonElementC = ({ bt: bt, elementRef: elementRef, id: id, text: text, onClick: onClick, style: style, valueRef: valueRef })=>{
351
349
  const wrapperRef = (0, $gb0K4$useRef)(null);
352
- const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
350
+ const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'copyButton', wrapperRef, {
351
+ targetId: id,
352
+ style: style,
353
+ text: text
354
+ }, bt, elementRef, valueRef);
355
+ (0, $1b6d06f13820d117$export$b6487193f4d880e0)('click', element, onClick);
356
+ return /*#__PURE__*/ (0, $gb0K4$jsx)("div", {
357
+ id: id,
358
+ ref: wrapperRef
359
+ });
360
+ };
361
+ const $b1b4bfddfa231c63$export$6b67f0b47b983f4f = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(function CardNumberElement(props, ref) {
362
+ return /*#__PURE__*/ (0, $gb0K4$jsx)($b1b4bfddfa231c63$var$CopyButtonElementC, {
363
+ ...props,
364
+ elementRef: ref
365
+ });
366
+ });
367
+
368
+
369
+
370
+
371
+
372
+
373
+ const $098244fc1ecf3b22$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, title: title, transform: transform, validateOnChange: validateOnChange, validation: validation, value: value, valueRef: valueRef })=>{
374
+ const wrapperRef = (0, $gb0K4$useRef)(null);
375
+ const element = (0, $001f9ef7a572da43$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
353
376
  'aria-label': ariaLabel,
354
377
  autoComplete: autoComplete,
355
- cardBrand: cardBrand,
356
- copyIconStyles: copyIconStyles,
357
378
  disabled: disabled,
358
- enableCopy: enableCopy,
359
379
  inputMode: inputMode,
380
+ mask: mask,
381
+ maxLength: maxLength,
382
+ password: password,
360
383
  placeholder: placeholder,
361
384
  readOnly: readOnly,
362
385
  style: style,
363
386
  targetId: id,
364
387
  title: title,
388
+ transform: transform,
365
389
  validateOnChange: validateOnChange,
390
+ validation: validation,
366
391
  value: value
367
392
  }, bt, elementRef, valueRef);
368
393
  (0, $1b6d06f13820d117$export$b6487193f4d880e0)('ready', element, onReady);
@@ -375,8 +400,9 @@ const $6f922196262b492d$var$CardVerificationCodeElementC = ({ 'aria-label': aria
375
400
  ref: wrapperRef
376
401
  });
377
402
  };
378
- const $6f922196262b492d$export$36d668a024913c87 = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(function CardVerificationCodeElement(props, ref) {
379
- return /*#__PURE__*/ (0, $gb0K4$jsx)($6f922196262b492d$var$CardVerificationCodeElementC, {
403
+ const $098244fc1ecf3b22$export$764077542c4bf9bd = /*#__PURE__*/ (0, $gb0K4$react).forwardRef(// eslint-disable-next-line get-off-my-lawn/prefer-arrow-functions
404
+ function TextElement(props, ref) {
405
+ return /*#__PURE__*/ (0, $gb0K4$jsx)($098244fc1ecf3b22$var$TextElementC, {
380
406
  ...props,
381
407
  elementRef: ref
382
408
  });
@@ -390,4 +416,4 @@ var $17e03523eeef3efb$exports = {};
390
416
 
391
417
 
392
418
 
393
- export {$8fc858ffa1007a27$re_export$DEFAULT_CARD_TYPES as DEFAULT_CARD_TYPES, $8fc858ffa1007a27$re_export$AMERICAN_EXPRESS as AMERICAN_EXPRESS, $8fc858ffa1007a27$re_export$DINERS_CLUB as DINERS_CLUB, $8fc858ffa1007a27$re_export$DISCOVER as DISCOVER, $8fc858ffa1007a27$re_export$ELO as ELO, $8fc858ffa1007a27$re_export$HIPER as HIPER, $8fc858ffa1007a27$re_export$HIPERCARD as HIPERCARD, $8fc858ffa1007a27$re_export$JCB as JCB, $8fc858ffa1007a27$re_export$MAESTRO as MAESTRO, $8fc858ffa1007a27$re_export$MASTERCARD as MASTERCARD, $8fc858ffa1007a27$re_export$MIR as MIR, $8fc858ffa1007a27$re_export$UNION_PAY as UNION_PAY, $8fc858ffa1007a27$re_export$VISA as VISA, $af3ff746464f54fa$export$8855c0c49ada8fa3 as useBasisTheory, $45f18da36523d589$export$e61fbf0ee83adc05 as BasisTheoryProvider, $22a85849b67e3ab0$export$642653cabb64aed9 as CardElement, $098244fc1ecf3b22$export$764077542c4bf9bd as TextElement, $c9d0638264a6246e$export$a2311b18160d2f3f as CardNumberElement, $b04bbbda03b8923f$export$d5128efc3cebc889 as CardExpirationDateElement, $6f922196262b492d$export$36d668a024913c87 as CardVerificationCodeElement};
419
+ export {$8fc858ffa1007a27$re_export$DEFAULT_CARD_TYPES as DEFAULT_CARD_TYPES, $8fc858ffa1007a27$re_export$AMERICAN_EXPRESS as AMERICAN_EXPRESS, $8fc858ffa1007a27$re_export$DINERS_CLUB as DINERS_CLUB, $8fc858ffa1007a27$re_export$DISCOVER as DISCOVER, $8fc858ffa1007a27$re_export$ELO as ELO, $8fc858ffa1007a27$re_export$HIPER as HIPER, $8fc858ffa1007a27$re_export$HIPERCARD as HIPERCARD, $8fc858ffa1007a27$re_export$JCB as JCB, $8fc858ffa1007a27$re_export$MAESTRO as MAESTRO, $8fc858ffa1007a27$re_export$MASTERCARD as MASTERCARD, $8fc858ffa1007a27$re_export$MIR as MIR, $8fc858ffa1007a27$re_export$UNION_PAY as UNION_PAY, $8fc858ffa1007a27$re_export$VISA as VISA, $af3ff746464f54fa$export$8855c0c49ada8fa3 as useBasisTheory, $45f18da36523d589$export$e61fbf0ee83adc05 as BasisTheoryProvider, $22a85849b67e3ab0$export$642653cabb64aed9 as CardElement, $b04bbbda03b8923f$export$d5128efc3cebc889 as CardExpirationDateElement, $c9d0638264a6246e$export$a2311b18160d2f3f as CardNumberElement, $6f922196262b492d$export$36d668a024913c87 as CardVerificationCodeElement, $b1b4bfddfa231c63$export$6b67f0b47b983f4f as CopyButtonElement, $098244fc1ecf3b22$export$764077542c4bf9bd as TextElement};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-theory/react-elements",
3
- "version": "2.0.0",
3
+ "version": "2.2.0",
4
4
  "repository": "https://github.com/basis-theory/react-elements",
5
5
  "license": "Apache-2.0",
6
6
  "author": {
@@ -30,7 +30,7 @@
30
30
  "tag": "latest"
31
31
  },
32
32
  "dependencies": {
33
- "@basis-theory/web-elements": "2.0.0"
33
+ "@basis-theory/web-elements": "2.2.0"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
package/types/index.d.ts CHANGED
@@ -138,7 +138,7 @@ export type DataElementReference = {
138
138
  elementId: string;
139
139
  path: string;
140
140
  };
141
- export type EventType = 'ready' | 'change' | 'focus' | 'blur' | 'keydown';
141
+ export type EventType = 'ready' | 'change' | 'focus' | 'blur' | 'keydown' | 'click';
142
142
  export interface BaseEvent<T extends EventType> {
143
143
  type: T;
144
144
  }
@@ -160,12 +160,14 @@ export type InputBlurEvent = BaseEvent<'blur'> & Targeted;
160
160
  export type InputKeydownEvent = BaseEvent<'keydown'> & Targeted & {
161
161
  key: ListenableKey;
162
162
  } & Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey'>;
163
+ export type ClickEvent = BaseEvent<'click'> & Targeted;
163
164
  export type BaseElementEvents = ReadyEvent | InputFocusEvent | InputBlurEvent | InputKeydownEvent;
164
165
  export type TextElementEvents = BaseElementEvents | ChangeEvent;
165
166
  export type CardElementEvents = BaseElementEvents | CardChangeEvent;
166
167
  export type CardNumberElementEvents = BaseElementEvents | CardChangeEvent;
167
168
  export type CardExpirationDateElementEvents = BaseElementEvents | ChangeEvent;
168
169
  export type CardVerificationCodeElementEvents = BaseElementEvents | ChangeEvent;
170
+ export type CopyButtonElementEvents = BaseElementEvents | ClickEvent;
169
171
  /**
170
172
  * Utility type that helps find a Union type based on a `type` property
171
173
  */
@@ -176,14 +178,20 @@ export type ElementEventListener<Events, Type> = (event: FindByType<Events, Type
176
178
  export interface Subscription {
177
179
  unsubscribe(): void;
178
180
  }
179
- export const SAFE_CSS_PROPERTIES: readonly ["backgroundColor", "color", "fontFamily", "fontSize", "fontSmooth", "fontStyle", "fontVariant", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "padding", "textDecoration", "textShadow", "textTransform"];
181
+ export const SAFE_CSS_PROPERTIES: readonly ["backgroundColor", "color", "fontFamily", "fontSize", "fontSmooth", "fontStyle", "fontVariant", "fontWeight", "letterSpacing", "lineHeight", "padding", "textAlign", "textDecoration", "textShadow", "textTransform"];
182
+ export const BUTTON_CSS_PROPERTIES: readonly ["alignItems", "backgroundColor", "border", "borderBottom", "borderColor", "borderLeft", "borderRadius", "borderRight", "borderStyle", "borderTop", "borderWidth", "boxShadow", "color", "cursor", "display", "fontFamily", "fontSize", "fontWeight", "gap", "height", "justifyContent", "letterSpacing", "lineHeight", "margin", "maxHeight", "maxWidth", "minHeight", "minWidth", "opacity", "outline", "padding", "textAlign", "textTransform", "transform", "transition", "width"];
180
183
  export type SafeCSSProperty = (typeof SAFE_CSS_PROPERTIES)[number];
184
+ export type ButtonCSSProperty = (typeof BUTTON_CSS_PROPERTIES)[number];
181
185
  export const SAFE_CSS_PROPERTIES_ALTERNATES: Partial<Record<SafeCSSProperty, string[]>>;
182
186
  export const SAFE_CSS_PROPERTIES_WITH_ALTERNATES: string[];
183
187
  export type SafeStyle = Pick<Properties, SafeCSSProperty>;
184
188
  export const CARD_ELEMENT_STYLE_VARIANT_SELECTORS: readonly [":hover", ":focus", ":read-only", "::placeholder", "::selection", ":disabled"];
189
+ export const BUTTON_ELEMENT_STYLE_VARIANT_SELECTORS: readonly [":hover", ":focus", ":active"];
185
190
  export type CardElementStyleVariantSelector = (typeof CARD_ELEMENT_STYLE_VARIANT_SELECTORS)[number];
191
+ export type ButtonElementStyleVariantSelector = (typeof BUTTON_ELEMENT_STYLE_VARIANT_SELECTORS)[number];
192
+ export type ButtonStyle = Pick<Properties, ButtonCSSProperty>;
186
193
  export type CardElementStyleVariantStyle = SafeStyle & Partial<Record<CardElementStyleVariantSelector, SafeStyle>>;
194
+ export type ButtonElementStyleVariantStyle = ButtonStyle & Partial<Record<ButtonElementStyleVariantSelector, ButtonStyle>>;
187
195
  export const CARD_ELEMENT_STYLE_VARIANTS: readonly ["base", "container", "complete", "invalid", "empty"];
188
196
  export const CARD_ELEMENT_STYLE_FONTS_ATTR: "fonts";
189
197
  export type CardElementStyleVariant = (typeof CARD_ELEMENT_STYLE_VARIANTS)[number];
@@ -192,16 +200,21 @@ type FontSource = string;
192
200
  export type FontSources = FontSource[];
193
201
  export type Fonts = Record<CardElementStyleFontAttr, FontSources>;
194
202
  export type CardElementStyle = Partial<Record<CardElementStyleVariant, CardElementStyleVariantStyle> & Fonts>;
195
- export type ElementStyle = CardElementStyle;
203
+ export const BUTTON_ELEMENT_STYLE_VARIANTS: readonly ["base", "container"];
204
+ export type ButtonElementStyleVariant = (typeof BUTTON_ELEMENT_STYLE_VARIANTS)[number];
205
+ export type ButtonElementStyle = Partial<Record<ButtonElementStyleVariant, ButtonElementStyleVariantStyle> & Fonts>;
206
+ export type CopyButtonElementStyle = ButtonElementStyle;
207
+ export type ElementStyle = CardElementStyle | CopyButtonElementStyle;
196
208
  export type CopyIconStyles = {
197
209
  size?: string;
198
210
  color?: string;
199
211
  successColor?: string;
200
212
  };
201
- export const ELEMENTS_TYPES: readonly ["card", "cardExpirationDate", "cardNumber", "cardVerificationCode", "data", "text"];
213
+ export const ELEMENTS_TYPES: readonly ["card", "cardExpirationDate", "cardNumber", "cardVerificationCode", "copyButton", "data", "text"];
202
214
  export type ElementType = (typeof ELEMENTS_TYPES)[number];
203
215
  export interface ElementInternalOptions {
204
216
  apiKey: string | undefined;
217
+ customDomain: string | undefined;
205
218
  baseUrl: string;
206
219
  type: ElementType;
207
220
  debug: boolean | undefined;
@@ -242,6 +255,7 @@ export interface SanitizedElementOptions {
242
255
  skipLuhnValidation?: boolean;
243
256
  style?: ElementStyle;
244
257
  targetId?: string;
258
+ text?: string;
245
259
  title?: string;
246
260
  transform?: [RegExp, string] | null;
247
261
  validateOnChange?: boolean;
@@ -308,6 +322,12 @@ export type CreateCardVerificationCodeElementOptions = CustomizableElementOption
308
322
  value?: string;
309
323
  };
310
324
  export type UpdateCardVerificationCodeElementOptions = Omit<CreateCardVerificationCodeElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
325
+ export type CreateCopyButtonElementOptions = Pick<ElementOptions, 'targetId' | 'title' | 'disabled'> & {
326
+ id?: string;
327
+ style?: CopyButtonElementStyle;
328
+ text?: string;
329
+ };
330
+ export type UpdateCopyButtonElementOptions = Omit<CreateCopyButtonElementOptions, 'targetId'>;
311
331
  export interface BinDetails {
312
332
  cardBrand?: string;
313
333
  type?: string;
@@ -621,6 +641,9 @@ export type ICardVerificationCodeElement = BaseElement<UpdateCardVerificationCod
621
641
  setValueRef(value: ICardVerificationCodeElement): void;
622
642
  setValue(value: DataElementReference): void;
623
643
  };
644
+ export type ICopyButtonElement = BaseElement<UpdateCopyButtonElementOptions, CopyButtonElementEvents> & {
645
+ setValueRef(value: ITextElement | ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement): void;
646
+ };
624
647
  export type ElementWrapper<T extends BaseElement<any, any> = BaseElement<any, any>> = {
625
648
  element: T;
626
649
  method?: string;
@@ -628,7 +651,7 @@ export type ElementWrapper<T extends BaseElement<any, any> = BaseElement<any, an
628
651
  format: string;
629
652
  };
630
653
  };
631
- export type ElementValue = ITextElement | ICardElement | ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement | ElementWrapper;
654
+ export type ElementValue = ITextElement | ICardElement | ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement | ICopyButtonElement | ElementWrapper;
632
655
  export interface BasisTheoryElements {
633
656
  tokens: Tokens;
634
657
  proxy: Proxy;
@@ -642,9 +665,10 @@ export interface BasisTheoryElements {
642
665
  createElement(type: 'cardNumber', options: CreateCardNumberElementOptions): ICardNumberElement;
643
666
  createElement(type: 'cardExpirationDate', options: CreateCardExpirationDateElementOptions): ICardExpirationDateElement;
644
667
  createElement(type: 'cardVerificationCode', options: CreateCardVerificationCodeElementOptions): ICardVerificationCodeElement;
668
+ createElement(type: 'copyButton', options: CreateCopyButtonElementOptions): ICopyButtonElement;
645
669
  }
646
670
  export interface BasisTheoryElementsInternal extends BasisTheoryElements {
647
- init: (apiKey: string | undefined, elementsBaseUrl: string, elementsUseNgApi: boolean | undefined, elementsUseSameOriginApi: boolean | undefined, disableTelemetry: boolean | undefined, debug: boolean | undefined, useUat: boolean | undefined, useNetworkCheck: boolean | undefined) => Promise<BasisTheoryElements>;
671
+ init: (apiKey: string | undefined, elementsBaseUrl: string, elementsUseNgApi: boolean | undefined, elementsUseSameOriginApi: boolean | undefined, disableTelemetry: boolean | undefined, debug: boolean | undefined, useUat: boolean | undefined, useNetworkCheck: boolean | undefined, customDomain: string | undefined) => Promise<BasisTheoryElements>;
648
672
  hasElement: (payload: unknown) => boolean;
649
673
  }
650
674
  declare global {
@@ -652,6 +676,18 @@ declare global {
652
676
  BasisTheoryElements?: BasisTheoryElementsInternal;
653
677
  }
654
678
  }
679
+ export class BasisTheoryValidationError<Details = Record<string, unknown>> extends Error {
680
+ readonly details: Details;
681
+ /**
682
+ * @deprecated use {@link details}
683
+ */
684
+ readonly validation?: FieldError[] | undefined;
685
+ constructor(message: string, details: Details,
686
+ /**
687
+ * @deprecated use {@link details}
688
+ */
689
+ validation?: FieldError[] | undefined);
690
+ }
655
691
  export interface BasisTheoryInitOptions {
656
692
  _devMode?: boolean;
657
693
  disableTelemetry?: boolean;
@@ -659,6 +695,7 @@ export interface BasisTheoryInitOptions {
659
695
  useUat?: boolean;
660
696
  debug?: boolean;
661
697
  useNetworkCheck?: boolean;
698
+ customDomain?: string;
662
699
  }
663
700
  export const basistheory: (apiKey: string, options?: BasisTheoryInitOptions) => Promise<BasisTheoryElements | undefined>;
664
701
  export class BasisTheoryApiError extends Error {
@@ -667,18 +704,6 @@ export class BasisTheoryApiError extends Error {
667
704
  readonly _debug?: Record<string, unknown> | undefined;
668
705
  constructor(message: string, status: number, data?: unknown | undefined, _debug?: Record<string, unknown> | undefined);
669
706
  }
670
- export class BasisTheoryValidationError<Details = Record<string, unknown>> extends Error {
671
- readonly details: Details;
672
- /**
673
- * @deprecated use {@link details}
674
- */
675
- readonly validation?: FieldError[] | undefined;
676
- constructor(message: string, details: Details,
677
- /**
678
- * @deprecated use {@link details}
679
- */
680
- validation?: FieldError[] | undefined);
681
- }
682
707
  export class HttpClientError extends Error {
683
708
  readonly status: number;
684
709
  readonly data?: unknown;
@@ -726,39 +751,29 @@ export interface CardElementProps {
726
751
  value?: CardElementValue<'static'>;
727
752
  }
728
753
  export const CardElement: React.ForwardRefExoticComponent<CardElementProps & React.RefAttributes<ICardElement>>;
729
- interface BaseTextElementProps {
754
+ export interface CardExpirationDateElementProps {
730
755
  'aria-label'?: string;
731
- autoComplete?: CreateTextElementOptions['autoComplete'];
756
+ autoComplete?: CreateCardExpirationDateElementOptions['autoComplete'];
732
757
  bt?: BasisTheoryElements;
758
+ copyIconStyles?: CopyIconStyles;
733
759
  disabled?: boolean;
760
+ enableCopy?: boolean;
734
761
  id: string;
735
762
  inputMode?: `${InputMode}`;
736
- maxLength?: HTMLInputElement['maxLength'];
737
- onBlur?: ElementEventListener<TextElementEvents, 'blur'>;
738
- onChange?: ElementEventListener<TextElementEvents, 'change'>;
739
- onFocus?: ElementEventListener<TextElementEvents, 'focus'>;
740
- onKeyDown?: ElementEventListener<TextElementEvents, 'keydown'>;
741
- onReady?: ElementEventListener<TextElementEvents, 'ready'>;
763
+ onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
764
+ onChange?: ElementEventListener<CardExpirationDateElementEvents, 'change'>;
765
+ onFocus?: ElementEventListener<CardExpirationDateElementEvents, 'focus'>;
766
+ onKeyDown?: ElementEventListener<CardExpirationDateElementEvents, 'keydown'>;
767
+ onReady?: ElementEventListener<CardExpirationDateElementEvents, 'ready'>;
742
768
  placeholder?: string;
743
769
  readOnly?: boolean;
744
770
  style?: ElementStyle;
745
771
  title?: string;
746
- transform?: RegExp | [RegExp, string?];
747
772
  validateOnChange?: boolean;
748
- validation?: RegExp;
749
- value?: string;
750
- valueRef?: MutableRefObject<ITextElement | null>;
751
- }
752
- interface MaskedTextElementProps extends BaseTextElementProps {
753
- mask?: (RegExp | string)[];
754
- password?: false;
755
- }
756
- interface PasswordTextElementProps extends BaseTextElementProps {
757
- mask?: never;
758
- password: true;
773
+ value?: CardExpirationDateValue<'static'> | string;
774
+ valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
759
775
  }
760
- export type TextElementProps = MaskedTextElementProps | PasswordTextElementProps;
761
- export const TextElement: React.ForwardRefExoticComponent<TextElementProps & React.RefAttributes<ITextElement>>;
776
+ export const CardExpirationDateElement: React.ForwardRefExoticComponent<CardExpirationDateElementProps & React.RefAttributes<ICardExpirationDateElement>>;
762
777
  export interface CardNumberElementProps {
763
778
  'aria-label'?: string;
764
779
  autoComplete?: CreateCardNumberElementOptions['autoComplete'];
@@ -786,50 +801,69 @@ export interface CardNumberElementProps {
786
801
  valueRef?: MutableRefObject<ICardNumberElement | null>;
787
802
  }
788
803
  export const CardNumberElement: React.ForwardRefExoticComponent<CardNumberElementProps & React.RefAttributes<ICardNumberElement>>;
789
- export interface CardExpirationDateElementProps {
804
+ export interface CardVerificationCodeElementProps {
790
805
  'aria-label'?: string;
791
- autoComplete?: CreateCardExpirationDateElementOptions['autoComplete'];
806
+ autoComplete?: CreateCardVerificationCodeElementOptions['autoComplete'];
792
807
  bt?: BasisTheoryElements;
808
+ cardBrand?: Brand | string;
793
809
  copyIconStyles?: CopyIconStyles;
794
810
  disabled?: boolean;
795
811
  enableCopy?: boolean;
796
812
  id: string;
797
813
  inputMode?: `${InputMode}`;
798
- onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
799
- onChange?: ElementEventListener<CardExpirationDateElementEvents, 'change'>;
800
- onFocus?: ElementEventListener<CardExpirationDateElementEvents, 'focus'>;
801
- onKeyDown?: ElementEventListener<CardExpirationDateElementEvents, 'keydown'>;
802
- onReady?: ElementEventListener<CardExpirationDateElementEvents, 'ready'>;
814
+ onBlur?: ElementEventListener<CardVerificationCodeElementEvents, 'blur'>;
815
+ onChange?: ElementEventListener<CardVerificationCodeElementEvents, 'change'>;
816
+ onFocus?: ElementEventListener<CardVerificationCodeElementEvents, 'focus'>;
817
+ onKeyDown?: ElementEventListener<CardVerificationCodeElementEvents, 'keydown'>;
818
+ onReady?: ElementEventListener<CardVerificationCodeElementEvents, 'ready'>;
803
819
  placeholder?: string;
804
820
  readOnly?: boolean;
805
821
  style?: ElementStyle;
806
822
  title?: string;
807
823
  validateOnChange?: boolean;
808
- value?: CardExpirationDateValue<'static'> | string;
809
- valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
824
+ value?: string;
825
+ valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
810
826
  }
811
- export const CardExpirationDateElement: React.ForwardRefExoticComponent<CardExpirationDateElementProps & React.RefAttributes<ICardExpirationDateElement>>;
812
- export interface CardVerificationCodeElementProps {
827
+ export const CardVerificationCodeElement: React.ForwardRefExoticComponent<CardVerificationCodeElementProps & React.RefAttributes<ICardVerificationCodeElement>>;
828
+ export interface CopyButtonElementProps {
829
+ bt?: BasisTheoryElements;
830
+ id: string;
831
+ onClick?: ElementEventListener<CopyButtonElementEvents, 'click'>;
832
+ text?: string;
833
+ style?: CopyButtonElementStyle;
834
+ valueRef?: MutableRefObject<ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement | null>;
835
+ }
836
+ export const CopyButtonElement: React.ForwardRefExoticComponent<CopyButtonElementProps & React.RefAttributes<ICopyButtonElement>>;
837
+ interface BaseTextElementProps {
813
838
  'aria-label'?: string;
814
- autoComplete?: CreateCardVerificationCodeElementOptions['autoComplete'];
839
+ autoComplete?: CreateTextElementOptions['autoComplete'];
815
840
  bt?: BasisTheoryElements;
816
- cardBrand?: Brand | string;
817
- copyIconStyles?: CopyIconStyles;
818
841
  disabled?: boolean;
819
- enableCopy?: boolean;
820
842
  id: string;
821
843
  inputMode?: `${InputMode}`;
822
- onBlur?: ElementEventListener<CardVerificationCodeElementEvents, 'blur'>;
823
- onChange?: ElementEventListener<CardVerificationCodeElementEvents, 'change'>;
824
- onFocus?: ElementEventListener<CardVerificationCodeElementEvents, 'focus'>;
825
- onKeyDown?: ElementEventListener<CardVerificationCodeElementEvents, 'keydown'>;
826
- onReady?: ElementEventListener<CardVerificationCodeElementEvents, 'ready'>;
844
+ maxLength?: HTMLInputElement['maxLength'];
845
+ onBlur?: ElementEventListener<TextElementEvents, 'blur'>;
846
+ onChange?: ElementEventListener<TextElementEvents, 'change'>;
847
+ onFocus?: ElementEventListener<TextElementEvents, 'focus'>;
848
+ onKeyDown?: ElementEventListener<TextElementEvents, 'keydown'>;
849
+ onReady?: ElementEventListener<TextElementEvents, 'ready'>;
827
850
  placeholder?: string;
828
851
  readOnly?: boolean;
829
852
  style?: ElementStyle;
830
853
  title?: string;
854
+ transform?: RegExp | [RegExp, string?];
831
855
  validateOnChange?: boolean;
856
+ validation?: RegExp;
832
857
  value?: string;
833
- valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
858
+ valueRef?: MutableRefObject<ITextElement | null>;
834
859
  }
835
- export const CardVerificationCodeElement: React.ForwardRefExoticComponent<CardVerificationCodeElementProps & React.RefAttributes<ICardVerificationCodeElement>>;
860
+ interface MaskedTextElementProps extends BaseTextElementProps {
861
+ mask?: (RegExp | string)[];
862
+ password?: false;
863
+ }
864
+ interface PasswordTextElementProps extends BaseTextElementProps {
865
+ mask?: never;
866
+ password: true;
867
+ }
868
+ export type TextElementProps = MaskedTextElementProps | PasswordTextElementProps;
869
+ export const TextElement: React.ForwardRefExoticComponent<TextElementProps & React.RefAttributes<ITextElement>>;