@instructure/ui-list 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-list
+
+### 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/InlineList/v1/InlineListItem/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["delimiter", "size", "margin", "padding", "elementRef", "children", "spacing", "styles", "lastPlaceholder"];
-var _dec, _class, _InlineListItem;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -39,41 +37,49 @@ parent: InlineList
 id: InlineList.Item
 ---
 **/
-let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_InlineListItem = class InlineListItem 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 InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class InlineListItem extends Component {
+  static displayName = "InlineListItem";
+  static componentId = 'InlineList.Item';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    padding: 'none',
+    spacing: 'none',
+    delimiter: 'none',
+    size: 'medium',
+    lastPlaceholder: false
+  };
+  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?.();
   }
   render() {
-    const _this$props3 = this.props,
-      delimiter = _this$props3.delimiter,
-      size = _this$props3.size,
-      margin = _this$props3.margin,
-      padding = _this$props3.padding,
-      elementRef = _this$props3.elementRef,
-      children = _this$props3.children,
-      spacing = _this$props3.spacing,
-      styles = _this$props3.styles,
-      lastPlaceholder = _this$props3.lastPlaceholder,
-      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      delimiter,
+      size,
+      margin,
+      padding,
+      elementRef,
+      children,
+      spacing,
+      styles,
+      lastPlaceholder,
+      ...rest
+    } = this.props;
     return _jsxs(View, {
       ...passthroughProps(rest),
-      css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
+      css: styles?.inlineListItem,
       as: "li",
       margin: margin,
       padding: padding,
@@ -82,17 +88,11 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
       elementRef: this.handleRef,
       "data-cid": "InlineListItem",
       children: [children, !lastPlaceholder && _jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
+        css: styles?.delimiter,
         "aria-hidden": "true"
       })]
     });
   }
-}, _InlineListItem.displayName = "InlineListItem", _InlineListItem.componentId = 'InlineList.Item', _InlineListItem.allowedProps = allowedProps, _InlineListItem.defaultProps = {
-  padding: 'none',
-  spacing: 'none',
-  delimiter: 'none',
-  size: 'medium',
-  lastPlaceholder: false
-}, _InlineListItem)) || _class);
+}) || _class);
 export default InlineListItem;
 export { InlineListItem };

package/es/InlineList/v1/InlineListItem/styles.js

@@ -36,9 +36,11 @@ import { logError as error } from '@instructure/console';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size,
-    delimiter = props.delimiter,
-    spacing = props.spacing;
+  const {
+    size,
+    delimiter,
+    spacing
+  } = props;
   const withDelimiter = delimiter !== 'none';
   const withSpacing = spacing !== 'none';
   error(!(withDelimiter && withSpacing), `[InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`);

package/es/InlineList/v1/InlineListItem/theme.js

@@ -28,38 +28,39 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2;
-  const colors = theme.colors,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    colors,
+    spacing,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey4570,
-    delimiterColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
-    noneSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    pipeSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    slashSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    arrowSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    marginBottomDefault: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
-    spacingXXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
-    spacingXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
-    spacingXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
-    spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
-    spacingXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xLarge,
-    spacingXXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    fontSizeSmall: typography?.fontSizeSmall,
+    fontSizeMedium: typography?.fontSizeMedium,
+    fontSizeLarge: typography?.fontSizeLarge,
+    color: colors?.contrasts?.grey4570,
+    delimiterColor: colors?.contrasts?.grey125125,
+    lineHeight: typography?.lineHeightCondensed,
+    noneSpacing: spacing?.xSmall,
+    pipeSpacing: spacing?.xSmall,
+    slashSpacing: spacing?.xSmall,
+    arrowSpacing: spacing?.xSmall,
+    marginBottomDefault: spacing?.xxxSmall,
+    spacingXXXSmall: spacing?.xxxSmall,
+    spacingXXSmall: spacing?.xxSmall,
+    spacingXSmall: spacing?.xSmall,
+    spacingSmall: spacing?.small,
+    spacingMedium: spacing?.medium,
+    spacingLarge: spacing?.large,
+    spacingXLarge: spacing?.xLarge,
+    spacingXXLarge: spacing?.xxLarge
   };
   return {
     ...componentVariables,

package/es/InlineList/v1/index.js

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "margin", "elementRef"];
 /*
  * The MIT License (MIT)
  *
@@ -36,17 +34,26 @@ category: components
 
 **/
 class InlineList 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 = "InlineList";
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    itemSpacing: 'none',
+    as: 'ul',
+    margin: 'none',
+    delimiter: 'none',
+    size: 'medium'
+  };
+  static Item = InlineListItem;
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   renderChildren() {
     const childrenArray = Children.toArray(this.props.children);
     const lastIndex = childrenArray.length - 1;
@@ -62,11 +69,12 @@ class InlineList extends Component {
     });
   }
   render() {
-    const _this$props = this.props,
-      as = _this$props.as,
-      margin = _this$props.margin,
-      elementRef = _this$props.elementRef,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      as,
+      margin,
+      elementRef,
+      ...rest
+    } = this.props;
     return _jsx(View, {
       ...passthroughProps(rest),
       as: as,
@@ -79,15 +87,5 @@ class InlineList extends Component {
     });
   }
 }
