@descope/web-components-ui 1.77.0 → 1.78.0

package/dist/cjs/index.cjs.js

@@ -4508,6 +4508,7 @@ var textFieldMappings = {
   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' },
 
   helperTextColor: { ...helperText$a, property: '-webkit-text-fill-color' },
 
@@ -4906,6 +4907,7 @@ const [theme$2, refs$1, vars$Z] = createHelperVars(
     errorMessageIconSize: '0',
     errorMessageIconPadding: '0',
     errorMessageIconPosition: '0 0.4em',
+    errorMessageFontSize: '0.8125rem',
     errorMessageIconRepeat: 'no-repeat',
 
     size: {
@@ -5046,6 +5048,7 @@ const textField$1 = {
   [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$2 = /*#__PURE__*/Object.freeze({
@@ -5264,6 +5267,7 @@ const PasswordClass = 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' },
 
       inputPlaceholderTextColor: [
         { ...inputElementPlaceholder, property: 'color' },
@@ -5365,7 +5369,7 @@ const PasswordClass = compose$1(
 			}
 
       ${inputFloatingLabelStyle()}
-    
+
       ::part(reveal-button) {
         align-self: center;
       }
@@ -5425,6 +5429,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({
@@ -5514,6 +5519,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({
@@ -5638,6 +5644,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({
@@ -5687,6 +5694,7 @@ const TextAreaClass = compose$1(
       errorMessageIconPadding: { ...errorMessage$b, property: 'padding-inline-start' },
       errorMessageIconRepeat: { ...errorMessage$b, property: 'background-repeat' },
       errorMessageIconPosition: { ...errorMessage$b, property: 'background-position' },
+      errorMessageFontSize: { ...errorMessage$b, property: 'font-size' },
       inputBackgroundColor: { ...inputField$4, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$2, property: 'color' },
@@ -5762,6 +5770,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' },
@@ -5918,6 +5927,7 @@ const CheckboxClass = compose$1(
       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' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -6028,6 +6038,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({
@@ -6080,6 +6091,7 @@ const SwitchToggleClass = 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' },
 
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
@@ -6223,6 +6235,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,
@@ -7401,6 +7414,7 @@ const PasscodeClass = 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' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$3.inputValueTextColor,
@@ -7535,6 +7549,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' },
@@ -8137,6 +8152,7 @@ const ComboBoxClass = compose(
         ...errorMessage$7,
         property: 'background-position',
       },
+      errorMessageFontSize: { ...errorMessage$7, property: 'font-size' },
       inputHeight: { ...inputField$3, property: 'height' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputBorderColor: { ...inputField$3, property: 'border-color' },
@@ -8425,6 +8441,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: {
@@ -8553,6 +8571,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',
@@ -10046,6 +10065,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$2.inputValueTextColor },
@@ -10143,7 +10163,7 @@ const PhoneFieldClass = compose$1(
 				flex: 0;
 				border: none;
 			}
-  
+
 			descope-combo-box {
 				flex-shrink: 0;
         min-width: 5.75em;
@@ -10213,6 +10233,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'
@@ -10342,6 +10363,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$1.inputValueTextColor },
 
@@ -10499,6 +10521,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,
@@ -10926,6 +10949,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$f, property: 'width' },
       hostMinWidth: { ...host$f, property: 'min-width' },
       hostDirection: [
@@ -11036,6 +11060,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.
@@ -11783,6 +11808,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' },
 };
 
@@ -11916,6 +11942,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;
@@ -13352,6 +13379,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' },
@@ -13604,6 +13632,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: {
@@ -14680,6 +14709,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,
@@ -14742,6 +14772,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({
@@ -15436,6 +15467,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,
 
@@ -18684,6 +18716,10 @@ const SecurityQuestionsVerifyClass = compose$1(
         selector: () => TextClass.componentName,
         property: TextClass.cssVarList.errorMessagePosition,
       },
+      errorMessageFontSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageFontSize,
+      },
     },
   }),
   draggableMixin,
@@ -19074,6 +19110,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,
@@ -19091,6 +19137,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%',