@via-profit/ui-kit 0.4.0 → 0.5.0

package/esm/Modal/Drawer/DrawerHeader.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Span from '../../Typography/Span';
+import DrawerCloseIcon from './DrawerCloseIcon';
+import Button from '../../Button';
+const StyledDrawerHeader = styled.div `
+  padding: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const DrawerTitle = styled(Span) `
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-right: 1em;
+`;
+const DrawerToolbar = styled.div `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const StyledDrawerCloseButton = styled(Button) `
+  margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
+  color: ${props => props.theme.color.textPrimary.toString()};
+  background: none;
+  width: auto;
+  height: auto;
+  padding: 0.6em;
+  font-size: 1em;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+const DrawerHeader = (props, ref) => {
+    const { header, children, showCloseButton, closeButtonLabel = 'Close', dialogID, onRequestClose } = props, nativeProps = __rest(props, ["header", "children", "showCloseButton", "closeButtonLabel", "dialogID", "onRequestClose"]);
+    return (React.createElement(StyledDrawerHeader, Object.assign({}, nativeProps, { ref: ref }),
+        typeof header !== 'undefined' && (React.createElement(DrawerTitle, { id: dialogID ? `${dialogID}-title` : undefined }, header)),
+        typeof children !== 'undefined' && React.createElement(DrawerToolbar, null, children),
+        typeof onRequestClose === 'function' && showCloseButton && (React.createElement(StyledDrawerCloseButton, { type: "button", "$withToolbar": typeof children !== 'undefined' && children !== null, "aria-label": closeButtonLabel, onClick: onRequestClose },
+            React.createElement(DrawerCloseIcon, null)))));
+};
+export default React.forwardRef(DrawerHeader);

package/esm/Modal/Drawer/DrawerInner.js

@@ -0,0 +1,145 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import ModalInner from '../BaseModal/ModalInner';
+const StyledDrawerBottomInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  left: 0;
+  right: 0;
+  bottom: -100%;
+  max-height: 90%;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    opacity 120ms ease-out,
+    bottom 600ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      bottom: 0;
+      transition:
+        opacity 100ms ease-out,
+        bottom 240ms ease-out;
+    `}
+`;
+const StyledDrawerTopInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  left: 0;
+  right: 0;
+  top: -100%;
+  opacity: 0;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    top 600ms ease-out,
+    opacity 120ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      top: 0;
+      transition:
+        top 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const StyledDrawerRightInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  right: -100%;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    right 600ms ease-out,
+    opacity 120ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      right: 0;
+      transition:
+        right 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const StyledDrawerLeftInner = styled(ModalInner) `
+  position: fixed;
+  margin: 0;
+  left: -100%;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
+  border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transition:
+    left 600ms ease-out,
+    opacity 120ms ease-out;
+  ${({ isOpen }) => isOpen &&
+    css `
+      opacity: 1;
+      left: 0;
+      transition:
+        left 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const DrawerInner = (props, ref) => {
+    const { children, isOpen, anchor, onRequestClose, dialogID } = props, nativeProps = __rest(props, ["children", "isOpen", "anchor", "onRequestClose", "dialogID"]);
+    const Element = React.useMemo(() => {
+        switch (anchor) {
+            case 'top':
+                return StyledDrawerTopInner;
+            case 'left':
+                return StyledDrawerLeftInner;
+            case 'right':
+                return StyledDrawerRightInner;
+            case 'bottom':
+            default:
+                return StyledDrawerBottomInner;
+        }
+    }, [anchor]);
+    return (React.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(DrawerInner);

package/esm/Modal/Drawer/index.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import BaseModal from '../BaseModal';
+import DrawerInner from './DrawerInner';
+import Container from './DrawerContainer';
+import Header from './DrawerHeader';
+import Content from './DrawerContent';
+import Footer from './DrawerFooter';
+import Overlay from '../BaseModal/ModalOverlay';
+import useDialogID from '../BaseModal/useDialogID';
+import useThemeProps from '../../ThemeProvider/useThemeProps';
+const Drawer = props => {
+    const _a = useThemeProps('Drawer', props), { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = _a, otherProps = __rest(_a, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
+    const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
+        typeof toolbar !== 'undefined' ||
+        typeof showCloseButton !== 'undefined', [showCloseButton, header, toolbar]);
+    const dialogID = useDialogID('drawer');
+    const hasTitle = typeof header !== 'undefined' && header !== null;
+    // Created once: a component created during the render is a new type on every render,
+    // so React would remount the whole drawer content (inputs lose the focus and the state)
+    const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
+        return (React.createElement(DrawerInner, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+    }), [overrides]);
+    const modalOverrides = React.useMemo(() => ({ Overlay: overridesMap.Overlay, Inner }), [overridesMap.Overlay, Inner]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseModal, Object.assign({ onRequestClose: onRequestClose }, otherProps, { overrides: modalOverrides }),
+            React.createElement(overridesMap.Container, { anchor: anchor },
+                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, closeButtonLabel: closeButtonLabel, dialogID: dialogID, header: header, onRequestClose: onRequestClose }, toolbar)),
+                React.createElement(overridesMap.Content, { anchor: anchor }, children),
+                hasFooter && React.createElement(overridesMap.Footer, { anchor: anchor }, footer)))));
+};
+export default Drawer;

package/esm/Modal/MessageBox/MessageBoxContainer.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Container = styled.div `
+  display: flex;
+  flex-flow: column;
+  min-width: 20em;
+`;
+const MessageBoxContainer = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(Container, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(MessageBoxContainer);

package/esm/Modal/MessageBox/MessageBoxContent.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Content = styled.div `
+  flex: 1;
+  padding: 1em 1em;
+`;
+const MessageBoxContent = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(Content, Object.assign({ id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(MessageBoxContent);

package/esm/Modal/MessageBox/MessageBoxFooter.js

@@ -0,0 +1,40 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../../Button';
+const Footer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 1em 1em 1em 1em;
+
+  & > button {
+    border-radius: 0;
+  }
+
+  & > button:first-of-type {
+    border-top-left-radius: 1em;
+    border-bottom-left-radius: 1em;
+  }
+
+  & > button:last-child {
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+  }
+`;
+const MessageBoxFooter = (props, ref) => {
+    const { onRequestClose, okButtonLabel } = props, nativeProps = __rest(props, ["onRequestClose", "okButtonLabel"]);
+    return (React.createElement(Footer, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(Button, { onClick: onRequestClose }, typeof okButtonLabel === 'undefined' ? 'OK' : okButtonLabel)));
+};
+export default React.forwardRef(MessageBoxFooter);

package/esm/Modal/MessageBox/MessageBoxHeader.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Header = styled.div `
+  padding: 1em 1em 0 1em;
+`;
+const HeaderTitle = styled.div `
+  font-size: 1.4rem;
+  font-weight: 600;
+`;
+const MessageBoxHeader = (props, ref) => {
+    const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
+    return (React.createElement(Header, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(HeaderTitle, { id: `${dialogID}-title` }, children)));
+};
+export default React.forwardRef(MessageBoxHeader);

package/esm/Modal/MessageBox/index.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import BaseModal from '../BaseModal';
+import Container from './MessageBoxContainer';
+import Content from './MessageBoxContent';
+import Footer from './MessageBoxFooter';
+import Header from './MessageBoxHeader';
+import Overlay from '../BaseModal/ModalOverlay';
+import useDialogID from '../BaseModal/useDialogID';
+import useThemeProps from '../../ThemeProvider/useThemeProps';
+const MessageBox = props => {
+    const _a = useThemeProps('MessageBox', props), { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = _a, otherProps = __rest(_a, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const dialogID = useDialogID('dialog-message');
+    const buttonRef = React.useRef(null);
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (isOpen && buttonRef.current) {
+                buttonRef.current.focus();
+            }
+        }, 15);
+    }, [isOpen]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,
+    }), [overrides]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseModal, Object.assign({ onRequestClose: onRequestClose, isOpen: isOpen, overrides: {
+                Overlay: overridesMap.Overlay,
+            } }, otherProps),
+            React.createElement(overridesMap.Container, { dialogID: dialogID },
+                React.createElement(overridesMap.Header, { dialogID: dialogID }, header),
+                React.createElement(overridesMap.Content, { dialogID: dialogID }, children),
+                React.createElement(overridesMap.Footer, { dialogID: dialogID, onRequestClose: onRequestClose, okButtonLabel: okButtonLabel })))));
+};
+export default MessageBox;

