@instructure/ui-buttons 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
+## [11.7.3-snapshot-27](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-27) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-buttons
+
+### 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/BaseButton/v1/index.js

@@ -1,6 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles", "withFocusOutline"];
-var _dec, _class, _BaseButton;
+var _dec, _class;
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -45,62 +44,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components/utilities
 ---
 **/
-let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_BaseButton = class BaseButton extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.handleClick = event => {
-      const onClick = this.props.onClick;
-      const interaction = this.interaction;
-      if (interaction !== 'enabled') {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      if (typeof onClick === 'function') {
-        onClick(event);
-      }
-    };
-    this.handleKeyDown = event => {
-      const _this$props = this.props,
-        onClick = _this$props.onClick,
-        onKeyDown = _this$props.onKeyDown,
-        href = _this$props.href;
-      const interaction = this.interaction;
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event);
-      }
-
-      // behave like a button when space key is pressed
-      const _keycode$codes = keycode.codes,
-        space = _keycode$codes.space,
-        enter = _keycode$codes.enter;
-      if (this.elementType !== 'button' && [space, enter].includes(event.keyCode)) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (typeof onClick === 'function' && interaction === 'enabled') {
-          onClick(event);
-        }
-        if (href) {
-          this.ref && this.ref.click();
-        }
-      }
-    };
-  }
+let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class BaseButton extends Component {
+  static displayName = "BaseButton";
+  static componentId = 'BaseButton';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
+    color: 'secondary',
+    shape: 'rectangle',
+    display: 'inline-block',
+    textAlign: 'start',
+    withBackground: true,
+    withBorder: true,
+    isCondensed: false,
+    margin: '0',
+    cursor: 'pointer'
+  };
+  ref = null;
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
+    this.props.makeStyles?.(this.makeStylesVariables);
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
+    this.props.makeStyles?.(this.makeStylesVariables);
   }
   get makeStylesVariables() {
     return {
@@ -110,9 +79,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     };
   }
   get hasOnlyIconVisible() {
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      renderIcon = _this$props4.renderIcon;
+    const {
+      children,
+      renderIcon
+    } = this.props;
     return !!(renderIcon && !hasVisibleChildren(children));
   }
   get elementType() {
@@ -133,10 +103,11 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     return this.interaction === 'enabled';
   }
   get focusColor() {
-    const _this$props5 = this.props,
-      color = _this$props5.color,
-      focusColor = _this$props5.focusColor,
-      withBackground = _this$props5.withBackground;
+    const {
+      color,
+      focusColor,
+      withBackground
+    } = this.props;
 
     // Give user specified focusColor preference
     if (focusColor) {
@@ -158,65 +129,125 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   focus() {
     this.ref && this.ref.focus();
   }
+  handleElementRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+  handleClick = event => {
+    const {
+      onClick
+    } = this.props;
+    const {
+      interaction
+    } = this;
+    if (interaction !== 'enabled') {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+  };
+  handleKeyDown = event => {
+    const {
+      onClick,
+      onKeyDown,
+      href
+    } = this.props;
+    const {
+      interaction
+    } = this;
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+
+    // behave like a button when space key is pressed
+    const {
+      space,
+      enter
+    } = keycode.codes;
+    if (this.elementType !== 'button' && [space, enter].includes(event.keyCode)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (typeof onClick === 'function' && interaction === 'enabled') {
+        onClick(event);
+      }
+      if (href) {
+        this.ref && this.ref.click();
+      }
+    }
+  };
   renderChildren() {
-    const _this$props6 = this.props,
-      renderIcon = _this$props6.renderIcon,
-      children = _this$props6.children,
-      styles = _this$props6.styles;
+    const {
+      renderIcon,
+      children,
+      styles
+    } = this.props;
     const wrappedChildren = _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.children,
+      css: styles?.children,
       children: children
     });
     if (!renderIcon) {
       return wrappedChildren;
     }
-    const hasOnlyIconVisible = this.hasOnlyIconVisible;
+    const {
+      hasOnlyIconVisible
+    } = this;
     const wrappedIcon = _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG,
+      css: styles?.iconSVG,
       children: callRenderProp(renderIcon)
     });
     const flexChildren = hasOnlyIconVisible ? _jsxs("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly,
+      css: styles?.iconOnly,
       children: [wrappedIcon, children]
     }) : [_jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper,
+      css: styles?.iconWrapper,
       children: wrappedIcon
     }, "icon"), _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper,
