@zonos/elements 1.3.5 → 1.3.6

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -63,7 +63,7 @@ export class ZonosShipping {
                 value: item.id,
             };
         });
-        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -4,24 +4,23 @@ import { classes } from "../../utils/classes";
 export class ZonosBadge {
     constructor() {
         this.bold = false;
-        this.color = 'gray';
+        this.badgeColor = 'gray';
         this.icon = undefined;
         this.iconRight = false;
         this.size = 'default';
         this.rounded = false;
-        this.class = '';
     }
     render() {
-        return (h(Host, { key: '2d111e91f403ef5c03f742f5dabe9491623be91d', class: classes(['zonos--elements zonos--badge', this.class]), style: {
+        return (h(Host, { key: '0f502b63322730f508fd7c92f231573b1dfbfd6b', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e6debe091b732b857f180cee19bec4be435ea524', class: classes([
+            } }, h("div", { key: '4ee3f0b623067625ddd79336a1854f5ab796b3b1', class: classes([
                 'zonos--badge-content',
-                this.color,
+                this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'e92c97d77fa5ce279059953f7d7fbc5a0030aa5d' }, h("slot", { key: 'c93852c3225ba57dd26c26300254f348e349f9ad' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'e5bdf974408416811f7666fc453ca47db58fa43f' }, h("slot", { key: 'd953b60fefe2c25aea529b9de41938cfd96a285b' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -58,7 +57,7 @@ export class ZonosBadge {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "color": {
+            "badgeColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -81,7 +80,7 @@ export class ZonosBadge {
                         }],
                     "text": "The size of the badge"
                 },
-                "attribute": "color",
+                "attribute": "badge-color",
                 "reflect": false,
                 "defaultValue": "'gray'"
             },
@@ -170,24 +169,6 @@ export class ZonosBadge {
                 "attribute": "rounded",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/common/zonos-banner/zonos-banner.js

@@ -11,7 +11,6 @@ export class ZonosBanner {
         };
         this.bannerTitle = undefined;
         this.intent = undefined;
-        this.class = '';
         this.hasContent = false;
     }
     render() {
@@ -23,13 +22,9 @@ export class ZonosBanner {
                 h("slot", { onSlotchange: this.handleSlotChange }),
             ].filter(Boolean);
             const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
+            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { textColor: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { textColor: textColor }, content)))));
         };
-        const baseClass = classes([
-            'zonos--elements zonos--banner',
-            this.class,
-            this.intent,
-        ]);
+        const baseClass = classes(['zonos--elements zonos--banner', this.intent]);
         const font = zonosStoreFontFamily();
         switch (this.intent) {
             case 'error':
@@ -117,24 +112,6 @@ export class ZonosBanner {
                 },
                 "attribute": "intent",
                 "reflect": false
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/common/zonos-button/zonos-button.css

@@ -118,6 +118,11 @@
 :host button:not(.only-icon).has-icon {
   gap: var(--amino-space-8);
 }
+@media (max-width: 400px) {
+  :host button:not(.only-icon).has-icon {
+    font-size: var(--amino-font-size-s);
+  }
+}
 :host button.override-background {
   background-color: var(--background-color, var(--amino-gray-0));
   color: var(--color, var(--amino-gray-1200));
@@ -218,6 +223,7 @@
 :host button:not(.override-background).subtle {
   background: transparent;
   color: var(--color);
+  outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
   background: var(--amino-gray-100);
@@ -243,4 +249,16 @@
 }
 :host button:not(.override-background).outline:not([disabled]):active {
   background: var(--amino-gray-200);
+}
+:host .zonos--footer-country-flag {
+  height: 18px;
+  width: 18px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 30px;
+  box-shadow: var(--amino-v3-shadow-medium);
+  z-index: 10;
+  justify-self: center;
+  border-radius: var(--amino-radius-4);
+  width: 24px;
 }

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -12,8 +12,7 @@ export class ZonosButton {
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
-        this.class = '';
-        this.color = undefined;
+        this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
         this.isDisabled = false;
@@ -51,21 +50,21 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
-        const color = this.color && isColorVariable(this.color)
-            ? `var(--amino-${this.color})`
-            : this.color;
+        const color = this.buttonColor && isColorVariable(this.buttonColor)
+            ? `var(--amino-${this.buttonColor})`
+            : this.buttonColor;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
         const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
-        return (h(Host, { key: 'e1ad2eb31ad09c8671debc2e32d83af21085b912', class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: '817142c1d229333aee0b38864788346d2749d3d1', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { key: '0a087bf98251899711a71d69a89473479fc78c4f', class: classes([
+            } }, h("button", { key: '04bff1f932154f54b4af51b2fac053d40efc354f', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -78,7 +77,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { color: spinnerColor, size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'd80e58786f16bff52592a759679290a3a5ed0954', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }
@@ -94,25 +93,7 @@ export class ZonosButton {
     }
     static get properties() {
         return {
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "color": {
+            "buttonColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -132,7 +113,7 @@ export class ZonosButton {
                     "tags": [],
                     "text": "The color of the button text and svg"
                 },
-                "attribute": "color",
+                "attribute": "button-color",
                 "reflect": false
             },
             "backgroundColor": {

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -5,7 +5,6 @@ import { classes } from "../../utils/classes";
 export class ZonosCard {
     constructor() {
         this.actions = undefined;
-        this.class = undefined;
         this.footerActions = undefined;
         this.footerContent = undefined;
         this.footerHeight = undefined;
@@ -13,9 +12,9 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
+        return (h(Host, { key: '8581e04d45e7061bff02485ad9a9a22920b5fe84', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: '5e2038438e0885602c2e15808a34d62e86c95035', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: 'b7cbddad1cc08256ae9192349fe5a44302b6d79e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));
@@ -54,23 +53,6 @@ export class ZonosCard {
                     "text": "The actions to display in the header of the card"
                 }
             },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The CSS class to apply to the card element"
-                },
-                "attribute": "class",
-                "reflect": false
-            },
             "footerActions": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.css

@@ -0,0 +1,82 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--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 {
+  display: inline-flex;
+}
+:host label {
+  display: inline-flex;
+  position: relative;
+  gap: var(--amino-space-8);
+  align-items: center;
+}
+:host label.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+:host input[type=checkbox] {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 0;
+  top: 0;
+  z-index: -99999;
+}
+:host svg {
+  opacity: 0;
+}
+:host .checkmark-container {
+  height: var(--size);
+  width: var(--size);
+  background-color: transparent;
+  border: 1.5px solid var(--amino-gray-400);
+  position: relative;
+  border-radius: var(--border-radius, var(--amino-radius-4));
+}
+:host .checkmark {
+  opacity: 0;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  right: -1.5px;
+  bottom: -1.5px;
+  transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform: scale(0.4);
+  background-color: var(--background-color);
+  border-radius: var(--border-radius, var(--amino-radius-4));
+}
+:host input[type=checkbox]:checked ~ .checkmark-container .checkmark {
+  opacity: 1;
+  transform: scale(1);
+}

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -0,0 +1,218 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+import { colorPrefixes } from "../../../types/styles/Color";
+export class ZonosCheckbox {
+    constructor() {
+        this.backgroundColor = 'blue';
+        this.label = undefined;
+        this.isChecked = false;
+        this.isDisabled = false;
+        this.size = 12;
+        this.fontSize = 'base';
+        this.borderStyle = undefined;
+    }
+    render() {
+        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
+        const backgroundColor = isBackgroundVariable
+            ? `var(--amino-${this.backgroundColor}-600)`
+            : this.backgroundColor;
+        const checkmarkColor = isBackgroundVariable
+            ? // use lighter color if the color is amino variable
+                `var(--amino-${this.backgroundColor}-200)`
+            : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
+                !isDarkColor(backgroundColor)
+                    ? 'var(--amino-gray-800)'
+                    : 'var(--amino-gray-0)';
+        const borderStyle = getBorderRadius(this.borderStyle, '4px');
+        return (h(Host, { key: '86ab50028bec3f6a230b3a9492d06c1b2ce250fe', class: classes(['zonos--elements zonos--checkbox']), style: {
+                '--background-color': backgroundColor,
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+                '--size': `${this.size}px`,
+            } }, h("label", { key: '88e87bb45739707a4e3da6d378ba491899dad76c', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c877ba4a2bd43aa67c394136ef4b3c71096e75aa', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+                this.checkboxSelected.emit(e.target.checked);
+            }, type: "checkbox" }), h("span", { key: '0f40603a3cf90c38f37b05d7bfd8ed54623b07f4', class: "checkmark-container" }, h("svg", { key: '67945bb82cc05997bb40aeef14c5c0fd452a68af', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d1db7ba5c1578dbe59f4ca9755a409ab24546', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+    }
+    static get is() { return "zonos-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| CheckboxColorPrefix\n    | (string & { _placeholder?: never })",
+                    "resolved": "\"blue\" | \"cyan\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\" | string & { _placeholder?: undefined; }",
+                    "references": {
+                        "CheckboxColorPrefix": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::CheckboxColorPrefix"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "background color of the checkbox"
+                },
+                "attribute": "background-color",
+                "reflect": false,
+                "defaultValue": "'blue'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the checkbox"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "isChecked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox is checked"
+                },
+                "attribute": "is-checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox is disabled"
+                },
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "12 | 16 | 24",
+                    "resolved": "12 | 16 | 24",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the checkbox"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "12"
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Size",
+                    "resolved": "\"2xl\" | \"3xl\" | \"base\" | \"l\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "Size": {
+                            "location": "import",
+                            "path": "src/types/styles/Text",
+                            "id": "src/types/styles/Text.ts::Size"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font size of the checkbox text"
+                },
+                "attribute": "font-size",
+                "reflect": false,
+                "defaultValue": "'base'"
+            },
+            "borderStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiStyle",
+                    "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+                    "references": {
+                        "ElementsUiStyle": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::ElementsUiStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "ROUNDED"
+                        }],
+                    "text": "The border style of the button"
+                },
+                "attribute": "border-style",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxSelected",
+                "name": "checkboxSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the checkbox is changed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -23,10 +23,10 @@ export class ZonosCollapse {
     }
     render() {
         this.height = this.el.scrollHeight;
-        return (h(Host, { key: 'fb0d16e7e638d45b3469d7f7d26cd3f3ce9bf318', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '372c80d0d5b8d2c693b2c74bd6652430c8e4a5bb', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '9da00237f8f14edd9c5bf4b68da545b8c7ab4786' }, h("iframe", { key: '402e19d6e96d019a4eccd49af6afdac428c9fae9', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'de6751ac4955c073cc34188ebe22fabed38f780d' }))));
+            } }, h("div", { key: 'babd12279d1ac54092a1cff83e8e5b8ed5e81008' }, h("iframe", { key: '6d3a7845d560ba587829ba68033cd92ec8d2af5b', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'f295e17fd3178eb44dc7c0c51f87a80694fd04d7' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.js

@@ -5,7 +5,6 @@ import { classes } from "../../utils/classes";
 const FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;
 export class ZonosCountryFlag {
     constructor() {
-        this.class = '';
         this.countryCode = localizationStore.selectedCountryCode;
         this.size = undefined;
     }
@@ -23,7 +22,7 @@ export class ZonosCountryFlag {
                 }
                 : {
                     '--font-family': font,
-                } }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+                } }, h("div", { class: classes([`flag-container`]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
     }
     static get is() { return "zonos-country-flag"; }
     static get encapsulation() { return "shadow"; }
@@ -39,24 +38,6 @@ export class ZonosCountryFlag {
     }
     static get properties() {
         return {
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The class name for the flag"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "countryCode": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/common/zonos-country-select/assets/greenCheckDuotone.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
+</svg>