@elliemae/ds-system 2.4.2-rc.11 → 2.4.2-rc.14

package/cjs/arithmetic.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
-
 function getNumberAndUnit(numberStrWithUnit) {
   const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
   return {

package/cjs/globalStyles.js

@@ -2,25 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('polished');
 require('lodash');
 var styled_component = require('styled-components');
 require('./theme.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('react');
 require('./th.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+const GlobalStyles = styled_component.createGlobalStyle`
+  :root, body {
+    overscroll-behavior-y: none;
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+    font-size: ${props => props.device === 'desktop' ? '13px' : '16px'};
 
-var _templateObject;
-const GlobalStyles = styled_component.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {
+    @media(min-width: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.breakpoints.small;
-}, props => props.device === 'mobile' ? '16px' : '13px');
+}}) {
+      font-size: ${props => props.device === 'mobile' ? '16px' : '13px'};
+    }
+
+  }
+`;
 
 exports.GlobalStyles = GlobalStyles;

package/cjs/mobileUtilities.js

@@ -2,18 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var react = require('react');
 var theme = require('./theme.js');
 var constants = require('./constants.js');
 
 function __UNSAFE_SPACE_TO_DIMSUM(unit) {
   if (constants.translateUnits[unit]) return constants.translateUnits[unit];
-  return "".concat(parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2, "px");
+  return `${parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2}px`;
 }
 function toMobile(unit) {
   if (!isMobile()) return unit;
-  return "".concat(parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont), "rem");
+  return `${parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont)}rem`;
 }
 const useIsMobile = () => {
   const [mobile, setMobile] = react.useState(isMobile());

package/cjs/spaceUtilities.js

@@ -13,20 +13,20 @@ var theme = require('./theme.js');
 function mapGap(gutter) {
   if (!gutter) return '0rem';
   if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
-  return "".concat(theme.theme.space[gutter]);
+  return `${theme.theme.space[gutter]}`;
 }
 function mapGutter(gutter) {
   if (!gutter) return '0rem';
-  return "".concat(theme.theme.space[gutter], " * 2");
+  return `${theme.theme.space[gutter]} * 2`;
 }
 function mapSpace(width) {
-  if (typeof width === 'string') return lodash.get(theme.theme, width) ? "".concat(lodash.get(theme.theme, width)) : width;
-  return "".concat(width * 100, "%");
+  if (typeof width === 'string') return lodash.get(theme.theme, width) ? `${lodash.get(theme.theme, width)}` : width;
+  return `${width * 100}%`;
 }
 function fixSpaceGutter(width, gutter) {
   if (!width) return '';
-  if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
-  return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
+  if (Array.isArray(width)) return width.map(w => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
+  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
 }
 function fixSpace(width) {
   if (!width) return '';
@@ -35,13 +35,13 @@ function fixSpace(width) {
 }
 function numbersToFr(grid) {
   const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
-  return den.map(d => "".concat(d, "fr"));
+  return den.map(d => `${d}fr`);
 }
 function mapGrid(width) {
-  if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
+  if (lodash.get(theme.theme, width)) return `${lodash.get(theme.theme, width)}`;
   if (typeof width === 'string') return width;
   const den = width < 1 ? Math.floor(1 / width) : width;
-  return "".concat(den, "fr");
+  return `${den}fr`;
 }
 function mapTemplateGrid(grid) {
   if (Array.isArray(grid)) {

package/cjs/styled/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.reduce.js');
@@ -94,11 +93,11 @@ const styledFunction = function (tag) {
     }
 
     let Component = /*#__PURE__*/styled_component__default["default"](tag);
-    const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName, "-").concat(componentSlot) : null;
+    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
 
     if (displayName !== null) {
       Component = Component.attrs({
-        className: "".concat(componentName, "-").concat(componentSlot)
+        className: `${componentName}-${componentSlot}`
       });
     }
 

package/cjs/styled/styleGetters.js

@@ -9,15 +9,9 @@ require('core-js/modules/esnext.async-iterator.every.js');
 require('core-js/modules/esnext.iterator.every.js');
 var utils = require('./utils.js');
 
-const getStyleOverrides = (name, theme) => {
-  var _theme$components, _theme$components$nam;
-
-  return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
-};
+const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
 const getVariantStyles = (name, theme) => {
-  var _theme$components2, _theme$components2$na;
-
-  const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
+  const variants = theme.components?.[name]?.variants || [];
   return variants.reduce((styles, definition) => {
     const key = utils.propsToClassKey(definition.props);
     styles[key] = definition.style;
@@ -25,9 +19,7 @@ const getVariantStyles = (name, theme) => {
   }, {});
 };
 const variantsResolver = (props, styles, theme, name) => {
-  var _theme$components3, _theme$components3$na;
-
-  const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
+  const themeVariants = theme?.components?.[name]?.variants || [];
   return themeVariants.reduce((variantsStyles, themeVariant) => {
     const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
 

package/cjs/styled/utils.js

@@ -10,13 +10,13 @@ var theme = require('../theme.js');
 
 const systemTheme = theme.theme;
 const isEmpty = string => string.length === 0;
-const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
+const coerceWithDefaultTheme = themeInput => themeInput ?? systemTheme;
 const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
   if (key === 'color') {
     return classKey + isEmpty(String(classKey)) ? String(props[key]) : dsUtilities.capitalize(String(props[key]));
   }
 
-  return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : dsUtilities.capitalize(key)).concat(dsUtilities.capitalize(props[key].toString()));
+  return `${classKey}${isEmpty(String(classKey)) ? key : dsUtilities.capitalize(key)}${dsUtilities.capitalize(props[key].toString())}`;
 }, '');
 
 exports.coerceWithDefaultTheme = coerceWithDefaultTheme;

package/cjs/th.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/es.error.cause.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
@@ -20,7 +20,7 @@ const colorGetter = value => _ref => {
   if (!themeColor) throw new Error('Invalid color value');
 
   if (alpha) {
-    const alphaFloatingNumber = "0.".concat(alpha.slice(1));
+    const alphaFloatingNumber = `0.${alpha.slice(1)}`;
     return utils.hexToRgba(themeColor, alphaFloatingNumber);
   }
 
@@ -30,8 +30,6 @@ const colorGetter = value => _ref => {
 const genericGetter = property => function (value) {
   let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return _ref2 => {
-    var _ref3;
-
     let {
       theme
     } = _ref2;
@@ -40,7 +38,7 @@ const genericGetter = property => function (value) {
     parts.forEach(part => {
       if (result) result = result[part];
     });
-    return (_ref3 = result) !== null && _ref3 !== void 0 ? _ref3 : dfault;
+    return result ?? dfault;
   };
 };
 

package/cjs/utils.js

@@ -11,21 +11,33 @@ var th = require('./th.js');
 
 /* eslint-disable no-shadow */
 function truncate(width) {
-  return props => styled_component.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
+  return props => styled_component.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
 }
 function flexCenter() {
-  return "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  ";
+  return `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
 }
 function disabled() {
-  return "\n    cursor: not-allowed;\n    pointer-events: none;\n  ";
+  return `
+    cursor: not-allowed;
+    pointer-events: none;
+  `;
 }
 function keyframes(obj) {
-  return styled_component.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n    ".concat(result, "\n    ").concat(key, "% {\n      ").concat(value, "\n    }\n  "), ''));
+  return styled_component.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => `
+    ${result}
+    ${key}% {
+      ${value}
+    }
+  `, ''));
 } // eslint-disable-next-line max-params
 
 function boxShadow(top, left, blur, color) {
   let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
+  return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
 }
 function color() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
