@elliemae/ds-system 2.0.0-alpha.10 → 2.0.0-alpha.14

package/esm/utils.js

@@ -8,44 +8,39 @@ export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from '
 
 /* eslint-disable no-shadow */
 function truncate(width) {
-  return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
+  return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
 }
 function flexCenter() {
-  return `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  `;
+  return "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  ";
 }
 function disabled() {
-  return `
-    cursor: not-allowed;
-    pointer-events: none;
-  `;
+  return "\n    cursor: not-allowed;\n    pointer-events: none;\n  ";
 }
 function keyframes(obj) {
-  return keyframes$1(["", ""], reduce(obj, (result, value, key) => `
-    ${result}
-    ${key}% {
-      ${value}
-    }
-  `, ''));
+  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, inset = false) {
-  return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
+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(variant = 'neutral', type = 400) {
+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(color = theme.colors.brand[600], size = '1px', type = 'solid') {
-  return `${size} ${type} ${color}`;
+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);
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
   return props => css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
 } // 0.0769
 
-function focus(color = theme.colors.brand[600]) {
+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));
 }
 function focusAfter(color) {
@@ -57,96 +52,64 @@ function active() {
 function hover() {
   return props => css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
 }
-function textStyle(type, weight = 'regular') {
+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: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
+    let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
 
     switch (type) {
       case 'h1':
-        cssVar += `
-        font-size: ${toMobile('2.7692rem')};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile('2.7692rem'), ";\n        line-height: normal;\n      ");
         break;
 
       case 'h2':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.title[800])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[800]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'h3':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.title[700])};
-        line-height: 1.2;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[700]), ";\n        line-height: 1.2;\n      ");
         break;
 
       case 'h4':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.title[600])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[600]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'h5':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.title[500])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'section-header':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.title[500])};
-        line-height: normal;
-        text-transform: uppercase;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n        text-transform: uppercase;\n      ");
         break;
 
       case 'body':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.value[400])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'body-small':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.value[300])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.value[300]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'body-micro':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.microText[200])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.microText[200]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'list':
-        cssVar += `
-        font-size: ${toMobile(props.theme.fontSizes.value[400])};
-        line-height: normal;
-      `;
+        cssVar += "\n        font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
         break;
 
       case 'link':
-        cssVar += `
-        line-height: ${props.theme.xl};
-        color: ${props.theme.colors.brand[600]};
-        cursor: pointer;
-      `;
+        cssVar += "\n        line-height: ".concat(props.theme.xl, ";\n        color: ").concat(props.theme.colors.brand[600], ";\n        cursor: pointer;\n      ");
         break;
     }
 
     return cssVar;
   };
 }
-function iconColor(variant = 'neutral', type = 400) {
+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 fakeBorder() {
@@ -156,34 +119,18 @@ function fakeActive() {
   return css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
 }
 function clearFocus() {
-  return `
-    border: none;
-    box-shadow: none;
-  `;
+  return "\n    border: none;\n    box-shadow: none;\n  ";
 }
 function buttonLink() {
-  return `
-    background-color: transparent;
-    border: 1px solid transparent;
-    cursor: pointer;
-  `;
-}
-function transition(t = 'all 1s ease') {
-  return `
-    transition: ${t};
-  `;
-}
-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);
+  return "\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  ";
 }
-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);
+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, 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-alpha.10",
+  "version": "2.0.0-alpha.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -23,6 +23,26 @@
       "import": "./esm/theme.js",
       "require": "./cjs/theme.js"
     },
+    "./th": {
+      "import": "./esm/th.js",
+      "require": "./cjs/th.js"
+    },
+    "./styled/utils": {
+      "import": "./esm/styled/utils.js",
+      "require": "./cjs/styled/utils.js"
+    },
+    "./styled/types": {
+      "import": "./esm/styled/types.js",
+      "require": "./cjs/styled/types.js"
+    },
+    "./styled/styleGetters": {
+      "import": "./esm/styled/styleGetters.js",
+      "require": "./cjs/styled/styleGetters.js"
+    },
+    "./styled": {
+      "import": "./esm/styled/index.js",
+      "require": "./cjs/styled/index.js"
+    },
     "./spaceUtilities": {
       "import": "./esm/spaceUtilities.js",
       "require": "./cjs/spaceUtilities.js"
@@ -69,19 +89,19 @@
     "generateSubmodules": true
   },
   "dependencies": {
+    "@elliemae/ds-utilities": "2.0.0-alpha.14",
     "polished": "~3.6.7"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.2.3",
-    "styled-components": "~5.3.1",
-    "styled-system": "~5.1.5"
+    "@elliemae/pui-theme": "~2.2.5",
+    "@testing-library/jest-dom": "~5.15.0",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.2.3",
+    "@elliemae/pui-theme": "^2.2.5",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1",
-    "styled-system": "^5.1.5"
+    "styled-components": "^5.3.3"
   }
 }

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/index.d.ts

@@ -3,5 +3,7 @@ export * from './spaceUtilities';
 export * from './mobileUtilities';
 export * from './utils';
 export * from './arithmetic';
+export * from './th';
 export * from './theme';
+export * from './styled';
 export { themeProviderHOC } from './themeProviderHOC';

package/types/styled/index.d.ts

@@ -0,0 +1,2 @@
+import { Styled } from './types';
+export declare const styled: Styled;

package/types/styled/styleGetters.d.ts

@@ -0,0 +1,4 @@
+import type { Theme, CSSObject } from './types';
+export declare const getStyleOverrides: (name: string, theme: Theme) => CSSObject | null;
+export declare const getVariantStyles: (name: string, theme: Theme) => Record<string, CSSObject>;
+export declare const variantsResolver: (props: Record<string, unknown>, styles: CSSObject, theme: Theme, name: string) => CSSObject[keyof CSSObject][];

package/types/styled/types.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { Theme as PuiTheme } from '@elliemae/pui-theme';
+import { AnyStyledComponent, CSSObject, Interpolation, InterpolationFunction, StyledComponent, StyledComponentInnerAttrs, StyledComponentInnerComponent, StyledComponentInnerOtherProps, StyledComponentPropsWithRef, ThemedStyledProps } from 'styled-components';
+export { CSSObject } from 'styled-components';
+export interface Theme extends PuiTheme {
+    components?: {
+        [componentName: string]: {
+            styleOverrides?: CSSObject;
+            variants?: {
+                props: Record<string, {
+                    toString: () => string;
+                }>;
+                style: CSSObject;
+            }[];
+        };
+    };
+}
+export declare type ThemedStyledFunctionBase<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> = <U extends object = {}>(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>, ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>) => StyledComponent<C, T, O & U, A>;
+declare type ThemedStyledComponentFactories<T extends object> = {
+    [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
+};
+export declare type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(tag: C, options?: {
+    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 Styled = StyledFunction & StyledObject;

package/types/styled/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from './types';
+export declare const isEmpty: (string: string) => boolean;
+export declare const coerceWithDefaultTheme: (themeInput: Theme) => Theme;
+export declare const propsToClassKey: (props: Record<string, {
+    toString: () => string;
+}>) => string;

package/types/th.d.ts

@@ -0,0 +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;
+};
+export declare const th: thConstructor;
+export {};

package/types/utils.d.ts

@@ -2,26 +2,26 @@ 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;
 export declare function boxShadow(top: string, left: string, blur: string, color: string, inset?: boolean): string;
-export declare function color(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare function color(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare function border(color?: string, size?: string, type?: string): string;
 export declare function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function focus(color?: string): () => import("styled-components").FlattenSimpleInterpolation;
-export declare function focusAfter(color: string): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare function focusAfter(color: string): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare function active(): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function hover(): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function textStyle(type: string, weight?: string): (props: any) => string;
-export declare function iconColor(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare function fakeBorder(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare function fakeActive(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare function iconColor(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare function fakeBorder(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare function fakeActive(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 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;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}