@elliemae/ds-system 2.2.0-next.6 → 2.3.0-alpha.1

package/esm/styled/utils.js

@@ -1,18 +1,18 @@
-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';
-import { capitalize } from '@elliemae/ds-utilities';
-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 propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
-  if (key === 'color') {
+import * as React from "react";
+import { capitalize } from "@elliemae/ds-utilities";
+import { theme as defaultTheme } from "../theme";
+const systemTheme = defaultTheme;
+const isEmpty = (string) => string.length === 0;
+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()));
-}, '');
-
-export { coerceWithDefaultTheme, isEmpty, propsToClassKey };
+  return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+}, "");
+export {
+  coerceWithDefaultTheme,
+  isEmpty,
+  propsToClassKey
+};
+//# sourceMappingURL=utils.js.map

package/esm/styled/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { capitalize } from '@elliemae/ds-utilities';\nimport type { Theme } from './types';\nimport { theme as defaultTheme } from '../theme';\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme): Theme => themeInput ?? systemTheme;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAA6B,cAAc;AAE3E,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,OACT,OACA,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,WAAW,QAAQ,OAAO,aAAa,OAAO,MAAM,QAAQ,WAAW,OAAO,MAAM;AAAA;AAE7F,SAAO,GAAG,WAAW,QAAQ,OAAO,aAAa,MAAM,WAAW,OAAO,WAAW,MAAM,KAAK;AAAA,GAC9F;",
+  "names": []
+}

package/esm/th.js

@@ -1,31 +1,23 @@
-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';
-
-const th = property => function (value) {
-  let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return _ref => {
-    var _result;
-
-    let {
-      theme
-    } = _ref;
-    const parts = value.split('-');
-    let result = theme[property];
-    parts.forEach(part => {
-      if (result) result = result[part];
-    });
-    return (_result = result) !== null && _result !== void 0 ? _result : dfault;
-  };
+import * as React from "react";
+const th = (property) => (value, dfault) => ({ theme }) => {
+  const parts = value.split("-");
+  let result = theme[property];
+  parts.forEach((part) => {
+    if (result)
+      result = result[part];
+  });
+  return result ?? dfault;
 };
-th.space = th('space');
-th.fontSize = th('fontSizes');
-th.fontWeight = th('fontWeights');
-th.lineHeight = th('lineHeights');
-th.letterSpacing = th('letterSpacings');
-th.font = th('fonts');
-th.color = th('colors');
-th.breakpoint = th('breakpoints');
-th.media = th('media');
-
-export { th };
+th.space = th("space");
+th.fontSize = th("fontSizes");
+th.fontWeight = th("fontWeights");
+th.lineHeight = th("lineHeights");
+th.letterSpacing = th("letterSpacings");
+th.font = th("fonts");
+th.color = th("colors");
+th.breakpoint = th("breakpoints");
+th.media = th("media");
+export {
+  th
+};
+//# sourceMappingURL=th.js.map

package/esm/th.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/th.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type thGetter = (value: string, dfault: string) => (theme: any) => string;\ntype thConstructor = ((property: string) => thGetter) & {\n  space: thGetter;\n  fontSize: thGetter;\n  fontWeight: thGetter;\n  lineHeight: thGetter;\n  letterSpacing: thGetter;\n  font: thGetter;\n  color: thGetter;\n  breakpoint: thGetter;\n  media: thGetter;\n};\n\nexport const th: thConstructor =\n  (property) =>\n  (value, dfault) =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part];\n    });\n    return result ?? dfault;\n  };\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\n"],
+  "mappings": "AAAA;ACaO,MAAM,KACX,CAAC,aACD,CAAC,OAAO,WACR,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM;AAC1B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA;AAE9B,SAAO,UAAU;AAAA;AAGrB,GAAG,QAAQ,GAAG;AACd,GAAG,WAAW,GAAG;AACjB,GAAG,aAAa,GAAG;AACnB,GAAG,aAAa,GAAG;AACnB,GAAG,gBAAgB,GAAG;AACtB,GAAG,OAAO,GAAG;AACb,GAAG,QAAQ,GAAG;AACd,GAAG,aAAa,GAAG;AACnB,GAAG,QAAQ,GAAG;",
+  "names": []
+}

package/esm/theme.js

