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

package/cjs/utils.js

@@ -1,294 +1,184 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var utils_exports = {};
-__export(utils_exports, {
-  active: () => active,
-  animation: () => animation,
-  border: () => border,
-  boxShadow: () => boxShadow,
-  buttonLink: () => buttonLink,
-  clearFocus: () => clearFocus,
-  color: () => color,
-  createGlobalStyle: () => import_styled_components.createGlobalStyle,
-  css: () => import_styled_components.css,
-  disabled: () => disabled,
-  fakeActive: () => fakeActive,
-  fakeBorder: () => fakeBorder,
-  flexCenter: () => flexCenter,
-  focus: () => focus,
-  focusAfter: () => focusAfter,
-  hover: () => hover,
-  iconColor: () => iconColor,
-  keyframes: () => keyframes,
-  kfrm: () => import_styled_components.keyframes,
-  onlyFirefox: () => onlyFirefox,
-  onlySafari: () => onlySafari,
-  onlySafariAndFirefox: () => onlySafariAndFirefox,
-  rgba: () => import_polished.rgba,
-  safariAndFirefoxBold: () => safariAndFirefoxBold,
-  textStyle: () => textStyle,
-  transition: () => transition,
-  truncate: () => truncate,
-  useTheme: () => import_styled_components.useTheme,
-  withTheme: () => import_styled_components.withTheme
-});
-var React = __toESM(require("react"));
-var import_polished = require("polished");
-var import_lodash = require("lodash");
-var import_styled_components = require("styled-components");
-var import_theme = require("./theme");
-var import_mobileUtilities = require("./mobileUtilities");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var polished = require('polished');
+var lodash = require('lodash');
+var theme = require('./theme.js');
+var mobileUtilities = require('./mobileUtilities.js');
+var styled_component = require('styled-components');
+
+/* eslint-disable no-shadow */
 function truncate(width) {
-  return (props) => import_styled_components.css`
-    ${!!width || props.width ? `width: ${props.width || width};` : ""}
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
+  return props => styled_component.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 import_styled_components.keyframes`${(0, import_lodash.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 import_styled_components.css`
-    color: ${(props) => props.theme.colors[variant][type]};
-  `;
-}
-function border(color2 = import_theme.theme.colors.brand[600], size = "1px", type = "solid") {
-  return `${size} ${type} ${color2}`;
+  return styled_component.keyframes(["", ""], lodash.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) {
+  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() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
+  return styled_component.css(["color:", ";"], props => props.theme.colors[variant][type]);
+}
+function border() {
+  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.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) => import_styled_components.css`
-    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
-      ${props.animationTimingFn || animationTimingFn};
-  `;
-}
-function focus(color2 = import_theme.theme.colors.brand[600]) {
-  return () => import_styled_components.css`
-    outline: none;
-    border: 1px solid ${color2};
-    box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color2)};
-    border-radius: 2px;
-  `;
+  return props => styled_component.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
+} // 0.0769
+
+function focus() {
+  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
+  return () => styled_component.css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, polished.lighten(0.3, color));
 }
-function focusAfter(color2) {
-  return import_styled_components.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 focusAfter(color) {
+  return styled_component.css(["outline:none;position:relative;&:after{content:'';z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;", "}"], focus(color));
 }
 function active() {
-  return (props) => import_styled_components.css`
-    outline: none;
-    border: 1px solid ${props.theme.colors.brand[700]};
-    border-radius: 2px;
-  `;
+  return props => styled_component.css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
 }
 function hover() {
-  return (props) => import_styled_components.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]};`;
+  return props => styled_component.css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
+}
+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: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
+
     switch (type) {
-      case "h1":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)("2.7692rem")};
-        line-height: normal;
-      `;
+      case 'h1':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile('2.7692rem'), ";\n        line-height: normal;\n      ");
         break;
-      case "h2":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[800])};
-        line-height: normal;
-      `;
+
+      case 'h2':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[800]), ";\n        line-height: normal;\n      ");
         break;
-      case "h3":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[700])};
-        line-height: 1.2;
-      `;
+
+      case 'h3':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[700]), ";\n        line-height: 1.2;\n      ");
         break;
