@instructure/ui-form-field 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-form-field
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/FormField/v1/index.js

@@ -33,17 +33,25 @@ category: components
 ---
 **/
 class FormField extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+  static displayName = "FormField";
+  static componentId = 'FormField';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    labelAlign: 'end',
+    vAlign: 'middle'
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   render() {
     return _jsx(FormFieldLayout, {
       ...omitProps(this.props, FormField.allowedProps),
@@ -61,14 +69,5 @@ class FormField extends Component {
     });
   }
 }
-FormField.displayName = "FormField";
-FormField.componentId = 'FormField';
-FormField.allowedProps = allowedProps;
-FormField.defaultProps = {
-  inline: false,
-  layout: 'stacked',
-  labelAlign: 'end',
-  vAlign: 'middle'
-};
 export default FormField;
 export { FormField };

package/es/FormField/v2/index.js

@@ -34,17 +34,25 @@ category: components
 ---
 **/
 class FormField extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+  static displayName = "FormField";
+  static componentId = 'FormField';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    labelAlign: 'end',
+    vAlign: 'middle'
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   render() {
     return _jsx(FormFieldLayout, {
       ...omitProps(this.props, FormField.allowedProps),
@@ -65,14 +73,5 @@ class FormField extends Component {
     });
   }
 }
-FormField.displayName = "FormField";
-FormField.componentId = 'FormField';
-FormField.allowedProps = allowedProps;
-FormField.defaultProps = {
-  inline: false,
-  layout: 'stacked',
-  labelAlign: 'end',
-  vAlign: 'middle'
-};
 export default FormField;
 export { FormField };

package/es/FormFieldGroup/v1/index.js

@@ -1,6 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["styles", "makeStyles", "isGroup"];
-var _dec, _class, _FormFieldGroup;
+var _dec, _class;
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -40,25 +39,33 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_FormFieldGroup = class FormFieldGroup extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldGroup extends Component {
+  static displayName = "FormFieldGroup";
+  static componentId = 'FormFieldGroup';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'fieldset',
+    disabled: false,
+    rowSpacing: 'medium',
+    colSpacing: 'small',
+    vAlign: 'middle',
+    isGroup: true
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
+    this.props.makeStyles?.(this.makeStylesVariables);
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
+    this.props.makeStyles?.(this.makeStylesVariables);
   }
   get makeStylesVariables() {
     // new form errors dont need borders
@@ -77,7 +84,7 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   renderColumns() {
     return Children.map(this.props.children, (child, index) => {
       return child ? _jsx(Grid.Col, {
-        width: child.props && child.props.width ? 'auto' : void 0,
+        width: child.props && child.props.width ? 'auto' : undefined,
         children: child
       }, index) : null;
     });
@@ -94,24 +101,27 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
     });
   }
   renderFields() {
-    const styles = this.props.styles;
+    const {
+      styles
+    } = this.props;
     return _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup,
+      css: styles?.formFieldGroup,
       children: this.renderChildren()
     }, "fields");
   }
   render() {
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      isGroup = _this$props3.isGroup,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      styles,
+      makeStyles,
+      isGroup,
+      ...props
+    } = this.props;
     // This is quite ugly, but according to ARIA spec the `aria-invalid` prop
     // can only be used with certain roles see
     // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid#associated_roles
     // `aria-invalid` is put on in FormFieldLayout because the error message
     // DOM part gets there its ID.
-    let ariaInvalid = void 0;
+    let ariaInvalid = undefined;
     if (this.props.role && this.invalid && ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'].includes(this.props.role)) {
       ariaInvalid = 'true';
     }
@@ -121,20 +131,13 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
-      "aria-disabled": props.disabled ? 'true' : void 0,
+      "aria-disabled": props.disabled ? 'true' : undefined,
       "aria-invalid": ariaInvalid,
       elementRef: this.handleRef,
       isGroup: isGroup,
       children: this.renderFields()
     });
   }
-}, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.allowedProps = allowedProps, _FormFieldGroup.defaultProps = {
-  as: 'fieldset',
-  disabled: false,
-  rowSpacing: 'medium',
-  colSpacing: 'small',
-  vAlign: 'middle',
-  isGroup: true
-}, _FormFieldGroup)) || _class);
+}) || _class);
 export default FormFieldGroup;
 export { FormFieldGroup };

package/es/FormFieldGroup/v1/styles.js

