@alfalab/core-components 32.0.0-beta.0 → 32.0.1

package/bank-card/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 2t2lw */
+/* hash: 1ojua */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
 :root {
     --border-radius-l: 12px;
 }
-.bank-card__component_rmjcy {
+.bank-card__component_5xnzz {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_rmjcy {
+.bank-card__aspectRatioContainer_5xnzz {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_rmjcy {
+.bank-card__content_5xnzz {
     position: absolute;
     top: 0;
     right: 0;
@@ -59,7 +59,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_rmjcy {
+.bank-card__label_5xnzz {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -67,25 +67,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_rmjcy {
+.bank-card__label_5xnzz {
         font-size: 16px
 }
     }
-.bank-card__focused_rmjcy .bank-card__label_rmjcy,
-.bank-card__filled_rmjcy .bank-card__label_rmjcy {
+.bank-card__focused_5xnzz .bank-card__label_5xnzz,
+.bank-card__filled_5xnzz .bank-card__label_5xnzz {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_rmjcy .bank-card__label_rmjcy,
-.bank-card__filled_rmjcy .bank-card__label_rmjcy {
+.bank-card__focused_5xnzz .bank-card__label_5xnzz,
+.bank-card__filled_5xnzz .bank-card__label_5xnzz {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_rmjcy:before {
+.bank-card__focused_5xnzz:before {
     transform: scale(1) !important;
 }
-.bank-card__input_rmjcy {
+.bank-card__input_5xnzz {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -99,33 +99,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_rmjcy {
+.bank-card__input_5xnzz {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_rmjcy {
+.bank-card__bankLogo_5xnzz {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_rmjcy svg {
+.bank-card__bankLogo_5xnzz svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_rmjcy svg g {
+.bank-card__bankLogo_5xnzz svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_rmjcy {
+.bank-card__brandLogo_5xnzz {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_rmjcy svg {
+.bank-card__brandLogo_5xnzz svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_rmjcy {
+.bank-card__usePhoto_5xnzz {
     display: block;
     margin: 0;
     padding: 0;
@@ -143,7 +143,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_rmjcy svg {
+.bank-card__usePhoto_5xnzz svg {
         fill: var(--color-black);
         display: block;
     }

package/bank-card/index.css

@@ -1,4 +1,4 @@
-/* hash: 2t2lw */
+/* hash: 1ojua */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
 :root {
     --border-radius-l: 12px;
 }
-.bank-card__component_rmjcy {
+.bank-card__component_5xnzz {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_rmjcy {
+.bank-card__aspectRatioContainer_5xnzz {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_rmjcy {
+.bank-card__content_5xnzz {
     position: absolute;
     top: 0;
     right: 0;
@@ -59,7 +59,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_rmjcy {
+.bank-card__label_5xnzz {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -67,25 +67,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_rmjcy {
+.bank-card__label_5xnzz {
         font-size: 16px
 }
     }
-.bank-card__focused_rmjcy .bank-card__label_rmjcy,
-.bank-card__filled_rmjcy .bank-card__label_rmjcy {
+.bank-card__focused_5xnzz .bank-card__label_5xnzz,
+.bank-card__filled_5xnzz .bank-card__label_5xnzz {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_rmjcy .bank-card__label_rmjcy,
-.bank-card__filled_rmjcy .bank-card__label_rmjcy {
+.bank-card__focused_5xnzz .bank-card__label_5xnzz,
+.bank-card__filled_5xnzz .bank-card__label_5xnzz {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_rmjcy:before {
+.bank-card__focused_5xnzz:before {
     transform: scale(1) !important;
 }
-.bank-card__input_rmjcy {
+.bank-card__input_5xnzz {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -99,33 +99,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_rmjcy {
+.bank-card__input_5xnzz {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_rmjcy {
+.bank-card__bankLogo_5xnzz {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_rmjcy svg {
+.bank-card__bankLogo_5xnzz svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_rmjcy svg g {
+.bank-card__bankLogo_5xnzz svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_rmjcy {
+.bank-card__brandLogo_5xnzz {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_rmjcy svg {
+.bank-card__brandLogo_5xnzz svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_rmjcy {
+.bank-card__usePhoto_5xnzz {
     display: block;
     margin: 0;
     padding: 0;
@@ -143,7 +143,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_rmjcy svg {
+.bank-card__usePhoto_5xnzz svg {
         fill: var(--color-black);
         display: block;
     }

package/bank-card/modern/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { MaskedInput } from '../../masked-input/modern';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_rmjcy","aspectRatioContainer":"bank-card__aspectRatioContainer_rmjcy","content":"bank-card__content_rmjcy","label":"bank-card__label_rmjcy","focused":"bank-card__focused_rmjcy","filled":"bank-card__filled_rmjcy","input":"bank-card__input_rmjcy","bankLogo":"bank-card__bankLogo_rmjcy","brandLogo":"bank-card__brandLogo_rmjcy","usePhoto":"bank-card__usePhoto_rmjcy"};
+var styles = {"component":"bank-card__component_5xnzz","aspectRatioContainer":"bank-card__aspectRatioContainer_5xnzz","content":"bank-card__content_5xnzz","label":"bank-card__label_5xnzz","focused":"bank-card__focused_5xnzz","filled":"bank-card__filled_5xnzz","input":"bank-card__input_5xnzz","bankLogo":"bank-card__bankLogo_5xnzz","brandLogo":"bank-card__brandLogo_5xnzz","usePhoto":"bank-card__usePhoto_5xnzz"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 2t2lw */
+/* hash: 1ojua */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
 :root {
     --border-radius-l: 12px;
 }
-.bank-card__component_rmjcy {
+.bank-card__component_5xnzz {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_rmjcy {
+.bank-card__aspectRatioContainer_5xnzz {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_rmjcy {
+.bank-card__content_5xnzz {
     position: absolute;
     top: 0;
     right: 0;
@@ -59,7 +59,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_rmjcy {
+.bank-card__label_5xnzz {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -67,25 +67,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_rmjcy {
+.bank-card__label_5xnzz {
         font-size: 16px
 }
     }
-.bank-card__focused_rmjcy .bank-card__label_rmjcy,
-.bank-card__filled_rmjcy .bank-card__label_rmjcy {
+.bank-card__focused_5xnzz .bank-card__label_5xnzz,
+.bank-card__filled_5xnzz .bank-card__label_5xnzz {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_rmjcy .bank-card__label_rmjcy,
-.bank-card__filled_rmjcy .bank-card__label_rmjcy {
+.bank-card__focused_5xnzz .bank-card__label_5xnzz,
+.bank-card__filled_5xnzz .bank-card__label_5xnzz {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_rmjcy:before {
+.bank-card__focused_5xnzz:before {
     transform: scale(1) !important;
 }
-.bank-card__input_rmjcy {
+.bank-card__input_5xnzz {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -99,33 +99,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_rmjcy {
+.bank-card__input_5xnzz {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_rmjcy {
+.bank-card__bankLogo_5xnzz {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_rmjcy svg {
+.bank-card__bankLogo_5xnzz svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_rmjcy svg g {
+.bank-card__bankLogo_5xnzz svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_rmjcy {
+.bank-card__brandLogo_5xnzz {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_rmjcy svg {
+.bank-card__brandLogo_5xnzz svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_rmjcy {
+.bank-card__usePhoto_5xnzz {
     display: block;
     margin: 0;
     padding: 0;
@@ -143,7 +143,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_rmjcy svg {
+.bank-card__usePhoto_5xnzz svg {
         fill: var(--color-black);
         display: block;
     }

package/base-modal/Component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
 var FocusLock = require('react-focus-lock');
+require('./matches-polyfill.js');
 var coreComponentsPortal = require('../portal');
 var coreComponentsBackdrop = require('../backdrop');
 var coreComponentsStack = require('../stack');
@@ -46,7 +47,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_gmgt7","wrapper":"base-modal__wrapper_gmgt7","content":"base-modal__content_gmgt7","hidden":"base-modal__hidden_gmgt7","backdrop":"base-modal__backdrop_gmgt7","appear":"base-modal__appear_gmgt7","enter":"base-modal__enter_gmgt7","appearActive":"base-modal__appearActive_gmgt7","enterActive":"base-modal__enterActive_gmgt7","exit":"base-modal__exit_gmgt7","exitActive":"base-modal__exitActive_gmgt7","exitDone":"base-modal__exitDone_gmgt7"};
+var styles = {"component":"base-modal__component_1wd4h","wrapper":"base-modal__wrapper_1wd4h","content":"base-modal__content_1wd4h","hidden":"base-modal__hidden_1wd4h","backdrop":"base-modal__backdrop_1wd4h","appear":"base-modal__appear_1wd4h","enter":"base-modal__enter_1wd4h","appearActive":"base-modal__appearActive_1wd4h","enterActive":"base-modal__enterActive_1wd4h","exit":"base-modal__exit_1wd4h","exitActive":"base-modal__exitActive_1wd4h","exitDone":"base-modal__exitDone_1wd4h"};
 require('./index.css');
 
 var BaseModalContext = React__default['default'].createContext({
@@ -265,7 +266,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         } }))),
                     React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles.wrapper, wrapperClassName, (_a = {},
                             _a[styles.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                        tabIndex: 0, "data-test-id": dataTestId, style: {
                             zIndex: computedZIndex,
                         } },
                         React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/base-modal/cssm/Component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var resizeObserver = require('@juggle/resize-observer');
 var reactTransitionGroup = require('react-transition-group');
 var FocusLock = require('react-focus-lock');
+require('./matches-polyfill.js');
 var coreComponentsPortal = require('../../portal/cssm');
 var coreComponentsBackdrop = require('../../backdrop/cssm');
 var coreComponentsStack = require('../../stack/cssm');
@@ -264,7 +265,9 @@ var BaseModal = React.forwardRef(function (_a, ref) {
                         } }))),
                     React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles__default['default'].wrapper, wrapperClassName, (_a = {},
                             _a[styles__default['default'].hidden] = !open && isExited,
-                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                        tabIndex: 0, "data-test-id": dataTestId, style: {
                             zIndex: computedZIndex,
                         } },
                         React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles__default['default'] }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/base-modal/cssm/index.js

@@ -7,6 +7,7 @@ require('react-merge-refs');
 require('@juggle/resize-observer');
 require('react-transition-group');
 require('react-focus-lock');
+require('./matches-polyfill.js');
 require('../../portal/cssm');
 require('../../backdrop/cssm');
 require('../../stack/cssm');

package/base-modal/cssm/matches-polyfill.js

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// @ts-nocheck
+if (typeof window !== 'undefined') {
+    if (Element && !Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+                Element.prototype.mozMatchesSelector ||
+                Element.prototype.msMatchesSelector ||
+                Element.prototype.oMatchesSelector ||
+                Element.prototype.webkitMatchesSelector ||
+                function (s) {
+                    var matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    var i = matches.length;
+                    while (--i >= 0 && matches.item(i) !== this) { }
+                    return i > -1;
+                };
+    }
+}

package/base-modal/esm/Component.js

@@ -4,6 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { CSSTransition } from 'react-transition-group';
 import FocusLock from 'react-focus-lock';
+import './matches-polyfill.js';
 import { Portal } from '../../portal/esm';
 import { Backdrop } from '../../backdrop/esm';
 import { stackingOrder, Stack } from '../../stack/esm';
@@ -37,7 +38,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_gmgt7","wrapper":"base-modal__wrapper_gmgt7","content":"base-modal__content_gmgt7","hidden":"base-modal__hidden_gmgt7","backdrop":"base-modal__backdrop_gmgt7","appear":"base-modal__appear_gmgt7","enter":"base-modal__enter_gmgt7","appearActive":"base-modal__appearActive_gmgt7","enterActive":"base-modal__enterActive_gmgt7","exit":"base-modal__exit_gmgt7","exitActive":"base-modal__exitActive_gmgt7","exitDone":"base-modal__exitDone_gmgt7"};
+var styles = {"component":"base-modal__component_1wd4h","wrapper":"base-modal__wrapper_1wd4h","content":"base-modal__content_1wd4h","hidden":"base-modal__hidden_1wd4h","backdrop":"base-modal__backdrop_1wd4h","appear":"base-modal__appear_1wd4h","enter":"base-modal__enter_1wd4h","appearActive":"base-modal__appearActive_1wd4h","enterActive":"base-modal__enterActive_1wd4h","exit":"base-modal__exit_1wd4h","exitActive":"base-modal__exitActive_1wd4h","exitDone":"base-modal__exitDone_1wd4h"};
 require('./index.css');
 
 var BaseModalContext = React.createContext({
@@ -256,7 +257,9 @@ var BaseModal = forwardRef(function (_a, ref) {
                         } }))),
                     React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
                             _a[styles.hidden] = !open && isExited,
-                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                            _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, 
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                        tabIndex: 0, "data-test-id": dataTestId, style: {
                             zIndex: computedZIndex,
                         } },
                         React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: negt7 */
+/* hash: 1kbo0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_gmgt7 {
+.base-modal__component_1wd4h {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_gmgt7 {
+.base-modal__wrapper_1wd4h {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_gmgt7 {
+.base-modal__content_1wd4h {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_gmgt7 {
+.base-modal__hidden_1wd4h {
     display: none;
 }
-.base-modal__backdrop_gmgt7 {
+.base-modal__backdrop_1wd4h {
     z-index: 0;
 }
-.base-modal__appear_gmgt7,
-.base-modal__enter_gmgt7 {
+.base-modal__appear_1wd4h,
+.base-modal__enter_1wd4h {
     opacity: 0;
 }
-.base-modal__appearActive_gmgt7,
-.base-modal__enterActive_gmgt7 {
+.base-modal__appearActive_1wd4h,
+.base-modal__enterActive_1wd4h {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_gmgt7 {
+.base-modal__exit_1wd4h {
     opacity: 1;
 }
-.base-modal__exitActive_gmgt7,
-.base-modal__exitDone_gmgt7 {
+.base-modal__exitActive_1wd4h,
+.base-modal__exitDone_1wd4h {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/esm/index.js

@@ -4,6 +4,7 @@ import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'react-transition-group';
 import 'react-focus-lock';
+import './matches-polyfill.js';
 import '../../portal/esm';
 import '../../backdrop/esm';
 import '../../stack/esm';

package/base-modal/esm/matches-polyfill.js

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// @ts-nocheck
+if (typeof window !== 'undefined') {
+    if (Element && !Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+                Element.prototype.mozMatchesSelector ||
+                Element.prototype.msMatchesSelector ||
+                Element.prototype.oMatchesSelector ||
+                Element.prototype.webkitMatchesSelector ||
+                function (s) {
+                    var matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    var i = matches.length;
+                    while (--i >= 0 && matches.item(i) !== this) { }
+                    return i > -1;
+                };
+    }
+}

package/base-modal/index.css

@@ -1,4 +1,4 @@
-/* hash: negt7 */
+/* hash: 1kbo0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -10,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_gmgt7 {
+.base-modal__component_1wd4h {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_gmgt7 {
+.base-modal__wrapper_1wd4h {
     position: fixed;
     top: 0;
     left: 0;
@@ -30,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_gmgt7 {
+.base-modal__content_1wd4h {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_gmgt7 {
+.base-modal__hidden_1wd4h {
     display: none;
 }
-.base-modal__backdrop_gmgt7 {
+.base-modal__backdrop_1wd4h {
     z-index: 0;
 }
-.base-modal__appear_gmgt7,
-.base-modal__enter_gmgt7 {
+.base-modal__appear_1wd4h,
+.base-modal__enter_1wd4h {
     opacity: 0;
 }
-.base-modal__appearActive_gmgt7,
-.base-modal__enterActive_gmgt7 {
+.base-modal__appearActive_1wd4h,
+.base-modal__enterActive_1wd4h {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_gmgt7 {
+.base-modal__exit_1wd4h {
     opacity: 1;
 }
-.base-modal__exitActive_gmgt7,
-.base-modal__exitDone_gmgt7 {
+.base-modal__exitActive_1wd4h,
+.base-modal__exitDone_1wd4h {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.js

@@ -7,6 +7,7 @@ require('react-merge-refs');
 require('@juggle/resize-observer');
 require('react-transition-group');
 require('react-focus-lock');
+require('./matches-polyfill.js');
 require('../portal');
 require('../backdrop');
 require('../stack');