package/esm/Modal/index.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Dialog from './Dialog';
+import ConfirmBox from './ConfirmBox';
+import MessageBox from './MessageBox';
+import Drawer from './Drawer';
+export * from './Dialog';
+export * from './ConfirmBox';
+export * from './MessageBox';
+export * from './Drawer';
+const isDialog = (props) => ('variant' in props && props.variant === 'dialog') || typeof props.variant === 'undefined';
+const isConfirmBox = (props) => 'variant' in props && props.variant === 'confirm-box';
+const isMessageBox = (props) => 'variant' in props && props.variant === 'message-box';
+const isDrawer = (props) => 'variant' in props && props.variant === 'drawer';
+const Modal = props => {
+    if (isDialog(props)) {
+        return React.createElement(Dialog, Object.assign({}, props));
+    }
+    if (isConfirmBox(props)) {
+        return React.createElement(ConfirmBox, Object.assign({}, props));
+    }
+    if (isMessageBox(props)) {
+        return React.createElement(MessageBox, Object.assign({}, props));
+    }
+    if (isDrawer(props)) {
+        return React.createElement(Drawer, Object.assign({}, props));
+    }
+    const { variant } = props;
+    throw new Error(`Expected «variant» property is «dialog», «drawer», «message-box» or «confirm-box», but got «${variant}»`);
+};
+export default Modal;

