@descope/web-components-ui 1.76.0 → 1.78.0

package/dist/index.esm.js

@@ -2648,6 +2648,7 @@ const CheckboxClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$d, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$d, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$d, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$d, property: 'font-size' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -2774,6 +2775,7 @@ const SwitchToggleClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$c, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$c, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$c, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$c, property: 'font-size' },
 
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
@@ -4783,6 +4785,7 @@ const ComboBoxClass = compose(
         ...errorMessage$b,
         property: 'background-position',
       },
+      errorMessageFontSize: { ...errorMessage$b, property: 'font-size' },
       inputHeight: { ...inputField$6, property: 'height' },
       inputBackgroundColor: { ...inputField$6, property: 'background-color' },
       inputBorderColor: { ...inputField$6, property: 'border-color' },
@@ -6362,6 +6365,7 @@ var textFieldMappings = {
   errorMessageIconPadding: { ...errorMessage$a, property: 'padding-inline-start' },
   errorMessageIconRepeat: { ...errorMessage$a, property: 'background-repeat' },
   errorMessageIconPosition: { ...errorMessage$a, property: 'background-position' },
+  errorMessageFontSize: { ...errorMessage$a, property: 'font-size' },
 
   helperTextColor: { ...helperText$7, property: '-webkit-text-fill-color' },
 
@@ -8188,6 +8192,7 @@ const PasscodeClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$9, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$9, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$9, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$9, property: 'font-size' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$2.inputValueTextColor,
@@ -8510,6 +8515,7 @@ const PasswordClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$8, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$8, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$8, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$8, property: 'font-size' },
 
       inputPlaceholderTextColor: [
         { ...inputElementPlaceholder, property: 'color' },
@@ -8611,7 +8617,7 @@ const PasswordClass = compose$1(
 			}
 
       ${inputFloatingLabelStyle()}
-    
+
       ::part(reveal-button) {
         align-self: center;
       }
@@ -8893,6 +8899,7 @@ const TextAreaClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$7, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$7, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$7, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$7, property: 'font-size' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
@@ -10789,6 +10796,7 @@ const PhoneFieldClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$6, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$6, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$6, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$6, property: 'font-size' },
 
       inputValueTextColor: [
         { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -10886,7 +10894,7 @@ const PhoneFieldClass = compose$1(
 				flex: 0;
 				border: none;
 			}
-  
+
 			descope-combo-box {
 				flex-shrink: 0;
         min-width: 5.75em;
@@ -11312,6 +11320,7 @@ const PhoneFieldInputBoxClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$5, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$5, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$5, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$5, property: 'font-size' },
 
       inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
 
@@ -11847,6 +11856,7 @@ const NewPasswordClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$4, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$4, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$4, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$4, property: 'font-size' },
       hostWidth: { ...host$e, property: 'width' },
       hostMinWidth: { ...host$e, property: 'min-width' },
       hostDirection: [
@@ -12973,6 +12983,7 @@ const buttonSelectionGroupMappings = {
   errorMessageIconPadding: { ...errorMessage$3, property: 'padding-inline-start' },
   errorMessageIconRepeat: { ...errorMessage$3, property: 'background-repeat' },
   errorMessageIconPosition: { ...errorMessage$3, property: 'background-position' },
+  errorMessageFontSize: { ...errorMessage$3, property: 'font-size' },
   itemsSpacing: { ...internalWrapper, property: 'gap' },
 };
 
@@ -14675,6 +14686,7 @@ const MultiSelectComboBoxClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$2, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$2, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$2, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$2, property: 'font-size' },
       inputHeight: { ...inputField, property: 'min-height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },
@@ -16524,6 +16536,7 @@ const SamlGroupMappingsClass = compose$1(
       errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage, property: 'font-size' },
     },
   }),
   draggableMixin$1,
@@ -18040,6 +18053,10 @@ const SecurityQuestionsVerifyClass = compose$1(
         selector: () => TextClass.componentName,
         property: TextClass.cssVarList.errorMessagePosition,
       },