+      css: styles?.childrenWrapper,
       children: wrappedChildren
     }, "children")];
     return _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout,
+      css: styles?.childrenLayout,
       children: flexChildren
     });
   }
   render() {
-    const _this$props7 = this.props,
-      type = _this$props7.type,
-      size = _this$props7.size,
-      elementRef = _this$props7.elementRef,
-      as = _this$props7.as,
-      href = _this$props7.href,
-      color = _this$props7.color,
-      focusColor = _this$props7.focusColor,
-      textAlign = _this$props7.textAlign,
-      shape = _this$props7.shape,
-      display = _this$props7.display,
-      withBackground = _this$props7.withBackground,
-      withBorder = _this$props7.withBorder,
-      isCondensed = _this$props7.isCondensed,
-      margin = _this$props7.margin,
-      cursor = _this$props7.cursor,
-      onClick = _this$props7.onClick,
-      renderIcon = _this$props7.renderIcon,
-      tabIndex = _this$props7.tabIndex,
-      styles = _this$props7.styles,
-      makeStyles = _this$props7.makeStyles,
-      withFocusOutline = _this$props7.withFocusOutline,
-      props = _objectWithoutProperties(_this$props7, _excluded);
-    const isDisabled = this.isDisabled,
-      isReadOnly = this.isReadOnly,
-      elementType = this.elementType;
+    const {
+      type,
+      size,
+      elementRef,
+      as,
+      href,
+      color,
+      focusColor,
+      textAlign,
+      shape,
+      display,
+      withBackground,
+      withBorder,
+      isCondensed,
+      margin,
+      cursor,
+      onClick,
+      renderIcon,
+      tabIndex,
+      styles,
+      makeStyles,
+      withFocusOutline,
+      ...props
+    } = this.props;
+    const {
+      isDisabled,
+      isReadOnly,
+      elementType
+    } = this;
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true;
@@ -247,37 +278,22 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       margin: margin,
       cursor: isDisabled ? 'not-allowed' : cursor,
       href: href,
-      type: href ? void 0 : type,
+      type: href ? undefined : type,
       elementRef: this.handleElementRef,
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
-      role: onClick && as !== 'button' ? 'button' : void 0,
+      role: onClick && as !== 'button' ? 'button' : undefined,
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
-      css: styles === null || styles === void 0 ? void 0 : styles.baseButton,
+      css: styles?.baseButton,
       withFocusOutline: withFocusOutline,
       "data-cid": combineDataCid('BaseButton', this.props),
       children: _jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.content,
+        css: styles?.content,
         children: this.renderChildren()
       })
     });
   }
-}, _BaseButton.displayName = "BaseButton", _BaseButton.componentId = 'BaseButton', _BaseButton.allowedProps = allowedProps, _BaseButton.defaultProps = {
-  type: 'button',
-  size: 'medium',
-  as: 'button',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  color: 'secondary',
-  shape: 'rectangle',
-  display: 'inline-block',
-  textAlign: 'start',
-  withBackground: true,
-  withBorder: true,
-  isCondensed: false,
-  margin: '0',
-  cursor: 'pointer'
-}, _BaseButton)) || _class);
+}) || _class);
 export { BaseButton };
 export default BaseButton;

package/es/BaseButton/v1/styles.js

