@zonos/elements 1.3.184 → 1.3.186

package/dist/collection/components/common/zonos-stripe-phone-input/zonos-stripe-phone-input.js

@@ -0,0 +1,481 @@
+import { h, Host, } from "@stencil/core";
+import { AsYouType, isPossibleNumber, parsePhoneNumberFromString as parsePhoneNumber, } from "libphonenumber-js";
+import { translate } from "../../store/translationStore";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { inheritAriaAttributes, inheritAttributes, } from "../../utils/checkout/form/helpers";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronDownIcon from "./assets/ChevronDownIcon.svg";
+let inputId = 0;
+export class ZonosStripePhoneInput {
+    constructor() {
+        this.inputId = `zonos--phone-input-${++inputId}`;
+        /**
+         * Inherited attributes from the host element
+         */
+        this.inheritedAttributes = {};
+        this.handleCountryChange = (event) => {
+            var _a;
+            const select = event.target;
+            const country = (_a = this.countryOptions) === null || _a === void 0 ? void 0 : _a[select.value];
+            this.selectedCountry = country;
+            // Update the phone formatter to use the new country code
+            this.updatePhoneFormatter();
+            const { isEmpty, valid, wrongFormat } = this.validatePhoneNumber();
+            this.inputValueChange.emit({
+                countryCode: (country === null || country === void 0 ? void 0 : country.countryCode) || null,
+                isEmpty,
+                phoneNumber: this.phoneNumber,
+                valid,
+                wrongFormat,
+            });
+        };
+        this.handlePhoneChange = (event) => {
+            var _a, _b;
+            const input = event.target;
+            const rawValue = input.value.replace(/[^0-9]/g, '');
+            if (this.asYouType) {
+                this.asYouType.reset();
+                const formatted = this.asYouType.input(rawValue);
+                // Get the full number (including the country code) from the formatter (e.g. +17022920000)
+                this.phoneNumber = ((_a = this.asYouType.getNumber()) === null || _a === void 0 ? void 0 : _a.number) || '';
+                input.value = formatted;
+            }
+            else {
+                this.phoneNumber = rawValue;
+            }
+            const { isEmpty, valid, wrongFormat } = this.validatePhoneNumber();
+            this.inputValueChange.emit({
+                countryCode: ((_b = this.selectedCountry) === null || _b === void 0 ? void 0 : _b.countryCode) || null,
+                isEmpty,
+                phoneNumber: this.phoneNumber,
+                valid,
+                wrongFormat,
+            });
+        };
+        this.handleFocus = () => {
+            this.isFocused = true;
+        };
+        this.handleBlur = () => {
+            this.isFocused = false;
+        };
+        // Type guard to check if the country code is in the country options
+        this.isCountryCode = (countryCode) => {
+            var _a;
+            return ((_a = this.countryOptions) === null || _a === void 0 ? void 0 : _a[countryCode]) !== undefined;
+        };
+        this.initPhoneNumberValue = () => {
+            var _a;
+            if (!this.countryOptions) {
+                return;
+            }
+            // Guess the country code from the phone number
+            const guessedPhoneNumberCountryCode = (_a = parsePhoneNumber(this.inputValue || '', {
+                defaultCountry: this.countryCode,
+            })) === null || _a === void 0 ? void 0 : _a.country;
+            // If the guessed country code is not in the country options, use the provided country code
+            const countryCode = guessedPhoneNumberCountryCode &&
+                this.isCountryCode(guessedPhoneNumberCountryCode)
+                ? guessedPhoneNumberCountryCode
+                : this.countryCode;
+            // Get the first available country from the options
+            const firstCountry = Object.values(this.countryOptions).find(Boolean);
+            // If no country code is provided, set the first available country
+            if (!countryCode) {
+                this.selectedCountry = firstCountry;
+                const { isEmpty, valid, wrongFormat } = this.validatePhoneNumber();
+                // Emit the change event so the parent component can update the state to the first country
+                this.inputValueChange.emit({
+                    countryCode: (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.countryCode) || null,
+                    isEmpty,
+                    phoneNumber: this.phoneNumber,
+                    valid,
+                    wrongFormat,
+                });
+                return;
+            }
+            this.selectedCountry =
+                this.countryOptions[countryCode] || firstCountry;
+            this.phoneNumber = this.inputValue || '';
+            // Update the phone formatter to use the new country code
+            this.updatePhoneFormatter();
+        };
+        this.autoComplete = '';
+        this.countryOptions = null;
+        this.disabled = false;
+        this.error = undefined;
+        this.inputLabel = undefined;
+        this.overridePrimaryColor = undefined;
+        this.overrideSecondaryColor = undefined;
+        this.inputValue = undefined;
+        this.countryCode = null;
+        this.minWidth = undefined;
+        this.selectedCountry = undefined;
+        this.phoneNumber = '';
+        this.isFocused = false;
+        this.isSelectOpen = false;
+    }
+    onCountryOptionsChange() {
+        // Re-initialize the phone number value when the country options change
+        this.initPhoneNumberValue();
+    }
+    onSelectedCountryChange() {
+        this.updatePhoneFormatter();
+    }
+    onPhoneNumberChange() {
+        this.phoneNumber = this.inputValue || '';
+        this.updatePhoneFormatter();
+    }
+    validatePhoneNumber() {
+        var _a;
+        if (!this.phoneNumber) {
+            return {
+                isEmpty: true,
+                valid: false,
+                wrongFormat: false,
+            };
+        }
+        // Just accept the phone number if the formatter is not available
+        const fullNumber = ((_a = this.asYouType.getNumber()) === null || _a === void 0 ? void 0 : _a.number) || '';
+        const isValid = isPossibleNumber(fullNumber);
+        return {
+            isEmpty: false,
+            valid: isValid,
+            wrongFormat: !isValid,
+        };
+    }
+    /**
+     * Update the phone formatter to use the new country code
+     */
+    updatePhoneFormatter() {
+        var _a, _b, _c, _d;
+        const firstCountry = Object.values(this.countryOptions || []).find(Boolean);
+        const countryCode = ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode) || (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.countryCode) || 'US';
+        this.asYouType = new AsYouType(countryCode);
+        if (this.phoneNumber) {
+            // Re-format existing number with new formatter
+            this.asYouType.input(this.phoneNumber);
+            if (this.inputRef) {
+                this.inputRef.value =
+                    ((_b = this.asYouType.getNumber()) === null || _b === void 0 ? void 0 : _b.formatNational()) || '';
+                const { isEmpty, valid, wrongFormat } = this.validatePhoneNumber();
+                // emit the change event
+                this.inputValueChange.emit({
+                    countryCode: ((_c = this.selectedCountry) === null || _c === void 0 ? void 0 : _c.countryCode) || null,
+                    isEmpty,
+                    phoneNumber: ((_d = this.asYouType.getNumber()) === null || _d === void 0 ? void 0 : _d.number) || '',
+                    valid,
+                    wrongFormat,
+                });
+            }
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, [
+            'tabindex',
+            'title',
+            'data-form-type',
+            'dir',
+        ]));
+        this.initPhoneNumberValue();
+    }
+    componentDidLoad() {
+        this.initPhoneNumberValue();
+    }
+    render() {
+        var _a;
+        const primaryColor = this.overridePrimaryColor || zonosStore.appearance.colorPrimary;
+        const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
+        const isDark = primaryColor && isDarkColor(primaryColor);
+        const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
+        const hasContent = !!this.phoneNumber;
+        const countryOptionsList = this.countryOptions
+            ? Object.values(this.countryOptions).filter(Boolean)
+            : [];
+        return (h(Host, { key: 'ece9737db2ea37d1e75a8840e911221a6604ead2', class: classes([
+                'zonos--phone-input zonos--elements',
+                isDark && 'dark',
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'b3cda8bc90655aab7c45b8dce02f615236e73e0f', class: classes([
+                'zonos--label-wrapper',
+                this.disabled && 'disabled',
+                this.isFocused && 'focused',
+                hasContent && 'has-content',
+                this.error && 'has-error',
+                this.inputLabel && 'has-label',
+            ]) }, h("select", { key: '43c8539ccc6d4a2dee364c540c552a737cf450ed', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            var _a;
+            return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
+        })), h("div", { key: '50609301fd2740f213b9f4c3385dd1628e663265', class: "zonos--input-group" }, h("div", { key: '5920176f0986fbeb623469a2d99d7b7182b95150', class: "zonos--select-wrapper" }, h("div", { key: 'c96f9003f77cbd2f3ee2bfc9ae453307a3c08d3b', class: "zonos--country-select" }, h("div", { key: '3afef887d3f8ebfd421e887364ba660f1435236c', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: 'aa2c0384d1f5139af73e5d21fa2b728c1a3a1251', class: "zonos--country-select-selected" }, h("div", { key: '9ea7d3e818b50a279979cb89248e8c46bb66da0e', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '1c49374c7e5051ac640b1dbe20aab27e485eecd4', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'f95d8a3f59bd62b8d488350015bd52be310cfe85', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'e69bbd00f23ed3997bcbea13842b49600b6abe81', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: 'a20941918412c6cad3e03ba3684fd9f6c2db8bd8', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: 'fb832d25cb005ce39082ff7829000d13a35b453b', class: classes([
+                'zonos--input-container',
+                this.inputLabel && 'has-label',
+                hasContent && 'has-content',
+            ]) }, h("input", Object.assign({ key: '8a5fa81c091f92937e448a60175241b6e906af68' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '269197d54f8226a66f1033fce49a793fe4790341', class: "zonos--floated-label" }, h("label", { key: '7d3b810eba257a877ff4370457af8f4117c8a82f', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'ba21514e60b298d4d353d92246e91eadd1e6d744', textColor: "red-600" }, this.error))));
+    }
+    static get is() { return "zonos-stripe-phone-input"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-stripe-phone-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-stripe-phone-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The autoComplete attribute for the phone input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-complete",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "countryOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GenericZonosSettings['countryFields'] | null",
+                    "resolved": "null | undefined | { AD: CountryFields; AE: CountryFields; AF: CountryFields; AG: CountryFields; AI: CountryFields; AL: CountryFields; AM: CountryFields; AO: CountryFields; AQ: CountryFields; AR: CountryFields; AS: CountryFields; AT: CountryFields; AU: CountryFields; AW: CountryFields; AX: CountryFields; AZ: CountryFields; BA: CountryFields; BB: CountryFields; BD: CountryFields; BE: CountryFields; BF: CountryFields; BG: CountryFields; BH: CountryFields; BI: CountryFields; BJ: CountryFields; BL: CountryFields; BM: CountryFields; BN: CountryFields; BO: CountryFields; BQ: CountryFields; BR: CountryFields; BS: CountryFields; BT: CountryFields; BV: CountryFields; BW: CountryFields; BY: CountryFields; BZ: CountryFields; CA: CountryFields; CC: CountryFields; CD: CountryFields; CF: CountryFields; CG: CountryFields; CH: CountryFields; CI: CountryFields; CK: CountryFields; CL: CountryFields; CM: CountryFields; CN: CountryFields; CO: CountryFields; CR: CountryFields; CU: CountryFields; CV: CountryFields; CW: CountryFields; CX: CountryFields; CY: CountryFields; CZ: CountryFields; DE: CountryFields; DJ: CountryFields; DK: CountryFields; DM: CountryFields; DO: CountryFields; DZ: CountryFields; EC: CountryFields; EE: CountryFields; EG: CountryFields; EH: CountryFields; ER: CountryFields; ES: CountryFields; ET: CountryFields; FI: CountryFields; FJ: CountryFields; FK: CountryFields; FM: CountryFields; FO: CountryFields; FR: CountryFields; GA: CountryFields; GB: CountryFields; GD: CountryFields; GE: CountryFields; GF: CountryFields; GG: CountryFields; GH: CountryFields; GI: CountryFields; GL: CountryFields; GM: CountryFields; GN: CountryFields; GP: CountryFields; GQ: CountryFields; GR: CountryFields; GS: CountryFields; GT: CountryFields; GU: CountryFields; GW: CountryFields; GY: CountryFields; HK: CountryFields; HM: CountryFields; HN: CountryFields; HR: CountryFields; HT: CountryFields; HU: CountryFields; IC: CountryFields; ID: CountryFields; IE: CountryFields; IL: CountryFields; IM: CountryFields; IN: CountryFields; IO: CountryFields; IQ: CountryFields; IR: CountryFields; IS: CountryFields; IT: CountryFields; JE: CountryFields; JM: CountryFields; JO: CountryFields; JP: CountryFields; KE: CountryFields; KG: CountryFields; KH: CountryFields; KI: CountryFields; KM: CountryFields; KN: CountryFields; KP: CountryFields; KR: CountryFields; KW: CountryFields; KY: CountryFields; KZ: CountryFields; LA: CountryFields; LB: CountryFields; LC: CountryFields; LI: CountryFields; LK: CountryFields; LR: CountryFields; LS: CountryFields; LT: CountryFields; LU: CountryFields; LV: CountryFields; LY: CountryFields; MA: CountryFields; MC: CountryFields; MD: CountryFields; ME: CountryFields; MF: CountryFields; MG: CountryFields; MH: CountryFields; MK: CountryFields; ML: CountryFields; MM: CountryFields; MN: CountryFields; MO: CountryFields; MP: CountryFields; MQ: CountryFields; MR: CountryFields; MS: CountryFields; MT: CountryFields; MU: CountryFields; MV: CountryFields; MW: CountryFields; MX: CountryFields; MY: CountryFields; MZ: CountryFields; NA: CountryFields; NC: CountryFields; NE: CountryFields; NF: CountryFields; NG: CountryFields; NI: CountryFields; NL: CountryFields; NO: CountryFields; NP: CountryFields; NR: CountryFields; NU: CountryFields; NZ: CountryFields; OM: CountryFields; PA: CountryFields; PE: CountryFields; PF: CountryFields; PG: CountryFields; PH: CountryFields; PK: CountryFields; PL: CountryFields; PM: CountryFields; PN: CountryFields; PR: CountryFields; PS: CountryFields; PT: CountryFields; PW: CountryFields; PY: CountryFields; QA: CountryFields; RE: CountryFields; RO: CountryFields; RS: CountryFields; RU: CountryFields; RW: CountryFields; SA: CountryFields; SB: CountryFields; SC: CountryFields; SD: CountryFields; SE: CountryFields; SG: CountryFields; SH: CountryFields; SI: CountryFields; SJ: CountryFields; SK: CountryFields; SL: CountryFields; SM: CountryFields; SN: CountryFields; SO: CountryFields; SR: CountryFields; SS: CountryFields; ST: CountryFields; SV: CountryFields; SX: CountryFields; SY: CountryFields; SZ: CountryFields; TC: CountryFields; TD: CountryFields; TF: CountryFields; TG: CountryFields; TH: CountryFields; TJ: CountryFields; TK: CountryFields; TL: CountryFields; TM: CountryFields; TN: CountryFields; TO: CountryFields; TR: CountryFields; TT: CountryFields; TV: CountryFields; TW: CountryFields; TZ: CountryFields; UA: CountryFields; UG: CountryFields; UM: CountryFields; US: CountryFields; UY: CountryFields; UZ: CountryFields; VA: CountryFields; VC: CountryFields; VE: CountryFields; VG: CountryFields; VI: CountryFields; VN: CountryFields; VU: CountryFields; WF: CountryFields; WS: CountryFields; YE: CountryFields; YT: CountryFields; ZA: CountryFields; ZM: CountryFields; ZW: CountryFields; }",
+                    "references": {
+                        "GenericZonosSettings": {
+                            "location": "import",
+                            "path": "src/types/utils/ZonosSettings",
+                            "id": "src/types/utils/ZonosSettings.ts::GenericZonosSettings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available country options for the select dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false
+            },
+            "inputLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-label",
+                "reflect": false
+            },
+            "overridePrimaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the primary color"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-primary-color",
+                "reflect": false
+            },
+            "overrideSecondaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the secondary color"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-secondary-color",
+                "reflect": false
+            },
+            "inputValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the phone input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-value",
+                "reflect": false
+            },
+            "countryCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode | null",
+                    "resolved": "CountryCode | null",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The country code of the phone input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "country-code",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width of the phone input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-width",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedCountry": {},
+            "phoneNumber": {},
+            "isFocused": {},
+            "isSelectOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputValueChange",
+                "name": "inputValueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the country or phone number changes"
+                },
+                "complexType": {
+                    "original": "{\n    countryCode: CountryCode | null;\n    isEmpty: boolean;\n    phoneNumber: string;\n    valid: boolean;\n    wrongFormat: boolean;\n  }",
+                    "resolved": "{ countryCode: CountryCode | null; isEmpty: boolean; phoneNumber: string; valid: boolean; wrongFormat: boolean; }",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::CountryCode"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "countryOptions",
+                "methodName": "onCountryOptionsChange"
+            }, {
+                "propName": "selectedCountry",
+                "methodName": "onSelectedCountryChange"
+            }, {
+                "propName": "inputValue",
+                "methodName": "onPhoneNumberChange"
+            }];
+    }
+}

package/dist/collection/components/common/zonos-stripe-select/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/common/zonos-stripe-select/assets/RemoveLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>

package/dist/collection/components/common/zonos-stripe-select/zonos-stripe-select.css

@@ -0,0 +1,178 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  --zonos--background-color: #f1f1f1;
+  --zonos--local-glowing-color: 0 0 0 3px hsla(0, 0%, 100%, 25%),
+    0 0 0 1px var(--zonos--primary-color);
+  --zonos--border: 1px solid #e8e8e8;
+}
+
+:host(.dark) {
+  color-scheme: dark;
+  --zonos--background-color: #30313d;
+  --zonos--local-glowing-color: 0px 2px 4px rgba(0, 0, 0, 0.5),
+    0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%),
+    0 1px 1px 0 rgba(255, 255, 255, 0.12);
+  --zonos--border: 1px solid var(--zonos--primary-color);
+}
+
+:host {
+  margin: 1px;
+  position: relative;
+  min-width: var(--zonos--min-width, unset);
+  /**disabled state */
+}
+:host .zonos--label-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: calc(var(--zonos-elements-size-xl) - 4px);
+  width: 100%;
+  background: var(--zonos--background-color);
+  border-radius: var(--zonos--border-radius);
+  border: var(--zonos--border);
+  outline-offset: 0;
+  outline-width: 2px;
+}
+:host .zonos--floated-select {
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 36px 0 16px;
+  outline: none;
+  transition: var(--zonos-elements-transition);
+  width: 100%;
+  border-radius: var(--zonos--border-radius);
+  background: var(--zonos--background-color);
+  border: var(--zonos--border);
+  order: 2;
+  font-weight: 400;
+  font-size: var(--zonos--font-size);
+  color: var(--zonos--background-color);
+  appearance: none;
+  cursor: pointer;
+}
+:host .zonos--floated-select.has-label {
+  padding: 24px 36px 2px 16px;
+}
+:host .zonos--floated-select:focus {
+  outline: none;
+  border: var(--zonos--border);
+}
+:host .zonos--floated-select:focus ~ .zonos--floated-label::after {
+  box-shadow: var(--zonos--glowing-color, var(--zonos--local-glowing-color));
+}
+:host .zonos--floated-select.has-error + .zonos--floated-label::after {
+  box-shadow: 0 0 0 2px #df1b41;
+}
+:host .zonos--floated-select.has-content, :host .zonos--floated-select:focus {
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--floated-select.has-content ~ .zonos--floated-label label, :host .zonos--floated-select:focus ~ .zonos--floated-label label {
+  top: 11px;
+  transform: scale(0.8);
+}
+:host .zonos--floated-select:-webkit-autofill, :host .zonos--floated-select:-moz-autofill {
+  background-color: var(--zonos-elements-input-background);
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--floated-select option {
+  background-color: var(--zonos--background-color);
+  color: inherit;
+}
+:host .zonos--floated-label {
+  display: block;
+  max-height: 0;
+  pointer-events: none;
+  order: 1;
+}
+:host .zonos--floated-label label {
+  color: var(--zonos-elements-gray-800);
+  position: absolute;
+  font-size: 16px;
+  line-height: 16px;
+  display: inline-block;
+  filter: blur(0);
+  transform-origin: left top;
+  transition: var(--zonos-elements-transition);
+  margin-left: 16px;
+  top: calc(50% - 8px);
+  z-index: 1;
+}
+:host .zonos--floated-label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--zonos--border-radius);
+}
+:host .zonos--actions-wrapper {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  pointer-events: none;
+  display: flex;
+}
+:host .zonos--select-chevron {
+  cursor: pointer;
+  color: var(--zonos-elements-gray-800);
+  z-index: 1;
+}
+:host .disabled .zonos--floated-label {
+  pointer-events: inherit;
+}
+:host .disabled .zonos--floated-label::after {
+  cursor: not-allowed;
+  z-index: 1;
+}
+:host .disabled .zonos--select-chevron {
+  opacity: 0.5;
+}
+
+.zonos--clear-button {
+  background: none;
+  border: none;
+  pointer-events: auto;
+  cursor: pointer;
+}
+.zonos--clear-button:hover {
+  filter: brightness(0.8);
+}
+
+:host(.dark) .zonos--label-wrapper {
+  background: #30313d;
+}