@basis-theory/react-elements 2.1.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 +53 -44
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.1.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.1.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
@@ -751,39 +751,29 @@ export interface CardElementProps {
751
751
  value?: CardElementValue<'static'>;
752
752
  }
753
753
  export const CardElement: React.ForwardRefExoticComponent<CardElementProps & React.RefAttributes<ICardElement>>;
754
- interface BaseTextElementProps {
754
+ export interface CardExpirationDateElementProps {
755
755
  'aria-label'?: string;
756
- autoComplete?: CreateTextElementOptions['autoComplete'];
756
+ autoComplete?: CreateCardExpirationDateElementOptions['autoComplete'];
757
757
  bt?: BasisTheoryElements;
758
+ copyIconStyles?: CopyIconStyles;
758
759
  disabled?: boolean;
760
+ enableCopy?: boolean;
759
761
  id: string;
760
762
  inputMode?: `${InputMode}`;
761
- maxLength?: HTMLInputElement['maxLength'];
762
- onBlur?: ElementEventListener<TextElementEvents, 'blur'>;
763
- onChange?: ElementEventListener<TextElementEvents, 'change'>;
764
- onFocus?: ElementEventListener<TextElementEvents, 'focus'>;
765
- onKeyDown?: ElementEventListener<TextElementEvents, 'keydown'>;
766
- 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'>;
767
768
  placeholder?: string;
768
769
  readOnly?: boolean;
769
770
  style?: ElementStyle;
770
771
  title?: string;
771
- transform?: RegExp | [RegExp, string?];
772
772
  validateOnChange?: boolean;
773
- validation?: RegExp;
774
- value?: string;
775
- valueRef?: MutableRefObject<ITextElement | null>;
776
- }
777
- interface MaskedTextElementProps extends BaseTextElementProps {
778
- mask?: (RegExp | string)[];
779
- password?: false;
780
- }
781
- interface PasswordTextElementProps extends BaseTextElementProps {
782
- mask?: never;
783
- password: true;
773
+ value?: CardExpirationDateValue<'static'> | string;
774
+ valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
784
775
  }
785
- export type TextElementProps = MaskedTextElementProps | PasswordTextElementProps;
786
- export const TextElement: React.ForwardRefExoticComponent<TextElementProps & React.RefAttributes<ITextElement>>;
776
+ export const CardExpirationDateElement: React.ForwardRefExoticComponent<CardExpirationDateElementProps & React.RefAttributes<ICardExpirationDateElement>>;
787
777
  export interface CardNumberElementProps {
788
778
  'aria-label'?: string;
789
779
  autoComplete?: CreateCardNumberElementOptions['autoComplete'];
@@ -811,50 +801,69 @@ export interface CardNumberElementProps {
811
801
  valueRef?: MutableRefObject<ICardNumberElement | null>;
812
802
  }
813
803
  export const CardNumberElement: React.ForwardRefExoticComponent<CardNumberElementProps & React.RefAttributes<ICardNumberElement>>;
814
- export interface CardExpirationDateElementProps {
804
+ export interface CardVerificationCodeElementProps {
815
805
  'aria-label'?: string;
816
- autoComplete?: CreateCardExpirationDateElementOptions['autoComplete'];
806
+ autoComplete?: CreateCardVerificationCodeElementOptions['autoComplete'];
817
807
  bt?: BasisTheoryElements;
808
+ cardBrand?: Brand | string;
818
809
  copyIconStyles?: CopyIconStyles;
819
810
  disabled?: boolean;
820
811
  enableCopy?: boolean;
821
812
  id: string;
822
813
  inputMode?: `${InputMode}`;
823
- onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
824
- onChange?: ElementEventListener<CardExpirationDateElementEvents, 'change'>;
825
- onFocus?: ElementEventListener<CardExpirationDateElementEvents, 'focus'>;
826
- onKeyDown?: ElementEventListener<CardExpirationDateElementEvents, 'keydown'>;
827
- 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'>;
828
819
  placeholder?: string;
829
820
  readOnly?: boolean;
830
821
  style?: ElementStyle;
831
822
  title?: string;
832
823
  validateOnChange?: boolean;
833
- value?: CardExpirationDateValue<'static'> | string;
834
- valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
824
+ value?: string;
825
+ valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
835
826
  }
836
- export const CardExpirationDateElement: React.ForwardRefExoticComponent<CardExpirationDateElementProps & React.RefAttributes<ICardExpirationDateElement>>;
837
- 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 {
838
838
  'aria-label'?: string;
839
- autoComplete?: CreateCardVerificationCodeElementOptions['autoComplete'];
839
+ autoComplete?: CreateTextElementOptions['autoComplete'];
840
840
  bt?: BasisTheoryElements;
841
- cardBrand?: Brand | string;
842
- copyIconStyles?: CopyIconStyles;
843
841
  disabled?: boolean;
844
- enableCopy?: boolean;
845
842
  id: string;
846
843
  inputMode?: `${InputMode}`;
847
- onBlur?: ElementEventListener<CardVerificationCodeElementEvents, 'blur'>;
848
- onChange?: ElementEventListener<CardVerificationCodeElementEvents, 'change'>;
849
- onFocus?: ElementEventListener<CardVerificationCodeElementEvents, 'focus'>;
850
- onKeyDown?: ElementEventListener<CardVerificationCodeElementEvents, 'keydown'>;
851
- 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'>;
852
850
  placeholder?: string;
853
851
  readOnly?: boolean;
854
852
  style?: ElementStyle;
855
853
  title?: string;
854
+ transform?: RegExp | [RegExp, string?];
856
855
  validateOnChange?: boolean;
856
+ validation?: RegExp;
857
857
  value?: string;
858
- valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
858
+ valueRef?: MutableRefObject<ITextElement | null>;
859
859
  }
860
- 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>>;