@@ -35,16 +35,20 @@ import { darken, lighten } from '@instructure/ui-color-utils';
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const size = props.size,
-    color = props.color,
-    textAlign = props.textAlign,
-    shape = props.shape,
-    withBackground = props.withBackground,
-    withBorder = props.withBorder,
-    isCondensed = props.isCondensed;
-  const isDisabled = state.isDisabled,
-    hasOnlyIconVisible = state.hasOnlyIconVisible,
-    isEnabled = state.isEnabled;
+  const {
+    size,
+    color,
+    textAlign,
+    shape,
+    withBackground,
+    withBorder,
+    isCondensed
+  } = props;
+  const {
+    isDisabled,
+    hasOnlyIconVisible,
+    isEnabled
+  } = state;
   const shapeVariants = {
     circle: {
       borderRadius: '50%'

package/es/BaseButton/v1/theme.js

@@ -31,13 +31,14 @@ const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50, _colors$contrasts51, _colors$contrasts52;
-  const borders = theme.borders,
-    colors = theme.colors,
-    forms = theme.forms,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    borders,
+    colors,
+    forms,
+    spacing,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       primaryColor: theme['ic-brand-button--primary-text'],
@@ -57,118 +58,118 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     transform: 'none',
     hoverTransform: 'none',
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
     textTransform: 'none',
     letterSpacing: 'normal',
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
-    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    smallPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    borderRadius: borders?.radiusMedium,
+    borderStyle: borders?.style,
+    borderWidth: borders?.widthSmall,
+    smallHeight: forms?.inputHeightSmall,
+    smallFontSize: typography?.fontSizeSmall,
+    smallPaddingHorizontal: spacing?.xSmall,
     smallPaddingTop: '0.375rem',
     smallPaddingBottom: '0.3125rem',
-    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
-    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    mediumPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    mediumHeight: forms?.inputHeightMedium,
+    mediumFontSize: typography?.fontSizeMedium,
+    mediumPaddingHorizontal: spacing?.small,
     mediumPaddingTop: '0.5625rem',
     mediumPaddingBottom: '0.5625rem',
-    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
-    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    largePaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
+    largeHeight: forms?.inputHeightLarge,
+    largeFontSize: typography?.fontSizeLarge,
+    largePaddingHorizontal: spacing?.medium,
     largePaddingTop: '0.6875rem',
     largePaddingBottom: '0.6875rem',
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit,
+    lineHeight: typography?.lineHeightFit,
     iconSizeSmall: '1rem',
     iconSizeMedium: '1.25rem',
     iconSizeLarge: '1.625rem',
     iconTextGap: spacing.xSmall,
     iconTextGapCondensed: spacing.xxSmall,
-    primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    primaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue5782,
-    primaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
-    primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
-    primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
-    primaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010}`,
-    primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue5782,
-    primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
+    primaryColor: colors?.contrasts?.white1010,
+    primaryBorderColor: colors?.contrasts?.blue5782,
+    primaryBackground: colors?.contrasts?.blue4570,
+    primaryHoverBackground: colors?.contrasts?.blue5782,
+    primaryActiveBackground: colors?.contrasts?.blue5782,
+    primaryActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
+    primaryGhostColor: colors?.contrasts?.blue5782,
+    primaryGhostBorderColor: colors?.contrasts?.blue4570,
     primaryGhostBackground: 'transparent',
-    primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue1212,
+    primaryGhostHoverBackground: colors?.contrasts?.blue1212,
     primaryGhostActiveBackground: 'transparent',
-    primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue1212, 28)}`,
+    primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors?.contrasts?.blue1212, 28)}`,
     primaryBoxShadow: 'none',
     primaryGhostBoxShadow: 'none',
     primaryHoverBoxShadow: 'none',
     primaryGhostHoverBoxShadow: 'none',
-    secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.grey125125,
-    secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey1424,
-    secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1111,
-    secondaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1214,
-    secondaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1214,
-    secondaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.white1010}`,
-    secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.grey125125,
-    secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.grey125125,
+    secondaryColor: colors?.contrasts?.grey125125,
+    secondaryBorderColor: colors?.contrasts?.grey1424,
+    secondaryBackground: colors?.contrasts?.grey1111,
+    secondaryHoverBackground: colors?.contrasts?.grey1214,
+    secondaryActiveBackground: colors?.contrasts?.grey1214,
+    secondaryActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
+    secondaryGhostColor: colors?.contrasts?.grey125125,
+    secondaryGhostBorderColor: colors?.contrasts?.grey125125,
     secondaryGhostBackground: 'transparent',
