@descope/flow-components 3.3.5 → 3.5.0

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.3.5",
+      "buildVersion": "3.5.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.3.5",
+      "buildVersion": "3.5.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -83713,7 +83713,7 @@ function requireIndex_cjs () {
 	      return ['label-type', 'require-match'];
 	    }
 
-	    // eslint-disable-next-line class-methods-use-this
+	     
 	    #renderItem = ({ displayName, value, label }) => {
 	      return `<span data-name="${label}" data-id="${value}">${
 	        displayName || label
@@ -83764,7 +83764,7 @@ function requireIndex_cjs () {
 	            return data;
 	          }
 	        } catch (e) {
-	          // eslint-disable-next-line no-console
+	           
 	          console.error(
 	            'could not parse data string from attribute "data" -',
 	            e.message,
@@ -83783,14 +83783,16 @@ function requireIndex_cjs () {
 	    }
 
 	    get requireMatch() {
-	      return this.getAttribute('require-match') === 'true' && !this.allowCustomValue;
+	      return (
+	        this.getAttribute('require-match') === 'true' && !this.allowCustomValue
+	      );
 	    }
 
-	    // eslint-disable-next-line class-methods-use-this
+	     
 	    isValidDataType(data) {
 	      const isValid = Array.isArray(data);
 	      if (!isValid) {
-	        // eslint-disable-next-line no-console
+	         
 	        console.error('data must be an array, received:', data);
 	      }
 
@@ -83839,7 +83841,7 @@ function requireIndex_cjs () {
 	      }
 	    }
 
-	    // eslint-disable-next-line class-methods-use-this
+	     
 	    customValueTransformFn(val) {
 	      return val;
 	    }
@@ -83924,7 +83926,7 @@ function requireIndex_cjs () {
 	      // and not via default renderer, which renders only the data-name's value
 	      // in its own HTML template
 	      this.baseElement.renderer = (root, combo, model) => {
-	        // eslint-disable-next-line no-param-reassign
+	         
 	        root.innerHTML = model.item.outerHTML;
 	      };
 	    }
@@ -83942,7 +83944,9 @@ function requireIndex_cjs () {
 	      const val = this.baseElement.querySelector('input').value;
 
 	      if (val) {
-	        return this.baseElement.items.some(item => item.dataset.name === val || item.dataset.id === val);
+	        return this.baseElement.items.some(
+	          (item) => item.dataset.name === val || item.dataset.id === val,
+	        );
 	      }
 
 	      return true;
@@ -83951,7 +83955,7 @@ function requireIndex_cjs () {
 	    init() {
 	      super.init?.();
 
-	      // eslint-disable-next-line func-names
+	       
 	      this.getValidity = function () {
 	        if (this.requireMatch && !this.isValueMatch()) {
 	          return {
@@ -84017,7 +84021,8 @@ function requireIndex_cjs () {
 	    }
 
 	    handleRequireMatchChange(shouldValidate) {
-	      this.baseElement.allowCustomValue = shouldValidate || this.allowCustomValue;
+	      this.baseElement.allowCustomValue =
+	        shouldValidate || this.allowCustomValue;
 	    }
 
 	    attributeChangedCallback(attrName, oldValue, newValue) {
@@ -84129,6 +84134,10 @@ function requireIndex_cjs () {
 	      fontFamily: [label$9, placeholder$3, inputField$6, helperText$a, errorMessage$d],
 	      labelFontSize: { ...label$9, property: 'font-size' },
 	      labelFontWeight: { ...label$9, property: 'font-weight' },
+	      inputValueFontWeight: { ...inputField$6, property: 'font-weight' },
+	      inputPlaceholderFontWeight: { ...placeholder$3, property: 'font-weight' },
+	      helperTextFontWeight: { ...helperText$a, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$d, property: 'font-weight' },
 	      labelTextColor: [
 	        { ...label$9, property: 'color' },
 	        { ...label$9, property: '-webkit-text-fill-color' },
@@ -84402,6 +84411,10 @@ function requireIndex_cjs () {
 	    labelTextColor: globalRefs$D.colors.surface.dark,
 	    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
 	    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
+	    inputValueFontWeight: '400',
+	    inputPlaceholderFontWeight: '400',
+	    helperTextFontWeight: '400',
+	    errorMessageFontWeight: '400',
 	    valueTextColor: globalRefs$D.colors.surface.contrast,
 	    placeholderTextColor: globalRefs$D.colors.surface.dark,
 	    requiredIndicator: "'*'",
@@ -84441,7 +84454,6 @@ function requireIndex_cjs () {
 	    errorMessageIconPosition: '0 0.4em',
 	    errorMessageFontSize: '0.8125rem',
 	    errorMessageIconRepeat: 'no-repeat',
-	    errorMessageIconRepeat: 'no-repeat',
 
 	    size: {
 	      xs: { fontSize: '12px', chipFontSize: '10px' },
@@ -84530,6 +84542,10 @@ function requireIndex_cjs () {
 	  [vars$11.fontFamily]: refs$1.fontFamily,
 	  [vars$11.labelFontSize]: refs$1.labelFontSize,
 	  [vars$11.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$11.inputValueFontWeight]: refs$1.inputValueFontWeight,
+	  [vars$11.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+	  [vars$11.helperTextFontWeight]: refs$1.helperTextFontWeight,
+	  [vars$11.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
 	  [vars$11.labelTextColor]: refs$1.labelTextColor,
 	  [vars$11.errorMessageTextColor]: refs$1.errorMessageTextColor,
 	  [vars$11.inputBorderColor]: refs$1.borderColor,
@@ -86549,26 +86565,85 @@ function requireIndex_cjs () {
       .wrapper {
         display: flex;
         flex-direction: column;
-        gap: 0.5em;
         align-items: center;
         width: 100%;
       }
-      .timer {
+      /* allow timer to grow along the main axis in the wrapper flex container */
+      :host(:not([timer-inside="true"])) .timer {
         flex: 1;
       }
+      :host([timer-inside="true"]) .timer {
+        flex: 0 0 auto;
+      }
     `,
 	      this,
 	    );
 