+      errorMessageFontSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageFontSize,
+      },
     },
   }),
   draggableMixin$1,
@@ -18414,6 +18431,16 @@ const HybridFieldClass = compose$1(
           property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,
         },
       ],
+      errorMessageFontSize: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageFontSize,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,
+        },
+      ],
     },
   }),
   draggableMixin$1,
@@ -19167,6 +19194,7 @@ const [theme$2, refs$1, vars$Z] = createHelperVars(
     errorMessageIconSize: '0',
     errorMessageIconPadding: '0',
     errorMessageIconPosition: '0 0.4em',
+    errorMessageFontSize: '0.8125rem',
     errorMessageIconRepeat: 'no-repeat',
 
     size: {
@@ -19307,6 +19335,7 @@ const textField = {
   [vars$Y.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$Y.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$Y.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$Y.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -19362,6 +19391,7 @@ const password = {
   [vars$X.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$X.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$X.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$X.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -19413,6 +19443,7 @@ const numberField = {
   [vars$W.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$W.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$W.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$W.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -19464,6 +19495,7 @@ const emailField = {
   [vars$V.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$V.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$V.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$V.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
@@ -19503,6 +19535,7 @@ const textArea = {
   [vars$U.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$U.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$U.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$U.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   textAlign: {
     right: { [vars$U.inputTextAlign]: 'right' },
@@ -19553,6 +19586,7 @@ const checkbox = {
   [vars$T.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$T.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$T.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$T.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
@@ -19606,6 +19640,7 @@ const switchToggle = {
   [vars$S.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$S.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$S.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$S.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _checked: {
     [vars$S.trackBorderColor]: refs$1.borderColor,
@@ -20041,6 +20076,7 @@ const passcode = {
   [vars$J.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$J.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$J.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$J.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   size: {
     xs: { [vars$J.spinnerSize]: '15px' },
@@ -20209,6 +20245,8 @@ const [theme$1, refs, vars$G] = createHelperVars$1(
     errorMessageIconSize: '0',
     errorMessageIconPadding: '0',
     errorMessageIconPosition: '0 0.4em',
+    errorMessageFontSize: '0.8125rem',
+    errorMessageIconRepeat: 'no-repeat',
     errorMessageIconRepeat: 'no-repeat',
 
     size: {
@@ -20337,6 +20375,7 @@ const comboBox = {
   [vars$F.errorMessageIconPadding]: refs.errorMessageIconPadding,
   [vars$F.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars$F.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars$F.errorMessageFontSize]: refs.errorMessageFontSize,
 
   _readonly: {
     [vars$F.inputDropdownButtonCursor]: 'default',
@@ -20434,6 +20473,7 @@ const phoneField = {
   [vars$D.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$D.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$D.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$D.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
@@ -20485,6 +20525,7 @@ const phoneInputBoxField = {
   [vars$C.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$C.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$C.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$C.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _fullWidth: {
     [vars$C.hostWidth]: refs$1.width,
@@ -20521,6 +20562,7 @@ const newPassword = {
   [vars$B.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$B.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$B.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$B.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
@@ -20656,6 +20698,7 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars.errorMessageFontSize]: refs$1.errorMessageFontSize,
 });
 
 const vars$y = ButtonSelectionGroupClass.cssVarList;
@@ -20860,6 +20903,7 @@ const multiSelectComboBox = {
   [vars$t.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$t.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$t.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$t.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   labelType: {
     floating: {
@@ -21095,6 +21139,7 @@ const samlGroupMappings = {
   [vars$n.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$n.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$n.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$n.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
@@ -21299,6 +21344,7 @@ const radioGroup = {
   [vars$j.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$j.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$j.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$j.errorMessageFontSize]: refs$1.errorMessageFontSize,
   [vars$j.helperTextColor]: refs$1.helperTextColor,
   [vars$j.itemsLabelColor]: globalRefs$d.colors.surface.contrast,
 
@@ -21722,6 +21768,7 @@ const hybridField = {
   [vars$8.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
   [vars$8.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
   [vars$8.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$8.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
   _fullWidth: {
     [vars$8.hostWidth]: '100%',