@@ -33,8 +33,12 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const disabled = props.disabled;
-  const invalid = state.invalid;
+  const {
+    disabled
+  } = props;
+  const {
+    invalid
+  } = state;
   return {
     formFieldGroup: {
       label: 'formFieldGroup',

package/es/FormFieldGroup/v1/theme.js

@@ -28,17 +28,18 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const borders = theme.borders,
-    colors = theme.colors,
-    spacing = theme.spacing;
+  const {
+    borders,
+    colors,
+    spacing
+  } = theme;
   const componentVariables = {
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
     borderColor: 'transparent',
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.red4570,
-    errorFieldsPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
+    borderRadius: borders?.radiusMedium,
+    errorBorderColor: colors?.contrasts?.red4570,
+    errorFieldsPadding: spacing?.xSmall
   };
   return {
     ...componentVariables

package/es/FormFieldGroup/v2/index.js

@@ -1,6 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["styles", "makeStyles", "isGroup"];
-var _dec, _class, _FormFieldGroup;
+var _dec, _class;
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -39,25 +38,33 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = (_FormFieldGroup = class FormFieldGroup extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = class FormFieldGroup extends Component {
+  static displayName = "FormFieldGroup";
+  static componentId = 'FormFieldGroup';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'fieldset',
+    disabled: false,
+    rowSpacing: 'medium',
+    colSpacing: 'small',
+    vAlign: 'middle',
+    isGroup: true
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
@@ -67,7 +74,7 @@ let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = (_FormField
   renderColumns() {
     return Children.map(this.props.children, (child, index) => {
       return child ? _jsx(Grid.Col, {
-        width: child.props && child.props.width ? 'auto' : void 0,
+        width: child.props && child.props.width ? 'auto' : undefined,
         children: child
       }, index) : null;
     });
@@ -84,24 +91,27 @@ let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = (_FormField
     });
   }
   renderFields() {
-    const styles = this.props.styles;
+    const {
+      styles
+    } = this.props;
     return _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup,
+      css: styles?.formFieldGroup,
       children: this.renderChildren()
     }, "fields");
   }
   render() {
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      isGroup = _this$props3.isGroup,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      styles,
+      makeStyles,
+      isGroup,
+      ...props
+    } = this.props;
     // This is quite ugly, but according to ARIA spec the `aria-invalid` prop
     // can only be used with certain roles see
     // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid#associated_roles
     // `aria-invalid` is put on in FormFieldLayout because the error message
     // DOM part gets there its ID.
-    let ariaInvalid = void 0;
+    let ariaInvalid = undefined;
     if (this.props.role && this.invalid && ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'].includes(this.props.role)) {
       ariaInvalid = 'true';
     }
@@ -111,20 +121,13 @@ let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = (_FormField
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
-      "aria-disabled": props.disabled ? 'true' : void 0,
+      "aria-disabled": props.disabled ? 'true' : undefined,
       "aria-invalid": ariaInvalid,
       elementRef: this.handleRef,
       isGroup: isGroup,
       children: this.renderFields()
     });
   }
-}, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.allowedProps = allowedProps, _FormFieldGroup.defaultProps = {
-  as: 'fieldset',
-  disabled: false,
-  rowSpacing: 'medium',
-  colSpacing: 'small',
-  vAlign: 'middle',
-  isGroup: true
-}, _FormFieldGroup)) || _class);
+}) || _class);
 export default FormFieldGroup;
 export { FormFieldGroup };

package/es/FormFieldGroup/v2/styles.js

@@ -32,7 +32,9 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (_componentTheme, props) => {
-  const disabled = props.disabled;
+  const {
+    disabled
+  } = props;
   return {
     formFieldGroup: {
       label: 'formFieldGroup',

package/es/FormFieldLabel/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _FormFieldLabel;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -48,36 +48,36 @@ type: example
  @deprecated since version 10. This is an internal component that will be
  removed in the future
 **/
-let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_FormFieldLabel = class FormFieldLabel extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldLabel extends Component {
+  static displayName = "FormFieldLabel";
+  static componentId = 'FormFieldLabel';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'span'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   render() {
     const ElementType = getElementType(FormFieldLabel, this.props);
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      children = _this$props3.children;
+    const {
+      styles,
+      children
+    } = this.props;
     return _jsx(ElementType, {
       ...omitProps(this.props, FormFieldLabel.allowedProps),
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+      css: styles?.formFieldLabel,
       ref: this.handleRef,
       children: children
     });
   }
-}, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.allowedProps = allowedProps, _FormFieldLabel.defaultProps = {
-  as: 'span'
-}, _FormFieldLabel)) || _class);
+}) || _class);
 export default FormFieldLabel;
 export { FormFieldLabel };

package/es/FormFieldLabel/v1/styles.js

@@ -34,7 +34,9 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const children = props.children;
+  const {
+    children
+  } = props;
   const hasContent = hasVisibleChildren(children);
   const labelStyles = {
     all: 'initial',

package/es/FormFieldLabel/v1/theme.js

@@ -28,21 +28,22 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    colors,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
     }
   };
   const componentVariables = {
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
+    color: colors?.contrasts?.grey125125,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightBold,
+    fontSize: typography?.fontSizeMedium,
+    lineHeight: typography?.lineHeightFit
   };
   return {
     ...componentVariables,

package/es/FormFieldLabel/v2/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _FormFieldLabel;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -48,36 +48,36 @@ type: example
  @deprecated since version 10. This is an internal component that will be
  removed in the future
 **/
-let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_FormFieldLabel = class FormFieldLabel extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class FormFieldLabel extends Component {
+  static displayName = "FormFieldLabel";
+  static componentId = 'FormFieldLabel';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    as: 'span'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   render() {
     const ElementType = getElementType(FormFieldLabel, this.props);
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      children = _this$props3.children;
+    const {
+      styles,
+      children
+    } = this.props;
     return _jsx(ElementType, {
       ...omitProps(this.props, FormFieldLabel.allowedProps),
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+      css: styles?.formFieldLabel,
       ref: this.handleRef,
       children: children
     });
   }
-}, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.allowedProps = allowedProps, _FormFieldLabel.defaultProps = {
-  as: 'span'
-}, _FormFieldLabel)) || _class);
+}) || _class);
 export default FormFieldLabel;
 export { FormFieldLabel };

package/es/FormFieldLabel/v2/styles.js

@@ -34,7 +34,9 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const children = props.children;
+  const {
+    children
+  } = props;
   const hasContent = hasVisibleChildren(children);
   const labelStyles = {
     all: 'initial',

package/es/FormFieldLabel/v2/theme.js

@@ -28,21 +28,22 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    colors,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
     }
   };
   const componentVariables = {
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
+    color: colors?.contrasts?.grey125125,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightBold,
+    fontSize: typography?.fontSizeMedium,
+    lineHeight: typography?.lineHeightFit
   };
   return {
     ...componentVariables,