@elliemae/ds-system 2.0.0-rc.11 → 2.0.0-rc.15

package/cjs/index.js

@@ -47,7 +47,7 @@ exports.iconColor = utils.iconColor;
 exports.keyframes = utils.keyframes;
 exports.onlyFirefox = utils.onlyFirefox;
 exports.onlySafari = utils.onlySafari;
-exports.onlySafariAndFiredox = utils.onlySafariAndFiredox;
+exports.onlySafariAndFirefox = utils.onlySafariAndFirefox;
 exports.safariAndFirefoxBold = utils.safariAndFirefoxBold;
 exports.textStyle = utils.textStyle;
 exports.transition = utils.transition;

package/cjs/styled/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/styled/index.js

@@ -93,11 +93,21 @@ const styledFunction = function (tag) {
       }));
     }
 
-    const Component = /*#__PURE__*/styled_component__default["default"](tag).attrs({
-      className: "".concat(componentName, "-").concat(componentSlot)
-    }).withConfig({
-      componentId: "sc-rjg4in-0"
-    })(transformedStyleArg, ...expressionsWithDefaultTheme);
+    let Component = /*#__PURE__*/styled_component__default["default"](tag);
+    const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName).concat(componentSlot) : null;
+
+    if (displayName !== null) {
+      Component = Component.attrs({
+        className: "".concat(componentName).concat(componentSlot)
+      });
+    }
+
+    Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
+
+    if (displayName !== null) {
+      Component.displayName = displayName;
+    }
+
     return Component;
   };
 

package/cjs/utils.js

@@ -130,18 +130,10 @@ function transition() {
   let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
   return "\n    transition: ".concat(t, ";\n  ");
 }
-function onlySafariAndFiredox(styles) {
-  return styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
-}
-function onlySafari(styles) {
-  return styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}"], styles);
-}
-function onlyFirefox(styles) {
-  return styled_component.css(["@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles);
-}
-function safariAndFirefoxBold(color) {
-  return styled_component.css(["@media not all and (min-resolution:0.001dpcm){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}@media screen and (min--moz-device-pixel-ratio:0){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], color, color);
-}
+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,
@@ -185,7 +177,7 @@ exports.iconColor = iconColor;
 exports.keyframes = keyframes;
 exports.onlyFirefox = onlyFirefox;
 exports.onlySafari = onlySafari;
-exports.onlySafariAndFiredox = onlySafariAndFiredox;
+exports.onlySafariAndFirefox = onlySafariAndFirefox;
 exports.safariAndFirefoxBold = safariAndFirefoxBold;
 exports.textStyle = textStyle;
 exports.transition = transition;

package/esm/index.js

@@ -1,7 +1,7 @@
 export { GlobalStyles } from './globalStyles.js';
 export { fixSpace, fixSpaceGutter, mapGap, mapGrid, mapGutter, mapSpace, mapTemplateGrid, numbersToFr } from './spaceUtilities.js';
 export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile } from './mobileUtilities.js';
-export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFiredox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
+export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
 export { getNumberAndUnit, op } from './arithmetic.js';
 export { th } from './th.js';
 export { theme } from './theme.js';

package/esm/styled/index.d.js

@@ -0,0 +1 @@
+

package/esm/styled/index.js

@@ -84,11 +84,21 @@ const styledFunction = function (tag) {
       }));
     }
 
-    const Component = /*#__PURE__*/styled_component(tag).attrs({
-      className: "".concat(componentName, "-").concat(componentSlot)
-    }).withConfig({
-      componentId: "sc-rjg4in-0"
-    })(transformedStyleArg, ...expressionsWithDefaultTheme);
+    let Component = /*#__PURE__*/styled_component(tag);
+    const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName).concat(componentSlot) : null;
+
+    if (displayName !== null) {
+      Component = Component.attrs({
+        className: "".concat(componentName).concat(componentSlot)
+      });
+    }
+
+    Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
+
+    if (displayName !== null) {
+      Component.displayName = displayName;
+    }
+
     return Component;
   };
 

package/esm/utils.js

@@ -128,17 +128,9 @@ function transition() {
   let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
   return "\n    transition: ".concat(t, ";\n  ");
 }
-function onlySafariAndFiredox(styles) {
-  return css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
-}
-function onlySafari(styles) {
-  return css(["@media not all and (min-resolution:0.001dpcm){", "}"], styles);
-}
-function onlyFirefox(styles) {
-  return css(["@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles);
-}
-function safariAndFirefoxBold(color) {
-  return css(["@media not all and (min-resolution:0.001dpcm){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}@media screen and (min--moz-device-pixel-ratio:0){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], color, color);
-}
+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, onlySafariAndFiredox, safariAndFirefoxBold, textStyle, transition, truncate };
+export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate };

package/package.json

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

package/types/arithmetic.d.ts

@@ -1,5 +1,5 @@
-export declare function getNumberAndUnit(numberStrWithUnit: string): {
+export declare function getNumberAndUnit(numberStrWithUnit: string | number): {
     number: string;
     unit: string;
 };
-export declare function op(operator: string, n1: string, n2: string): string;
+export declare function op(operator: string, n1: string, n2: string | number): string;

package/types/utils.d.ts

@@ -2,7 +2,7 @@ import { rgba } from 'polished';
 import { Keyframes } from 'styled-components';
 import { 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 truncate(width?: string): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function flexCenter(): string;
 export declare function disabled(): string;
 export declare function keyframes(obj: Record<string, unknown>): Keyframes;
@@ -21,7 +21,7 @@ export declare function fakeActive(): import("styled-components").FlattenInterpo
 export declare function clearFocus(): string;
 export declare function buttonLink(): string;
 export declare function transition(t?: string): string;
-export declare function onlySafariAndFiredox(styles: string): string;
-export declare function onlySafari(styles: string): string;
-export declare function onlyFirefox(styles: string): string;
-export declare function safariAndFirefoxBold(color: string): string;
+export declare const onlySafariAndFirefox: (styles: string) => string;
+export declare const onlySafari: (styles: string) => string;
+export declare const onlyFirefox: (styles: string) => string;
+export declare const safariAndFirefoxBold: (color: string) => string;