package/esm/NoSSR/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+const NoSSR = props => {
+    const { fallback, children } = props;
+    const [mountedState, setMountedState] = React.useState(false);
+    React.useEffect(() => {
+        setMountedState(true);
+    }, []);
+    return mountedState ? React.createElement(React.Fragment, null, children) : React.createElement(React.Fragment, null, fallback ? fallback : null);
+};
+export default NoSSR;

package/esm/PhoneField/CountryFlagComponent.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import UnknownFlag from './flags/Unknown';
+const CountryFlagContainer = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  border-radius: 100%;
+  overflow: hidden;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  position: relative;
+  width: 1em;
+  height: 1em;
+  border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.5).toString()};
+  & > svg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+const CountryFlagComponent = props => {
+    const { flag } = props, otherProps = __rest(props, ["flag"]);
+    return (React.createElement(CountryFlagContainer, Object.assign({}, otherProps), typeof flag === 'undefined' || flag === null ? React.createElement(UnknownFlag, null) : flag));
+};
+export default CountryFlagComponent;

package/esm/PhoneField/UnknownFlag.js

@@ -0,0 +1,6 @@
+import Unknown from './flags/Unknown';
+/**
+ * The placeholder that PhoneField shows instead of the flag when the country is not detected
+ */
+const UnknownFlag = Unknown;
+export default UnknownFlag;

package/esm/PhoneField/flags/BY.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const BY = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#007C30", d: "M0 0h513v342H0z" }),
+    React.createElement("path", { fill: "#CE1720", d: "M0 230h513V0H0" }),
+    React.createElement("path", { fill: "#FFF", d: "M100 230V0H0v342h513-413z" }),
+    React.createElement("g", { fill: "#CE1720" },
+        React.createElement("path", { d: "M28 159.6 8.6 128.2 28 97.4l19.3 30.8zM72.6 159.6l-19.3-31.4 19.3-30.8L92 128.2zM28 241.2 8.6 209.8 28 179l19.3 30.8zM72.6 241.2l-19.3-31.4L72.6 179 92 209.8z" })),
+    React.createElement("g", { fill: "none", stroke: "#CE1720", strokeWidth: "7" },
+        React.createElement("path", { d: "m28 73.8-16.1-26L28 22.2l16 25.6zM72.6 73.8l-16-26 16-25.6 16.1 25.6zM28 318l-16.1-26.1L28 266.3l16 25.6zM72.6 318l-16-26.1 16-25.6 16.1 25.6z" }))));
+export default React.forwardRef(BY);