@@ -1,5 +1,7 @@
-import { getDefaultTheme } from '@elliemae/pui-theme';
-
+import * as React from "react";
+import { getDefaultTheme } from "@elliemae/pui-theme";
 const theme = getDefaultTheme();
-
-export { theme };
+export {
+  theme
+};
+//# sourceMappingURL=theme.js.map

package/esm/theme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/theme.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getDefaultTheme } from '@elliemae/pui-theme';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const theme = getDefaultTheme() as Theme;\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,QAAQ;",
+  "names": []
+}

package/esm/themeProviderHOC.js

@@ -1,20 +1,13 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx2 from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import { ThemeProvider } from 'styled-components';
-import { theme } from './theme.js';
-import { jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const themeProviderHOC = Component => props => /*#__PURE__*/_jsx2(ThemeProvider, {
-  theme: theme
-}, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
-
-export { themeProviderHOC };
+import * as React from "react";
+import React2 from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "./theme";
+const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ React2.createElement(ThemeProvider, {
+  theme
+}, /* @__PURE__ */ React2.createElement(Component, {
+  ...props
+}));
+export {
+  themeProviderHOC
+};
+//# sourceMappingURL=themeProviderHOC.js.map

package/esm/themeProviderHOC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/themeProviderHOC.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => (\n  props: Record<string, unknown>,\n): JSX.Element => (\n  <ThemeProvider theme={theme}>\n    <Component {...props} />\n  </ThemeProvider>\n);\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,qCAAC,eAAD;AAAA,EAAe;AAAA,GACb,qCAAC,WAAD;AAAA,KAAe;AAAA;",
+  "names": []
+}

package/esm/utils.js

@@ -1,136 +1,265 @@
-import { lighten } from 'polished';
-export { rgba } from 'polished';
-import { reduce } from 'lodash';
-import { theme } from './theme.js';
-import { toMobile } from './mobileUtilities.js';
-import { css, keyframes as keyframes$1 } from 'styled-components';
-export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from 'styled-components';
-
-/* eslint-disable no-shadow */
+import * as React from "react";
+import { lighten, rgba } from "polished";
+import { reduce } from "lodash";
+import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from "styled-components";
+import { theme } from "./theme";
+import { toMobile } from "./mobileUtilities";
 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`
+    ${!!width || props.width ? `width: ${props.width || width};` : ""}
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
 }
 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  "), ''));
-} // 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, ";");
-}
-function color() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
-  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
-  return css(["color:", ";"], props => props.theme.colors[variant][type]);
-}
-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 kfrm`${reduce(obj, (result, value, key) => `
+    ${result}
+    ${key}% {
+      ${value}
+    }
+  `, "")}
+  `;
+}
+function boxShadow(top, left, blur, color2, inset = false) {
+  return `box-shadow: ${inset ? "inset" : ""} ${top} ${left} ${blur} ${color2};`;
+}
+function color(variant = "neutral", type = 400) {
+  return css`
+    color: ${(props) => props.theme.colors[variant][type]};
+  `;
+}
+function border(color2 = theme.colors.brand[600], size = "1px", type = "solid") {
+  return `${size} ${type} ${color2}`;
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
-  return props => css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
-} // 0.0769
-
-function focus() {
-  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.colors.brand[600];
-  return () => css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, lighten(0.3, color));
+  return (props) => css`
+    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
+      ${props.animationTimingFn || animationTimingFn};
+  `;
+}
+function focus(color2 = theme.colors.brand[600]) {
+  return () => css`
+    outline: none;
+    border: 1px solid ${color2};
+    box-shadow: inset 0 0 0 1px ${lighten(0.3, color2)};
+    border-radius: 2px;
+  `;
 }
-function focusAfter(color) {
-  return css(["outline:none;position:relative;&:after{content:'';z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;", "}"], focus(color));
+function focusAfter(color2) {
+  return css`
+    outline: none;
+    position: relative;
+    &:after {
+      content: '';
+      z-index: 10;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      ${focus(color2)}
+    }
+  `;
 }
 function active() {
-  return props => css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
+  return (props) => css`
+    outline: none;
+    border: 1px solid ${props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
 }
 function hover() {
-  return props => css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
-}
-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
-
+  return (props) => css`
+    outline: 1px solid ${props.theme.colors.brand[600]};
+    outline-offset: -1px;
+  `;
+}
+function textStyle(type, weight = "regular") {
+  return (props) => {
+    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;
     switch (type) {
-      case 'h1':
-        cssVar += "\n        font-size: ".concat(toMobile('2.7692rem'), ";\n        line-height: normal;\n      ");
+      case "h1":
+        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      ");
+      case "h2":
+        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      ");
+      case "h3":
+        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      ");
+      case "h4":
+        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      ");
+      case "h5":
+        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      ");
+      case "section-header":
+        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      ");
+      case "body":
+        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      ");
+      case "body-small":
+        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      ");
+      case "body-micro":
+        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      ");
+      case "list":
+        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      ");
+      case "link":
+        cssVar += `
+        line-height: ${props.theme.xl};
+        color: ${props.theme.colors.brand[600]};
+        cursor: pointer;
+      `;
         break;
     }
-
     return cssVar;
   };
 }