-      case "h4":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[600])};
-        line-height: normal;
-      `;
+
+      case 'h4':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[600]), ";\n        line-height: normal;\n      ");
         break;
-      case "h5":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
-        line-height: normal;
-      `;
+
+      case 'h5':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n      ");
         break;
-      case "section-header":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
-        line-height: normal;
-        text-transform: uppercase;
-      `;
+
+      case 'section-header':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n        line-height: normal;\n        text-transform: uppercase;\n      ");
         break;
-      case "body":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
-        line-height: normal;
-      `;
+
+      case 'body':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n        line-height: normal;\n      ");
         break;
-      case "body-small":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[300])};
-        line-height: normal;
-      `;
+
+      case 'body-small':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[300]), ";\n        line-height: normal;\n      ");
         break;
-      case "body-micro":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.microText[200])};
-        line-height: normal;
-      `;
+
+      case 'body-micro':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.microText[200]), ";\n        line-height: normal;\n      ");
         break;
-      case "list":
-        cssVar += `
-        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
-        line-height: normal;
-      `;
+
+      case 'list':
+        cssVar += "\n        font-size: ".concat(mobileUtilities.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;
-      `;
+
+      case 'link':
+        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) {
-  return import_styled_components.css`
-    fill: ${(props) => props.theme.colors[variant][type]};
-  `;
+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 styled_component.css(["fill:", ";"], props => props.theme.colors[variant][type]);
 }
 function fakeBorder() {
-  return import_styled_components.css`
-    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
-    border-radius: 2px;
-  `;
+  return styled_component.css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
 }
 function fakeActive() {
-  return import_styled_components.css`
-    outline: none;
-    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
-    border-radius: 2px;
-  `;
+  return styled_component.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};
-  `;
-}
-const onlySafariAndFirefox = (styles) => import_styled_components.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};
-  }
-`;
-module.exports = __toCommonJS(utils_exports);
-//# sourceMappingURL=utils.js.map
+  return "\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  ";
+}
+function transition() {
+  let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
+  return "\n    transition: ".concat(t, ";\n  ");
+}
+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,
+  get: function () { return polished.rgba; }
+});
+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; }
+});
+exports.active = active;
+exports.animation = animation;
+exports.border = border;
+exports.boxShadow = boxShadow;
+exports.buttonLink = buttonLink;
+exports.clearFocus = clearFocus;
+exports.color = color;
+exports.disabled = disabled;
+exports.fakeActive = fakeActive;
+exports.fakeBorder = fakeBorder;
+exports.flexCenter = flexCenter;
+exports.focus = focus;
+exports.focusAfter = focusAfter;
+exports.hover = hover;
+exports.iconColor = iconColor;
+exports.keyframes = keyframes;
+exports.onlyFirefox = onlyFirefox;
+exports.onlySafari = onlySafari;
+exports.onlySafariAndFirefox = onlySafariAndFirefox;
+exports.safariAndFirefoxBold = safariAndFirefoxBold;
+exports.textStyle = textStyle;
+exports.transition = transition;
+exports.truncate = truncate;

package/esm/arithmetic.js

@@ -1,26 +1,38 @@
-import * as React from "react";
+import '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 };
+  return {
+    number,
+    unit
+  };
 }
 function op(operator, n1, n2) {
-  const { number, unit } = getNumberAndUnit(n1);
-  const { number: number2, unit: unit2 } = getNumberAndUnit(n2);
+  const {
+    number,
+    unit
+  } = getNumberAndUnit(n1);
+  const {
+    number: number2,
+    unit: unit2
+  } = getNumberAndUnit(n2);
+
   switch (operator) {
-    case "*":
+    case '*':
       return Number(number) * Number(number2) + (unit || unit2);
-    case "+":
+
+    case '+':
       return Number(number) + Number(number2) + (unit || unit2);
-    case "-":
+
+    case '-':
       return Number(number) - Number(number2) + (unit || unit2);
-    case "/":
+
+    case '/':
       return Number(number) / Number(number2) + (unit || unit2);
+
     default:
       return Number(number) + Number(number2) + (unit || unit2);
   }
 }
-export {
-  getNumberAndUnit,
-  op
-};
-//# sourceMappingURL=arithmetic.js.map
+
+export { getNumberAndUnit, op };

package/esm/constants.js

@@ -1,18 +1,13 @@
-import * as React from "react";
 const desktopBaseFont = 13;
 const mobileBaseFont = 16;
 const translateUnits = {
-  "8px": "4px",
-  "16px": "8px",
-  "32px": "16px",
-  "48px": "24px",
-  "56px": "32px",
-  "64px": "48px",
-  "72px": "64px"
+  '8px': '4px',
+  '16px': '8px',
+  '32px': '16px',
+  '48px': '24px',
+  '56px': '32px',
+  '64px': '48px',
+  '72px': '64px'
 };
-export {
-  desktopBaseFont,
-  mobileBaseFont,
-  translateUnits
-};
-//# sourceMappingURL=constants.js.map
+
+export { desktopBaseFont, mobileBaseFont, translateUnits };

package/esm/globalStyles.js

@@ -1,18 +1,17 @@
-import * as React from "react";
-import { createGlobalStyle } from "./utils";
-const GlobalStyles = createGlobalStyle`
-  :root, body {
-    overscroll-behavior-y: none;
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import 'polished';
+import 'lodash';
+import './theme.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import { createGlobalStyle } from 'styled-components';
 
-    font-size: ${(props) => props.device === "desktop" ? "13px" : "16px"};
+var _templateObject;
+const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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');
 
-    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {
-      font-size: ${(props) => props.device === "mobile" ? "16px" : "13px"};
-    }
-
-  }
-`;
-export {
-  GlobalStyles
-};
-//# sourceMappingURL=globalStyles.js.map
+export { GlobalStyles };

package/esm/index.js

@@ -1,14 +1,11 @@
-import * as React from "react";
-export * from "./globalStyles";
-export * from "./spaceUtilities";
-export * from "./mobileUtilities";
-export * from "./utils";
-export * from "./arithmetic";
-export * from "./th";
-export * from "./theme";
-export * from "./styled";
-import { themeProviderHOC } from "./themeProviderHOC";
-export {
-  themeProviderHOC
-};
-//# sourceMappingURL=index.js.map
+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, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
+export { getNumberAndUnit, op } from './arithmetic.js';
+export { th } from './th.js';
+export { theme } from './theme.js';
+export { styled } from './styled/index.js';
+export { themeProviderHOC } from './themeProviderHOC.js';
+export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from 'styled-components';
+export { rgba } from 'polished';

package/esm/mobileUtilities.js

@@ -1,16 +1,15 @@
-import * as React from "react";
-import { useState, useEffect } from "react";
-import { theme } from "./theme";
-import { desktopBaseFont, mobileBaseFont, translateUnits } from "./constants";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import { theme } from './theme.js';
+import { translateUnits, mobileBaseFont, desktopBaseFont } from './constants.js';
+
 function __UNSAFE_SPACE_TO_DIMSUM(unit) {
-  if (translateUnits[unit])
-    return translateUnits[unit];
-  return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
+  if (translateUnits[unit]) return translateUnits[unit];
+  return "".concat(parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2, "px");
 }
 function toMobile(unit) {
-  if (!isMobile())
-    return unit;
-  return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;
+  if (!isMobile()) return unit;
+  return "".concat(parseFloat(unit) * (desktopBaseFont / mobileBaseFont), "rem");
 }
 const useIsMobile = () => {
   const [mobile, setMobile] = useState(isMobile());
@@ -18,26 +17,18 @@ const useIsMobile = () => {
     function handleResize() {
       setMobile(isMobile());
     }
-    if (window)
-      window.addEventListener("resize", handleResize);
+
+    if (window) window.addEventListener('resize', handleResize);
     return () => {
-      if (window)
-        window.removeEventListener("resize", handleResize);
+      if (window) window.removeEventListener('resize', handleResize);
     };
   }, []);
-  if (!window)
-    return false;
+  if (!window) return false;
   return mobile;
 };
 const isMobile = () => {
-  if (!window)
-    return false;
-  return Number(theme.breakpoints.medium.split("px")[0]) - window.innerWidth >= 0;
+  if (!window) return false;
+  return Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;
 };
-export {
-  __UNSAFE_SPACE_TO_DIMSUM,
-  isMobile,
-  toMobile,
-  useIsMobile
-};
-//# sourceMappingURL=mobileUtilities.js.map
+
+export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile };