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

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.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('core-js/modules/esnext.async-iterator.filter.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 styled_component = require('styled-components');
 var styleGetters = require('./styleGetters.js');
 var utils = require('./utils.js');
@@ -19,16 +20,13 @@ var utils = require('./utils.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var styled_component__default = /*#__PURE__*/_interopDefaultLegacy(styled_component);
 
-const _excluded = ["theme"],
-      _excluded2 = ["theme"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const styled = function (tag) {
+
+const styledFunction = function (tag) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     name: null,
     slot: null
@@ -37,7 +35,8 @@ const styled = function (tag) {
     name: componentName,
     slot: componentSlot
   } = options;
-  return function (styleArg) {
+
+  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];
     }
@@ -47,16 +46,9 @@ const styled = function (tag) {
      * We just coerce with the default theme in case users
      * forget to add the ThemeProvider
      */
-    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? _ref => {
-      let {
-        theme: themeInput
-      } = _ref,
-          other = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-      return stylesArg(_objectSpread({
-        theme: utils.coerceWithDefaultTheme(themeInput)
-      }, other));
-    } : stylesArg) : [];
+    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
+      theme: utils.coerceWithDefaultTheme(props.theme)
+    })) : stylesArg) : [];
     let transformedStyleArg = styleArg;
     /*
      * Here we get the style overrides from the user
@@ -91,33 +83,42 @@ const styled = function (tag) {
     if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
       // Here we are adding placeholders for all the new functions that we are gonna call
       const placeholders = new Array(numOfCustomFnsApplied).fill('');
-      transformedStyleArg = [...styleArg, ...placeholders];
-      transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+      transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
+        raw: [...styleArg.raw, ...placeholders]
+      });
     } else if (typeof styleArg === 'function') {
       // Here we just coerce with the default theme
-      transformedStyleArg = _ref2 => {
-        let {
-          theme: themeInput
-        } = _ref2,
-            other = _objectWithoutProperties__default["default"](_ref2, _excluded2);
-
-        return styleArg(_objectSpread({
-          theme: utils.coerceWithDefaultTheme(themeInput)
-        }, other));
-      };
+      transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
+        theme: utils.coerceWithDefaultTheme(props.theme)
+      }));
+    }
+
+    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;
     }
 
-    const Component = /*#__PURE__*/styled_component__default["default"](tag).attrs({
-      className: "".concat(componentName, "-").concat(componentSlot)
-    }).withConfig({
-      componentId: "sc-rjg4in-0"
-    })(transformedStyleArg, ...expressionsWithDefaultTheme);
     return Component;
   };
-}; // Here we setup the necessary keys so we can continue using styled.button, styled.span, etc.
 
-Object.keys(styled_component__default["default"]).forEach(key => {
-  styled[key] = styled(key);
-});
+  return func;
+};
+
+const styledObject = Object.keys(styled_component__default["default"]).reduce((obj, key) => {
+  const castedKey = key;
+  obj[castedKey] = styledFunction(castedKey);
+  return obj;
+}, {});
+const styled = Object.assign(styledFunction, styledObject);
 
 exports.styled = styled;

package/cjs/styled/types.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled_component = require('styled-components');
+
+
+
+Object.defineProperty(exports, 'CSSObject', {
+  enumerable: true,
+  get: function () { return styled_component.CSSObject; }
+});

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.js

@@ -1,24 +1,23 @@
 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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 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.for-each.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.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';
 
-const _excluded = ["theme"],
-      _excluded2 = ["theme"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const styled = function (tag) {
+
+const styledFunction = function (tag) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     name: null,
     slot: null
@@ -27,7 +26,8 @@ const styled = function (tag) {
     name: componentName,
     slot: componentSlot
   } = options;
-  return function (styleArg) {
+
+  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];
     }
@@ -37,16 +37,9 @@ const styled = function (tag) {
      * We just coerce with the default theme in case users
      * forget to add the ThemeProvider
      */
-    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? _ref => {
-      let {
-        theme: themeInput
-      } = _ref,
-          other = _objectWithoutProperties(_ref, _excluded);
-
-      return stylesArg(_objectSpread({
-        theme: coerceWithDefaultTheme(themeInput)
-      }, other));
-    } : stylesArg) : [];
+    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
+      theme: coerceWithDefaultTheme(props.theme)
+    })) : stylesArg) : [];
     let transformedStyleArg = styleArg;
     /*
      * Here we get the style overrides from the user
@@ -81,33 +74,42 @@ const styled = function (tag) {
     if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
       // Here we are adding placeholders for all the new functions that we are gonna call
       const placeholders = new Array(numOfCustomFnsApplied).fill('');
-      transformedStyleArg = [...styleArg, ...placeholders];
-      transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+      transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
+        raw: [...styleArg.raw, ...placeholders]
+      });
     } else if (typeof styleArg === 'function') {
       // Here we just coerce with the default theme
-      transformedStyleArg = _ref2 => {
-        let {
-          theme: themeInput
-        } = _ref2,
-            other = _objectWithoutProperties(_ref2, _excluded2);
-
-        return styleArg(_objectSpread({
-          theme: coerceWithDefaultTheme(themeInput)
-        }, other));
-      };
+      transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
+        theme: coerceWithDefaultTheme(props.theme)
+      }));
+    }
+
+    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;
     }
 
-    const Component = /*#__PURE__*/styled_component(tag).attrs({
-      className: "".concat(componentName, "-").concat(componentSlot)
-    }).withConfig({
-      componentId: "sc-rjg4in-0"
-    })(transformedStyleArg, ...expressionsWithDefaultTheme);
     return Component;
   };
-}; // Here we setup the necessary keys so we can continue using styled.button, styled.span, etc.
 
-Object.keys(styled_component).forEach(key => {
-  styled[key] = styled(key);
-});
+  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 };

package/esm/styled/types.js

@@ -0,0 +1 @@
+export { CSSObject } from 'styled-components';

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.10",
+  "version": "2.0.0-rc.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -31,6 +31,10 @@
       "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"
@@ -85,6 +89,7 @@
     "generateSubmodules": true
   },
   "dependencies": {
+    "@elliemae/ds-utilities": "2.0.0-rc.14",
     "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/styled/index.d.ts

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

package/types/styled/styleGetters.d.ts

@@ -1,4 +1,4 @@
-import type { StyleObject, Theme } from './index.d';
-export declare const getStyleOverrides: (name: string, theme: Theme) => StyleObject;
-export declare const getVariantStyles: (name: string, theme: Theme) => Record<string, string>;
-export declare const variantsResolver: (props: Record<string, unknown>, styles: StyleObject, theme: Theme, name: string) => StyleObject[keyof StyleObject][];
+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

@@ -1,4 +1,6 @@
-import type { Theme } from '@elliemae/pui-theme';
+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, unknown>) => string;
+export declare const propsToClassKey: (props: Record<string, {
+    toString: () => string;
+}>) => 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;