@elliemae/ds-legacy-system 1.0.0-rc.1

package/dist/cjs/utils.js

@@ -0,0 +1,292 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  active: () => active,
+  animation: () => animation,
+  border: () => border,
+  boxShadow: () => boxShadow,
+  buttonLink: () => buttonLink,
+  clearFocus: () => clearFocus,
+  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
+});
+module.exports = __toCommonJS(utils_exports);
+var React = __toESM(require("react"));
+var import_polished = require("polished");
+var import_lodash = require("lodash");
+var import_styled_components = require("@xstyled/styled-components");
+var import_theme = require("./theme.js");
+var import_mobileUtilities = require("./mobileUtilities.js");
+var import_th = require("./th.js");
+function truncate(width) {
+  return (props) => import_styled_components.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 import_styled_components.keyframes`${(0, import_lodash.reduce)(
+    obj,
+    (result, value, key) => `
+    ${result}
+    ${key}% {
+      ${value}
+    }
+  `,
+    ""
+  )}
+  `;
+}
+function boxShadow(top, left, blur, color, inset = false) {
+  return `box-shadow: ${inset ? "inset" : ""} ${top} ${left} ${blur} ${color};`;
+}
+function border(color = import_theme.theme.colors.brand[600], size = "1px", type = "solid") {
+  return `${size} ${type} ${color}`;
+}
+function animation(animationKeyframes, animationLength, animationTimingFn) {
+  return (props) => import_styled_components.css`
+    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
+      ${props.animationTimingFn || animationTimingFn};
+  `;
+}
+function focus(color = import_theme.theme.colors.brand[600]) {
+  return () => import_styled_components.css`
+    outline: none;
+    border: 1px solid ${color};
+    box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color)};
+    border-radius: 2px;
+  `;
+}
+function focusAfter(color) {
+  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(color)}
+    }
+  `;
+}
+function active() {
+  return (props) => import_styled_components.css`
+    outline: none;
+    border: 1px solid ${props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
+}
+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]};`;
+    switch (type) {
+      case "h1":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)("2.7692rem")};
+        line-height: normal;
+      `;
+        break;
+      case "h2":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[800])};
+        line-height: normal;
+      `;
+        break;
+      case "h3":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[700])};
+        line-height: 1.2;
+      `;
+        break;
+      case "h4":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[600])};
+        line-height: normal;
+      `;
+        break;
+      case "h5":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
+        line-height: normal;
+      `;
+        break;
+      case "section-header":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
+        line-height: normal;
+        text-transform: uppercase;
+      `;
+        break;
+      case "body":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
+        break;
+      case "body-small":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[300])};
+        line-height: normal;
+      `;
+        break;
+      case "body-micro":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.microText[200])};
+        line-height: normal;
+      `;
+        break;
+      case "list":
+        cssVar += `
+        font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
+        break;
+      case "link":
+        cssVar += `
+        line-height: ${props.theme.space.xl};
+        color: ${props.theme.colors.brand[600]};
+        cursor: pointer;
+      `;
+        break;
+    }
+    return cssVar;
+  };
+}
+function iconColor(variant = "neutral", type = 400) {
+  return import_styled_components.css`
+    fill: ${import_th.th.color(`${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;
+  `;
+}
+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;
+  `;
+}
+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) => 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 = (color) => `
+  @media not all and (min-resolution: 0.001dpcm) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+`;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-shadow */\n\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\n\nimport type { Theme } from '@elliemae/pui-theme';\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\nimport { toMobile } from './mobileUtilities.js';\nimport { th } from './th.js';\n\nexport { withTheme, rgba, useTheme, kfrm };\n\ntype PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport function truncate(width?: string) {\n  return (props: PropsWithTheme<{ width?: string }>) => css`\n    ${!!width || props.width ? `width: ${(props.width || width) as string};` : ''}\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, string>): 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\n// export function color(variant = 'neutral', type: string | number = 400) {\n//   return css`\n//     color: ${th.color(`${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: { animationKeyframes?: string; animationLength?: string; animationTimingFn?: string }) => 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: PropsWithTheme) => 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: PropsWithTheme) => css`\n    outline: 1px solid ${props.theme.colors.brand[600]};\n    outline-offset: -1px;\n  `;\n}\n\nexport function textStyle(type: string, weight: keyof Theme['fontWeights'] = 'regular') {\n  // eslint-disable-next-line complexity\n  return (props: { theme: Theme }): 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.space.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: ${th.color(`${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): FlattenSimpleInterpolation => 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["kfrm", "kfrm"]
+}

package/dist/cjs/xStyledWrapper.js