-InlineList.displayName = "InlineList";
-InlineList.allowedProps = allowedProps;
-InlineList.defaultProps = {
-  itemSpacing: 'none',
-  as: 'ul',
-  margin: 'none',
-  delimiter: 'none',
-  size: 'medium'
-};
-InlineList.Item = InlineListItem;
 export default InlineList;
 export { InlineList };

package/es/InlineList/v2/InlineListItem/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["delimiter", "size", "margin", "padding", "elementRef", "children", "spacing", "styles", "lastPlaceholder"];
-var _dec, _class, _InlineListItem;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -38,41 +36,49 @@ parent: InlineList
 id: InlineList.Item
 ---
 **/
-let InlineListItem = (_dec = withStyle(generateStyle), _dec(_class = (_InlineListItem = class InlineListItem 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 InlineListItem = (_dec = withStyle(generateStyle), _dec(_class = class InlineListItem extends Component {
+  static displayName = "InlineListItem";
+  static componentId = 'InlineList.Item';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    padding: 'none',
+    spacing: 'none',
+    delimiter: 'none',
+    size: 'medium',
+    lastPlaceholder: false
+  };
+  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?.();
   }
   render() {
-    const _this$props3 = this.props,
-      delimiter = _this$props3.delimiter,
-      size = _this$props3.size,
-      margin = _this$props3.margin,
-      padding = _this$props3.padding,
-      elementRef = _this$props3.elementRef,
-      children = _this$props3.children,
-      spacing = _this$props3.spacing,
-      styles = _this$props3.styles,
-      lastPlaceholder = _this$props3.lastPlaceholder,
-      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      delimiter,
+      size,
+      margin,
+      padding,
+      elementRef,
+      children,
+      spacing,
+      styles,
+      lastPlaceholder,
+      ...rest
+    } = this.props;
     return _jsxs(View, {
       ...passthroughProps(rest),
-      css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
+      css: styles?.inlineListItem,
       as: "li",
       margin: margin,
       padding: padding,
@@ -81,17 +87,11 @@ let InlineListItem = (_dec = withStyle(generateStyle), _dec(_class = (_InlineLis
       elementRef: this.handleRef,
       "data-cid": "InlineListItem",
       children: [children, !lastPlaceholder && _jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
+        css: styles?.delimiter,
         "aria-hidden": "true"
       })]
     });
   }
-}, _InlineListItem.displayName = "InlineListItem", _InlineListItem.componentId = 'InlineList.Item', _InlineListItem.allowedProps = allowedProps, _InlineListItem.defaultProps = {
-  padding: 'none',
-  spacing: 'none',
-  delimiter: 'none',
-  size: 'medium',
-  lastPlaceholder: false
-}, _InlineListItem)) || _class);
+}) || _class);
 export default InlineListItem;
 export { InlineListItem };

package/es/InlineList/v2/InlineListItem/styles.js

@@ -33,9 +33,11 @@ import { logError as error } from '@instructure/console';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size,
-    delimiter = props.delimiter,
-    spacing = props.spacing;
+  const {
+    size,
+    delimiter,
+    spacing
+  } = props;
   const withDelimiter = delimiter !== 'none';
   const withSpacing = spacing !== 'none';
   error(!(withDelimiter && withSpacing), `[InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`);

package/es/InlineList/v2/index.js

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "margin", "elementRef"];
 /*
  * The MIT License (MIT)
  *
@@ -36,17 +34,26 @@ category: components
 
 **/
 class InlineList 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 = "InlineList";
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    itemSpacing: 'none',
+    as: 'ul',
+    margin: 'none',
+    delimiter: 'none',
+    size: 'medium'
+  };
+  static Item = InlineListItem;
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   renderChildren() {
     const childrenArray = Children.toArray(this.props.children);
     const lastIndex = childrenArray.length - 1;
@@ -62,11 +69,12 @@ class InlineList extends Component {
     });
   }
   render() {
-    const _this$props = this.props,
-      as = _this$props.as,
-      margin = _this$props.margin,
-      elementRef = _this$props.elementRef,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      as,
+      margin,
+      elementRef,
+      ...rest
+    } = this.props;
     return _jsx(View, {
       ...passthroughProps(rest),
       as: as,
@@ -79,15 +87,5 @@ class InlineList extends Component {
     });
   }
 }