@@ -36,7 +48,7 @@ function border() {
   let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
   let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
   let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
-  return "".concat(size, " ").concat(type, " ").concat(color);
+  return `${size} ${type} ${color}`;
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
   return props => styled_component.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
@@ -59,51 +71,86 @@ function textStyle(type) {
   let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
   // eslint-disable-next-line complexity
   return props => {
-    let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
+    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
 
     switch (type) {
       case 'h1':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile('2.7692rem'), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile('2.7692rem')};
+        line-height: normal;
+      `;
         break;
 
       case 'h2':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[800]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[800])};
+        line-height: normal;
+      `;
         break;
 
       case 'h3':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[700]), ";\n        line-height: 1.2;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[700])};
+        line-height: 1.2;
+      `;
         break;
 
       case 'h4':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[600]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[600])};
+        line-height: normal;
+      `;
         break;
 
       case 'h5':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+      `;
         break;
 
       case 'section-header':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n        text-transform: uppercase;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+        text-transform: uppercase;
+      `;
         break;
 
       case 'body':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
         break;
 
       case 'body-small':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[300]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[300])};
+        line-height: normal;
+      `;
         break;
 
       case 'body-micro':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.microText[200]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.microText[200])};
+        line-height: normal;
+      `;
         break;
 
       case 'list':
-        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
         break;
 
       case 'link':