+	    this.wrapper = this.shadowRoot.querySelector('.wrapper');
 	    this.timer = this.shadowRoot.querySelector('.timer');
 	    this.button = this.shadowRoot.querySelector('.button');
+	    this.forwardingSlot = this.shadowRoot.querySelector('.button slot');
 
 	    this.timer.addEventListener('timer-started', () => this.onTimerStarted());
 	    this.timer.addEventListener('timer-ended', () => this.onTimerEnded());
 
+	    this.syncTimerPlacement();
+
 	    this.button.addEventListener('click', this.onClick.bind(this));
 	  }
 
+	  static get observedAttributes() {
+	    return [
+	      ...(super.observedAttributes || []),
+	      'timer-inside',
+	      'timer-position',
+	    ];
+	  }
+
+	  attributeChangedCallback(name, oldValue, newValue) {
+	    super.attributeChangedCallback?.(name, oldValue, newValue);
+	    if (name === 'timer-inside' || name === 'timer-position') {
+	      this.syncTimerPlacement();
+	    }
+	  }
+
+	  get #isTimerInside() {
+	    return this.getAttribute('timer-inside') === 'true';
+	  }
+
+	  get #isReversed() {
+	    return this.getAttribute('timer-position') === 'end';
+	  }
+
+	  syncTimerPlacement() {
+	    if (this.#isTimerInside) {
+	      this.#placeTimerInsideButton(this.#isReversed);
+	    } else {
+	      this.#placeTimerOutsideButton();
+	    }
+	  }
+
+	  #placeTimerInsideButton(reversed) {
+	    if (reversed) {
+	      // timer after label text (right)
+	      if (this.timer.previousSibling !== this.forwardingSlot) {
+	        this.button.appendChild(this.timer);
+	      }
+	    } else {
+	      // timer before label text (left) — matches default outside position (above/before button)
+	      if (this.timer.nextSibling !== this.forwardingSlot) {
+	        this.button.insertBefore(this.timer, this.forwardingSlot);
+	      }
+	    }
+	  }
+
+	  #placeTimerOutsideButton() {
+	    // move timer back as a wrapper sibling, before the button so flex-column puts it above
+	    if (this.timer.parentElement !== this.wrapper) {
+	      this.wrapper.insertBefore(this.timer, this.button);
+	    }
+	  }
+
 	  set onclick(val) {
 	    this.button.onclick = val;
 	  }