-    secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey1111,
+    secondaryGhostHoverBackground: colors?.contrasts?.grey1111,
     secondaryGhostActiveBackground: 'transparent',
-    secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey125125, 28)}`,
+    secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors?.contrasts?.grey125125, 28)}`,
     secondaryBoxShadow: 'none',
     secondaryGhostBoxShadow: 'none',
     secondaryHoverBoxShadow: 'none',
     secondaryGhostHoverBoxShadow: 'none',
-    successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.white1010,
-    successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.green5782,
-    successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.green4570,
-    successHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green5782,
-    successActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green5782,
-    successActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts24 = colors.contrasts) === null || _colors$contrasts24 === void 0 ? void 0 : _colors$contrasts24.white1010}`,
-    successGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts25 = colors.contrasts) === null || _colors$contrasts25 === void 0 ? void 0 : _colors$contrasts25.green4570,
-    successGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts26 = colors.contrasts) === null || _colors$contrasts26 === void 0 ? void 0 : _colors$contrasts26.green4570,
+    successColor: colors?.contrasts?.white1010,
+    successBorderColor: colors?.contrasts?.green5782,
+    successBackground: colors?.contrasts?.green4570,
+    successHoverBackground: colors?.contrasts?.green5782,
+    successActiveBackground: colors?.contrasts?.green5782,
+    successActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
+    successGhostColor: colors?.contrasts?.green4570,
+    successGhostBorderColor: colors?.contrasts?.green4570,
     successGhostBackground: 'transparent',
-    successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts27 = colors.contrasts) === null || _colors$contrasts27 === void 0 ? void 0 : _colors$contrasts27.green4570, 10),
+    successGhostHoverBackground: alpha(colors?.contrasts?.green4570, 10),
     successGhostActiveBackground: 'transparent',
-    successGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts28 = colors.contrasts) === null || _colors$contrasts28 === void 0 ? void 0 : _colors$contrasts28.green4570, 28)}`,
+    successGhostActiveBoxShadow: `${activeShadow} ${alpha(colors?.contrasts?.green4570, 28)}`,
     successBoxShadow: 'none',
     successGhostBoxShadow: 'none',
     successHoverBoxShadow: 'none',
     successGhostHoverBoxShadow: 'none',
-    dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.white1010,
-    dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.red5782,
-    dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.red4570,
-    dangerHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red5782,
-    dangerActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red5782,
-    dangerActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts34 = colors.contrasts) === null || _colors$contrasts34 === void 0 ? void 0 : _colors$contrasts34.white1010}`,
-    dangerGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts35 = colors.contrasts) === null || _colors$contrasts35 === void 0 ? void 0 : _colors$contrasts35.red4570,
-    dangerGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts36 = colors.contrasts) === null || _colors$contrasts36 === void 0 ? void 0 : _colors$contrasts36.red4570,
+    dangerColor: colors?.contrasts?.white1010,
+    dangerBorderColor: colors?.contrasts?.red5782,
+    dangerBackground: colors?.contrasts?.red4570,
+    dangerHoverBackground: colors?.contrasts?.red5782,
+    dangerActiveBackground: colors?.contrasts?.red5782,
+    dangerActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
+    dangerGhostColor: colors?.contrasts?.red4570,
+    dangerGhostBorderColor: colors?.contrasts?.red4570,
     dangerGhostBackground: 'transparent',
-    dangerGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts37 = colors.contrasts) === null || _colors$contrasts37 === void 0 ? void 0 : _colors$contrasts37.red4570, 10),
+    dangerGhostHoverBackground: alpha(colors?.contrasts?.red4570, 10),
     dangerGhostActiveBackground: 'transparent',
-    dangerGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts38 = colors.contrasts) === null || _colors$contrasts38 === void 0 ? void 0 : _colors$contrasts38.red4570, 28)}`,
+    dangerGhostActiveBoxShadow: `${activeShadow} ${alpha(colors?.contrasts?.red4570, 28)}`,
     dangerBoxShadow: 'none',
     dangerGhostBoxShadow: 'none',
     dangerHoverBoxShadow: 'none',
     dangerGhostHoverBoxShadow: 'none',
