@newskit-render/my-account 7.0.1 → 7.1.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.
- package/dist/cjs/Components/Sections/Form/Phone/Phone.js +1 -1
- package/dist/cjs/Components/Sections/Form/Phone/Phone.js.map +1 -1
- package/dist/cjs/Components/Sections/Form/Phone/styles.d.ts +0 -3
- package/dist/cjs/Components/Sections/Form/Phone/styles.js +6 -7
- package/dist/cjs/Components/Sections/Form/Phone/styles.js.map +1 -1
- package/dist/esm/Components/Sections/Form/Phone/Phone.js +3 -3
- package/dist/esm/Components/Sections/Form/Phone/Phone.js.map +1 -1
- package/dist/esm/Components/Sections/Form/Phone/styles.d.ts +0 -3
- package/dist/esm/Components/Sections/Form/Phone/styles.js +6 -7
- package/dist/esm/Components/Sections/Form/Phone/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -163,7 +163,7 @@ var Phone = function (_a) {
|
|
|
163
163
|
}
|
|
164
164
|
});
|
|
165
165
|
}); };
|
|
166
|
-
return (react_1.default.createElement(
|
|
166
|
+
return (react_1.default.createElement(newskit_1.Grid, { xsMargin: "space000", xsColumnGutter: "space000", xsRowGutter: "space000" },
|
|
167
167
|
react_1.default.createElement(newskit_1.Global, { styles: (0, newskit_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "", "\n "], ["\n ", "", "\n "])), styles_1.phoneInputCSS, styles_1.styledInputs) }),
|
|
168
168
|
react_1.default.createElement(newskit_1.Label, __assign({ htmlFor: "".concat(type, "-phone-input") }, inputText === null || inputText === void 0 ? void 0 : inputText.labelProps), "".concat(phoneDisplayName.charAt(0).toUpperCase() + phoneDisplayName.slice(1), " phone number")),
|
|
169
169
|
react_1.default.createElement(styles_1.InputIconContainerBlock, { id: "Input-Icon-Container", marginBlockEnd: "space080" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/Phone.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,+CAAgF;AAChF,
|
|
1
|
+
{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/Phone.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const phoneInputCSS = "\n:root {\n --PhoneInput-color--focus: #03b2cb;\n --PhoneInputInternationalIconPhone-opacity: 0.8;\n --PhoneInputInternationalIconGlobe-opacity: 0.65;\n --PhoneInputCountrySelect-marginRight: 0.35em;\n --PhoneInputCountrySelectArrow-width: 0.3em;\n --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\n --PhoneInputCountrySelectArrow-borderWidth: 1px;\n --PhoneInputCountrySelectArrow-opacity: 0.45;\n --PhoneInputCountrySelectArrow-color: inherit;\n --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountrySelectArrow-transform: rotate(45deg);\n --PhoneInputCountryFlag-aspectRatio: 1.5;\n --PhoneInputCountryFlag-height: 1em;\n --PhoneInputCountryFlag-borderWidth: 1px;\n --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\n --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\n}\n\n.PhoneInput {\n display: flex;\n align-items: center;\n}\n\n.PhoneInputInput {\n flex: 1;\n min-width: 0;\n}\n\n.PhoneInputCountryIcon {\n width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\n height: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--square {\n width: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--border {\n\n background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\n}\n\n.PhoneInputCountryIconImg {\n\n display: block;\n\n width: 100%;\n height: 100%;\n}\n\n.PhoneInputInternationalIconPhone {\n opacity: var(--PhoneInputInternationalIconPhone-opacity);\n}\n\n.PhoneInputInternationalIconGlobe {\n opacity: var(--PhoneInputInternationalIconGlobe-opacity);\n}\n\n\n.PhoneInputCountry {\n position: relative;\n align-self: stretch;\n display: flex;\n align-items: center;\n margin-right: var(--PhoneInputCountrySelect-marginRight);\n}\n\n.PhoneInputCountrySelect {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.PhoneInputCountrySelect[disabled] {\n cursor: default;\n}\n\n.PhoneInputCountrySelectArrow {\n display: block;\n width: var(--PhoneInputCountrySelectArrow-width);\n height: var(--PhoneInputCountrySelectArrow-width);\n margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\n border-style: solid;\n border-color: var(--PhoneInputCountrySelectArrow-color);\n border-top-width: 0;\n border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n border-left-width: 0;\n border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n transform: var(--PhoneInputCountrySelectArrow-transform);\n opacity: var(--PhoneInputCountrySelectArrow-opacity);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n";
|
|
3
3
|
export declare const styledInputs = "\n.PhoneInput{\n margin-bottom: 8px;\n}\n.PhoneInputInput{\n height: 48px;\n padding-left: 12px;\n padding-right: 40px;\n border-radius: 0px 8px 8px 0px;\n \n}\n.PhoneInputCountry{\n background: #FAFAFA;\n border: 1px solid #E4E4E4;\n padding: 10px;\n margin: 0px;\n border-radius: 8px 0px 0px 8px;\n border-right: none;\n}\n.PhoneInputCountryIcon{\n margin-right: 7px;\n}\n@media screen and (max-width: 480px) {\n .PhoneInput{\n width: 100%;\n }\n}\n";
|
|
4
|
-
export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("newskit").GridProps & {
|
|
5
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
6
|
-
}, {}, {}>;
|
|
7
4
|
export declare const InputIconContainer: import("@emotion/styled").StyledComponent<{
|
|
8
5
|
theme?: import("@emotion/react").Theme | undefined;
|
|
9
6
|
as?: import("react").ElementType<any> | undefined;
|
|
@@ -4,14 +4,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.AssistiveTextWrapper = exports.IconContainer = exports.InputIconContainerBlock = exports.InputIconContainer = exports.
|
|
7
|
+
exports.AssistiveTextWrapper = exports.IconContainer = exports.InputIconContainerBlock = exports.InputIconContainer = exports.styledInputs = exports.phoneInputCSS = void 0;
|
|
8
8
|
var newskit_1 = require("newskit");
|
|
9
9
|
exports.phoneInputCSS = "\n:root {\n --PhoneInput-color--focus: #03b2cb;\n --PhoneInputInternationalIconPhone-opacity: 0.8;\n --PhoneInputInternationalIconGlobe-opacity: 0.65;\n --PhoneInputCountrySelect-marginRight: 0.35em;\n --PhoneInputCountrySelectArrow-width: 0.3em;\n --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\n --PhoneInputCountrySelectArrow-borderWidth: 1px;\n --PhoneInputCountrySelectArrow-opacity: 0.45;\n --PhoneInputCountrySelectArrow-color: inherit;\n --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountrySelectArrow-transform: rotate(45deg);\n --PhoneInputCountryFlag-aspectRatio: 1.5;\n --PhoneInputCountryFlag-height: 1em;\n --PhoneInputCountryFlag-borderWidth: 1px;\n --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\n --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\n}\n\n.PhoneInput {\n display: flex;\n align-items: center;\n}\n\n.PhoneInputInput {\n flex: 1;\n min-width: 0;\n}\n\n.PhoneInputCountryIcon {\n width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\n height: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--square {\n width: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--border {\n\n background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\n}\n\n.PhoneInputCountryIconImg {\n\n display: block;\n\n width: 100%;\n height: 100%;\n}\n\n.PhoneInputInternationalIconPhone {\n opacity: var(--PhoneInputInternationalIconPhone-opacity);\n}\n\n.PhoneInputInternationalIconGlobe {\n opacity: var(--PhoneInputInternationalIconGlobe-opacity);\n}\n\n\n.PhoneInputCountry {\n position: relative;\n align-self: stretch;\n display: flex;\n align-items: center;\n margin-right: var(--PhoneInputCountrySelect-marginRight);\n}\n\n.PhoneInputCountrySelect {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.PhoneInputCountrySelect[disabled] {\n cursor: default;\n}\n\n.PhoneInputCountrySelectArrow {\n display: block;\n width: var(--PhoneInputCountrySelectArrow-width);\n height: var(--PhoneInputCountrySelectArrow-width);\n margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\n border-style: solid;\n border-color: var(--PhoneInputCountrySelectArrow-color);\n border-top-width: 0;\n border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n border-left-width: 0;\n border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n transform: var(--PhoneInputCountrySelectArrow-transform);\n opacity: var(--PhoneInputCountrySelectArrow-opacity);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n";
|
|
10
10
|
exports.styledInputs = "\n.PhoneInput{\n margin-bottom: 8px;\n}\n.PhoneInputInput{\n height: 48px;\n padding-left: 12px;\n padding-right: 40px;\n border-radius: 0px 8px 8px 0px;\n \n}\n.PhoneInputCountry{\n background: #FAFAFA;\n border: 1px solid #E4E4E4;\n padding: 10px;\n margin: 0px;\n border-radius: 8px 0px 0px 8px;\n border-right: none;\n}\n.PhoneInputCountryIcon{\n margin-right: 7px;\n}\n@media screen and (max-width: 480px) {\n .PhoneInput{\n width: 100%;\n }\n}\n";
|
|
11
|
-
exports.
|
|
12
|
-
exports.
|
|
13
|
-
exports.
|
|
14
|
-
exports.
|
|
15
|
-
|
|
16
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
11
|
+
exports.InputIconContainer = newskit_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n ", "\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"], ["\n position: relative;\n ", "\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"])), (0, newskit_1.getSpacingCssFromTheme)('marginBottom', 'space080'), (0, newskit_1.getMediaQueryFromTheme)('xs'), (0, newskit_1.getMediaQueryFromTheme)('md'));
|
|
12
|
+
exports.InputIconContainerBlock = (0, newskit_1.styled)(newskit_1.Block)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"], ["\n position: relative;\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"])), (0, newskit_1.getMediaQueryFromTheme)('xs'), (0, newskit_1.getMediaQueryFromTheme)('md'));
|
|
13
|
+
exports.IconContainer = newskit_1.styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n right: 10px;\n top: 37px;\n transform: translate(0, -90%);\n"], ["\n position: absolute;\n right: 10px;\n top: 37px;\n transform: translate(0, -90%);\n"])));
|
|
14
|
+
exports.AssistiveTextWrapper = (0, newskit_1.styled)(newskit_1.Block)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n"], ["\n position: absolute;\n"])));
|
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17
16
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/styles.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/styles.tsx"],"names":[],"mappings":";;;;;;;AAAA,mCAKgB;AAEH,QAAA,aAAa,GAAG,yjHAqH5B,CAAA;AACY,QAAA,YAAY,GAAG,udA2B3B,CAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,uKAAA,6BAExC,EAAkD,MAClD,EAA4B,+BAG5B,EAA4B,4BAG/B,KAPG,IAAA,gCAAsB,EAAC,cAAc,EAAE,UAAU,CAAC,EAClD,IAAA,gCAAsB,EAAC,IAAI,CAAC,EAG5B,IAAA,gCAAsB,EAAC,IAAI,CAAC,EAG/B;AAEY,QAAA,uBAAuB,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,+JAAA,6BAEhD,EAA4B,+BAG5B,EAA4B,4BAG/B,KANG,IAAA,gCAAsB,EAAC,IAAI,CAAC,EAG5B,IAAA,gCAAsB,EAAC,IAAI,CAAC,EAG/B;AAEY,QAAA,aAAa,GAAG,gBAAM,CAAC,IAAI,8JAAA,2FAKvC,KAAA;AACY,QAAA,oBAAoB,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,8FAAA,2BAEhD,KAAA"}
|
|
@@ -51,14 +51,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
51
51
|
};
|
|
52
52
|
import React, { useState } from 'react';
|
|
53
53
|
import { useAccountContext } from '../../../../context';
|
|
54
|
-
import { withTheme, ScreenReaderOnly, useInstrumentation, toNewsKitIcon, Label, AssistiveText, Global, css, } from 'newskit';
|
|
54
|
+
import { withTheme, ScreenReaderOnly, useInstrumentation, toNewsKitIcon, Label, AssistiveText, Global, css, Grid, } from 'newskit';
|
|
55
55
|
import { ButtonGroup, createClickEvent, } from '@newskit-render/shared-components';
|
|
56
56
|
import { useRouter } from 'next/router';
|
|
57
57
|
import onSubmit from '../onFormSubmit';
|
|
58
58
|
import PhoneInput from 'react-phone-number-input/max';
|
|
59
59
|
import { parsePhoneNumber } from 'react-phone-number-input';
|
|
60
60
|
import { ContextName } from '../../../../context/types';
|
|
61
|
-
import { phoneInputCSS, styledInputs,
|
|
61
|
+
import { phoneInputCSS, styledInputs, InputIconContainerBlock, IconContainer, AssistiveTextWrapper, } from './styles';
|
|
62
62
|
import { Error as FilledError } from '@emotion-icons/material/Error';
|
|
63
63
|
import { CheckCircle as FilledCheckCircle } from '@emotion-icons/material/CheckCircle';
|
|
64
64
|
import unescape from 'lodash.unescape';
|
|
@@ -135,7 +135,7 @@ var Phone = function (_a) {
|
|
|
135
135
|
}
|
|
136
136
|
});
|
|
137
137
|
}); };
|
|
138
|
-
return (React.createElement(
|
|
138
|
+
return (React.createElement(Grid, { xsMargin: "space000", xsColumnGutter: "space000", xsRowGutter: "space000" },
|
|
139
139
|
React.createElement(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "", "\n "], ["\n ", "", "\n "])), phoneInputCSS, styledInputs) }),
|
|
140
140
|
React.createElement(Label, __assign({ htmlFor: "".concat(type, "-phone-input") }, inputText === null || inputText === void 0 ? void 0 : inputText.labelProps), "".concat(phoneDisplayName.charAt(0).toUpperCase() + phoneDisplayName.slice(1), " phone number")),
|
|
141
141
|
React.createElement(InputIconContainerBlock, { id: "Input-Icon-Container", marginBlockEnd: "space080" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/Phone.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAA2B,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAChF,OAAO,EACL,SAAS,EAET,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,KAAK,EACL,aAAa,EACb,MAAM,EACN,GAAG,
|
|
1
|
+
{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/Phone.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const phoneInputCSS = "\n:root {\n --PhoneInput-color--focus: #03b2cb;\n --PhoneInputInternationalIconPhone-opacity: 0.8;\n --PhoneInputInternationalIconGlobe-opacity: 0.65;\n --PhoneInputCountrySelect-marginRight: 0.35em;\n --PhoneInputCountrySelectArrow-width: 0.3em;\n --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\n --PhoneInputCountrySelectArrow-borderWidth: 1px;\n --PhoneInputCountrySelectArrow-opacity: 0.45;\n --PhoneInputCountrySelectArrow-color: inherit;\n --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountrySelectArrow-transform: rotate(45deg);\n --PhoneInputCountryFlag-aspectRatio: 1.5;\n --PhoneInputCountryFlag-height: 1em;\n --PhoneInputCountryFlag-borderWidth: 1px;\n --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\n --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\n}\n\n.PhoneInput {\n display: flex;\n align-items: center;\n}\n\n.PhoneInputInput {\n flex: 1;\n min-width: 0;\n}\n\n.PhoneInputCountryIcon {\n width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\n height: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--square {\n width: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--border {\n\n background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\n}\n\n.PhoneInputCountryIconImg {\n\n display: block;\n\n width: 100%;\n height: 100%;\n}\n\n.PhoneInputInternationalIconPhone {\n opacity: var(--PhoneInputInternationalIconPhone-opacity);\n}\n\n.PhoneInputInternationalIconGlobe {\n opacity: var(--PhoneInputInternationalIconGlobe-opacity);\n}\n\n\n.PhoneInputCountry {\n position: relative;\n align-self: stretch;\n display: flex;\n align-items: center;\n margin-right: var(--PhoneInputCountrySelect-marginRight);\n}\n\n.PhoneInputCountrySelect {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.PhoneInputCountrySelect[disabled] {\n cursor: default;\n}\n\n.PhoneInputCountrySelectArrow {\n display: block;\n width: var(--PhoneInputCountrySelectArrow-width);\n height: var(--PhoneInputCountrySelectArrow-width);\n margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\n border-style: solid;\n border-color: var(--PhoneInputCountrySelectArrow-color);\n border-top-width: 0;\n border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n border-left-width: 0;\n border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n transform: var(--PhoneInputCountrySelectArrow-transform);\n opacity: var(--PhoneInputCountrySelectArrow-opacity);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n";
|
|
3
3
|
export declare const styledInputs = "\n.PhoneInput{\n margin-bottom: 8px;\n}\n.PhoneInputInput{\n height: 48px;\n padding-left: 12px;\n padding-right: 40px;\n border-radius: 0px 8px 8px 0px;\n \n}\n.PhoneInputCountry{\n background: #FAFAFA;\n border: 1px solid #E4E4E4;\n padding: 10px;\n margin: 0px;\n border-radius: 8px 0px 0px 8px;\n border-right: none;\n}\n.PhoneInputCountryIcon{\n margin-right: 7px;\n}\n@media screen and (max-width: 480px) {\n .PhoneInput{\n width: 100%;\n }\n}\n";
|
|
4
|
-
export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("newskit").GridProps & {
|
|
5
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
6
|
-
}, {}, {}>;
|
|
7
4
|
export declare const InputIconContainer: import("@emotion/styled").StyledComponent<{
|
|
8
5
|
theme?: import("@emotion/react").Theme | undefined;
|
|
9
6
|
as?: import("react").ElementType<any> | undefined;
|
|
@@ -2,13 +2,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import { Block, getMediaQueryFromTheme, getSpacingCssFromTheme,
|
|
5
|
+
import { Block, getMediaQueryFromTheme, getSpacingCssFromTheme, styled, } from 'newskit';
|
|
6
6
|
export var phoneInputCSS = "\n:root {\n --PhoneInput-color--focus: #03b2cb;\n --PhoneInputInternationalIconPhone-opacity: 0.8;\n --PhoneInputInternationalIconGlobe-opacity: 0.65;\n --PhoneInputCountrySelect-marginRight: 0.35em;\n --PhoneInputCountrySelectArrow-width: 0.3em;\n --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\n --PhoneInputCountrySelectArrow-borderWidth: 1px;\n --PhoneInputCountrySelectArrow-opacity: 0.45;\n --PhoneInputCountrySelectArrow-color: inherit;\n --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountrySelectArrow-transform: rotate(45deg);\n --PhoneInputCountryFlag-aspectRatio: 1.5;\n --PhoneInputCountryFlag-height: 1em;\n --PhoneInputCountryFlag-borderWidth: 1px;\n --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\n --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\n --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\n}\n\n.PhoneInput {\n display: flex;\n align-items: center;\n}\n\n.PhoneInputInput {\n flex: 1;\n min-width: 0;\n}\n\n.PhoneInputCountryIcon {\n width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\n height: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--square {\n width: var(--PhoneInputCountryFlag-height);\n}\n\n.PhoneInputCountryIcon--border {\n\n background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\n}\n\n.PhoneInputCountryIconImg {\n\n display: block;\n\n width: 100%;\n height: 100%;\n}\n\n.PhoneInputInternationalIconPhone {\n opacity: var(--PhoneInputInternationalIconPhone-opacity);\n}\n\n.PhoneInputInternationalIconGlobe {\n opacity: var(--PhoneInputInternationalIconGlobe-opacity);\n}\n\n\n.PhoneInputCountry {\n position: relative;\n align-self: stretch;\n display: flex;\n align-items: center;\n margin-right: var(--PhoneInputCountrySelect-marginRight);\n}\n\n.PhoneInputCountrySelect {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.PhoneInputCountrySelect[disabled] {\n cursor: default;\n}\n\n.PhoneInputCountrySelectArrow {\n display: block;\n width: var(--PhoneInputCountrySelectArrow-width);\n height: var(--PhoneInputCountrySelectArrow-width);\n margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\n border-style: solid;\n border-color: var(--PhoneInputCountrySelectArrow-color);\n border-top-width: 0;\n border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n border-left-width: 0;\n border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\n transform: var(--PhoneInputCountrySelectArrow-transform);\n opacity: var(--PhoneInputCountrySelectArrow-opacity);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\n box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\n inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\n}\n\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\n opacity: 1;\n color: var(--PhoneInputCountrySelectArrow-color--focus);\n}\n";
|
|
7
7
|
export var styledInputs = "\n.PhoneInput{\n margin-bottom: 8px;\n}\n.PhoneInputInput{\n height: 48px;\n padding-left: 12px;\n padding-right: 40px;\n border-radius: 0px 8px 8px 0px;\n \n}\n.PhoneInputCountry{\n background: #FAFAFA;\n border: 1px solid #E4E4E4;\n padding: 10px;\n margin: 0px;\n border-radius: 8px 0px 0px 8px;\n border-right: none;\n}\n.PhoneInputCountryIcon{\n margin-right: 7px;\n}\n@media screen and (max-width: 480px) {\n .PhoneInput{\n width: 100%;\n }\n}\n";
|
|
8
|
-
export var
|
|
9
|
-
export var
|
|
10
|
-
export var
|
|
11
|
-
export var
|
|
12
|
-
|
|
13
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
8
|
+
export var InputIconContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n ", "\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"], ["\n position: relative;\n ", "\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"])), getSpacingCssFromTheme('marginBottom', 'space080'), getMediaQueryFromTheme('xs'), getMediaQueryFromTheme('md'));
|
|
9
|
+
export var InputIconContainerBlock = styled(Block)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"], ["\n position: relative;\n ", " {\n width: 100%;\n }\n ", " {\n width: 80%;\n }\n"])), getMediaQueryFromTheme('xs'), getMediaQueryFromTheme('md'));
|
|
10
|
+
export var IconContainer = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n right: 10px;\n top: 37px;\n transform: translate(0, -90%);\n"], ["\n position: absolute;\n right: 10px;\n top: 37px;\n transform: translate(0, -90%);\n"])));
|
|
11
|
+
export var AssistiveTextWrapper = styled(Block)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n"], ["\n position: absolute;\n"])));
|
|
12
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
14
13
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,EACL,KAAK,EACL,sBAAsB,EACtB,sBAAsB,EACtB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Phone/styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,EACL,KAAK,EACL,sBAAsB,EACtB,sBAAsB,EACtB,MAAM,GACP,MAAM,SAAS,CAAA;AAEhB,MAAM,CAAC,IAAM,aAAa,GAAG,yjHAqH5B,CAAA;AACD,MAAM,CAAC,IAAM,YAAY,GAAG,udA2B3B,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,uKAAA,6BAExC,EAAkD,MAClD,EAA4B,+BAG5B,EAA4B,4BAG/B,KAPG,sBAAsB,CAAC,cAAc,EAAE,UAAU,CAAC,EAClD,sBAAsB,CAAC,IAAI,CAAC,EAG5B,sBAAsB,CAAC,IAAI,CAAC,CAG/B,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,+JAAA,6BAEhD,EAA4B,+BAG5B,EAA4B,4BAG/B,KANG,sBAAsB,CAAC,IAAI,CAAC,EAG5B,sBAAsB,CAAC,IAAI,CAAC,CAG/B,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,IAAI,8JAAA,2FAKvC,IAAA,CAAA;AACD,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,8FAAA,2BAEhD,IAAA,CAAA"}
|