@elliemae/ds-system 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/spaceUtilities.js

@@ -1,65 +1,57 @@
-import * as React from "react";
-import { get } from "lodash";
-import { theme } from "./theme";
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import { get } from 'lodash';
+import { theme } from './theme.js';
+
 function mapGap(gutter) {
-  if (!gutter)
-    return "0rem";
-  if (String(gutter).includes("rem") || String(gutter).includes("px"))
-    return gutter;
-  return `${theme.space[gutter]}`;
+  if (!gutter) return '0rem';
+  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
+  return "".concat(theme.space[gutter]);
 }
 function mapGutter(gutter) {
-  if (!gutter)
-    return "0rem";
-  return `${theme.space[gutter]} * 2`;
+  if (!gutter) return '0rem';
+  return "".concat(theme.space[gutter], " * 2");
 }
 function mapSpace(width) {
-  if (typeof width === "string")
-    return get(theme, width) ? `${get(theme, width)}` : width;
-  return `${width * 100}%`;
+  if (typeof width === 'string') return get(theme, width) ? "".concat(get(theme, width)) : width;
+  return "".concat(width * 100, "%");
 }
 function fixSpaceGutter(width, gutter) {
-  if (!width)
-    return "";
-  if (Array.isArray(width))
-    return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
-  return `calc(${mapSpace(width)} - (${mapGutter(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), "))");
 }
 function fixSpace(width) {
-  if (!width)
-    return "";
-  if (Array.isArray(width))
-    return width.map((w) => mapSpace(w));
+  if (!width) return '';
+  if (Array.isArray(width)) return width.map(w => mapSpace(w));
   return mapSpace(width);
 }
+/**
+ * Grid
+ *
+ * @param grid
+ */
+
 function numbersToFr(grid) {
-  const den = grid.map((f) => f < 1 ? Math.floor(1 / f) : f);
-  return den.map((d) => `${d}fr`);
+  const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
+  return den.map(d => "".concat(d, "fr"));
 }
 function mapGrid(width) {
-  if (get(theme, width))
-    return `${get(theme, width)}`;
-  if (typeof width === "string")
-    return width;
+  if (get(theme, width)) return "".concat(get(theme, width));
+  if (typeof width === 'string') return width;
   const den = width < 1 ? Math.floor(1 / width) : width;
-  return `${den}fr`;
+  return "".concat(den, "fr");
 }
 function mapTemplateGrid(grid) {
   if (Array.isArray(grid)) {
-    if (grid.some((w) => typeof w === "string"))
-      return grid.map((w) => mapGrid(w));
+    if (grid.some(w => typeof w === 'string')) return grid.map(w => mapGrid(w));
     return numbersToFr(grid);
   }
+
   return mapGrid(grid);
 }
-export {
-  fixSpace,
-  fixSpaceGutter,
-  mapGap,
-  mapGrid,
-  mapGutter,
-  mapSpace,
-  mapTemplateGrid,
-  numbersToFr
-};
-//# sourceMappingURL=spaceUtilities.js.map
+
+export { fixSpace, fixSpaceGutter, mapGap, mapGrid, mapGutter, mapSpace, mapTemplateGrid, numbersToFr };

package/esm/styled/index.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

package/esm/styled/index.js

@@ -1,60 +1,116 @@
-import * as React from "react";
-import styled_component from "styled-components";
-import { getStyleOverrides, getVariantStyles, variantsResolver } from "./styleGetters";
-import { coerceWithDefaultTheme } from "./utils";
-const styledFunction = (tag, options = { name: null, slot: null }) => {
-  const { name: componentName = null, slot: componentSlot = null } = options;
-  const func = (styleArg, ...expressions) => {
-    const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => typeof stylesArg === "function" ? (props) => stylesArg({
-      ...props,
+import 'core-js/modules/esnext.async-iterator.filter.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 _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';
+import styled_component from 'styled-components';
+import { getStyleOverrides, variantsResolver, getVariantStyles } from './styleGetters.js';
+import { coerceWithDefaultTheme } from './utils.js';
+
+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 styledFunction = function (tag) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    name: null,
+    slot: null
+  };
+  const {
+    name: componentName,
+    slot: componentSlot,
+    displayName: componentDisplayName = null
+  } = options;
+
+  const func = function (styleArg) {
+    for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      expressions[_key - 1] = arguments[_key];
+    }
+
+    /*
+     * These are the internal expression written in dimsum
+     * We just coerce with the default theme in case users
+     * forget to add the ThemeProvider
+     */
+    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
       theme: coerceWithDefaultTheme(props.theme)
-    }) : stylesArg) : [];
+    })) : stylesArg) : [];
     let transformedStyleArg = styleArg;
+    /*
+     * Here we get the style overrides from the user
+     */
+
     if (componentName && componentSlot) {
-      expressionsWithDefaultTheme.push((props) => {
+      expressionsWithDefaultTheme.push(props => {
         const theme = coerceWithDefaultTheme(props.theme);
         const styleOverrides = getStyleOverrides(componentName, theme);
+
         if (styleOverrides) {
           return [styleOverrides[componentSlot]];
         }
+
         return null;
       });
     }
-    if (componentName && componentSlot === "root") {
-      expressionsWithDefaultTheme.push((props) => {
+    /*
+     * Here we get the variant overrides from the user (only for the root)
+     */
+
+
+    if (componentName && componentSlot === 'root') {
+      expressionsWithDefaultTheme.push(props => {
         const theme = coerceWithDefaultTheme(props.theme);
         return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
       });
     }
+
     const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
+
     if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-      const placeholders = new Array(numOfCustomFnsApplied).fill("");
+      // Here we are adding placeholders for all the new functions that we are gonna call
+      const placeholders = new Array(numOfCustomFnsApplied).fill('');
       transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
         raw: [...styleArg.raw, ...placeholders]
       });
-    } else if (typeof styleArg === "function") {
-      transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });
+    } else if (typeof styleArg === 'function') {
+      // Here we just coerce with the default theme
+      transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
+        theme: coerceWithDefaultTheme(props.theme)
+      }));
     }
-    let Component = styled_component(tag);
-    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
+
+    let Component = /*#__PURE__*/styled_component(tag);
+    const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName, "-").concat(componentSlot) : componentDisplayName;
+
     if (displayName !== null) {
-      Component = Component.attrs({ className: `${componentName}${componentSlot}` });
+      Component = Component.attrs({
+        className: "".concat(componentName, "-").concat(componentSlot)
+      });
     }
+
     Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
+
     if (displayName !== null) {
       Component.displayName = displayName;
     }
+
     return Component;
   };
+
   return func;
 };
+
 const styledObject = Object.keys(styled_component).reduce((obj, key) => {
   const castedKey = key;
   obj[castedKey] = styledFunction(castedKey);
   return obj;
 }, {});
 const styled = Object.assign(styledFunction, styledObject);
-export {
-  styled
-};
-//# sourceMappingURL=index.js.map
+
+export { styled };

package/esm/styled/styleGetters.js

@@ -1,8 +1,19 @@
-import * as React from "react";
-import { propsToClassKey } from "./utils";
-const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
+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 '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 getVariantStyles = (name, theme) => {
-  const variants = theme.components?.[name]?.variants || [];
+  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) || [];
   return variants.reduce((styles, definition) => {
     const key = propsToClassKey(definition.props);
     styles[key] = definition.style;
@@ -10,18 +21,18 @@ const getVariantStyles = (name, theme) => {
   }, {});
 };
 const variantsResolver = (props, styles, theme, name) => {
-  const themeVariants = theme?.components?.[name]?.variants || [];
+  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) || [];
   return themeVariants.reduce((variantsStyles, themeVariant) => {
-    const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);
+    const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
+
     if (isMatch) {
       variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
     }
+
     return variantsStyles;
   }, []);
 };
-export {
-  getStyleOverrides,
-  getVariantStyles,
-  variantsResolver
-};
-//# sourceMappingURL=styleGetters.js.map
+
+export { getStyleOverrides, getVariantStyles, variantsResolver };

package/esm/styled/types.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { CSSObject as CSSObject2 } from "styled-components";
-export {
-  CSSObject2 as CSSObject
-};
-//# sourceMappingURL=types.js.map
+export { CSSObject } from 'styled-components';

package/esm/styled/utils.js

@@ -1,18 +1,18 @@
-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") {
+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') {
     return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));
   }
-  return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
-}, "");
-export {
-  coerceWithDefaultTheme,
-  isEmpty,
-  propsToClassKey
-};
-//# sourceMappingURL=utils.js.map
+
+  return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : capitalize(key)).concat(capitalize(props[key].toString()));
+}, '');
+
+export { coerceWithDefaultTheme, isEmpty, propsToClassKey };

package/esm/th.js

@@ -1,23 +1,28 @@
-import * as React from "react";
-const th = (property) => (value, dfault) => ({ theme }) => {
-  const parts = value.split("-");
+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 => (value, dfault) => _ref => {
+  var _result;
+
+  let {
+    theme
+  } = _ref;
+  const parts = value.split('-');
   let result = theme[property];
-  parts.forEach((part) => {
-    if (result)
-      result = result[part];
+  parts.forEach(part => {
+    if (result) result = result[part];
   });
-  return result ?? dfault;
+  return (_result = result) !== null && _result !== void 0 ? _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
-};
-//# sourceMappingURL=th.js.map
+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 };

package/esm/theme.js

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

package/esm/themeProviderHOC.js

@@ -1,13 +1,20 @@
-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
+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 };