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

package/cjs/theme.js

@@ -1,9 +1,36 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var puiTheme = require('@elliemae/pui-theme');
-
-const theme = puiTheme.getDefaultTheme();
-
-exports.theme = theme;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var theme_exports = {};
+__export(theme_exports, {
+  theme: () => theme
+});
+var React = __toESM(require("react"));
+var import_pui_theme = require("@elliemae/pui-theme");
+const theme = (0, import_pui_theme.getDefaultTheme)();
+module.exports = __toCommonJS(theme_exports);
+//# sourceMappingURL=theme.js.map

package/cjs/theme.js.map

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

package/cjs/themeProviderHOC.js

@@ -1,29 +1,42 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _jsx2 = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('react');
-var styled_component = require('styled-components');
-var theme = require('./theme.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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__default["default"](styled_component.ThemeProvider, {
-  theme: theme.theme
-}, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
-
-exports.themeProviderHOC = themeProviderHOC;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var themeProviderHOC_exports = {};
+__export(themeProviderHOC_exports, {
+  themeProviderHOC: () => themeProviderHOC
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = require("styled-components");
+var import_theme = require("./theme");
+const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
+  theme: import_theme.theme
+}, /* @__PURE__ */ import_react.default.createElement(Component, {
+  ...props
+}));
+module.exports = __toCommonJS(themeProviderHOC_exports);
+//# sourceMappingURL=themeProviderHOC.js.map

package/cjs/themeProviderHOC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themeProviderHOC.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,mDAAC,wCAAD;AAAA,EAAe,OAAO;AAAA,GACpB,mDAAC,WAAD;AAAA,KAAe;AAAA;",
+  "names": []
+}

package/cjs/utils.js

@@ -1,184 +1,294 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var polished = require('polished');
-var lodash = require('lodash');
-var theme = require('./theme.js');
-var mobileUtilities = require('./mobileUtilities.js');
-var styled_component = require('styled-components');
-
-/* eslint-disable no-shadow */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var utils_exports = {};
+__export(utils_exports, {
+  active: () => active,
+  animation: () => animation,
+  border: () => border,
+  boxShadow: () => boxShadow,
+  buttonLink: () => buttonLink,
+  clearFocus: () => clearFocus,
+  color: () => color,
+  createGlobalStyle: () => import_styled_components.createGlobalStyle,
+  css: () => import_styled_components.css,
+  disabled: () => disabled,
+  fakeActive: () => fakeActive,
+  fakeBorder: () => fakeBorder,
+  flexCenter: () => flexCenter,
+  focus: () => focus,
+  focusAfter: () => focusAfter,
+  hover: () => hover,
+  iconColor: () => iconColor,
+  keyframes: () => keyframes,
+  kfrm: () => import_styled_components.keyframes,
+  onlyFirefox: () => onlyFirefox,
+  onlySafari: () => onlySafari,
+  onlySafariAndFirefox: () => onlySafariAndFirefox,
+  rgba: () => import_polished.rgba,
+  safariAndFirefoxBold: () => safariAndFirefoxBold,
+  textStyle: () => textStyle,
+  transition: () => transition,
+  truncate: () => truncate,
+  useTheme: () => import_styled_components.useTheme,
+  withTheme: () => import_styled_components.withTheme
+});
+var React = __toESM(require("react"));
+var import_polished = require("polished");
+var import_lodash = require("lodash");
+var import_styled_components = require("styled-components");
+var import_theme = require("./theme");
+var import_mobileUtilities = require("./mobileUtilities");
 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) => import_styled_components.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 styled_component.keyframes(["", ""], lodash.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 styled_component.css(["color:", ";"], props => props.theme.colors[variant][type]);
-}
-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 import_styled_components.keyframes`${(0, import_lodash.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 import_styled_components.css`
+    color: ${(props) => props.theme.colors[variant][type]};
+  `;
+}
+function border(color2 = import_theme.theme.colors.brand[600], size = "1px", type = "solid") {
+  return `${size} ${type} ${color2}`;
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
-  return props => styled_component.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.theme.colors.brand[600];
-  return () => styled_component.css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, polished.lighten(0.3, color));
+  return (props) => import_styled_components.css`
+    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
+      ${props.animationTimingFn || animationTimingFn};
+  `;
+}
+function focus(color2 = import_theme.theme.colors.brand[600]) {
+  return () => import_styled_components.css`
+    outline: none;
+    border: 1px solid ${color2};
+    box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color2)};
+    border-radius: 2px;
+  `;
 }
-function focusAfter(color) {
-  return styled_component.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 import_styled_components.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 => styled_component.css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
+  return (props) => import_styled_components.css`
+    outline: none;
+    border: 1px solid ${props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
 }
 function hover() {
-  return props => styled_component.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) => import_styled_components.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(mobileUtilities.toMobile('2.7692rem'), ";\n        line-height: normal;\n      ");
+      case "h1":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "h2":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "h3":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "h4":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "h5":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "section-header":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "body":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "body-small":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "body-micro":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      case "list":
+        cssVar += `
+        font-size: ${(0, import_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      ");
+      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 styled_component.css(["fill:", ";"], props => props.theme.colors[variant][type]);
+function iconColor(variant = "neutral", type = 400) {
+  return import_styled_components.css`
+    fill: ${(props) => props.theme.colors[variant][type]};
+  `;
 }
 function fakeBorder() {
-  return styled_component.css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
+  return import_styled_components.css`
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
+    border-radius: 2px;
+  `;
 }
 function fakeActive() {
-  return styled_component.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
+  return import_styled_components.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 => 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");
-
-Object.defineProperty(exports, 'rgba', {
-  enumerable: true,
-  get: function () { return polished.rgba; }
-});
-Object.defineProperty(exports, 'createGlobalStyle', {
-  enumerable: true,
-  get: function () { return styled_component.createGlobalStyle; }
-});
-Object.defineProperty(exports, 'css', {
-  enumerable: true,
-  get: function () { return styled_component.css; }
-});
-Object.defineProperty(exports, 'kfrm', {
-  enumerable: true,
-  get: function () { return styled_component.keyframes; }
-});
-Object.defineProperty(exports, 'useTheme', {
-  enumerable: true,
-  get: function () { return styled_component.useTheme; }
-});
-Object.defineProperty(exports, 'withTheme', {
-  enumerable: true,
-  get: function () { return styled_component.withTheme; }
-});
-exports.active = active;
-exports.animation = animation;
-exports.border = border;
-exports.boxShadow = boxShadow;
-exports.buttonLink = buttonLink;
-exports.clearFocus = clearFocus;
-exports.color = color;
-exports.disabled = disabled;
-exports.fakeActive = fakeActive;
-exports.fakeBorder = fakeBorder;
-exports.flexCenter = flexCenter;
-exports.focus = focus;
-exports.focusAfter = focusAfter;
-exports.hover = hover;
-exports.iconColor = iconColor;
-exports.keyframes = keyframes;
-exports.onlyFirefox = onlyFirefox;
-exports.onlySafari = onlySafari;
-exports.onlySafariAndFirefox = onlySafariAndFirefox;
-exports.safariAndFirefoxBold = safariAndFirefoxBold;
-exports.textStyle = textStyle;
-exports.transition = transition;
-exports.truncate = truncate;
+  return `
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+  `;
+}
+function transition(t = "all 1s ease") {
+  return `
+    transition: ${t};
+  `;
+}
+const onlySafariAndFirefox = (styles) => import_styled_components.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};
+  }
+`;
+module.exports = __toCommonJS(utils_exports);
+//# sourceMappingURL=utils.js.map

package/cjs/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}