@descope/web-components-ui 1.0.409 → 1.0.411

package/dist/cjs/index.cjs.js

@@ -5,8 +5,12 @@ var Color = require('color');
 var DOMPurify = require('dompurify');
 var MarkdownIt = require('markdown-it');
 require('lodash.debounce');
-require('libphonenumber-js/min');
+var min = require('libphonenumber-js/min');
 var hljs = require('highlight.js');
+require('@vaadin/combo-box');
+require('@vaadin/text-field');
+require('@vaadin/icons');
+require('@vaadin/icon');
 
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -2031,7 +2035,7 @@ const createProxy = ({
 
 })();
 
-const observedAttributes$4 = ['required', 'pattern'];
+const observedAttributes$5 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -2050,7 +2054,7 @@ const inputValidationMixin = (superclass) =>
     #validationTarget = validationTargetSymbol;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
     }
 
     static get formAssociated() {
@@ -2222,7 +2226,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$4.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -3371,7 +3375,7 @@ const {
   input: input$1,
   inputMask,
   helperText: helperText$a,
-  errorMessage: errorMessage$c,
+  errorMessage: errorMessage$d,
   disabledPlaceholder,
   inputDisabled,
   inputIcon,
@@ -3404,7 +3408,7 @@ const {
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
   fontSize: [{}, host$n],
-  fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
+  fontFamily: [label$9, inputField$6, helperText$a, errorMessage$d],
 
   labelFontSize: { ...label$9, property: 'font-size' },
   labelFontWeight: { ...label$9, property: 'font-weight' },
@@ -3426,7 +3430,13 @@ var textFieldMappings = {
     { ...inputMask, property: 'background-color' },
   ],
 
-  errorMessageTextColor: { ...errorMessage$c, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$d, property: 'color' },
+  errorMessageIcon: { ...errorMessage$d, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage$d, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage$d, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage$d, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage$d, property: 'background-position' },
+
   helperTextColor: { ...helperText$a, property: '-webkit-text-fill-color' },
 
   inputValueTextColor: [
@@ -3820,6 +3830,12 @@ const [theme$1, refs, vars$R] = createHelperVars(
 
     overlayOpacity: '0.3',
 
+    errorMessageIcon: '',
+    errorMessageIconSize: '0',
+    errorMessageIconPadding: '0',
+    errorMessageIconPosition: '0 0.4em',
+    errorMessageIconRepeat: 'no-repeat',
+
     size: {
       xs: { fontSize: '12px', chipFontSize: '10px' },
       sm: { fontSize: '14px', chipFontSize: '12px' },
@@ -3951,6 +3967,13 @@ const textField$1 = {
   [vars$Q.inputIconOffset]: globalRefs$w.spacing.md,
   [vars$Q.inputIconSize]: refs.inputIconSize,
   [vars$Q.inputIconColor]: refs.placeholderTextColor,
+
+  // error message icon
+  [vars$Q.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$Q.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$Q.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$Q.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$Q.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var textField$2 = /*#__PURE__*/Object.freeze({
@@ -4116,7 +4139,7 @@ const {
   revealButtonIcon,
   label: label$8,
   requiredIndicator: requiredIndicator$a,
-  errorMessage: errorMessage$b,
+  errorMessage: errorMessage$c,
   helperText: helperText$9,
 } = {
   host: { selector: () => ':host' },
@@ -4138,7 +4161,7 @@ const PasswordClass = compose(
       hostMinWidth: { ...host$m, property: 'min-width' },
       hostDirection: { ...host$m, property: 'direction' },
       fontSize: [{}, host$m],
-      fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
+      fontFamily: [label$8, inputField$5, errorMessage$c, helperText$9],
       inputHeight: { ...inputField$5, property: 'height' },
       inputHorizontalPadding: [
         { ...inputElement$3, property: 'padding-left' },
@@ -4163,7 +4186,12 @@ const PasswordClass = compose(
         { ...requiredIndicator$a, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$c, property: 'color' },
+      errorMessageIcon: { ...errorMessage$c, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$c, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$c, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$c, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$c, property: 'background-position' },
 
       inputPlaceholderTextColor: [
         { ...inputElementPlaceholder, property: 'color' },
@@ -4318,6 +4346,13 @@ const password = {
   [vars$P.placeholderOpacity]: refs.placeholderOpacity,
   [vars$P.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$P.valueInputHeight]: refs.valueInputHeight,
+
+  // error message icon
+  [vars$P.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$P.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$P.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$P.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$P.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -4400,6 +4435,13 @@ const numberField = {
   [vars$O.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$O.valueInputHeight]: refs.valueInputHeight,
   [vars$O.valueInputMarginBottom]: refs.valueInputMarginBottom,
+
+  // error message icon
+  [vars$O.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$O.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$O.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$O.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$O.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -4517,6 +4559,13 @@ const emailField = {
   [vars$N.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$N.valueInputHeight]: refs.valueInputHeight,
   [vars$N.valueInputMarginBottom]: refs.valueInputMarginBottom,
+
+  // error message icon
+  [vars$N.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$N.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$N.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$N.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$N.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
@@ -4535,7 +4584,7 @@ const {
   textArea: textArea$2,
   requiredIndicator: requiredIndicator$9,
   helperText: helperText$8,
-  errorMessage: errorMessage$a,
+  errorMessage: errorMessage$b,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -4554,13 +4603,18 @@ const TextAreaClass = compose(
       hostMinWidth: { ...host$l, property: 'min-width' },
       hostDirection: { ...host$l, property: 'direction' },
       fontSize: [host$l, textArea$2],
-      fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
+      fontFamily: [label$7, inputField$4, helperText$8, errorMessage$b],
       labelTextColor: [
         { ...label$7, property: 'color' },
         { ...requiredIndicator$9, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
+      errorMessageIcon: { ...errorMessage$b, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$b, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$b, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$b, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$b, property: 'background-position' },
       inputBackgroundColor: { ...inputField$4, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
@@ -4629,6 +4683,14 @@ const textArea = {
   [vars$M.inputOutlineOffset]: refs.outlineOffset,
   [vars$M.inputResizeType]: 'vertical',
   [vars$M.inputMinHeight]: '5em',
+
+  // error message icon
+  [vars$M.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$M.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$M.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$M.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$M.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   textAlign: {
     right: { [vars$M.inputTextAlign]: 'right' },
     left: { [vars$M.inputTextAlign]: 'left' },
@@ -4751,7 +4813,7 @@ const {
   checkboxLabel: checkboxLabel$1,
   requiredIndicator: requiredIndicator$8,
   helperText: helperText$7,
-  errorMessage: errorMessage$9,
+  errorMessage: errorMessage$a,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -4770,7 +4832,7 @@ const CheckboxClass = compose(
       hostDirection: { ...host$k, property: 'direction' },
 
       fontSize: [host$k, checkboxElement, checkboxLabel$1],
-      fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
+      fontFamily: [checkboxLabel$1, helperText$7, errorMessage$a],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
       labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
@@ -4778,7 +4840,12 @@ const CheckboxClass = compose(
       labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
+      errorMessageIcon: { ...errorMessage$a, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$a, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$a, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$a, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$a, property: 'background-position' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -4882,6 +4949,13 @@ const checkbox = {
   [vars$L.inputBackgroundColor]: refs.backgroundColor,
   [vars$L.inputSize]: checkboxSize,
   [vars$L.inputValueTextColor]: refs.valueTextColor,
+
+  // error message icon
+  [vars$L.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$L.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$L.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$L.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$L.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
@@ -4900,7 +4974,7 @@ const {
   checkboxLabel,
   requiredIndicator: requiredIndicator$7,
   helperText: helperText$6,
-  errorMessage: errorMessage$8,
+  errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -4919,7 +4993,7 @@ const SwitchToggleClass = compose(
       hostDirection: { ...host$j, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
-      fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
+      fontFamily: [checkboxLabel, helperText$6, errorMessage$9],
 
       labelTextColor: { ...checkboxLabel, property: 'color' },
       labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
@@ -4927,7 +5001,13 @@ const SwitchToggleClass = compose(
       labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+
+      errorMessageIcon: { ...errorMessage$9, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$9, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$9, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$9, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$9, property: 'background-position' },
 
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
@@ -5065,6 +5145,13 @@ const switchToggle = {
   [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
 
+  // error message icon
+  [vars$K.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$K.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$K.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$K.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$K.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _checked: {
     [vars$K.trackBorderColor]: refs.borderColor,
     [vars$K.knobLeftOffset]: `calc(100% - var(${vars$K.knobSize}) - ${knobMargin})`,
@@ -6116,12 +6203,12 @@ const LoaderRadialClass = compose(
 
 const componentName$H = getComponentName('passcode');
 
-const observedAttributes$3 = ['digits'];
+const observedAttributes$4 = ['digits'];
 
 const customMixin$9 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$3.concat(superclass.observedAttributes || []);
+      return observedAttributes$4.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -6164,7 +6251,7 @@ const {
   requiredIndicator: requiredIndicator$6,
   internalWrapper: internalWrapper$1,
   focusedDigitField,
-  errorMessage: errorMessage$7,
+  errorMessage: errorMessage$8,
 } = {
   host: { selector: () => ':host' },
   focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -6190,7 +6277,12 @@ const PasscodeClass = compose(
         { ...requiredIndicator$6, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      errorMessageIcon: { ...errorMessage$8, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$8, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$8, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$8, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$8, property: 'background-position' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$3.inputValueTextColor,
@@ -6318,6 +6410,13 @@ const passcode = {
   [vars$B.focusedDigitFieldOutlineColor]: refs.outlineColor,
   [vars$B.digitSize]: refs.inputHeight,
 
+  // error message icon
+  [vars$B.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$B.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$B.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$B.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$B.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   size: {
     xs: { [vars$B.spinnerSize]: '15px' },
     sm: { [vars$B.spinnerSize]: '20px' },
@@ -6813,7 +6912,7 @@ const {
   label: label$5,
   requiredIndicator: requiredIndicator$5,
   helperText: helperText$5,
-  errorMessage: errorMessage$6,
+  errorMessage: errorMessage$7,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -6834,14 +6933,19 @@ const ComboBoxClass = compose(
       hostDirection: { ...host$e, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$e],
-      fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
+      fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$7],
       labelFontSize: { ...label$5, property: 'font-size' },
       labelFontWeight: { ...label$5, property: 'font-weight' },
       labelTextColor: [
         { ...label$5, property: 'color' },
         { ...requiredIndicator$5, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      errorMessageIcon: { ...errorMessage$7, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$7, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$7, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$7, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$7, property: 'background-position' },
       inputHeight: { ...inputField$3, property: 'height' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputBorderColor: { ...inputField$3, property: 'border-color' },
@@ -7064,6 +7168,13 @@ const comboBox = {
   [vars$y.valueInputHeight]: refs.valueInputHeight,
   [vars$y.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
+  // error message icon
+  [vars$y.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$y.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$y.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$y.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$y.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _readonly: {
     [vars$y.inputDropdownButtonCursor]: 'default',
   },
@@ -7107,14 +7218,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$y
 });
 
-const observedAttributes$2 = ['src', 'alt'];
+const observedAttributes$3 = ['src', 'alt'];
 
 const componentName$E = getComponentName('image');
 
 const BaseClass$2 = createBaseClass({ componentName: componentName$E, baseSelector: ':host > img' });
 class RawImage extends BaseClass$2 {
   static get observedAttributes() {
-    return observedAttributes$2.concat(BaseClass$2.observedAttributes || []);
+    return observedAttributes$3.concat(BaseClass$2.observedAttributes || []);
   }
 
   constructor() {
@@ -7137,7 +7248,7 @@ class RawImage extends BaseClass$2 {
   connectedCallback() {
     super.connectedCallback?.();
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$3 });
   }
 }
 
@@ -8377,9 +8488,322 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
+// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)
+// This reduces our bundle size, and we use it as a static remote resource.
+const getCountryFlag = (code) =>
+  `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
+
+const comboBoxItem = ({ code, dialCode, name: country }) => `
+	<div
+		style="display:flex; flex-direction: column;"
+		data-id="${dialCode}"
+		data-name="${code} ${dialCode} ${country}"
+		data-country-code="${code}"
+	>
+		<div>
+			<span>
+				<img src="${getCountryFlag(code)}" width="20"/>
+			</span>
+			<span>${country}</span>
+		</div>
+		<div>
+			<span>${code}</span>
+			<span>${dialCode}</span>
+		</div>
+	</div>
+`;
+
+const parsePhoneNumber = (val) => {
+  const value = val || '';
+  let countryCode = '';
+  let phoneNumber = '';
+
+  // Attempt to parse the value using libphonenumber-js
+  const parsed = min.parsePhoneNumberFromString(value);
+
+  if (parsed) {
+    if (parsed.countryCallingCode) {
+      countryCode = `+${parsed.countryCallingCode}`;
+    }
+
+    if (parsed.nationalNumber) {
+      phoneNumber = parsed.nationalNumber;
+    }
+  } else {
+    // Fallback: assume a dash separates country code and phone number
+    const [country, phone] = value.split('-');
+    countryCode = country || '';
+    phoneNumber = phone || '';
+  }
+
+  return [countryCode, phoneNumber];
+};
+
 const componentName$D = getComponentName('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
+const commonAttrs = ['disabled', 'size', 'bordered', 'readonly', 'allow-alphanumeric-input'];
+const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
+const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
+const labelTypeAttrs = ['label-type', 'country-input-label', 'label'];
+const mapAttrs$1 = {
+  'country-input-label': 'label',
+  'country-input-placeholder': 'placeholder',
+  'phone-input-placeholder': 'placeholder',
+};
+
+const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);
+
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$D, baseSelector: 'div' });
+
+let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$4 {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+    <div class="wrapper">
+      <descope-combo-box
+        item-label-path="data-name"
+        item-value-path="data-id"
+      >
+      ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
+      </descope-combo-box>
+      <div class="separator"></div>
+      <descope-text-field type="tel"></descope-text-field>
+    </div>
+    `;
+
+    this.countryCodeInput = this.querySelector('descope-combo-box');
+    this.phoneNumberInput = this.querySelector('descope-text-field');
+    this.inputs = [this.countryCodeInput, this.phoneNumberInput];
+
+    forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
+    forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type', 'required'] });
+
+    // override combo box setter to display dialCode value in input
+    this.countryCodeInput.customValueTransformFn = (val) => {
+      const [, dialCode] = val?.split?.(' ') || [];
+      return dialCode;
+    };
+  }
+
+  get countryCodeInputData() {
+    return this.countryCodeInput.items;
+  }
+
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
+  get value() {
+    if (!this.phoneNumberValue) {
+      return '';
+    }
+    return `${this.countryCodeInput.value}-${this.phoneNumberInput.value}`;
+  }
+
+  set value(val) {
+    const [countryCode, phoneNumber] = parsePhoneNumber(val);
+
+    this.#setCountryCode(countryCode);
+    this.#setPhoneNumber(phoneNumber);
+  }
+
+  setSelectionRange(...args) {
+    this.phoneNumberInput.setSelectionRange(...args);
+  }
+
+  get selectionStart() {
+    return this.phoneNumberInput.selectionStart;
+  }
+
+  #setCountryCode(val) {
+    if (val) {
+      const countryCodeItem = this.getCountryByDialCode(val);
+      if (countryCodeItem) {
+        this.countryCodeInput.selectedItem = countryCodeItem;
+      }
+    } else {
+      this.countryCodeInput.selectedItem = undefined;
+    }
+  }
+
+  #setPhoneNumber(val) {
+    if (this.phoneNumberInput.value === val) {
+      return;
+    }
+
+    this.phoneNumberInput.value = val;
+  }
+
+  get phoneNumberValue() {
+    return this.phoneNumberInput.value;
+  }
+
+  get countryCodeValue() {
+    return this.countryCodeInput.shadowRoot.querySelector('input').value;
+  }
+
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
+
+  getValidity() {
+    const hasCode = this.countryCodeInput.value;
+    const hasPhone = this.phoneNumberInput.value;
+    const emptyValue = !hasCode || !hasPhone;
+    const hasMinPhoneLength =
+      this.phoneNumberInput.value?.length && this.phoneNumberInput.value.length < this.minLength;
+
+    if (this.isRequired && emptyValue) {
+      return { valueMissing: true };
+    }
+    if (hasMinPhoneLength) {
+      return { tooShort: true };
+    }
+    if (hasPhone && !hasCode) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.inputs[1].focus();
+    });
+
+    super.init?.();
+    this.initInputs();
+  }
+
+  getRestrictedCountries() {
+    const attr = this.getAttribute('restrict-countries');
+    return attr ? attr.split(',') : [];
+  }
+
+  getCountryByDialCode(countryDialCode) {
+    return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);
+  }
+
+  getCountryByCodeId(countryCode) {
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-country-code') === countryCode
+    );
+  }
+
+  updateCountryCodeItems(restrictCountries) {
+    const items = restrictCountries.length
+      ? CountryCodes.filter((c) => restrictCountries.includes(c.code))
+      : CountryCodes;
+    this.querySelector('descope-combo-box').innerHTML = items
+      .map((item) => comboBoxItem(item))
+      .join('');
+  }
+
+  handleDefaultCountryCode(countryCode) {
+    if (!this.countryCodeInput.value) {
+      const countryCodeItem = this.getCountryByCodeId(countryCode);
+      // When replacing the input component (inserting internal component into text-field) -
+      // Vaadin resets the input's value. We use setTimeout in order to make sure this happens
+      // after the reset.
+      if (countryCodeItem) {
+        setTimeout(() => {
+          this.countryCodeInput.selectedItem = countryCodeItem;
+        });
+      }
+    }
+  }
+
+  initInputs() {
+    // Sanitize phone input value to filter everything but digits
+    this.phoneNumberInput.addEventListener('input', (e) => {
+      if (!this.allowAlphanumericInput) {
+        const telDigitsRegExp = /^\d$/;
+        const sanitizedInput = e.target.value
+          .split('')
+          .filter((char) => telDigitsRegExp.test(char))
+          .join('');
+        e.target.value = sanitizedInput;
+      }
+    });
+
+    this.handleFocusEventsDispatching(this.inputs);
+    this.handleInputEventDispatching();
+  }
+
+  handleLabelTypeAttrs(attrName, newValue) {
+    // set or remove label attributes from inner text/combo components on `label-type` change
+    const attr = mapAttrs$1[attrName] || attrName;
+
+    if (attrName === 'label-type') {
+      this.onLabelTypeChange(newValue);
+    }
+    // on inner components label attr change - set label attributes for text/combo components
+    // only if label-type is `floating`
+    else if (this.getAttribute('label-type') === 'floating') {
+      if (attrName === 'country-input-label') {
+        this.countryCodeInput.setAttribute(attr, newValue);
+      } else if (attrName === 'label') {
+        this.phoneNumberInput.setAttribute(attr, newValue);
+      }
+    }
+  }
+
+  onLabelTypeChange(newValue) {
+    if (newValue === 'floating') {
+      // on change to `floating` label - set inner components `label` and `placeholder`
+      this.countryCodeInput.setAttribute('label', this.getAttribute('country-input-label') || '');
+      this.countryCodeInput.setAttribute(
+        'placeholder',
+        this.getAttribute('country-input-placeholder') || ''
+      );
+      this.phoneNumberInput.setAttribute('label', this.getAttribute('label') || '');
+      this.phoneNumberInput.setAttribute(
+        'placeholder',
+        this.getAttribute('phone-input-placeholder') || ''
+      );
+    } else {
+      // for other cases - reset inner components label-type and labels
+      this.inputs.forEach((input) => input.removeAttribute('label'));
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'default-code' && newValue) {
+        this.handleDefaultCountryCode(newValue);
+      } else if (inputRelatedAttrs.includes(attrName)) {
+        const attr = mapAttrs$1[attrName] || attrName;
+
+        if (commonAttrs.includes(attrName)) {
+          this.inputs.forEach((input) => input.setAttribute(attr, newValue));
+        } else if (countryAttrs.includes(attrName)) {
+          this.countryCodeInput.setAttribute(attr, newValue);
+        } else if (phoneAttrs.includes(attrName)) {
+          this.phoneNumberInput.setAttribute(attr, newValue);
+        }
+      }
+
+      if (labelTypeAttrs.includes(attrName)) {
+        this.handleLabelTypeAttrs(attrName, newValue);
+      }
+
+      if (attrName === 'restrict-countries') {
+        this.updateCountryCodeItems(this.getRestrictedCountries());
+      }
+    }
+  }
+};
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
@@ -8457,7 +8881,7 @@ const {
   countryCodeInput,
   phoneInput: phoneInput$1,
   separator: separator$1,
-  errorMessage: errorMessage$5,
+  errorMessage: errorMessage$6,
   helperText: helperText$4,
 } = {
   host: { selector: () => ':host' },
@@ -8489,7 +8913,7 @@ const PhoneFieldClass = compose(
       ],
       fontFamily: [
         label$4,
-        errorMessage$5,
+        errorMessage$6,
         helperText$4,
         {
           ...countryCodeInput,
@@ -8539,7 +8963,13 @@ const PhoneFieldClass = compose(
         { ...requiredIndicator$4, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      errorMessageIcon: { ...errorMessage$6, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$6, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$6, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$6, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$6, property: 'background-position' },
 
       inputValueTextColor: [
         { ...phoneInput$1, property: textVars$2.inputValueTextColor },
@@ -8699,6 +9129,13 @@ const phoneField = {
   [vars$w.valueInputHeight]: refs.valueInputHeight,
   [vars$w.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
+  // error message icon
+  [vars$w.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$w.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$w.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$w.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$w.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
   // }
@@ -8710,9 +9147,176 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$w
 });
 
+const getCountryByCodeId = (countryCode) => {
+  return CountryCodes.find((c) => c.code === countryCode)?.dialCode;
+};
+
 const componentName$B = getComponentName('phone-field-internal-input-box');
 
-createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
+const observedAttributes$2 = [
+  'disabled',
+  'size',
+  'bordered',
+  'invalid',
+  'readonly',
+  'phone-input-placeholder',
+  'name',
+  'autocomplete',
+  'label-type',
+  'allow-alphanumeric-input',
+];
+const mapAttrs = {
+  'phone-input-placeholder': 'placeholder',
+};
+
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$B, baseSelector: 'div' });
+
+class PhoneFieldInternal extends BaseInputClass$3 {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass$3.observedAttributes || [], observedAttributes$2);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <div>
+        <descope-text-field tabindex="1"></descope-text-field>
+      </div>
+      `;
+
+    this.phoneNumberInput = this.querySelector('descope-text-field');
+  }
+
+  get defaultCountryCode() {
+    return getCountryByCodeId(this.getAttribute('default-code'));
+  }
+
+  get hasDefaultCode() {
+    return !!this.getAttribute('default-code');
+  }
+
+  get allowAlphanumericInput() {
+    return this.getAttribute('allow-alphanumeric-input') === 'true';
+  }
+
+  get value() {
+    if (!this.phoneNumberValue) {
+      return '';
+    }
+
+    if (this.hasDefaultCode) {
+      // we want to transform phone numbers to a valid {dialCode}-{phoneNumber} format
+      // e.g.:
+      // +972-12345 => +972-12345
+      // 972-12345 => +972-12345
+      // 12345 => +972-12345
+      //
+      // we also want to handle any extra dash if added in the start of the phone number
+      // e.g.:
+      // +972--12345 => +972-12345
+      const pattern = new RegExp(`\\+?${parseInt(this.defaultCountryCode, 10)}--?`);
+      return `${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(pattern, '')}`;
+    }
+
+    return this.phoneNumberInput.value;
+  }
+
+  set value(val) {
+    this.phoneNumberInput.value = val;
+  }
+
+  get phoneNumberValue() {
+    return this.phoneNumberInput.value;
+  }
+
+  get phoneNumberInputEle() {
+    return this.phoneNumberInput.shadowRoot.querySelector('input');
+  }
+
+  get minLength() {
+    return parseInt(this.getAttribute('minlength'), 10) || 0;
+  }
+
+  get maxLength() {
+    return parseInt(this.getAttribute('maxlength'), 10) || 50;
+  }
+
+  getValidity() {
+    const validPhonePattern = /^\+?\d{1,4}-?(?:\d-?){1,15}$/;
+    const stripValue = this.value.replace(/\D/g, '');
+
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    if (stripValue.length < this.minLength) {
+      return { tooShort: true };
+    }
+
+    if (stripValue.length > this.maxLength) {
+      return { tooLong: true };
+    }
+
+    if (!validPhonePattern.test(this.value)) {
+      return { patternMismatch: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) this.phoneNumberInput.focus();
+    });
+
+    super.init?.();
+    this.initInputs();
+  }
+
+  getCountryByDialCode(countryDialCode) {
+    return this.countryCodeInput.items?.find(
+      (c) => c.getAttribute('data-country-code') === countryDialCode
+    );
+  }
+
+  initInputs() {
+    // Sanitize phone input value to filter everything but digits
+    this.phoneNumberInput.addEventListener('input', (e) => {
+      if (e.target.value.length === 1 && e.target.value === '-') {
+        e.target.value = '';
+      }
+
+      e.target.value = e.target.value
+        .replace(/(?!^)\+/g, '')
+        .replace('--', '-')
+        .replace('+-', '+');
+
+      let sanitizedInput = e.target.value;
+      if (!this.allowAlphanumericInput) {
+        const telDigitsRegExp = /^[+\d-]+$/;
+        sanitizedInput = e.target.value
+          .split('')
+          .filter((char) => telDigitsRegExp.test(char))
+          .join('');
+      }
+
+      e.target.value = sanitizedInput;
+    });
+
+    this.handleFocusEventsDispatching([this.phoneNumberInput]);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue && observedAttributes$2.includes(attrName)) {
+      const attr = mapAttrs[attrName] || attrName;
+      this.phoneNumberInput.setAttribute(attr, newValue);
+    }
+  }
+}
 
 const textVars$1 = TextFieldClass.cssVarList;
 
@@ -8770,7 +9374,7 @@ const {
   inputField: inputField$1,
   inputFieldInternal,
   phoneInput,
-  errorMessage: errorMessage$4,
+  errorMessage: errorMessage$5,
   helperText: helperText$3,
 } = {
   host: { selector: () => ':host' },
@@ -8798,7 +9402,7 @@ const PhoneFieldInputBoxClass = compose(
           property: TextFieldClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$3, errorMessage$4, helperText$3],
+      fontFamily: [label$3, errorMessage$5, helperText$3],
       hostWidth: { ...host$c, property: 'width' },
       hostMinWidth: { ...host$c, property: 'min-width' },
       hostDirection: { ...host$c, property: 'direction' },
@@ -8823,7 +9427,13 @@ const PhoneFieldInputBoxClass = compose(
         { ...requiredIndicator$3, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+
+      errorMessageIcon: { ...errorMessage$5, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$5, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$5, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$5, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$5, property: 'background-position' },
 
       inputValueTextColor: { ...phoneInput, property: textVars$1.inputValueTextColor },
 
@@ -8961,6 +9571,13 @@ const phoneInputBoxField = {
   [vars$v.valueInputMarginBottom]: refs.valueInputMarginBottom,
   [vars$v.inputHorizontalPadding]: '0',
 
+  // error message icon
+  [vars$v.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$v.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$v.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$v.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$v.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _fullWidth: {
     [vars$v.hostWidth]: refs.width,
   },
@@ -9283,7 +9900,7 @@ const {
   host: host$a,
   label: label$2,
   internalInputsWrapper,
-  errorMessage: errorMessage$3,
+  errorMessage: errorMessage$4,
   helperText: helperText$2,
   passwordInput,
   policyPreview,
@@ -9308,11 +9925,16 @@ const NewPasswordClass = compose(
           property: PasswordClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$2, errorMessage$3, helperText$2],
+      fontFamily: [label$2, errorMessage$4, helperText$2],
       labelFontSize: { ...label$2, property: 'font-size' },
       labelFontWeight: { ...label$2, property: 'font-weight' },
       labelTextColor: { ...label$2, property: 'color' },
-      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      errorMessageIcon: { ...errorMessage$4, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$4, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$4, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$4, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$4, property: 'background-position' },
       hostWidth: { ...host$a, property: 'width' },
       hostMinWidth: { ...host$a, property: 'min-width' },
       hostDirection: [
@@ -9417,6 +10039,13 @@ const newPassword = {
   [vars$u.policyPreviewPadding]: globalRefs$l.spacing.lg,
   [vars$u.valueInputHeight]: refs.valueInputHeight,
 
+  // error message icon
+  [vars$u.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$u.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$u.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$u.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$u.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
@@ -10140,7 +10769,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$8, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
+const { host: host$8, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -10157,7 +10786,12 @@ const buttonSelectionGroupMappings = {
     { ...requiredIndicator$1, property: 'color' },
   ],
   labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
-  errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+  errorMessageIcon: { ...errorMessage$3, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage$3, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage$3, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage$3, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage$3, property: 'background-position' },
   itemsSpacing: { ...internalWrapper, property: 'gap' },
 };
 
@@ -10273,9 +10907,17 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.itemsSpacing]: globalRefs$j.spacing.sm,
   [vars.hostWidth]: refs.width,
+
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
 });
 
 const vars$r = ButtonSelectionGroupClass.cssVarList;
@@ -11635,7 +12277,7 @@ const {
   label,
   requiredIndicator,
   helperText: helperText$1,
-  errorMessage: errorMessage$1,
+  errorMessage: errorMessage$2,
   chip,
   chipLabel,
   overflowChipFirstBorder,
@@ -11669,14 +12311,19 @@ const MultiSelectComboBoxClass = compose(
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$6],
       chipFontSize: { ...chipLabel, property: 'font-size' },
-      fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
+      fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$2, chipLabel],
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+      errorMessageIcon: { ...errorMessage$2, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$2, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$2, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$2, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$2, property: 'background-position' },
       inputHeight: { ...inputField, property: 'min-height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },
@@ -11923,6 +12570,13 @@ const multiSelectComboBox = {
   [vars$m.placeholderOpacity]: refs.placeholderOpacity,
   [vars$m.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
+  // error message icon
+  [vars$m.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$m.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$m.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$m.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$m.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   labelType: {
     floating: {
       [vars$m.inputHorizontalPadding]: '0.25em',
@@ -12285,6 +12939,9 @@ const customMixin$4 = (superclass) =>
           'invalid',
           'readonly',
           'disabled',
+          'st-error-message-icon',
+          'st-error-message-icon-size',
+          'st-error-message-icon-padding',
         ],
       });
 
@@ -12299,7 +12956,7 @@ const customMixin$4 = (superclass) =>
 const {
   host: host$4,
   helperText,
-  errorMessage,
+  errorMessage: errorMessage$1,
   mappingItem,
   labels,
   labelsText,
@@ -12329,7 +12986,7 @@ const MappingsFieldClass = compose(
       hostDirection: { ...host$4, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$4, { ...separator, property: 'margin-top' }],
-      fontFamily: [helperText, errorMessage, labels],
+      fontFamily: [helperText, errorMessage$1, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
       labelsFontSize: { ...labelsText, property: 'font-size' },
       labelsLineHeight: [
@@ -12957,9 +13614,10 @@ const customMixin$3 = (superclass) =>
     }
   };
 
-const { host: host$1, groupInput } = {
+const { host: host$1, groupInput, errorMessage } = {
   host: { selector: () => ':host' },
   groupInput: { selector: 'descope-text-field' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
 const SamlGroupMappingsClass = compose(
@@ -12968,6 +13626,11 @@ const SamlGroupMappingsClass = compose(
       hostWidth: { ...host$1, property: 'width' },
       hostDirection: { ...host$1, property: 'direction' },
       groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
     },
   }),
   draggableMixin,
@@ -13023,6 +13686,13 @@ const samlGroupMappings = {
   [vars$g.hostWidth]: refs.width,
   [vars$g.hostDirection]: refs.direction,
   [vars$g.groupNameInputMarginBottom]: '1em',
+
+  // error message icon
+  [vars$g.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$g.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$g.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$g.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$g.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
@@ -13714,6 +14384,11 @@ const radioGroup = {
   [vars$c.labelTextColor]: refs.labelTextColor,
   [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$c.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$c.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$c.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$c.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars$c.helperTextColor]: refs.helperTextColor,
   [vars$c.itemsLabelColor]: globalRefs$7.colors.surface.contrast,
 
@@ -16482,6 +17157,9 @@ const attrsToSync$1 = [
   'answer-label',
   'answer-placeholder',
   'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
@@ -16723,6 +17401,9 @@ const textFieldsAttrs = [
   'size',
   'answer-placeholder',
   'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
 ];
 
 const textsAttrs = ['question-mode'];
@@ -16911,6 +17592,27 @@ const SecurityQuestionsVerifyClass = compose(
         selector: () => TextClass.componentName,
         property: 'cursor',
       },
+
+      errorMessageIcon: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageIcon,
+      },
+      errorMessageIconSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageSize,
+      },
+      errorMessageIconPadding: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePadding,
+      },
+      errorMessageIconRepeat: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageRepeat,
+      },
+      errorMessageIconPosition: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePosition,
+      },
     },
   }),
   draggableMixin,
@@ -16941,6 +17643,18 @@ const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceA
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
+customElements.define(componentName$F, ComboBoxClass);
+
+customElements.define(componentName$_, TextFieldClass);
+
+customElements.define(componentName$D, PhoneFieldInternal$1);
+
+customElements.define(componentName$C, PhoneFieldClass);
+
+customElements.define(componentName$B, PhoneFieldInternal);
+
+customElements.define(componentName$A, PhoneFieldInputBoxClass);
+
 const componentName$2 = getComponentName('hybrid-field');
 
 const attrs = {
@@ -16953,6 +17667,9 @@ const attrs = {
     'readonly',
     'required',
     'st-host-direction',
+    'st-error-message-icon',
+    'st-error-message-icon-size',
+    'st-error-message-icon-padding',
   ],
   email: [
     'label',
@@ -17238,6 +17955,56 @@ const HybridFieldClass = compose(
         { selector: () => 'descope-phone-field', property: 'direction' },
         { selector: () => 'descope-phone-input-box-field', property: 'direction' },
       ],
+      errorMessageIcon: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIcon,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,
+        },
+      ],
+      errorMessageIconSize: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconSize,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,
+        },
+      ],
+      errorMessageIconPadding: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPadding,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,
+        },
+      ],
+      errorMessageIconRepeat: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,
+        },
+      ],
+      errorMessageIconPosition: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPosition,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,
+        },
+      ],
     },
   }),
   draggableMixin,
@@ -17249,6 +18016,13 @@ const vars$1 = HybridFieldClass.cssVarList;
 const hybridField = {
   [vars$1.hostDirection]: refs.direction,
 
+  // error message icon
+  [vars$1.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$1.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$1.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$1.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$1.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _fullWidth: {
     [vars$1.hostWidth]: '100%',
   },