package/esm/PhoneField/flags/CN.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const CN = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#D80027", d: "M0 0h513v342H0z" }),
+    React.createElement("g", { fill: "#FFDA44" },
+        React.createElement("path", { d: "m226.8 239.2-9.7-15.6-17.9 4.4 11.9-14.1-9.7-15.6 17.1 6.9 11.8-14.1-1.3 18.4 17.1 6.9-17.9 4.4zM290.6 82l-10.1 15.4 11.6 14.3-17.7-4.8-10.1 15.5-1-18.4-17.7-4.8 17.2-6.6-1-18.4 11.6 14.3zM236.2 25.4l-2 18.3 16.8 7.6-18 3.8-2 18.3-9.2-16-17.9 3.8 12.3-13.7-9.2-15.9 16.8 7.5zM292.8 161.8l-14.9 10.9 5.8 17.5-14.9-10.8-14.9 11 5.6-17.6-14.9-10.7 18.4-.1 5.6-17.6 5.8 17.5zM115 46.3l17.3 53.5h56.2l-45.4 32.9 17.3 53.5-45.4-33-45.5 33 17.4-53.5-45.5-32.9h56.3z" }))));
+export default React.forwardRef(CN);

package/esm/PhoneField/flags/IL.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const IL = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 0h513v342H0z" }),
+    React.createElement("g", { fill: "#2E52B2" },
+        React.createElement("path", { d: "M340.6 122.4h-56.1l-28-48.6-28 48.6h-56.1l28 48.6-28 48.6h56.1l28 48.6 28-48.6h56.1l-28-48.6 28-48.6zM293.2 171 276 204.2h-38.9L219.8 171l17.2-33.2h38.9l17.3 33.2zm-36.7-71.8 11.9 23.3h-23.9l12-23.3zm-58.3 38.6h23.9l-10.8 21-13.1-21zm0 66.4 13-22.1 11.9 22.1h-24.9zm58.3 37.5-11.9-22.1h23.9l-12 22.1zm59.4-37.5h-25l11.9-22.1 13.1 22.1zm-26.1-66.4h26.1l-13 22.1-13.1-22.1zM0 21.3h512V64H0zM0 277.3h512V320H0z" }))));
+export default React.forwardRef(IL);

package/esm/PhoneField/flags/JP.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const JP = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 0h512v342H0z" }),
+    React.createElement("circle", { fill: "#D80027", cx: "256.5", cy: "171", r: "96" })));
+export default React.forwardRef(JP);

package/esm/PhoneField/flags/KZ.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const KZ = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#36B6CC", d: "M0 0h513v342H0V0z" }),
+    React.createElement("circle", { fill: "#FFD400", cx: "256.5", cy: "170.9", r: "68.4" }),
+    React.createElement("path", { fill: "#FFD400", d: "m256.5 251.5-27.9 41.7-7.1-49.7-43.2 25.5 15.2-47.8-50 4.2 34.4-36.5-46.9-18 46.8-18-34.4-36.5 50 4.2-15.2-47.8 43.2 25.4 7.1-49.7 27.9 41.7 27.9-41.7 7.1 49.7 43.2-25.4-15.2 47.8 50-4.2-34.3 36.6 46.8 17.9-46.8 18 34.4 36.5-50-4.2 15.2 47.8-43.2-25.4-7.1 49.7c0-.1-27.9-41.8-27.9-41.8zm0-.8c44.1 0 79.9-35.8 79.9-79.9S300.6 91 256.5 91s-79.9 35.8-79.9 79.9 35.8 79.8 79.9 79.8zM22.8 28.3c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6V28.3zm0 45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6V74zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0 45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H28.5c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm22.8-22.8c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7V245c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.7c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V188zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6v-11.4zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V96.8zm0-45.6c0-3.2 2.4-5.7 5.7-5.7h11.3c3.2 0 5.7 2.4 5.7 5.7v11.3c.1 3.1-2.4 5.7-5.6 5.7H51.3c-3.1 0-5.7-2.5-5.7-5.6V51.2z" })));
+export default React.forwardRef(KZ);

package/esm/PhoneField/flags/RU.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const RU = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 85.333 512 341.333", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 85.33v341.332h512V85.33z" }),
+    React.createElement("path", { fill: "#0052B4", d: "M0 85.333h512V426.67H0z" }),
+    React.createElement("path", { fill: "#FFF", d: "M0 85.333h512v113.775H0z" }),
+    React.createElement("path", { strokeWidth: "32", fill: "#D80027", d: "M0 312.884h512v113.775H0z" })));
+export default React.forwardRef(RU);