-        cssVar += "\n        line-height: ".concat(props.theme.xl, ";\n        color: ").concat(props.theme.colors.brand[600], ";\n        cursor: pointer;\n      ");
+        cssVar += `
+        line-height: ${props.theme.xl};
+        color: ${props.theme.colors.brand[600]};
+        cursor: pointer;
+      `;
         break;
     }
 
@@ -122,37 +169,65 @@ function fakeActive() {
   return styled_component.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
 }
 function clearFocus() {
-  return "\n    border: none;\n    box-shadow: none;\n  ";
+  return `
+    border: none;
+    box-shadow: none;
+  `;
 }
 function buttonLink() {
-  return "\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  ";
+  return `
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+  `;
 }
 function transition() {
   let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
-  return "\n    transition: ".concat(t, ";\n  ");
+  return `
+    transition: ${t};
+  `;
 }
 const onlySafariAndFirefox = styles => styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
-const onlySafari = styles => "\n    @media not all and (min-resolution: 0.001dpcm) {\n      ".concat(styles, "\n    }\n  ");
-const onlyFirefox = styles => "\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ".concat(styles, "\n    }\n  ");
-const safariAndFirefoxBold = color => "\n  @media not all and (min-resolution: 0.001dpcm) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ".concat(color, ";\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ").concat(color, ";\n  }\n");
+const onlySafari = styles => `
+    @media not all and (min-resolution: 0.001dpcm) {
+      ${styles}
+    }
+  `;
+const onlyFirefox = styles => `
+    @media screen and (min--moz-device-pixel-ratio: 0) {
+      ${styles}
+    }
+  `;
+const safariAndFirefoxBold = color => `
+  @media not all and (min-resolution: 0.001dpcm) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+`;
 const backgroundColorSetter = /*#__PURE__*/styled_component.css(["", "}"], _ref => {
   let {
     bg,
     backgroundColor,
     theme
   } = _ref;
-  return bg || backgroundColor ? "background-color: ".concat(th.th.color(bg || backgroundColor, bg || backgroundColor)({
+  return bg || backgroundColor ? `background-color: ${th.th.color(bg || backgroundColor, bg || backgroundColor)({
     theme
-  }), ";") : "";
+  })};` : ``;
 });
 const hexToRgba = (hex, alpha) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 
   if (result) {
-    return "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")");
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
   }
 
-  return "";
+  return ``;
 };
 
 Object.defineProperty(exports, 'rgba', {

package/esm/arithmetic.js

@@ -1,5 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-
 function getNumberAndUnit(numberStrWithUnit) {
   const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
   return {

package/esm/globalStyles.js

@@ -1,18 +1,26 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import 'polished';
 import 'lodash';
 import { createGlobalStyle } from 'styled-components';
 import './theme.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
 import './th.js';
 
-var _templateObject;
-const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {
+const GlobalStyles = createGlobalStyle`
+  :root, body {
+    overscroll-behavior-y: none;
+
+    font-size: ${props => props.device === 'desktop' ? '13px' : '16px'};
+
+    @media(min-width: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.breakpoints.small;
-}, props => props.device === 'mobile' ? '16px' : '13px');
+}}) {
+      font-size: ${props => props.device === 'mobile' ? '16px' : '13px'};
+    }
+
+  }
+`;
 
 export { GlobalStyles };

package/esm/mobileUtilities.js

@@ -1,15 +1,14 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 import { theme } from './theme.js';
 import { translateUnits, mobileBaseFont, desktopBaseFont } from './constants.js';
 
 function __UNSAFE_SPACE_TO_DIMSUM(unit) {
   if (translateUnits[unit]) return translateUnits[unit];
-  return "".concat(parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2, "px");
+  return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
 }
 function toMobile(unit) {
   if (!isMobile()) return unit;
-  return "".concat(parseFloat(unit) * (desktopBaseFont / mobileBaseFont), "rem");
+  return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;
 }
 const useIsMobile = () => {
   const [mobile, setMobile] = useState(isMobile());

package/esm/spaceUtilities.js

@@ -9,20 +9,20 @@ import { theme } from './theme.js';
 function mapGap(gutter) {
   if (!gutter) return '0rem';
   if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
-  return "".concat(theme.space[gutter]);
+  return `${theme.space[gutter]}`;
 }
 function mapGutter(gutter) {
   if (!gutter) return '0rem';
-  return "".concat(theme.space[gutter], " * 2");
+  return `${theme.space[gutter]} * 2`;
 }
 function mapSpace(width) {
-  if (typeof width === 'string') return get(theme, width) ? "".concat(get(theme, width)) : width;
-  return "".concat(width * 100, "%");
+  if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;
+  return `${width * 100}%`;
 }
 function fixSpaceGutter(width, gutter) {
   if (!width) return '';
-  if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
-  return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
+  if (Array.isArray(width)) return width.map(w => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
+  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
 }
 function fixSpace(width) {
   if (!width) return '';
@@ -31,13 +31,13 @@ function fixSpace(width) {
 }
 function numbersToFr(grid) {
   const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
-  return den.map(d => "".concat(d, "fr"));
+  return den.map(d => `${d}fr`);
 }
 function mapGrid(width) {
-  if (get(theme, width)) return "".concat(get(theme, width));
+  if (get(theme, width)) return `${get(theme, width)}`;
   if (typeof width === 'string') return width;
   const den = width < 1 ? Math.floor(1 / width) : width;
-  return "".concat(den, "fr");
+  return `${den}fr`;
 }
 function mapTemplateGrid(grid) {
   if (Array.isArray(grid)) {

package/esm/styled/index.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
@@ -85,11 +84,11 @@ const styledFunction = function (tag) {
     }
 
     let Component = /*#__PURE__*/styled_component(tag);
-    const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName, "-").concat(componentSlot) : null;
+    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
 
     if (displayName !== null) {
       Component = Component.attrs({
-        className: "".concat(componentName, "-").concat(componentSlot)
+        className: `${componentName}-${componentSlot}`
       });
     }
 

package/esm/styled/styleGetters.js

@@ -5,15 +5,9 @@ import 'core-js/modules/esnext.async-iterator.every.js';
 import 'core-js/modules/esnext.iterator.every.js';
 import { propsToClassKey } from './utils.js';
 
-const getStyleOverrides = (name, theme) => {
-  var _theme$components, _theme$components$nam;
-
-  return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
-};
+const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
 const getVariantStyles = (name, theme) => {
-  var _theme$components2, _theme$components2$na;
-
-  const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
+  const variants = theme.components?.[name]?.variants || [];
   return variants.reduce((styles, definition) => {
     const key = propsToClassKey(definition.props);
     styles[key] = definition.style;
@@ -21,9 +15,7 @@ const getVariantStyles = (name, theme) => {
   }, {});
 };
 const variantsResolver = (props, styles, theme, name) => {
-  var _theme$components3, _theme$components3$na;
-
-  const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
+  const themeVariants = theme?.components?.[name]?.variants || [];
   return themeVariants.reduce((variantsStyles, themeVariant) => {
     const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
 

package/esm/styled/utils.js

@@ -6,13 +6,13 @@ import { theme } from '../theme.js';
 
 const systemTheme = theme;
 const isEmpty = string => string.length === 0;
-const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
+const coerceWithDefaultTheme = themeInput => themeInput ?? systemTheme;
 const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
   if (key === 'color') {
     return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));
   }
 
-  return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : capitalize(key)).concat(capitalize(props[key].toString()));
+  return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
 }, '');
 
 export { coerceWithDefaultTheme, isEmpty, propsToClassKey };

package/esm/th.js

@@ -1,4 +1,4 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.error.cause.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
@@ -16,7 +16,7 @@ const colorGetter = value => _ref => {
   if (!themeColor) throw new Error('Invalid color value');
 
   if (alpha) {
-    const alphaFloatingNumber = "0.".concat(alpha.slice(1));
+    const alphaFloatingNumber = `0.${alpha.slice(1)}`;
     return hexToRgba(themeColor, alphaFloatingNumber);
   }
 
@@ -26,8 +26,6 @@ const colorGetter = value => _ref => {
 const genericGetter = property => function (value) {
   let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return _ref2 => {
-    var _ref3;
-
     let {
       theme
     } = _ref2;
@@ -36,7 +34,7 @@ const genericGetter = property => function (value) {
     parts.forEach(part => {
       if (result) result = result[part];
     });
-    return (_ref3 = result) !== null && _ref3 !== void 0 ? _ref3 : dfault;
+    return result ?? dfault;
   };
 };
 

package/esm/utils.js

@@ -9,21 +9,33 @@ import { th } from './th.js';
 
 /* eslint-disable no-shadow */
 function truncate(width) {
-  return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
+  return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
 }
 function flexCenter() {
-  return "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  ";
+  return `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
 }
 function disabled() {
-  return "\n    cursor: not-allowed;\n    pointer-events: none;\n  ";
+  return `
+    cursor: not-allowed;
+    pointer-events: none;
+  `;
 }
 function keyframes(obj) {
-  return keyframes$1(["", ""], reduce(obj, (result, value, key) => "\n    ".concat(result, "\n    ").concat(key, "% {\n      ").concat(value, "\n    }\n  "), ''));
+  return keyframes$1(["", ""], reduce(obj, (result, value, key) => `
+    ${result}
+    ${key}% {
+      ${value}
+    }
+  `, ''));
 } // eslint-disable-next-line max-params
 
 function boxShadow(top, left, blur, color) {
   let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
+  return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
 }
 function color() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
@@ -34,7 +46,7 @@ function border() {
   let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.colors.brand[600];
   let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
   let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
-  return "".concat(size, " ").concat(type, " ").concat(color);
+  return `${size} ${type} ${color}`;
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
   return props => css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
@@ -57,51 +69,86 @@ function textStyle(type) {
   let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
   // eslint-disable-next-line complexity
   return props => {
-    let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
+    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
 
     switch (type) {
       case 'h1':
-        cssVar += "\n        font-size: ".concat(toMobile('2.7692rem'), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile('2.7692rem')};
+        line-height: normal;
+      `;
         break;
 
       case 'h2':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[800]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[800])};
+        line-height: normal;
+      `;
         break;
 
       case 'h3':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[700]), ";\n        line-height: 1.2;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[700])};
+        line-height: 1.2;
+      `;
         break;
 
       case 'h4':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[600]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[600])};
+        line-height: normal;
+      `;
         break;
 
       case 'h5':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+      `;
         break;
 
       case 'section-header':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n        text-transform: uppercase;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+        text-transform: uppercase;
+      `;
         break;
 
       case 'body':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
         break;
 
       case 'body-small':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.value[300]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[300])};
+        line-height: normal;
+      `;
         break;
 
       case 'body-micro':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.microText[200]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.microText[200])};
+        line-height: normal;
+      `;
         break;
 
       case 'list':
-        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
         break;
 
       case 'link':
-        cssVar += "\n        line-height: ".concat(props.theme.xl, ";\n        color: ").concat(props.theme.colors.brand[600], ";\n        cursor: pointer;\n      ");
+        cssVar += `
+        line-height: ${props.theme.xl};
+        color: ${props.theme.colors.brand[600]};
+        cursor: pointer;
+      `;
         break;
     }
 
@@ -120,37 +167,65 @@ function fakeActive() {
   return css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
 }
 function clearFocus() {
-  return "\n    border: none;\n    box-shadow: none;\n  ";
+  return `
+    border: none;
+    box-shadow: none;
+  `;
 }
 function buttonLink() {
-  return "\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  ";
+  return `
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+  `;
 }
 function transition() {
   let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
-  return "\n    transition: ".concat(t, ";\n  ");
+  return `
+    transition: ${t};
+  `;
 }
 const onlySafariAndFirefox = styles => css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
-const onlySafari = styles => "\n    @media not all and (min-resolution: 0.001dpcm) {\n      ".concat(styles, "\n    }\n  ");
-const onlyFirefox = styles => "\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ".concat(styles, "\n    }\n  ");
-const safariAndFirefoxBold = color => "\n  @media not all and (min-resolution: 0.001dpcm) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ".concat(color, ";\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ").concat(color, ";\n  }\n");
+const onlySafari = styles => `
+    @media not all and (min-resolution: 0.001dpcm) {
+      ${styles}
+    }
+  `;
+const onlyFirefox = styles => `
+    @media screen and (min--moz-device-pixel-ratio: 0) {
+      ${styles}
+    }
+  `;
+const safariAndFirefoxBold = color => `
+  @media not all and (min-resolution: 0.001dpcm) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+`;
 const backgroundColorSetter = /*#__PURE__*/css(["", "}"], _ref => {
   let {
     bg,
     backgroundColor,
     theme
   } = _ref;
-  return bg || backgroundColor ? "background-color: ".concat(th.color(bg || backgroundColor, bg || backgroundColor)({
+  return bg || backgroundColor ? `background-color: ${th.color(bg || backgroundColor, bg || backgroundColor)({
     theme
-  }), ";") : "";
+  })};` : ``;
 });
 const hexToRgba = (hex, alpha) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 
   if (result) {
-    return "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")");
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
   }
 
-  return "";
+  return ``;
 };
 
 export { active, animation, backgroundColorSetter, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hexToRgba, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "2.4.2-rc.11",
+  "version": "2.4.2-rc.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -89,7 +89,7 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-utilities": "2.4.2-rc.11",
+    "@elliemae/ds-utilities": "2.4.2-rc.14",
     "polished": "~3.6.7"
   },
   "devDependencies": {