-    primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.grey125125,
-    primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.grey1214,
-    primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.white1010,
-    primaryInverseHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.grey1111,
-    primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.white1010,
-    primaryInverseActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts44 = colors.contrasts) === null || _colors$contrasts44 === void 0 ? void 0 : _colors$contrasts44.white1010}`,
-    primaryInverseGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts45 = colors.contrasts) === null || _colors$contrasts45 === void 0 ? void 0 : _colors$contrasts45.white1010,
-    primaryInverseGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts46 = colors.contrasts) === null || _colors$contrasts46 === void 0 ? void 0 : _colors$contrasts46.white1010,
+    primaryInverseColor: colors?.contrasts?.grey125125,
+    primaryInverseBorderColor: colors?.contrasts?.grey1214,
+    primaryInverseBackground: colors?.contrasts?.white1010,
+    primaryInverseHoverBackground: colors?.contrasts?.grey1111,
+    primaryInverseActiveBackground: colors?.contrasts?.white1010,
+    primaryInverseActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
+    primaryInverseGhostColor: colors?.contrasts?.white1010,
+    primaryInverseGhostBorderColor: colors?.contrasts?.white1010,
     primaryInverseGhostBackground: 'transparent',
-    primaryInverseGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts47 = colors.contrasts) === null || _colors$contrasts47 === void 0 ? void 0 : _colors$contrasts47.white1010, 10),
+    primaryInverseGhostHoverBackground: alpha(colors?.contrasts?.white1010, 10),
     primaryInverseGhostActiveBackground: 'transparent',
-    primaryInverseGhostActiveBoxShadow: `${activeShadow}  ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts48 = colors.contrasts) === null || _colors$contrasts48 === void 0 ? void 0 : _colors$contrasts48.white1010, 28)}`,
+    primaryInverseGhostActiveBoxShadow: `${activeShadow}  ${alpha(colors?.contrasts?.white1010, 28)}`,
     primaryInverseBoxShadow: 'none',
     primaryInverseGhostBoxShadow: 'none',
     primaryInverseHoverBoxShadow: 'none',
     primaryInverseGhostHoverBoxShadow: 'none',
-    aiBackgroundTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.violet4570,
-    aiBackgroundBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.sea4570,
-    aiBorderTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts51 = colors.contrasts) === null || _colors$contrasts51 === void 0 ? void 0 : _colors$contrasts51.violet5790,
-    aiBorderBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts52 = colors.contrasts) === null || _colors$contrasts52 === void 0 ? void 0 : _colors$contrasts52.sea5790,
+    aiBackgroundTopGradientColor: colors?.contrasts?.violet4570,
+    aiBackgroundBottomGradientColor: colors?.contrasts?.sea4570,
+    aiBorderTopGradientColor: colors?.contrasts?.violet5790,
+    aiBorderBottomGradientColor: colors?.contrasts?.sea5790,
     aiActiveBoxShadow: '0px 0px 5px 0px #013451 inset'
   };
   return {