@@ -0,0 +1,62 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var xStyledWrapper_exports = {};
+__export(xStyledWrapper_exports, {
+  XStyledWrapper: () => XStyledWrapper,
+  default: () => xStyledWrapper_default,
+  xStyledCommonProps: () => xStyledCommonProps
+});
+module.exports = __toCommonJS(xStyledWrapper_exports);
+var React = __toESM(require("react"));
+var import_index = require("./index.js");
+var import_system = require("@xstyled/system");
+const XStyledWrapper = (0, import_index.styled)("div")`
+  ${import_index.typography}
+  ${import_index.layout}
+  ${import_index.space}
+  ${import_index.sizing}
+  ${import_index.background}
+  ${import_index.borders}
+  ${import_index.boxShadows}
+  ${import_index.flexboxes}
+  ${import_index.color}
+`;
+const xStyledCommonProps = (0, import_system.compose)(
+  import_index.typography,
+  import_index.background,
+  import_index.borders,
+  import_index.sizing,
+  import_index.space,
+  import_index.boxShadows,
+  import_index.flexboxes,
+  import_index.layout,
+  import_index.color
+);
+var xStyledWrapper_default = XStyledWrapper;
+//# sourceMappingURL=xStyledWrapper.js.map

package/dist/cjs/xStyledWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/xStyledWrapper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import {\n  styled,\n  typography,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  color,\n} from './index.js';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { compose } from '@xstyled/system';\n\nexport const XStyledWrapper = styled('div')`\n  ${typography}\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n  ${color}\n`;\n\nexport const xStyledCommonProps = compose(\n  typography,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  color,\n);\n\nexport default XStyledWrapper;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAWO;AAGP,oBAAwB;AAEjB,MAAM,qBAAiB,qBAAO,KAAK;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/esm/arithmetic.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+function getNumberAndUnit(numberStrWithUnit) {
+  const matchResult = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
+  let number = "0";
+  let unit = "px";
+  if (matchResult) {
+    [number, unit] = matchResult;
+  }
+  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}`;
+  }
+}
+export {
+  getNumberAndUnit,
+  op
+};
+//# sourceMappingURL=arithmetic.js.map

package/dist/esm/arithmetic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/arithmetic.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export function getNumberAndUnit(numberStrWithUnit: string | number): { number: string; unit: string } {\n  const matchResult = String(numberStrWithUnit).match(/[a-z]+|[(/^\\-?\\d*.\\d+|\\d+),?]+/gi);\n  let number = '0';\n  let unit = 'px';\n  if (matchResult) {\n    [number, unit] = matchResult;\n  }\n\n  return { number, unit };\n}\n\nexport function op(operator: string, n1: string, n2: string | number): string {\n  const { number, unit } = getNumberAndUnit(n1);\n  const { number: number2, unit: unit2 } = getNumberAndUnit(n2);\n  switch (operator) {\n    case '*':\n      return `${Number(number) * Number(number2)}${unit || unit2}`;\n    case '+':\n      return `${Number(number) + Number(number2)}${unit || unit2}`;\n    case '-':\n      return `${Number(number) - Number(number2)}${unit || unit2}`;\n    case '/':\n      return `${Number(number) / Number(number2)}${unit || unit2}`;\n    default:\n      return `${Number(number) + Number(number2)}${unit || unit2}`;\n  }\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,SAAS,iBAAiB,mBAAsE;AACrG,QAAM,cAAc,OAAO,iBAAiB,EAAE,MAAM,kCAAkC;AACtF,MAAI,SAAS;AACb,MAAI,OAAO;AACX,MAAI,aAAa;AACf,KAAC,QAAQ,IAAI,IAAI;AAAA,EACnB;AAEA,SAAO,EAAE,QAAQ,KAAK;AACxB;AAEO,SAAS,GAAG,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,KAAK,IAAI,iBAAiB,EAAE;AAC5C,QAAM,EAAE,QAAQ,SAAS,MAAM,MAAM,IAAI,iBAAiB,EAAE;AAC5D,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,IACvD,KAAK;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,IACvD,KAAK;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,IACvD,KAAK;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,IACvD;AACE,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,EACzD;AACF;",
+  "names": []
+}

package/dist/esm/constants.js

@@ -0,0 +1,18 @@
+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"
+};
+export {
+  desktopBaseFont,
+  mobileBaseFont,
+  translateUnits
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/constants.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const desktopBaseFont = 13;\n\nexport const mobileBaseFont = 16;\n\nexport const translateUnits = {\n  '8px': '4px',\n  '16px': '8px',\n  '32px': '16px',\n  '48px': '24px',\n  '56px': '32px',\n  '64px': '48px',\n  '72px': '64px',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;",
+  "names": []
+}

package/dist/esm/globalStyles.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { createGlobalStyle } from "./styled/index.js";
+import { th } from "./th.js";
+const GlobalStyles = createGlobalStyle`
+  // Here we setup the root font-sizes for mobile vs desktop
+  :root {
+    font-size: ${(props) => props.device === "desktop" ? "81.25%" : "100%"};
+
+    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.device === "mobile" ? "100%" : "81.25%"};
+    }
+  }
+
+  body {
+    overscroll-behavior-y: none;
+
+    font-size: 1rem; // since we correctly have set up the root font-sizes, we can use 1rem
+  }
+
+  /* fix sanitize */
+  ::placeholder {
+    font-weight: ${th.fontWeight("regular")};
+    color: ${th.color("neutral-500")};
+  }
+  ::-webkit-input-placeholder {
+    opacity: 1;
+  }
+
+  :where(svg:not([fill])) {
+    fill: unset;
+  }
+`;
+export {
+  GlobalStyles
+};
+//# sourceMappingURL=globalStyles.js.map

package/dist/esm/globalStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/globalStyles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createGlobalStyle } from './styled/index.js';\nimport { th } from './th.js';\n\nexport const GlobalStyles = createGlobalStyle<{ device: 'desktop' | 'mobile' }>`\n  // Here we setup the root font-sizes for mobile vs desktop\n  :root {\n    font-size: ${(props) => (props.device === 'desktop' ? '81.25%' : '100%')};\n\n    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => (props.device === 'mobile' ? '100%' : '81.25%')};\n    }\n  }\n\n  body {\n    overscroll-behavior-y: none;\n\n    font-size: 1rem; // since we correctly have set up the root font-sizes, we can use 1rem\n  }\n\n  /* fix sanitize */\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n  ::-webkit-input-placeholder {\n    opacity: 1;\n  }\n\n  :where(svg:not([fill])) {\n    fill: unset;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAClC,SAAS,UAAU;AAEZ,MAAM,eAAe;AAAA;AAAA;AAAA,iBAGX,CAAC,UAAW,MAAM,WAAW,YAAY,WAAW;AAAA;AAAA,wBAE7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAYjD,GAAG,WAAW,SAAS;AAAA,aAC7B,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+export * from "./globalStyles.js";
+export * from "./spaceUtilities.js";
+export * from "./mobileUtilities.js";
+export * from "./utils.js";
+export * from "./arithmetic.js";
+export * from "./th.js";
+export * from "./theme.js";
+export * from "./styled/index.js";
+import { position, typography } from "@xstyled/system";
+import { themeProviderHOC } from "./themeProviderHOC.js";
+import { ThemeContext } from "@xstyled/styled-components";
+import { xStyledCommonProps, XStyledWrapper } from "./xStyledWrapper.js";
+export {
+  ThemeContext,
+  XStyledWrapper,
+  position,
+  themeProviderHOC,
+  typography,
+  xStyledCommonProps
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './globalStyles.js';\nexport * from './spaceUtilities.js';\nexport * from './mobileUtilities.js';\nexport * from './utils.js';\nexport * from './arithmetic.js';\nexport * from './th.js';\nexport * from './theme.js';\nexport * from './styled/index.js';\nexport { position, typography } from '@xstyled/system';\nexport { themeProviderHOC } from './themeProviderHOC.js';\nexport { ThemeContext } from '@xstyled/styled-components';\nexport { xStyledCommonProps, XStyledWrapper } from './xStyledWrapper.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,UAAU,kBAAkB;AACrC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,sBAAsB;",
+  "names": []
+}