-InlineList.displayName = "InlineList";
-InlineList.allowedProps = allowedProps;
-InlineList.defaultProps = {
-  itemSpacing: 'none',
-  as: 'ul',
-  margin: 'none',
-  delimiter: 'none',
-  size: 'medium'
-};
-InlineList.Item = InlineListItem;
 export default InlineList;
 export { InlineList };

package/es/List/v1/ListItem/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["delimiter", "spacing", "size", "margin", "padding", "elementRef", "children", "styles"];
-var _dec, _class, _ListItem;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -39,40 +37,47 @@ parent: List
 id: List.Item
 ---
 **/
-let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ListItem = class ListItem 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 ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ListItem extends Component {
+  static displayName = "ListItem";
+  static componentId = 'List.Item';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    padding: 'none',
+    spacing: 'none',
+    delimiter: 'none',
+    size: 'medium'
+  };
+  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?.();
   }
   render() {
-    const _this$props3 = this.props,
-      delimiter = _this$props3.delimiter,
-      spacing = _this$props3.spacing,
-      size = _this$props3.size,
-      margin = _this$props3.margin,
-      padding = _this$props3.padding,
-      elementRef = _this$props3.elementRef,
-      children = _this$props3.children,
-      styles = _this$props3.styles,
-      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      delimiter,
+      spacing,
+      size,
+      margin,
+      padding,
+      elementRef,
+      children,
+      styles,
+      ...rest
+    } = this.props;
     return _jsx(View, {
       ...passthroughProps(rest),
-      css: styles === null || styles === void 0 ? void 0 : styles.listItem,
+      css: styles?.listItem,
       as: "li",
       margin: margin,
       padding: padding,
@@ -82,11 +87,6 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_c
       children: children
     });
   }
-}, _ListItem.displayName = "ListItem", _ListItem.componentId = 'List.Item', _ListItem.allowedProps = allowedProps, _ListItem.defaultProps = {
-  padding: 'none',
-  spacing: 'none',
-  delimiter: 'none',
-  size: 'medium'
-}, _ListItem)) || _class);
+}) || _class);
 export default ListItem;
 export { ListItem };

package/es/List/v1/ListItem/styles.js

@@ -36,9 +36,11 @@ import { logError as error } from '@instructure/console';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size,
-    delimiter = props.delimiter,
-    spacing = props.spacing;
+  const {
+    size,
+    delimiter,
+    spacing
+  } = props;
   const withDelimiter = delimiter !== 'none';
   const withSpacing = spacing !== 'none';
   error(!(withDelimiter && withSpacing), `[List] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`);

package/es/List/v1/ListItem/theme.js

@@ -28,35 +28,36 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
-  const borders = theme.borders,
-    colors = theme.colors,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    borders,
+    colors,
+    spacing,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
-    fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    spacingXXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
-    spacingXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
-    spacingXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
-    spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
-    spacingXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xLarge,
-    spacingXXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge,
-    delimiterDashedBorder: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} dashed ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1214}`,
-    delimiterSolidBorder: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} solid ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214}`
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    lineHeight: typography?.lineHeight,
+    fontSizeSmall: typography?.fontSizeSmall,
+    fontSizeMedium: typography?.fontSizeMedium,
+    fontSizeLarge: typography?.fontSizeLarge,
+    color: colors?.contrasts?.grey125125,
+    spacingXXXSmall: spacing?.xxxSmall,
+    spacingXXSmall: spacing?.xxSmall,
+    spacingXSmall: spacing?.xSmall,
+    spacingSmall: spacing?.small,
+    spacingMedium: spacing?.medium,
+    spacingLarge: spacing?.large,
+    spacingXLarge: spacing?.xLarge,
+    spacingXXLarge: spacing?.xxLarge,
+    delimiterDashedBorder: `${borders?.widthSmall} dashed ${colors?.contrasts?.grey1214}`,
+    delimiterSolidBorder: `${borders?.widthSmall} solid ${colors?.contrasts?.grey1214}`
   };
   return {
     ...componentVariables,