@adyen/adyen-web 5.8.0 → 5.11.0

package/dist/types/components/AmazonPay/types.d.ts

@@ -10,9 +10,21 @@ declare global {
 declare type ButtonColor = 'Gold' | 'LightGray' | 'DarkGray';
 declare type Placement = 'Home' | 'Product' | 'Cart' | 'Checkout' | 'Other';
 declare type ProductType = 'PayOnly' | 'PayAndShip';
+declare type ChargePermissionType = 'OneTime' | 'Recurring';
+declare type FrequencyUnit = 'Year' | 'Month' | 'Week' | 'Day' | 'Variable';
 export declare type Currency = 'EUR' | 'GBP' | 'USD';
 export declare type Region = 'EU' | 'UK' | 'US';
 export declare type SupportedLocale = typeof SUPPORTED_LOCALES_EU[number] | typeof SUPPORTED_LOCALES_US[number];
+export interface RecurringMetadata {
+    frequency: {
+        unit: string;
+        value: FrequencyUnit;
+    };
+    amount: {
+        amount: string;
+        currencyCode: Currency;
+    };
+}
 export interface AmazonPayConfiguration {
     merchantId?: string;
     publicKeyId?: string;
@@ -26,6 +38,7 @@ export interface AmazonPayElementProps {
     amount?: PaymentAmount;
     buttonColor?: ButtonColor;
     cancelUrl?: string;
+    chargePermissionType?: ChargePermissionType;
     clientKey?: string;
     configuration?: AmazonPayConfiguration;
     currency?: Currency;
@@ -40,6 +53,7 @@ export interface AmazonPayElementProps {
     payButton?: any;
     placement?: Placement;
     productType?: ProductType;
+    recurringMetadata?: RecurringMetadata;
     region?: Region;
     returnUrl?: string;
     showChangePaymentDetailsButton: boolean;
@@ -59,6 +73,7 @@ export interface AmazonPayButtonProps {
     amazonRef: any;
     buttonColor?: ButtonColor;
     cancelUrl?: string;
+    chargePermissionType?: ChargePermissionType;
     clientKey?: string;
     configuration?: AmazonPayConfiguration;
     currency?: Currency;
@@ -69,6 +84,7 @@ export interface AmazonPayButtonProps {
     onError: (error: any, component: any) => void;
     placement?: Placement;
     productType?: ProductType;
+    recurringMetadata?: RecurringMetadata;
     ref: any;
     region?: Region;
     returnUrl?: string;
@@ -90,7 +106,9 @@ export interface OrderButtonProps {
     amazonCheckoutSessionId: string;
     amount: PaymentAmount;
     clientKey: string;
+    chargePermissionType?: ChargePermissionType;
     onError: (error: any, component: any) => void;
+    recurringMetadata: RecurringMetadata;
     ref: any;
     region: Region;
     returnUrl: string;
@@ -158,6 +176,7 @@ export declare type LedgerCurrencies = {
 };
 export interface PayloadJSON {
     addressDetails?: AddressDetails;
+    chargePermissionType?: ChargePermissionType;
     deliverySpecifications?: DeliverySpecifications;
     merchantMetadata?: MerchantMetadata;
     paymentDetails?: {
@@ -166,6 +185,7 @@ export interface PayloadJSON {
         presentmentCurrency: Currency;
         totalOrderAmount: ChargeAmount;
     };
+    recurringMetadata?: RecurringMetadata;
     storeId: string;
     webCheckoutDetails: {
         checkoutCancelUrl?: string;
@@ -183,10 +203,12 @@ export interface CheckoutDetailsRequest {
 }
 export interface UpdateAmazonCheckoutSessionRequest {
     amount: PaymentAmount;
+    chargePermissionType?: ChargePermissionType;
     checkoutCancelUrl?: string;
     checkoutResultReturnUrl: string;
     checkoutSessionId: string;
     publicKeyId: string;
+    recurringMetadata?: RecurringMetadata;
     region: Region;
 }
 export interface CheckoutSessionConfig {

package/dist/types/components/ApplePay/types.d.ts

@@ -83,7 +83,7 @@ export interface ApplePayElementProps extends UIElementProps {
     applicationData?: string;
     onClick?: (resolve: any, reject: any) => void;
     onAuthorized?: (resolve: any, reject: any, event: ApplePayJS.ApplePayPaymentAuthorizedEvent) => void;
-    onValidateMerchant?: (resolve: any, reject: any, event: ApplePayJS.ApplePayValidateMerchantEvent) => void;
+    onValidateMerchant?: (resolve: any, reject: any, validationURL: string) => void;
     /**
      * {@link https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778013-onpaymentmethodselected}
      * @param resolve(ApplePayPaymentMethodUpdate update) Completes the selection of a payment method with an update.

package/dist/types/components/Card/Bancontact.d.ts

@@ -5,6 +5,7 @@ declare class BancontactElement extends CardElement {
     protected static defaultProps: {
         brands: string[];
         onBinLookup: () => void;
+        showBrandsUnderCardNumber: boolean;
         SRConfig: {};
     };
     /**
@@ -22,6 +23,14 @@ declare class BancontactElement extends CardElement {
         countryCode: any;
         configuration: {
             socialSecurityNumberMode: import("./types").SocialSecurityMode;
+            merchantIdentifier?: string;
+            merchantOrigin?: string;
+            gatewayMerchantId?: string;
+            publicKeyId?: string;
+            region?: string;
+            merchantName?: string;
+            merchantId?: string;
+            intent?: string;
             koreanAuthenticationRequired?: boolean;
             icon?: string;
             brandsConfiguration?: import("./types").CardBrandsConfiguration;
@@ -35,6 +44,8 @@ declare class BancontactElement extends CardElement {
         };
         brand?: string;
         brands?: string[];
+        showBrandsUnderCardNumber?: boolean;
+        showBrandIcon?: boolean;
         enableStoreDetails?: boolean;
         hideCVC?: boolean;
         hasHolderName?: boolean;

package/dist/types/components/Card/Card.d.ts

@@ -6,6 +6,7 @@ export declare class CardElement extends UIElement<CardElementProps> {
     static type: string;
     protected static defaultProps: {
         onBinLookup: () => void;
+        showBrandsUnderCardNumber: boolean;
         SRConfig: {};
     };
     setComponentRef: (ref: any) => void;
@@ -17,6 +18,14 @@ export declare class CardElement extends UIElement<CardElementProps> {
         countryCode: any;
         configuration: {
             socialSecurityNumberMode: import("./types").SocialSecurityMode;
+            merchantIdentifier?: string;
+            merchantOrigin?: string;
+            gatewayMerchantId?: string;
+            publicKeyId?: string;
+            region?: string;
+            merchantName?: string;
+            merchantId?: string;
+            intent?: string;
             koreanAuthenticationRequired?: boolean;
             icon?: string;
             brandsConfiguration?: import("./types").CardBrandsConfiguration;
@@ -30,6 +39,8 @@ export declare class CardElement extends UIElement<CardElementProps> {
         };
         brand?: string;
         brands?: string[];
+        showBrandsUnderCardNumber?: boolean;
+        showBrandIcon?: boolean;
         enableStoreDetails?: boolean;
         hideCVC?: boolean;
         hasHolderName?: boolean;

package/dist/types/components/Card/components/CardInput/components/AvailableBrands/AvailableBrands.d.ts

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import './AvailableBrands.scss';
+import { BrandConfiguration } from '../../../../types';
+declare type AvailableBrands = Array<BrandConfiguration>;
+interface PaymentMethodBrandsProps {
+    brands: AvailableBrands;
+    activeBrand: string;
+}
+declare const AvailableBrands: ({ brands, activeBrand }: PaymentMethodBrandsProps) => h.JSX.Element;
+export default AvailableBrands;

package/dist/types/components/Card/components/CardInput/components/AvailableBrands/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AvailableBrands';

package/dist/types/components/Card/components/CardInput/components/CardFields.d.ts

@@ -1,3 +1,3 @@
 import { h } from 'preact';
 import { CardFieldsProps } from './types';
-export default function CardFields({ brand, brandsConfiguration, dualBrandingElements, dualBrandingChangeHandler, dualBrandingSelected, errors, focusedElement, hasCVC, cvcPolicy, expiryDatePolicy, onFocusField, showBrandIcon, valid }: CardFieldsProps): h.JSX.Element;
+export default function CardFields({ brand, brandsIcons, brandsConfiguration, dualBrandingElements, dualBrandingChangeHandler, dualBrandingSelected, errors, focusedElement, hasCVC, cvcPolicy, expiryDatePolicy, onFocusField, showBrandIcon, showBrandsUnderCardNumber, valid }: CardFieldsProps): h.JSX.Element;

package/dist/types/components/Card/components/CardInput/components/CardFieldsWrapper.d.ts

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-export declare const CardFieldsWrapper: ({ data, valid, errors, handleChangeFor, sfpState, setFocusOn, collateErrors, errorFieldId, cvcPolicy, focusedElement, hasInstallments, handleInstallments, showAmountsInInstallments, mergedSRErrors, moveFocus, showPanel, handleErrorPanelFocus, formData, formErrors, formValid, expiryDatePolicy, dualBrandSelectElements, extensions, selectedBrandValue, showKCP, showBrazilianSSN, socialSecurityNumber, handleOnStoreDetails, billingAddress, handleAddress, billingAddressRef, amount, billingAddressRequired, billingAddressRequiredFields, billingAddressAllowedCountries, brandsConfiguration, enableStoreDetails, hasCVC, hasHolderName, holderNameRequired, installmentOptions, placeholders, positionHolderNameOnTop, showBrandIcon }: {
+export declare const CardFieldsWrapper: ({ data, valid, errors, handleChangeFor, sfpState, setFocusOn, collateErrors, errorFieldId, cvcPolicy, focusedElement, hasInstallments, handleInstallments, showAmountsInInstallments, brandsIcons, mergedSRErrors, moveFocus, showPanel, handleErrorPanelFocus, formData, formErrors, formValid, expiryDatePolicy, dualBrandSelectElements, extensions, selectedBrandValue, showKCP, showBrazilianSSN, socialSecurityNumber, handleOnStoreDetails, billingAddress, handleAddress, billingAddressRef, amount, billingAddressRequired, billingAddressRequiredFields, billingAddressAllowedCountries, brandsConfiguration, enableStoreDetails, hasCVC, hasHolderName, holderNameRequired, installmentOptions, placeholders, positionHolderNameOnTop, showBrandIcon, showBrandsUnderCardNumber }: {
     data: any;
     valid: any;
     errors: any;
@@ -13,6 +13,7 @@ export declare const CardFieldsWrapper: ({ data, valid, errors, handleChangeFor,
     hasInstallments: any;
     handleInstallments: any;
     showAmountsInInstallments: any;
+    brandsIcons: any;
     mergedSRErrors: any;
     moveFocus: any;
     showPanel: any;
@@ -44,4 +45,5 @@ export declare const CardFieldsWrapper: ({ data, valid, errors, handleChangeFor,
     placeholders: any;
     positionHolderNameOnTop: any;
     showBrandIcon: any;
+    showBrandsUnderCardNumber: any;
 }) => h.JSX.Element;

package/dist/types/components/Card/components/CardInput/components/CardHolderName.d.ts

@@ -1,3 +1,3 @@
 import { h } from 'preact';
 import { CardHolderNameProps } from './types';
-export default function CardHolderName({ onChange, onInput, placeholder, value, required, error, isValid }: CardHolderNameProps): h.JSX.Element;
+export default function CardHolderName({ onBlur, onInput, placeholder, value, required, error, isValid }: CardHolderNameProps): h.JSX.Element;

package/dist/types/components/Card/components/CardInput/components/types.d.ts

@@ -1,5 +1,5 @@
 import { PaymentAmount } from '../../../../../types';
-import { CardBrandsConfiguration } from '../../../types';
+import { BrandConfiguration, CardBrandsConfiguration } from '../../../types';
 import { ComponentChildren } from 'preact';
 import { CVCPolicyType, DatePolicyType } from '../../../../internal/SecuredFields/lib/types';
 export interface BrandIconProps {
@@ -8,6 +8,7 @@ export interface BrandIconProps {
 }
 export interface CardFieldsProps {
     brand?: string;
+    brandsIcons?: Array<BrandConfiguration>;
     brandsConfiguration?: CardBrandsConfiguration;
     dualBrandingChangeHandler?: any;
     dualBrandingElements?: any;
@@ -19,12 +20,13 @@ export interface CardFieldsProps {
     expiryDatePolicy?: DatePolicyType;
     onFocusField?: any;
     showBrandIcon?: boolean;
+    showBrandsUnderCardNumber: boolean;
     valid?: any;
 }
 export interface CardHolderNameProps {
     error: boolean;
     isValid: boolean;
-    onChange: (event: Event) => void;
+    onBlur: (event: Event) => void;
     onInput: (event: Event) => void;
     placeholder?: string;
     required?: boolean;
@@ -107,7 +109,7 @@ export interface KCPProps {
     filled?: boolean;
     focusedElement: any;
     onFocusField: (str: string) => {};
-    onChange: (event: Event) => void;
+    onBlur: (event: Event) => void;
     onInput: (event: Event) => void;
     taxNumber?: string;
     error: boolean;

package/dist/types/components/Card/components/CardInput/types.d.ts

@@ -1,5 +1,5 @@
 import Language from '../../../../language/Language';
-import { BinLookupResponse, CardBrandsConfiguration, CardConfiguration, DualBrandSelectElement } from '../../types';
+import { BinLookupResponse, BrandConfiguration, CardBrandsConfiguration, CardConfiguration, DualBrandSelectElement } from '../../types';
 import { PaymentAmount } from '../../../../types';
 import { InstallmentOptions } from './components/types';
 import { ValidationResult } from '../../../internal/PersonalDetails/types';
@@ -52,6 +52,7 @@ export interface CardInputProps {
     brand?: string;
     brands?: string[];
     brandsConfiguration?: CardBrandsConfiguration;
+    brandsIcons: Array<BrandConfiguration>;
     clientKey: string;
     configuration?: CardConfiguration;
     countryCode?: string;
@@ -90,6 +91,7 @@ export interface CardInputProps {
     placeholders?: Placeholders;
     positionHolderNameOnTop?: boolean;
     setComponentRef?: (ref: any) => void;
+    showBrandsUnderCardNumber: boolean;
     showBrandIcon?: boolean;
     showInstallmentAmounts?: boolean;
     showPayButton?: boolean;

package/dist/types/components/Card/components/CardInput/utils.d.ts

@@ -26,6 +26,7 @@ export declare const extractPropsForCardFields: (props: CardInputProps) => {
     };
     positionHolderNameOnTop: boolean;
     showBrandIcon: boolean;
+    showBrandsUnderCardNumber: boolean;
     lastFour: string;
     expiryMonth: string;
     expiryYear: string;

package/dist/types/components/Card/types.d.ts

@@ -19,6 +19,16 @@ export interface CardElementProps extends UIElementProps {
     type?: string;
     /** List of brands accepted by the component */
     brands?: string[];
+    /**
+     * Show/hide available card brands under the Card number field
+     * @defaultValue `false`
+     */
+    showBrandsUnderCardNumber?: boolean;
+    /**
+     * Show/hide the brand logo when the card brand has been recognized
+     * @defaultValue `true`
+     */
+    showBrandIcon?: boolean;
     /** Show/hide the "store details" checkbox */
     enableStoreDetails?: boolean;
     /** Show/hide the CVC field - merchant set config option */
@@ -33,6 +43,7 @@ export interface CardElementProps extends UIElementProps {
     hasHolderName?: boolean;
     /** Whether the card holder name field will be required */
     holderNameRequired?: boolean;
+    /** An object sent in the /paymentMethods response */
     configuration?: CardConfiguration;
     /**
      * Called once all the card input fields have been created but are not yet ready to use.
@@ -70,16 +81,27 @@ export interface CardElementProps extends UIElementProps {
     [key: string]: any;
 }
 export declare type SocialSecurityMode = 'show' | 'hide' | 'auto';
+/** If the merchant wishes to set any of these properties in their local config they should do so via a "configuration" object */
 export interface CardConfiguration {
+    merchantIdentifier?: string;
+    merchantOrigin?: string;
+    gatewayMerchantId?: string;
+    publicKeyId?: string;
+    region?: string;
+    merchantName?: string;
+    merchantId?: string;
+    intent?: string;
     koreanAuthenticationRequired?: boolean;
     socialSecurityNumberMode?: SocialSecurityMode;
     icon?: string;
     brandsConfiguration?: CardBrandsConfiguration;
 }
+export interface BrandConfiguration {
+    name: string;
+    icon?: string;
+}
 export interface CardBrandsConfiguration {
-    [key: string]: {
-        icon?: string;
-    };
+    [key: string]: BrandConfiguration;
 }
 interface CardPaymentMethodData {
     type: string;

package/dist/types/components/Dropin/components/PaymentMethod/PaymentMethodBrands/CompactView.d.ts

@@ -0,0 +1,8 @@
+import { h } from 'preact';
+import { BrandConfiguration } from '../../../../Card/types';
+interface CompactViewProps {
+    brands: Array<BrandConfiguration>;
+    isPaymentMethodSelected: boolean;
+}
+declare const CompactView: ({ brands, isPaymentMethodSelected }: CompactViewProps) => h.JSX.Element;
+export default CompactView;

package/dist/types/components/Dropin/components/PaymentMethod/PaymentMethodBrands/PaymentMethodBrands.d.ts

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import { BrandConfiguration } from '../../../../Card/types';
+interface PaymentMethodBrandsProps {
+    brands: Array<BrandConfiguration>;
+    isPaymentMethodSelected: boolean;
+    activeBrand?: string;
+    isCompactView?: boolean;
+}
+declare const PaymentMethodBrands: ({ activeBrand, brands, isPaymentMethodSelected, isCompactView }: PaymentMethodBrandsProps) => h.JSX.Element;
+export default PaymentMethodBrands;

package/dist/types/components/Dropin/components/PaymentMethod/PaymentMethodBrands/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PaymentMethodBrands';

package/dist/types/components/Dropin/components/PaymentMethod/PaymentMethodItem.d.ts

@@ -24,6 +24,7 @@ declare class PaymentMethodItem extends Component<PaymentMethodItemProps> {
     };
     state: {
         showDisableStoredPaymentMethodConfirmation: boolean;
+        activeBrand: any;
     };
     isMouseDown: boolean;
     onFocus: () => void;
@@ -43,7 +44,7 @@ declare class PaymentMethodItem extends Component<PaymentMethodItemProps> {
         onSelect: any;
         standalone: any;
     }, { activeBrand }: {
-        activeBrand?: any;
+        activeBrand: any;
     }): h.JSX.Element;
 }
 export default PaymentMethodItem;

package/dist/types/components/OnlineBankingIN/index.d.ts

@@ -0,0 +1,6 @@
+import IssuerListContainer from '../helpers/IssuerListContainer';
+declare class OnlineBankingINElement extends IssuerListContainer {
+    static type: string;
+    formatProps(props: any): any;
+}
+export default OnlineBankingINElement;

package/dist/types/components/index.d.ts

@@ -46,6 +46,7 @@ import PersonalDetails from './PersonalDetails';
 import Klarna from './Klarna';
 import Twint from './Twint';
 import MealVoucherFR from './MealVoucherFR';
+import OnlineBankingINElement from './OnlineBankingIN';
 /**
  * Maps each component with a Component element.
  */
@@ -121,6 +122,7 @@ declare const componentsMap: {
     molpay_ebanking_fpx_MY: typeof MolPayEBankingMY;
     molpay_ebanking_TH: typeof MolPayEBankingTH;
     molpay_ebanking_VN: typeof MolPayEBankingVN;
+    onlinebanking_IN: typeof OnlineBankingINElement;
     openbanking_UK: typeof OpenBankingUK;
     paypal: typeof PayPal;
     payu_IN_cashcard: typeof PayuCashcard;

package/dist/types/components/internal/Address/components/FieldContainer.d.ts

@@ -1,4 +1,10 @@
 import { h } from 'preact';
 import { FieldContainerProps } from '../types';
+/**
+ * USAGE: Specifically defined as a util to provide a wrapper for fields created within the Address component
+ *
+ * NOT TO BE USED: if you just want to add a Country or State dropdown outside of an Address component
+ * - then you should implement <CountryField> or <StateField> directly
+ */
 declare function FieldContainer(props: FieldContainerProps): h.JSX.Element;
 export default FieldContainer;

package/dist/types/components/internal/Address/types.d.ts

@@ -34,11 +34,12 @@ export interface FieldContainerProps {
     key: string;
     valid?: object;
     onInput?: (e: Event) => void;
-    onChange?: (e: Event) => void;
+    onBlur?: (e: Event) => void;
     onDropdownChange: (e: Event) => void;
     readOnly?: boolean;
     specifications: Specifications;
     maxlength?: number;
+    trimOnBlur?: boolean;
 }
 export interface ReadOnlyAddressProps {
     data: AddressData;

package/dist/types/components/internal/SecuredFields/SFP/SecuredFieldsProvider.d.ts

@@ -7,8 +7,8 @@ import { BinLookupResponse } from '../../../Card/types';
  * Initialises & handles the client-side part of SecuredFields
  */
 declare class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
-    private originKeyErrorTimeout;
-    private originKeyTimeoutMS;
+    private invalidOriginErrorTimeout;
+    private invalidOriginTimeoutMS;
     private numCharsInField;
     private rootNode;
     private numDateFields;

package/dist/types/components/internal/SecuredFields/SFP/SecuredFieldsProviderHandlers.d.ts

@@ -1,6 +1,6 @@
 import { CbObjOnError, CbObjOnFocus, CbObjOnBrand, CbObjOnAllValid, CbObjOnFieldValid, CbObjOnAutoComplete, CbObjOnConfigSuccess, CbObjOnLoad } from '../lib/types';
 /**
- * Emits the onConfigSuccess (ready) event
+ * Emits the onLoad  event
  * Here we can assume CSF is loaded and ready to be used
  */
 declare function handleOnLoad(cbObj: CbObjOnLoad): void;

package/dist/types/components/internal/SecuredFields/lib/types.d.ts

@@ -83,6 +83,7 @@ export interface CbObjOnFieldValid {
     rootNode: HTMLElement;
     blob?: string;
     endDigits?: string;
+    issuerBin?: number;
 }
 export interface CbObjOnAutoComplete {
     fieldType: string;
@@ -102,8 +103,8 @@ export interface CbObjOnBinLookup {
     supportedBrands?: string[];
     brands?: string[];
     supportedBrandsRaw?: BrandObject[];
-    isReset?: boolean;
     rootNode?: HTMLElement;
+    isReset?: boolean;
 }
 export interface CbObjOnError {
     fieldType: string;
@@ -150,6 +151,7 @@ export interface SFFeedbackObj {
     maxLength?: number;
     error?: string;
     endDigits?: string;
+    issuerBin?: string;
     type?: string;
     binValue?: string;
     focus?: boolean;

package/dist/types/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.d.ts

@@ -1,6 +1,6 @@
 import { h } from 'preact';
-export default function ({ onChange, onInput, valid, error, data, required }: {
-    onChange: any;
+export default function ({ onBlur, onInput, valid, error, data, required }: {
+    onBlur: any;
     onInput: any;
     valid?: boolean;
     error?: any;

package/dist/types/core/core.d.ts

@@ -1,11 +1,12 @@
 import UIElement from '../components/UIElement';
+import PaymentMethodsResponse from './ProcessResponse/PaymentMethodsResponse';
 import { PaymentAction } from '../types';
 import { CoreOptions } from './types';
 import { PaymentMethods, PaymentMethodOptions } from '../types';
 import Session from './CheckoutSession';
 declare class Core {
     session: Session;
-    private paymentMethodsResponse;
+    paymentMethodsResponse: PaymentMethodsResponse;
     modules: any;
     options: CoreOptions;
     components: any[];

package/package.json

@@ -23,7 +23,7 @@
         "./dist/adyen.css": "./dist/adyen.css",
         "./package.json": "./package.json"
     },
-    "version": "5.8.0",
+    "version": "5.11.0",
     "license": "MIT",
     "homepage": "https://docs.adyen.com/checkout",
     "repository": "github:Adyen/adyen-web",
@@ -51,7 +51,7 @@
     "devDependencies": {
         "@babel/cli": "^7.16.0",
         "@babel/core": "^7.16.0",
-        "@babel/plugin-transform-runtime": "^7.15.8",
+        "@babel/plugin-transform-runtime": "^7.17.0",
         "@babel/preset-env": "^7.16.0",
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.15.0",
@@ -67,7 +67,7 @@
         "@types/jest": "^26.0.23",
         "@typescript-eslint/eslint-plugin": "^4.28.3",
         "@typescript-eslint/parser": "^4.33.0",
-        "autoprefixer": "^10.3.6",
+        "autoprefixer": "^10.4.2",
         "babel-jest": "^27.3.1",
         "cross-env": "^7.0.3",
         "cssnano": "^5.0.6",
@@ -84,12 +84,12 @@
         "gzip-size": "^6.0.0",
         "jest": "^26.6.3",
         "node-sass": "^6.0.1",
-        "postcss": "^8.4.5",
+        "postcss": "^8.4.7",
         "postcss-reporter": "^7.0.2",
         "prettier": "^1.19.1",
         "rollup": "^2.61.1",
         "rollup-plugin-esbuild": "^4.5.0",
-        "rollup-plugin-postcss": "^4.0.0",
+        "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-terser": "^7.0.2",
         "rollup-plugin-visualizer": "^5.5.1",
         "stylelint": "^13.13.1",