-function iconColor() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
-  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
-  return css(["fill:", ";"], props => props.theme.colors[variant][type]);
+function iconColor(variant = "neutral", type = 400) {
+  return css`
+    fill: ${(props) => props.theme.colors[variant][type]};
+  `;
 }
 function fakeBorder() {
-  return css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
+  return css`
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
+    border-radius: 2px;
+  `;
 }
 function fakeActive() {
-  return css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
+  return css`
+    outline: none;
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
 }
 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  ";
-}
-function transition() {
-  let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
-  return "\n    transition: ".concat(t, ";\n  ");
-}
-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");
-
-export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate };
+  return `
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+  `;
+}
+function transition(t = "all 1s ease") {
+  return `
+    transition: ${t};
+  `;
+}
+const onlySafariAndFirefox = (styles) => css`
+  @media not all and (min-resolution: 0.001dpcm) {
+    ${styles}
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    ${styles}
+  }
+`;
+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 = (color2) => `
+  @media not all and (min-resolution: 0.001dpcm) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color2};
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color2};
+  }
+`;
+export {
+  active,
+  animation,
+  border,
+  boxShadow,
+  buttonLink,
+  clearFocus,
+  color,
+  createGlobalStyle,
+  css,
+  disabled,
+  fakeActive,
+  fakeBorder,
+  flexCenter,
+  focus,
+  focusAfter,
+  hover,
+  iconColor,
+  keyframes,
+  kfrm,
+  onlyFirefox,
+  onlySafari,
+  onlySafariAndFirefox,
+  rgba,
+  safariAndFirefoxBold,
+  textStyle,
+  transition,
+  truncate,
+  useTheme,
+  withTheme
+};
+//# sourceMappingURL=utils.js.map

package/esm/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\n\nexport { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };\n\nexport function truncate(width?: string) {\n  return (props) => css`\n    ${!!width || props.width ? `width: ${props.width || width};` : ''}\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n}\n\nexport function flexCenter(): string {\n  return `\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  `;\n}\n\nexport function disabled(): string {\n  return `\n    cursor: not-allowed;\n    pointer-events: none;\n  `;\n}\n\nexport function keyframes(obj: Record<string, unknown>): Keyframes {\n  return kfrm`${reduce(\n    obj,\n    (result, value, key) => `\n    ${result}\n    ${key}% {\n      ${value}\n    }\n  `,\n    '',\n  )}\n  `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n  return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\nexport function color(variant = 'neutral', type = 400) {\n  return css`\n    color: ${(props) => props.theme.colors[variant][type]};\n  `;\n}\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n  return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n  return (props) => css`\n    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n      ${props.animationTimingFn || animationTimingFn};\n  `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n  return () => css`\n    outline: none;\n    border: 1px solid ${color};\n    box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n    border-radius: 2px;\n  `;\n}\n\nexport function focusAfter(color: string) {\n  return css`\n    outline: none;\n    position: relative;\n    &:after {\n      content: '';\n      z-index: 10;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      ${focus(color)}\n    }\n  `;\n}\n\nexport function active() {\n  return (props) => css`\n    outline: none;\n    border: 1px solid ${props.theme.colors.brand[700]};\n    border-radius: 2px;\n  `;\n}\n\nexport function hover() {\n  return (props) => css`\n    outline: 1px solid ${props.theme.colors.brand[600]};\n    outline-offset: -1px;\n  `;\n}\n\nexport function textStyle(type: string, weight = 'regular') {\n  // eslint-disable-next-line complexity\n  return (props): string => {\n    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n    // eslint-disable-next-line default-case\n    switch (type) {\n      case 'h1':\n        cssVar += `\n        font-size: ${toMobile('2.7692rem')};\n        line-height: normal;\n      `;\n        break;\n      case 'h2':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[800])};\n        line-height: normal;\n      `;\n        break;\n      case 'h3':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[700])};\n        line-height: 1.2;\n      `;\n        break;\n      case 'h4':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[600])};\n        line-height: normal;\n      `;\n        break;\n      case 'h5':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[500])};\n        line-height: normal;\n      `;\n        break;\n      case 'section-header':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[500])};\n        line-height: normal;\n        text-transform: uppercase;\n      `;\n        break;\n      case 'body':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[400])};\n        line-height: normal;\n      `;\n        break;\n      case 'body-small':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[300])};\n        line-height: normal;\n      `;\n        break;\n      case 'body-micro':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n        line-height: normal;\n      `;\n        break;\n      case 'list':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[400])};\n        line-height: normal;\n      `;\n        break;\n      case 'link':\n        cssVar += `\n        line-height: ${props.theme.xl};\n        color: ${props.theme.colors.brand[600]};\n        cursor: pointer;\n      `;\n        break;\n    }\n    return cssVar;\n  };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n  return css`\n    fill: ${(props) => props.theme.colors[variant][type]};\n  `;\n}\n\nexport function fakeBorder() {\n  return css`\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n    border-radius: 2px;\n  `;\n}\n\nexport function fakeActive() {\n  return css`\n    outline: none;\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n    border-radius: 2px;\n  `;\n}\n\nexport function clearFocus(): string {\n  return `\n    border: none;\n    box-shadow: none;\n  `;\n}\n\nexport function buttonLink(): string {\n  return `\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n  return `\n    transition: ${t};\n  `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): string => css`\n  @media not all and (min-resolution: 0.001dpcm) {\n    ${styles}\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    ${styles}\n  }\n`;\n\nexport const onlySafari = (styles: string): string => `\n    @media not all and (min-resolution: 0.001dpcm) {\n      ${styles}\n    }\n  `;\n\nexport const onlyFirefox = (styles: string): string => `\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ${styles}\n    }\n  `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\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 ${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 ${color};\n  }\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

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

package/types/styled/types.d.ts

@@ -23,6 +23,5 @@ export declare type StyledFunction = <C extends AnyStyledComponent | keyof JSX.I
     name: string | null;
     slot: string | null;
 }) => ThemedStyledFunctionBase<C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C, Theme, C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {}, C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never>;