package/dist/esm/mobileUtilities.js

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

package/dist/esm/mobileUtilities.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/mobileUtilities.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport { useState, useEffect } from 'react';\nimport { theme } from './theme.js';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants.js';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n  if (unit in translateUnits) return translateUnits[unit as keyof typeof translateUnits];\n  return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\n}\n\nexport const isMobile = (): boolean => {\n  if (!window) return false;\n  return Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;\n};\n\nexport function toMobile(unit: string): string {\n  if (!isMobile()) return unit;\n  return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;\n}\n\nexport const useIsMobile = (): boolean => {\n  const [mobile, setMobile] = useState<boolean>(isMobile());\n\n  useEffect(() => {\n    function handleResize() {\n      setMobile(isMobile());\n    }\n    window?.addEventListener('resize', handleResize);\n    return () => {\n      window?.removeEventListener('resize', handleResize);\n    };\n  }, []);\n\n  if (!window) return false;\n  return mobile;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,iBAAiB;AACpC,SAAS,aAAa;AACtB,SAAS,iBAAiB,gBAAgB,sBAAsB;AAGzD,SAAS,yBAAyB,MAAsB;AAC7D,MAAI,QAAQ;AAAgB,WAAO,eAAe,IAAmC;AACrF,SAAO,GAAI,WAAW,IAAI,KAAK,iBAAiB,mBAAoB;AACtE;AAEO,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,OAAO,MAAM,YAAY,OAAO,MAAM,IAAI,EAAE,CAAC,CAAC,IAAI,OAAO,cAAc;AAChF;AAEO,SAAS,SAAS,MAAsB;AAC7C,MAAI,CAAC,SAAS;AAAG,WAAO;AACxB,SAAO,GAAG,WAAW,IAAI,KAAK,kBAAkB;AAClD;AAEO,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,SAAS,CAAC;AAExD,YAAU,MAAM;AACd,aAAS,eAAe;AACtB,gBAAU,SAAS,CAAC;AAAA,IACtB;AACA,YAAQ,iBAAiB,UAAU,YAAY;AAC/C,WAAO,MAAM;AACX,cAAQ,oBAAoB,UAAU,YAAY;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/package.json

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