@@ -86616,8 +86691,26 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$p } = {
-	  host: { selector: () => ':host' }};
+	const {
+	  host: host$p,
+	  nestedTimer,
+	  nestedButton,
+	  timerInsideNotReversed,
+	  timerInsideReversed,
+	} = {
+	  host: { selector: () => ':host' },
+	  nestedTimer: { selector: () => ':host([timer-inside="true"]) .timer' },
+	  nestedButton: {
+	    selector: () => ':host([timer-inside="true"]) .button',
+	  },
+	  timerInsideNotReversed: {
+	    selector: () =>
+	      ':host([timer-inside="true"]:not([timer-position="end"])) .timer',
+	  },
+	  timerInsideReversed: {
+	    selector: () => ':host([timer-inside="true"][timer-position="end"]) .timer',
+	  },
+	};
 
 	const TimerButtonClass = compose(
 	  createStyleMixin$1({
@@ -86626,6 +86719,30 @@ function requireIndex_cjs () {
 	      flexDirection: {},
 	      hostWidth: { ...host$p, property: 'width' },
 	      hostDirection: { ...host$p, property: 'direction' },
+	      timerTextColor: {
+	        ...nestedTimer,
+	        property: TimerClass.cssVarList.textColor,
+	      },
+	      timerIconColor: {
+	        ...nestedTimer,
+	        property: TimerClass.cssVarList.iconColor,
+	      },
+	      timerHostWidth: {
+	        ...nestedTimer,
+	        property: TimerClass.cssVarList.hostWidth,
+	      },
+	      buttonLabelSpacing: {
+	        ...nestedButton,
+	        property: ButtonClass.cssVarList.labelSpacing,
+	      },
+	      timerInsideGapEnd: {
+	        ...timerInsideNotReversed,
+	        property: 'margin-inline-end',
+	      },
+	      timerInsideGapStart: {
+	        ...timerInsideReversed,
+	        property: 'margin-inline-start',
+	      },
 	    },
 	  }),
 	  draggableMixin$1,
@@ -86641,11 +86758,35 @@ function requireIndex_cjs () {
 
 	  _horizontal: {
 	    [vars$S.flexDirection]: 'row',
+	    timerPosition: {
+	      end: {
+	        [vars$S.flexDirection]: 'row-reverse',
+	      },
+	    },
+	  },
+
+	  timerPosition: {
+	    end: {
+	      [vars$S.flexDirection]: 'column-reverse',
+	    },
 	  },
 
 	  _fullWidth: {
 	    [vars$S.hostWidth]: '100%',
 	  },
+
+	  _timerInside: {
+	    [vars$S.timerTextColor]: 'currentColor',
+	    [vars$S.timerIconColor]: 'currentColor',
+	    [vars$S.timerHostWidth]: 'auto',
+	    [vars$S.buttonLabelSpacing]: '0',
+	    [vars$S.timerInsideGapEnd]: `var(${vars$S.gap})`,
+	    timerPosition: {
+	      end: {
+	        [vars$S.timerInsideGapStart]: `var(${vars$S.gap})`,
+	      },
+	    },
+	  },
 	};
 
 	var timerButton$1 = /*#__PURE__*/Object.freeze({
@@ -91326,6 +91467,17 @@ function requireIndex_cjs () {
 	  labelFontSize: { ...label$8, property: 'font-size' },
 	  labelFontWeight: { ...label$8, property: 'font-weight' },
 
+	  inputValueFontWeight: [
+	    { ...input$1, property: 'font-weight' },
+	    { ...externalInput, property: 'font-weight' },
+	  ],
+	  inputPlaceholderFontWeight: [
+	    { selector: () => ':host input:placeholder-shown', property: 'font-weight' },
+	    { ...externalPlaceholder, property: 'font-weight' },
+	  ],
+	  helperTextFontWeight: { ...helperText$9, property: 'font-weight' },
+	  errorMessageFontWeight: { ...errorMessage$c, property: 'font-weight' },
+
 	  labelTextColor: [
 	    { ...label$8, property: 'color' },
 	    { ...requiredIndicator$a, property: 'color' },
@@ -91572,6 +91724,10 @@ function requireIndex_cjs () {
 	    labelTextColor: globalRefs$p.colors.surface.dark,
 	    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
 	    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
+	    inputValueFontWeight: '400',
+	    inputPlaceholderFontWeight: '400',
+	    helperTextFontWeight: '400',
+	    errorMessageFontWeight: '400',
 	    valueTextColor: globalRefs$p.colors.surface.contrast,
 	    placeholderTextColor: globalRefs$p.colors.surface.dark,
 	    requiredIndicator: "'*'",
@@ -91711,6 +91867,10 @@ function requireIndex_cjs () {
 	  [vars$H.fontFamily]: refs.fontFamily,
 	  [vars$H.labelFontSize]: refs.labelFontSize,
 	  [vars$H.labelFontWeight]: refs.labelFontWeight,
+	  [vars$H.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$H.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$H.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$H.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$H.labelTextColor]: refs.labelTextColor,
 	  [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
 	  [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -91965,6 +92125,16 @@ function requireIndex_cjs () {
 
 	      labelFontSize: { ...label$7, property: 'font-size' },
 	      labelFontWeight: { ...label$7, property: 'font-weight' },
+	      inputValueFontWeight: [
+	        { ...inputElement$2, property: 'font-weight' },
+	        { selector: () => ':host ::slotted(input)', property: 'font-weight' },
+	      ],
+	      inputPlaceholderFontWeight: [
+	        { ...inputElementPlaceholder, property: 'font-weight' },
+	        { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'font-weight' },
+	      ],
+	      helperTextFontWeight: { ...helperText$8, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$b, property: 'font-weight' },
 	      labelTextColor: [
 	        { ...label$7, property: 'color' },
 	        { ...label$7, property: '-webkit-text-fill-color' },
@@ -92105,6 +92275,10 @@ function requireIndex_cjs () {
 	  [vars$G.fontFamily]: refs.fontFamily,
 	  [vars$G.labelFontSize]: refs.labelFontSize,
 	  [vars$G.labelFontWeight]: refs.labelFontWeight,
+	  [vars$G.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$G.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$G.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$G.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$G.labelTextColor]: refs.labelTextColor,
 	  [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
 	  [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
@@ -92197,6 +92371,10 @@ function requireIndex_cjs () {
 	  [vars$F.fontFamily]: refs.fontFamily,
 	  [vars$F.labelFontSize]: refs.labelFontSize,
 	  [vars$F.labelFontWeight]: refs.labelFontWeight,
+	  [vars$F.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$F.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$F.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$F.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$F.labelTextColor]: refs.labelTextColor,
 	  [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
 	  [vars$F.inputValueTextColor]: refs.valueTextColor,
@@ -92322,6 +92500,10 @@ function requireIndex_cjs () {
 	  [vars$E.fontFamily]: refs.fontFamily,
 	  [vars$E.labelFontSize]: refs.labelFontSize,
 	  [vars$E.labelFontWeight]: refs.labelFontWeight,
+	  [vars$E.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$E.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$E.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$E.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$E.labelTextColor]: refs.labelTextColor,
 	  [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
 	  [vars$E.inputValueTextColor]: refs.valueTextColor,
@@ -92394,6 +92576,12 @@ function requireIndex_cjs () {
 	      hostDirection: { ...host$i, property: 'direction' },
 	      fontSize: [host$i, textArea$2],
 	      fontFamily: [label$6, inputField$3, helperText$7, errorMessage$a],
+	      labelFontSize: { ...label$6, property: 'font-size' },
+	      labelFontWeight: { ...label$6, property: 'font-weight' },
+	      inputValueFontWeight: { ...textArea$2, property: 'font-weight' },
+	      inputPlaceholderFontWeight: { ...placeholder$1, property: 'font-weight' },
+	      helperTextFontWeight: { ...helperText$7, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$a, property: 'font-weight' },
 	      labelTextColor: [
 	        { ...label$6, property: 'color' },
 	        { ...label$6, property: '-webkit-text-fill-color' },
@@ -92459,6 +92647,12 @@ function requireIndex_cjs () {
 	  [vars$D.hostDirection]: refs.direction,
 	  [vars$D.fontSize]: refs.fontSize,
 	  [vars$D.fontFamily]: refs.fontFamily,
+	  [vars$D.labelFontSize]: refs.labelFontSize,
+	  [vars$D.labelFontWeight]: refs.labelFontWeight,
+	  [vars$D.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$D.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$D.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$D.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$D.labelTextColor]: refs.labelTextColor,
 	  [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
 	  [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -93632,6 +93826,12 @@ descope-enriched-text {
 	      hostWidth: { property: 'width' },
 	      hostDirection: { ...host$e, property: 'direction' },
 	      fontFamily: [host$e, { ...label$5 }],
+	      labelFontWeight: { ...label$5, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$7, property: 'font-weight' },
+	      digitValueFontWeight: {
+	        selector: TextFieldClass.componentName,
+	        property: textVars$3.inputValueFontWeight,
+	      },
 	      labelTextColor: [
 	        { ...label$5, property: 'color' },
 	        { ...label$5, property: '-webkit-text-fill-color' },
@@ -93763,8 +93963,11 @@ descope-enriched-text {
 	  [vars$v.fontSize]: refs.fontSize,
 	  [vars$v.labelTextColor]: refs.labelTextColor,
 	  [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
+	  [vars$v.labelFontWeight]: refs.labelFontWeight,
 	  [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
+	  [vars$v.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$v.digitValueTextColor]: refs.valueTextColor,
+	  [vars$v.digitValueFontWeight]: refs.inputValueFontWeight,
 	  [vars$v.digitPadding]: '0',
 	  [vars$v.digitTextAlign]: 'center',
 	  [vars$v.digitSpacing]: '4px',
@@ -95343,6 +95546,15 @@ descope-enriched-text {
 	        { ...countryCodeInput, property: 'padding-right' },
 	      ],
 
+	      labelFontSize: { ...label$4, property: 'font-size' },
+	      labelFontWeight: { ...label$4, property: 'font-weight' },
+	      inputValueFontWeight: [
+	        { ...phoneInput$1, property: textVars$2.inputValueFontWeight },
+	        { ...countryCodeInput, property: comboVars.inputValueFontWeight },
+	      ],
+	      inputPlaceholderFontWeight: { ...phoneInput$1, property: textVars$2.inputPlaceholderFontWeight },
+	      helperTextFontWeight: { ...helperText$4, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$6, property: 'font-weight' },
 	      labelTextColor: [
 	        { ...label$4, property: 'color' },
 	        { ...label$4, property: '-webkit-text-fill-color' },
@@ -95498,6 +95710,12 @@ descope-enriched-text {
 	  [vars$s.hostDirection]: refs.direction,
 	  [vars$s.fontSize]: refs.fontSize,
 	  [vars$s.fontFamily]: refs.fontFamily,
+	  [vars$s.labelFontSize]: refs.labelFontSize,
+	  [vars$s.labelFontWeight]: refs.labelFontWeight,
+	  [vars$s.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$s.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$s.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$s.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$s.labelTextColor]: refs.labelTextColor,
 	  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
 	  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -95641,6 +95859,10 @@ descope-enriched-text {
 
 	      labelFontSize: { ...label$3, property: 'font-size' },
 	      labelFontWeight: { ...label$3, property: 'font-weight' },
+	      inputValueFontWeight: { ...phoneInput, property: textVars$1.inputValueFontWeight },
+	      inputPlaceholderFontWeight: { ...phoneInput, property: textVars$1.inputPlaceholderFontWeight },
+	      helperTextFontWeight: { ...helperText$3, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$5, property: 'font-weight' },
 	      labelTextColor: [
 	        { ...label$3, property: 'color' },
 	        { ...label$3, property: '-webkit-text-fill-color' },
@@ -95783,6 +96005,10 @@ descope-enriched-text {
 	  [vars$r.fontFamily]: refs.fontFamily,
 	  [vars$r.labelFontSize]: refs.labelFontSize,
 	  [vars$r.labelFontWeight]: refs.labelFontWeight,
+	  [vars$r.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$r.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$r.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$r.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$r.labelTextColor]: refs.labelTextColor,
 	  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
 	  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -96232,6 +96458,16 @@ descope-enriched-text {
 	      fontFamily: [label$2, errorMessage$4, helperText$2],
 	      labelFontSize: { ...label$2, property: 'font-size' },
 	      labelFontWeight: { ...label$2, property: 'font-weight' },
+	      inputValueFontWeight: {
+	        ...passwordInput,
+	        property: PasswordClass.cssVarList.inputValueFontWeight,
+	      },
+	      inputPlaceholderFontWeight: {
+	        ...passwordInput,
+	        property: PasswordClass.cssVarList.inputPlaceholderFontWeight,
+	      },
+	      helperTextFontWeight: { ...helperText$2, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$4, property: 'font-weight' },
 	      labelTextColor: { ...label$2, property: 'color' },
 	      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
 	      errorMessageIcon: { ...errorMessage$4, property: 'background-image' },
@@ -96337,6 +96573,10 @@ descope-enriched-text {
 	  [vars$q.fontFamily]: refs.fontFamily,
 	  [vars$q.labelFontSize]: refs.labelFontSize,
 	  [vars$q.labelFontWeight]: refs.labelFontWeight,
+	  [vars$q.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$q.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$q.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$q.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$q.labelTextColor]: refs.labelTextColor,
 	  [vars$q.spaceBetweenInputs]: '1em',
 	  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
@@ -98703,6 +98943,10 @@ descope-enriched-text {
 	      fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$2, chipLabel],
 	      labelFontSize: { ...label, property: 'font-size' },
 	      labelFontWeight: { ...label, property: 'font-weight' },
+	      inputValueFontWeight: { ...inputField, property: 'font-weight' },
+	      inputPlaceholderFontWeight: { ...placeholder, property: 'font-weight' },
+	      helperTextFontWeight: { ...helperText$1, property: 'font-weight' },
+	      errorMessageFontWeight: { ...errorMessage$2, property: 'font-weight' },
 	      labelTextColor: [
 	        { ...label, property: 'color' },
 	        { ...requiredIndicator, property: 'color' },
@@ -98924,6 +99168,10 @@ descope-enriched-text {
 	  [vars$i.fontFamily]: refs.fontFamily,
 	  [vars$i.labelFontSize]: refs.labelFontSize,
 	  [vars$i.labelFontWeight]: refs.labelFontWeight,
+	  [vars$i.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$i.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$i.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$i.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	  [vars$i.labelTextColor]: refs.labelTextColor,
 	  [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
 	  [vars$i.inputBorderColor]: refs.borderColor,
@@ -102875,6 +103123,26 @@ descope-enriched-text {
 	        selector: TextFieldClass.componentName,
 	        property: TextFieldClass.cssVarList.errorMessageFontSize,
 	      },
+	      labelFontWeight: {
+	        selector: TextFieldClass.componentName,
+	        property: TextFieldClass.cssVarList.labelFontWeight,
+	      },
+	      inputValueFontWeight: {
+	        selector: TextFieldClass.componentName,
+	        property: TextFieldClass.cssVarList.inputValueFontWeight,
+	      },
+	      inputPlaceholderFontWeight: {
+	        selector: TextFieldClass.componentName,
+	        property: TextFieldClass.cssVarList.inputPlaceholderFontWeight,
+	      },
+	      helperTextFontWeight: {
+	        selector: TextFieldClass.componentName,
+	        property: TextFieldClass.cssVarList.helperTextFontWeight,
+	      },
+	      errorMessageFontWeight: {
+	        selector: TextFieldClass.componentName,
+	        property: TextFieldClass.cssVarList.errorMessageFontWeight,
+	      },
 	    },
 	  }),
 	  portalMixin({
@@ -102926,6 +103194,12 @@ descope-enriched-text {
 	  [vars$8.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
 	  [vars$8.errorMessageIconPosition]: refs.errorMessageIconPosition,
 	  [vars$8.errorMessageFontSize]: refs.errorMessageFontSize,
+
+	  [vars$8.labelFontWeight]: refs.labelFontWeight,
+	  [vars$8.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$8.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$8.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$8.errorMessageFontWeight]: refs.errorMessageFontWeight,
 	};
 
 	var dateField$1 = /*#__PURE__*/Object.freeze({
@@ -104209,6 +104483,56 @@ descope-enriched-text {
 	          property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontSize,
 	        },
 	      ],
+	      labelFontWeight: [
+	        {
+	          selector: () => PhoneFieldClass.componentName,
+	          property: PhoneFieldClass.cssVarList.labelFontWeight,
+	        },
+	        {
+	          selector: () => PhoneFieldInputBoxClass.componentName,
+	          property: PhoneFieldInputBoxClass.cssVarList.labelFontWeight,
+	        },
+	      ],
+	      inputValueFontWeight: [
+	        {
+	          selector: () => PhoneFieldClass.componentName,
+	          property: PhoneFieldClass.cssVarList.inputValueFontWeight,
+	        },
+	        {
+	          selector: () => PhoneFieldInputBoxClass.componentName,
+	          property: PhoneFieldInputBoxClass.cssVarList.inputValueFontWeight,
+	        },
+	      ],
+	      inputPlaceholderFontWeight: [
+	        {
+	          selector: () => PhoneFieldClass.componentName,
+	          property: PhoneFieldClass.cssVarList.inputPlaceholderFontWeight,
+	        },
+	        {
+	          selector: () => PhoneFieldInputBoxClass.componentName,
+	          property: PhoneFieldInputBoxClass.cssVarList.inputPlaceholderFontWeight,
+	        },
+	      ],
+	      helperTextFontWeight: [
+	        {
+	          selector: () => PhoneFieldClass.componentName,
+	          property: PhoneFieldClass.cssVarList.helperTextFontWeight,
+	        },
+	        {
+	          selector: () => PhoneFieldInputBoxClass.componentName,
+	          property: PhoneFieldInputBoxClass.cssVarList.helperTextFontWeight,
+	        },
+	      ],
+	      errorMessageFontWeight: [
+	        {
+	          selector: () => PhoneFieldClass.componentName,
+	          property: PhoneFieldClass.cssVarList.errorMessageFontWeight,
+	        },
+	        {
+	          selector: () => PhoneFieldInputBoxClass.componentName,
+	          property: PhoneFieldInputBoxClass.cssVarList.errorMessageFontWeight,
+	        },
+	      ],
 	    },
 	  }),
 	  draggableMixin,
@@ -104219,6 +104543,11 @@ descope-enriched-text {
 
 	const hybridField = {
 	  [vars$3.hostDirection]: refs.direction,
+	  [vars$3.labelFontWeight]: refs.labelFontWeight,
+	  [vars$3.inputValueFontWeight]: refs.inputValueFontWeight,
+	  [vars$3.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
+	  [vars$3.helperTextFontWeight]: refs.helperTextFontWeight,
+	  [vars$3.errorMessageFontWeight]: refs.errorMessageFontWeight,
 
 	  // error message icon
 	  [vars$3.errorMessageIcon]: refs.errorMessageIcon,
@@ -105917,7 +106246,7 @@ const AddressField = React__default.default.forwardRef(({ size = 'md', ...props
 
 const CountrySubdivisionCityField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-country-subdivision-city-field", { size: size, ...props, ref: ref })));
 
-const TimerButton = React__default.default.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React__default.default.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
+const TimerButton = React__default.default.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, 'timer-position': timerPosition = 'start', 'timer-inside': timerInside = false, ...props }, ref) => (React__default.default.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, "timer-position": timerPosition, "timer-inside": timerInside, ref: ref }, children)));
 
 const applyDefaults = ({ paddingX, paddingY, background, spaceBetween }) => ({
     'st-horizontal-padding': !paddingX || isNumeric(paddingX)