-export interface StyledObject extends ThemedStyledComponentFactories<Theme> {
-}
+export declare type StyledObject = ThemedStyledComponentFactories<Theme>;
 export declare type Styled = StyledFunction & StyledObject;

package/types/th.d.ts

@@ -1,14 +1,14 @@
-declare type ThGetter = (value: string, dfault: string) => (theme: any) => string;
-declare type ThConstructor = ((property: string) => ThGetter) & {
-    space: ThGetter;
-    fontSize: ThGetter;
-    fontWeight: ThGetter;
-    lineHeight: ThGetter;
-    letterSpacing: ThGetter;
-    font: ThGetter;
-    color: ThGetter;
-    breakpoint: ThGetter;
-    media: ThGetter;
+declare type thGetter = (value: string, dfault: string) => (theme: any) => string;
+declare type thConstructor = ((property: string) => thGetter) & {
+    space: thGetter;
+    fontSize: thGetter;
+    fontWeight: thGetter;
+    lineHeight: thGetter;
+    letterSpacing: thGetter;
+    font: thGetter;
+    color: thGetter;
+    breakpoint: thGetter;
+    media: thGetter;
 };
-export declare const th: ThConstructor;
+export declare const th: thConstructor;
 export {};

package/types/utils.d.ts

@@ -1,6 +1,5 @@
 import { rgba } from 'polished';
-import { Keyframes } from 'styled-components';
-import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';
+import { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';
 export { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };
 export declare function truncate(width?: string): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function flexCenter(): string;