package/esm/PhoneField/flags/UA.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const UA = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 85.333 512 341.333", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFDA44", d: "M0 85.337h512v341.326H0z" }),
+    React.createElement("path", { fill: "#338AF3", d: "M0 85.337h512V256H0z" })));
+export default React.forwardRef(UA);

package/esm/PhoneField/flags/US.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import isLabelled from './isLabelled';
+const US = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 513 342", width: "1.5em", height: "1em", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+    React.createElement("path", { fill: "#FFF", d: "M0 0h513v342H0z" }),
+    React.createElement("g", { fill: "#D80027" },
+        React.createElement("path", { d: "M0 0h513v26.3H0zM0 52.6h513v26.3H0zM0 105.2h513v26.3H0zM0 157.8h513v26.3H0zM0 210.5h513v26.3H0zM0 263.1h513v26.3H0zM0 315.7h513V342H0z" })),
+    React.createElement("path", { fill: "#2E52B2", d: "M0 0h256.5v184.1H0z" }),
+    React.createElement("g", { fill: "#FFF" },
+        React.createElement("path", { d: "m47.8 138.9-4-12.8-4.4 12.8H26.2l10.7 7.7-4 12.8 10.9-7.9 10.6 7.9-4.1-12.8 10.9-7.7zM104.1 138.9l-4.1-12.8-4.2 12.8H82.6l10.7 7.7-4 12.8 10.7-7.9 10.8 7.9-4-12.8 10.7-7.7zM160.6 138.9l-4.3-12.8-4 12.8h-13.5l11 7.7-4.2 12.8 10.7-7.9 11 7.9-4.2-12.8 10.7-7.7zM216.8 138.9l-4-12.8-4.2 12.8h-13.3l10.8 7.7-4 12.8 10.7-7.9 10.8 7.9-4.3-12.8 11-7.7zM100 75.3l-4.2 12.8H82.6L93.3 96l-4 12.6 10.7-7.8 10.8 7.8-4-12.6 10.7-7.9h-13.4zM43.8 75.3l-4.4 12.8H26.2L36.9 96l-4 12.6 10.9-7.8 10.6 7.8L50.3 96l10.9-7.9H47.8zM156.3 75.3l-4 12.8h-13.5l11 7.9-4.2 12.6 10.7-7.8 11 7.8-4.2-12.6 10.7-7.9h-13.2zM212.8 75.3l-4.2 12.8h-13.3l10.8 7.9-4 12.6 10.7-7.8 10.8 7.8-4.3-12.6 11-7.9h-13.5zM43.8 24.7l-4.4 12.6H26.2l10.7 7.9-4 12.7L43.8 50l10.6 7.9-4.1-12.7 10.9-7.9H47.8zM100 24.7l-4.2 12.6H82.6l10.7 7.9-4 12.7L100 50l10.8 7.9-4-12.7 10.7-7.9h-13.4zM156.3 24.7l-4 12.6h-13.5l11 7.9-4.2 12.7 10.7-7.9 11 7.9-4.2-12.7 10.7-7.9h-13.2zM212.8 24.7l-4.2 12.6h-13.3l10.8 7.9-4 12.7 10.7-7.9 10.8 7.9-4.3-12.7 11-7.9h-13.5z" }))));
+export default React.forwardRef(US);

package/esm/PhoneField/flags/Unknown.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useTheme } from '@emotion/react';
+import isLabelled from './isLabelled';
+/**
+ * The placeholder for an unknown country. The same 3:2 size as the flags,
+ * so replacing it with a flag does not shift the layout
+ */
+const Unknown = (props, ref) => {
+    const { color } = useTheme();
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1.5em", height: "1em", viewBox: "0 0 768 512", "aria-hidden": isLabelled(props) ? undefined : true, role: isLabelled(props) ? 'img' : undefined }, props, { ref: ref }),
+        React.createElement("rect", { width: "768", height: "512", fill: color.surface.darken(10).toString() }),
+        React.createElement("path", { transform: "translate(206.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: color.textPrimary.alpha(0.6).toString() })));
+};
+export default React.forwardRef(Unknown);

package/esm/PhoneField/flags/isLabelled.js

@@ -0,0 +1,5 @@
+/**
+ * A flag is decorative (hidden from screen readers) until it gets a label
+ */
+const isLabelled = (props) => Boolean(props['aria-label'] || props['aria-labelledby']);
+export default isLabelled;