@elliemae/ds-system 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/esm/utils.js

@@ -0,0 +1,265 @@
+import * as React from "react";
+import { lighten, rgba } from "polished";
+import { reduce } from "lodash";
+import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from "styled-components";
+import { theme } from "./theme";
+import { toMobile } from "./mobileUtilities";
+function truncate(width) {
+  return (props) => css`
+    ${!!width || props.width ? `width: ${props.width || width};` : ""}
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+}
+function flexCenter() {
+  return `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
+}
+function disabled() {
+  return `
+    cursor: not-allowed;
+    pointer-events: none;
+  `;
+}
+function keyframes(obj) {
+  return kfrm`${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 css`
+    color: ${(props) => props.theme.colors[variant][type]};
+  `;
+}
+function border(color2 = theme.colors.brand[600], size = "1px", type = "solid") {
+  return `${size} ${type} ${color2}`;
+}
+function animation(animationKeyframes, animationLength, animationTimingFn) {
+  return (props) => css`
+    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
+      ${props.animationTimingFn || animationTimingFn};
+  `;
+}
+function focus(color2 = theme.colors.brand[600]) {
+  return () => css`
+    outline: none;
+    border: 1px solid ${color2};
+    box-shadow: inset 0 0 0 1px ${lighten(0.3, color2)};
+    border-radius: 2px;
+  `;
+}
+function focusAfter(color2) {
+  return 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) => css`
+    outline: none;
+    border: 1px solid ${props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
+}
+function hover() {
+  return (props) => 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 += `
+        font-size: ${toMobile("2.7692rem")};
+        line-height: normal;
+      `;
+        break;
+      case "h2":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[800])};
+        line-height: normal;
+      `;
+        break;
+      case "h3":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[700])};
+        line-height: 1.2;
+      `;
+        break;
+      case "h4":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[600])};
+        line-height: normal;
+      `;
+        break;
+      case "h5":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+      `;
+        break;
+      case "section-header":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+        text-transform: uppercase;
+      `;
+        break;
+      case "body":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
+        break;
+      case "body-small":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[300])};
+        line-height: normal;
+      `;
+        break;
+      case "body-micro":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.microText[200])};
+        line-height: normal;
+      `;
+        break;
+      case "list":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
+        break;
+      case "link":
+        cssVar += `
+        line-height: ${props.theme.xl};
+        color: ${props.theme.colors.brand[600]};
+        cursor: pointer;
+      `;
+        break;
+    }
+    return cssVar;
+  };
+}
+function iconColor(variant = "neutral", type = 400) {
+  return css`
+    fill: ${(props) => props.theme.colors[variant][type]};
+  `;
+}
+function fakeBorder() {
+  return css`
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
+    border-radius: 2px;
+  `;
+}
+function fakeActive() {
+  return css`
+    outline: none;
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
+}
+function clearFocus() {
+  return `
+    border: none;
+    box-shadow: none;
+  `;
+}
+function buttonLink() {
+  return `
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+  `;
+}
+function transition(t = "all 1s ease") {
+  return `
+    transition: ${t};
+  `;
+}
+const onlySafariAndFirefox = (styles) => 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};
+  }
+`;
+export {
+  active,
+  animation,
+  border,
+  boxShadow,
+  buttonLink,
+  clearFocus,
+  color,
+  createGlobalStyle,
+  css,
+  disabled,
+  fakeActive,
+  fakeBorder,
+  flexCenter,
+  focus,
+  focusAfter,
+  hover,
+  iconColor,
+  keyframes,
+  kfrm,
+  onlyFirefox,
+  onlySafari,
+  onlySafariAndFirefox,
+  rgba,
+  safariAndFirefoxBold,
+  textStyle,
+  transition,
+  truncate,
+  useTheme,
+  withTheme
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

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

package/{types → dist/types}/utils.d.ts

@@ -1,6 +1,5 @@
 import { rgba } from 'polished';
-import { Keyframes } from 'styled-components';
-import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';
+import { Keyframes, 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 flexCenter(): string;

package/package.json

@@ -1,67 +1,70 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "2.3.0-next.3",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./utils": {
-      "import": "./esm/utils.js",
-      "require": "./cjs/utils.js"
+      "import": "./dist/esm/utils.js",
+      "require": "./dist/cjs/utils.js"
     },
     "./themeProviderHOC": {
-      "import": "./esm/themeProviderHOC.js",
-      "require": "./cjs/themeProviderHOC.js"
+      "import": "./dist/esm/themeProviderHOC.js",
+      "require": "./dist/cjs/themeProviderHOC.js"
     },
     "./theme": {
-      "import": "./esm/theme.js",
-      "require": "./cjs/theme.js"
+      "import": "./dist/esm/theme.js",
+      "require": "./dist/cjs/theme.js"
     },
     "./th": {
-      "import": "./esm/th.js",
-      "require": "./cjs/th.js"
+      "import": "./dist/esm/th.js",
+      "require": "./dist/cjs/th.js"
     },
     "./styled/utils": {
-      "import": "./esm/styled/utils.js",
-      "require": "./cjs/styled/utils.js"
+      "import": "./dist/esm/styled/utils.js",
+      "require": "./dist/cjs/styled/utils.js"
     },
     "./styled/types": {
-      "import": "./esm/styled/types.js",
-      "require": "./cjs/styled/types.js"
+      "import": "./dist/esm/styled/types.js",
+      "require": "./dist/cjs/styled/types.js"
     },
     "./styled/styleGetters": {
-      "import": "./esm/styled/styleGetters.js",
-      "require": "./cjs/styled/styleGetters.js"
+      "import": "./dist/esm/styled/styleGetters.js",
+      "require": "./dist/cjs/styled/styleGetters.js"
     },
     "./styled": {
-      "import": "./esm/styled/index.js",
-      "require": "./cjs/styled/index.js"
+      "import": "./dist/esm/styled/index.js",
+      "require": "./dist/cjs/styled/index.js"
     },
     "./spaceUtilities": {
-      "import": "./esm/spaceUtilities.js",
-      "require": "./cjs/spaceUtilities.js"
+      "import": "./dist/esm/spaceUtilities.js",
+      "require": "./dist/cjs/spaceUtilities.js"
     },
     "./mobileUtilities": {
-      "import": "./esm/mobileUtilities.js",
-      "require": "./cjs/mobileUtilities.js"
+      "import": "./dist/esm/mobileUtilities.js",
+      "require": "./dist/cjs/mobileUtilities.js"
     },
     "./globalStyles": {
-      "import": "./esm/globalStyles.js",
-      "require": "./cjs/globalStyles.js"
+      "import": "./dist/esm/globalStyles.js",
+      "require": "./dist/cjs/globalStyles.js"
     },
     "./constants": {
-      "import": "./esm/constants.js",
-      "require": "./cjs/constants.js"
+      "import": "./dist/esm/constants.js",
+      "require": "./dist/cjs/constants.js"
     },
     "./arithmetic": {
-      "import": "./esm/arithmetic.js",
-      "require": "./cjs/arithmetic.js"
+      "import": "./dist/esm/arithmetic.js",
+      "require": "./dist/cjs/arithmetic.js"
     }
   },
   "sideEffects": [
@@ -73,35 +76,40 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js",
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-utilities": "2.3.0-next.0",
+    "@elliemae/ds-utilities": "3.0.0-alpha.0",
     "polished": "~3.6.7"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.3.0",
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "styled-components": "~5.3.3"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "~2.3.0",
+    "@elliemae/pui-theme": "^2.2.5",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.3"
+  },
+  "scripts": {
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch"
   }
 }

package/cjs/arithmetic.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-
-function getNumberAndUnit(numberStrWithUnit) {
-  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
-  return {
-    number,
-    unit
-  };
-}
-function op(operator, n1, n2) {
-  const {
-    number,
-    unit
-  } = getNumberAndUnit(n1);
-  const {
-    number: number2,
-    unit: unit2
-  } = getNumberAndUnit(n2);
-
-  switch (operator) {
-    case '*':
-      return Number(number) * Number(number2) + (unit || unit2);
-
-    case '+':
-      return Number(number) + Number(number2) + (unit || unit2);
-
-    case '-':
-      return Number(number) - Number(number2) + (unit || unit2);
-
-    case '/':
-      return Number(number) / Number(number2) + (unit || unit2);
-
-    default:
-      return Number(number) + Number(number2) + (unit || unit2);
-  }
-}
-
-exports.getNumberAndUnit = getNumberAndUnit;
-exports.op = op;

package/cjs/constants.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const desktopBaseFont = 13;
-const mobileBaseFont = 16;
-const translateUnits = {
-  '8px': '4px',
-  '16px': '8px',
-  '32px': '16px',
-  '48px': '24px',
-  '56px': '32px',
-  '64px': '48px',
-  '72px': '64px'
-};
-
-exports.desktopBaseFont = desktopBaseFont;
-exports.mobileBaseFont = mobileBaseFont;
-exports.translateUnits = translateUnits;

package/cjs/globalStyles.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('polished');
-require('lodash');
-require('./theme.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('react');
-var styled_component = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject;
-const GlobalStyles = styled_component.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.breakpoints.small;
-}, props => props.device === 'mobile' ? '16px' : '13px');
-
-exports.GlobalStyles = GlobalStyles;

package/cjs/index.js

@@ -1,84 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var globalStyles = require('./globalStyles.js');
-var spaceUtilities = require('./spaceUtilities.js');
-var mobileUtilities = require('./mobileUtilities.js');
-var utils = require('./utils.js');
-var arithmetic = require('./arithmetic.js');
-var th = require('./th.js');
-var theme = require('./theme.js');
-var index = require('./styled/index.js');
-var themeProviderHOC = require('./themeProviderHOC.js');
-var styled_component = require('styled-components');
-var polished = require('polished');
-
-
-
-exports.GlobalStyles = globalStyles.GlobalStyles;
-exports.fixSpace = spaceUtilities.fixSpace;
-exports.fixSpaceGutter = spaceUtilities.fixSpaceGutter;
-exports.mapGap = spaceUtilities.mapGap;
-exports.mapGrid = spaceUtilities.mapGrid;
-exports.mapGutter = spaceUtilities.mapGutter;
-exports.mapSpace = spaceUtilities.mapSpace;
-exports.mapTemplateGrid = spaceUtilities.mapTemplateGrid;
-exports.numbersToFr = spaceUtilities.numbersToFr;
-exports.__UNSAFE_SPACE_TO_DIMSUM = mobileUtilities.__UNSAFE_SPACE_TO_DIMSUM;
-exports.isMobile = mobileUtilities.isMobile;
-exports.toMobile = mobileUtilities.toMobile;
-exports.useIsMobile = mobileUtilities.useIsMobile;
-exports.active = utils.active;
-exports.animation = utils.animation;
-exports.border = utils.border;
-exports.boxShadow = utils.boxShadow;
-exports.buttonLink = utils.buttonLink;
-exports.clearFocus = utils.clearFocus;
-exports.color = utils.color;
-exports.disabled = utils.disabled;
-exports.fakeActive = utils.fakeActive;
-exports.fakeBorder = utils.fakeBorder;
-exports.flexCenter = utils.flexCenter;
-exports.focus = utils.focus;
-exports.focusAfter = utils.focusAfter;
-exports.hover = utils.hover;
-exports.iconColor = utils.iconColor;
-exports.keyframes = utils.keyframes;
-exports.onlyFirefox = utils.onlyFirefox;
-exports.onlySafari = utils.onlySafari;
-exports.onlySafariAndFirefox = utils.onlySafariAndFirefox;
-exports.safariAndFirefoxBold = utils.safariAndFirefoxBold;
-exports.textStyle = utils.textStyle;
-exports.transition = utils.transition;
-exports.truncate = utils.truncate;
-exports.getNumberAndUnit = arithmetic.getNumberAndUnit;
-exports.op = arithmetic.op;
-exports.th = th.th;
-exports.theme = theme.theme;
-exports.styled = index.styled;
-exports.themeProviderHOC = themeProviderHOC.themeProviderHOC;
-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; }
-});
-Object.defineProperty(exports, 'rgba', {
-	enumerable: true,
-	get: function () { return polished.rgba; }
-});