@elliemae/ds-system 3.0.0-next.2 → 3.0.0-next.6

package/{esm → dist/esm}/arithmetic.js

@@ -1,38 +1,26 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-
+import * as React from "react";
 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 };
+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(\n  numberStrWithUnit: string | number,\n): { number: string; unit: string } {\n  const [number, unit] = String(numberStrWithUnit).match(\n    /[a-z]+|[(/^\\-?\\d*.\\d+|\\d+),?]+/gi,\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;ACAO,0BACL,mBACkC;AAClC,QAAM,CAAC,QAAQ,QAAQ,OAAO,mBAAmB,MAC/C;AAEF,SAAO,EAAE,QAAQ;AAAA;AAGZ,YAAY,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,SAAS,iBAAiB;AAC1C,QAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,iBAAiB;AAC1D,UAAQ;AAAA,SACD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAEnD,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAAA;",
+  "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;ACAO,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;AAAA;",
+  "names": []
+}

package/dist/esm/globalStyles.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { createGlobalStyle } from "./utils";
+const GlobalStyles = createGlobalStyle`
+  :root, body {
+    overscroll-behavior-y: none;
+
+    font-size: ${(props) => props.device === "desktop" ? "13px" : "16px"};
+
+    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${(props) => props.device === "mobile" ? "16px" : "13px"};
+    }
+
+  }
+`;
+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 './utils';\n\nexport const GlobalStyles = createGlobalStyle`\n  :root, body {\n    overscroll-behavior-y: none;\n\n    font-size: ${(props) => (props.device === 'desktop' ? '13px' : '16px')};\n\n    @media(min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${(props) => (props.device === 'mobile' ? '16px' : '13px')};\n    }\n\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAW,MAAM,WAAW,YAAY,SAAS;AAAA;AAAA,wBAE3C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,14 @@
+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

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';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './styled';\nexport { themeProviderHOC } from './themeProviderHOC';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/mobileUtilities.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import { theme } from "./theme";
+import { desktopBaseFont, mobileBaseFont, translateUnits } from "./constants";
+function __UNSAFE_SPACE_TO_DIMSUM(unit) {
+  if (translateUnits[unit])
+    return translateUnits[unit];
+  return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
+}
+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());
+    }
+    if (window)
+      window.addEventListener("resize", handleResize);
+    return () => {
+      if (window)
+        window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  if (!window)
+    return false;
+  return mobile;
+};
+const isMobile = () => {
+  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

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", "import { useState, useEffect } from 'react';\nimport { theme } from './theme';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n  if (translateUnits[unit]) return translateUnits[unit];\n  return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\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  useEffect(() => {\n    function handleResize() {\n      setMobile(isMobile());\n    }\n    if (window) window.addEventListener('resize', handleResize);\n    return () => {\n      if (window) window.removeEventListener('resize', handleResize);\n    };\n  }, []);\n  if (!window) return false;\n  return mobile;\n};\n\nexport const isMobile = (): boolean => {\n  if (!window) return false;\n  return (\n    Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGO,kCAAkC,MAAsB;AAC7D,MAAI,eAAe;AAAO,WAAO,eAAe;AAChD,SAAO,GAAI,WAAW,QAAS,kBAAiB,mBAAoB;AAAA;AAG/D,kBAAkB,MAAsB;AAC7C,MAAI,CAAC;AAAY,WAAO;AACxB,SAAO,GAAG,WAAW,QAAS,mBAAkB;AAAA;AAG3C,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,YAAU,MAAM;AACd,4BAAwB;AACtB,gBAAU;AAAA;AAEZ,QAAI;AAAQ,aAAO,iBAAiB,UAAU;AAC9C,WAAO,MAAM;AACX,UAAI;AAAQ,eAAO,oBAAoB,UAAU;AAAA;AAAA,KAElD;AACH,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AAAA;AAGF,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,OAAO,MAAM,YAAY,OAAO,MAAM,MAAM,MAAM,OAAO,cAAc;AAAA;",
+  "names": []
+}

package/dist/esm/spaceUtilities.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { get } from "lodash";
+import { theme } from "./theme";
+function mapGap(gutter) {
+  if (!gutter)
+    return "0rem";
+  if (String(gutter).includes("rem") || String(gutter).includes("px"))
+    return gutter;
+  return `${theme.space[gutter]}`;
+}
+function mapGutter(gutter) {
+  if (!gutter)
+    return "0rem";
+  return `${theme.space[gutter]} * 2`;
+}
+function mapSpace(width) {
+  if (typeof width === "string")
+    return get(theme, width) ? `${get(theme, width)}` : width;
+  return `${width * 100}%`;
+}
+function fixSpaceGutter(width, gutter) {
+  if (!width)
+    return "";
+  if (Array.isArray(width))
+    return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
+  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
+}
+function fixSpace(width) {
+  if (!width)
+    return "";
+  if (Array.isArray(width))
+    return width.map((w) => mapSpace(w));
+  return mapSpace(width);
+}
+function numbersToFr(grid) {
+  const den = grid.map((f) => f < 1 ? Math.floor(1 / f) : f);
+  return den.map((d) => `${d}fr`);
+}
+function mapGrid(width) {
+  if (get(theme, width))
+    return `${get(theme, width)}`;
+  if (typeof width === "string")
+    return width;
+  const den = width < 1 ? Math.floor(1 / width) : width;
+  return `${den}fr`;
+}
+function mapTemplateGrid(grid) {
+  if (Array.isArray(grid)) {
+    if (grid.some((w) => typeof w === "string"))
+      return grid.map((w) => mapGrid(w));
+    return numbersToFr(grid);
+  }
+  return mapGrid(grid);
+}
+export {
+  fixSpace,
+  fixSpaceGutter,
+  mapGap,
+  mapGrid,
+  mapGutter,
+  mapSpace,
+  mapTemplateGrid,
+  numbersToFr
+};
+//# sourceMappingURL=spaceUtilities.js.map

package/dist/esm/spaceUtilities.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/spaceUtilities.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash';\nimport { theme } from './theme';\n\nexport function mapGap(gutter: number | string): number | string {\n  if (!gutter) return '0rem';\n  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n  return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n  if (!gutter) return '0rem';\n  return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n  if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n  return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n  width: string | number | string[] | number[],\n  gutter?: string | number,\n): string | string[] {\n  if (!width) return '';\n  if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n  if (!width) return '';\n  if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n  return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n  const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n  return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n  if (get(theme, width)) return `${get(theme, width)}`;\n  if (typeof width === 'string') return width;\n  const den = width < 1 ? Math.floor(1 / width) : width;\n  return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: (number | string)[]): string | string[] {\n  if (Array.isArray(grid)) {\n    if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n    return numbersToFr(grid as number[]);\n  }\n  return mapGrid(grid);\n}\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,gBAAgB,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,QAAQ,SAAS,UAAU,OAAO,QAAQ,SAAS;AAAO,WAAO;AAC5E,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,mBAAmB,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,kBAAkB,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,WAAO,IAAI,OAAO,SAAS,GAAG,IAAI,OAAO,WAAW;AACnF,SAAO,GAAG,QAAQ;AAAA;AAGb,wBACL,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAAQ,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,SAAS,UAAU;AACtF,SAAO,QAAQ,SAAS,aAAa,UAAU;AAAA;AAG1C,kBAAkB,OAAiE;AACxF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAAQ,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS;AAC3D,SAAO,SAAS;AAAA;AAGX,qBAAqB,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,KAAK;AACzD,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG;AAAA;AAEpB,iBAAiB,OAAgC;AACtD,MAAI,IAAI,OAAO;AAAQ,WAAO,GAAG,IAAI,OAAO;AAC5C,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,SAAS;AAChD,SAAO,GAAG;AAAA;AAGL,yBAAyB,MAA8C;AAC5E,MAAI,MAAM,QAAQ,OAAO;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM;AAAW,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ;AAC5E,WAAO,YAAY;AAAA;AAErB,SAAO,QAAQ;AAAA;",
+  "names": []
+}

package/dist/esm/styled/index.d.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=index.d.js.map

package/dist/esm/styled/index.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/styled/index.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import styled_component from "styled-components";
+import { getStyleOverrides, getVariantStyles, variantsResolver } from "./styleGetters";
+import { coerceWithDefaultTheme } from "./utils";
+const styledFunction = (tag, options = { name: null, slot: null }) => {
+  const { name: componentName = null, slot: componentSlot = null } = options;
+  const func = (styleArg, ...expressions) => {
+    const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => typeof stylesArg === "function" ? (props) => stylesArg(__spreadProps(__spreadValues({}, props), {
+      theme: coerceWithDefaultTheme(props.theme)
+    })) : stylesArg) : [];
+    let transformedStyleArg = styleArg;
+    if (componentName && componentSlot) {
+      expressionsWithDefaultTheme.push((props) => {
+        const theme = coerceWithDefaultTheme(props.theme);
+        const styleOverrides = getStyleOverrides(componentName, theme);
+        if (styleOverrides) {
+          return [styleOverrides[componentSlot]];
+        }
+        return null;
+      });
+    }
+    if (componentName && componentSlot === "root") {
+      expressionsWithDefaultTheme.push((props) => {
+        const theme = coerceWithDefaultTheme(props.theme);
+        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+      });
+    }
+    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
+    if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      const placeholders = new Array(numOfCustomFnsApplied).fill("");
+      transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
+        raw: [...styleArg.raw, ...placeholders]
+      });
+    } else if (typeof styleArg === "function") {
+      transformedStyleArg = (props) => styleArg(__spreadProps(__spreadValues({}, props), { theme: coerceWithDefaultTheme(props.theme) }));
+    }
+    let Component = styled_component(tag);
+    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
+    if (displayName !== null) {
+      Component = Component.attrs({ className: `${componentName}${componentSlot}` });
+    }
+    Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
+    if (displayName !== null) {
+      Component.displayName = displayName;
+    }
+    return Component;
+  };
+  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
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/styled/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled_component, { StyledComponentPropsWithRef } from 'styled-components';\nimport { Styled, StyledFunction, StyledObject } from './types';\nimport { getStyleOverrides, getVariantStyles, variantsResolver } from './styleGetters';\nimport { coerceWithDefaultTheme } from './utils';\n\nconst styledFunction: StyledFunction = (tag, options = { name: null, slot: null }) => {\n  const { name: componentName = null, slot: componentSlot = null } = options;\n  const func: ReturnType<StyledFunction> = (styleArg, ...expressions) => {\n    /*\n     * These are the internal expression written in dimsum\n     * We just coerce with the default theme in case users\n     * forget to add the ThemeProvider\n     */\n    const expressionsWithDefaultTheme = expressions\n      ? expressions.map<typeof expressions[number]>((stylesArg) =>\n        typeof stylesArg === 'function'\n          ? (props) =>\n            stylesArg({\n              ...props,\n              theme: coerceWithDefaultTheme(props.theme),\n            })\n          : stylesArg,\n      )\n      : [];\n\n    let transformedStyleArg = styleArg;\n\n    /*\n     * Here we get the style overrides from the user\n     */\n    if (componentName && componentSlot) {\n      expressionsWithDefaultTheme.push((props) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        const styleOverrides = getStyleOverrides(componentName, theme);\n        if (styleOverrides) {\n          return [styleOverrides[componentSlot]];\n        }\n        return null;\n      });\n    }\n\n    /*\n     * Here we get the variant overrides from the user (only for the root)\n     */\n    if (componentName && componentSlot === 'root') {\n      expressionsWithDefaultTheme.push((props) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n      });\n    }\n\n    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;\n\n    if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {\n      // Here we are adding placeholders for all the new functions that we are gonna call\n      const placeholders: string[] = new Array(numOfCustomFnsApplied).fill('');\n      transformedStyleArg = Object.assign([...styleArg, ...placeholders], {\n        raw: [...(styleArg as TemplateStringsArray).raw, ...placeholders],\n      });\n    } else if (typeof styleArg === 'function') {\n      // Here we just coerce with the default theme\n      transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n    }\n    let Component = styled_component(tag);\n\n    const displayName =\n      componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n    if (displayName !== null) {\n      Component = Component.attrs({ className: `${componentName}${componentSlot}` } as unknown as Partial<\n        StyledComponentPropsWithRef<typeof tag>\n      >);\n    }\n\n    Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n  return func;\n};\n\nconst styledObject = Object.keys(styled_component).reduce((obj, key) => {\n  const castedKey = key as keyof JSX.IntrinsicElements;\n  obj[castedKey] = styledFunction(castedKey);\n  return obj;\n}, {} as StyledObject);\n\nexport const styled: Styled = Object.assign(styledFunction, styledObject);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AACA;AAEA,MAAM,iBAAiC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,WAAW;AACpF,QAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,gBAAgB,SAAS;AACnE,QAAM,OAAmC,CAAC,aAAa,gBAAgB;AAMrE,UAAM,8BAA8B,cAChC,YAAY,IAAgC,CAAC,cAC7C,OAAO,cAAc,aACjB,CAAC,UACD,UAAU,iCACL,QADK;AAAA,MAER,OAAO,uBAAuB,MAAM;AAAA,UAEtC,aAEJ;AAEJ,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,uBAAuB,MAAM;AAC3C,cAAM,iBAAiB,kBAAkB,eAAe;AACxD,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe;AAAA;AAEzB,eAAO;AAAA;AAAA;AAOX,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,uBAAuB,MAAM;AAC3C,eAAO,iBAAiB,OAAO,iBAAiB,eAAe,QAAQ,OAAO;AAAA;AAAA;AAIlF,UAAM,wBAAwB,4BAA4B,SAAS,YAAY;AAE/E,QAAI,MAAM,QAAQ,aAAa,wBAAwB,GAAG;AAExD,YAAM,eAAyB,IAAI,MAAM,uBAAuB,KAAK;AACrE,4BAAsB,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,eAAe;AAAA,QAClE,KAAK,CAAC,GAAI,SAAkC,KAAK,GAAG;AAAA;AAAA,eAE7C,OAAO,aAAa,YAAY;AAEzC,4BAAsB,CAAC,UAAU,SAAS,iCAAK,QAAL,EAAY,OAAO,uBAAuB,MAAM;AAAA;AAE5F,QAAI,YAAY,iBAAiB;AAEjC,UAAM,cACJ,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE3F,QAAI,gBAAgB,MAAM;AACxB,kBAAY,UAAU,MAAM,EAAE,WAAW,GAAG,gBAAgB;AAAA;AAK9D,gBAAY,UAAU,qBAAqB,GAAG;AAE9C,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA;AAG1B,WAAO;AAAA;AAET,SAAO;AAAA;AAGT,MAAM,eAAe,OAAO,KAAK,kBAAkB,OAAO,CAAC,KAAK,QAAQ;AACtE,QAAM,YAAY;AAClB,MAAI,aAAa,eAAe;AAChC,SAAO;AAAA,GACN;AAEI,MAAM,SAAiB,OAAO,OAAO,gBAAgB;",
+  "names": []
+}

package/dist/esm/styled/styleGetters.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { propsToClassKey } from "./utils";
+const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
+const getVariantStyles = (name, theme) => {
+  const variants = theme.components?.[name]?.variants || [];
+  return variants.reduce((styles, definition) => {
+    const key = propsToClassKey(definition.props);
+    styles[key] = definition.style;
+    return styles;
+  }, {});
+};
+const variantsResolver = (props, styles, theme, name) => {
+  const themeVariants = theme?.components?.[name]?.variants || [];
+  return themeVariants.reduce((variantsStyles, themeVariant) => {
+    const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);
+    if (isMatch) {
+      variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+    }
+    return variantsStyles;
+  }, []);
+};
+export {
+  getStyleOverrides,
+  getVariantStyles,
+  variantsResolver
+};
+//# sourceMappingURL=styleGetters.js.map

package/dist/esm/styled/styleGetters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styleGetters.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme, CSSObject } from './types';\nimport { propsToClassKey } from './utils';\n\nexport const getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce((styles, definition) => {\n    const key = propsToClassKey(definition.props);\n    styles[key] = definition.style;\n    return styles;\n  }, {} as Record<string, CSSObject>);\n};\n\nexport const variantsResolver = (\n  props: Record<string, unknown>,\n  styles: CSSObject,\n  theme: Theme,\n  name: string,\n): CSSObject[keyof CSSObject][] => {\n  const themeVariants = theme?.components?.[name]?.variants || [];\n\n  return themeVariants.reduce((variantsStyles, themeVariant) => {\n    const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n    if (isMatch) {\n      variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);\n    }\n    return variantsStyles;\n  }, [] as CSSObject[keyof CSSObject][]);\n};\n"],
+  "mappings": "AAAA;ACEA;AAEO,MAAM,oBAAoB,CAAC,MAAc,UAC9C,MAAM,aAAa,OAAO,kBAAkB;AAEvC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AACzF,QAAM,WAAW,MAAM,aAAa,OAAO,YAAY;AAEvD,SAAO,SAAS,OAAO,CAAC,QAAQ,eAAe;AAC7C,UAAM,MAAM,gBAAgB,WAAW;AACvC,WAAO,OAAO,WAAW;AACzB,WAAO;AAAA,KACN;AAAA;AAGE,MAAM,mBAAmB,CAC9B,OACA,QACA,OACA,SACiC;AACjC,QAAM,gBAAgB,OAAO,aAAa,OAAO,YAAY;AAE7D,SAAO,cAAc,OAAO,CAAC,gBAAgB,iBAAiB;AAC5D,UAAM,UAAU,OAAO,KAAK,aAAa,OAAO,MAAM,CAAC,QAAQ,MAAM,SAAS,aAAa,MAAM;AACjG,QAAI,SAAS;AACX,qBAAe,KAAK,OAAO,gBAAgB,aAAa;AAAA;AAE1D,WAAO;AAAA,KACN;AAAA;",
+  "names": []
+}

package/dist/esm/styled/types.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { CSSObject as CSSObject2 } from "styled-components";
+export {
+  CSSObject2 as CSSObject
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/styled/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport {\n  AnyStyledComponent,\n  CSSObject,\n  Interpolation,\n  InterpolationFunction,\n  StyledComponent,\n  StyledComponentInnerAttrs,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n  StyledConfig,\n} from 'styled-components';\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\nexport { CSSObject } from 'styled-components';\n\nexport interface Theme extends PuiTheme {\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\nexport type ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> = <U extends object = Record<string, unknown>>(\n  first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n  attrs<\n    U,\n    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n      [others: string]: any;\n    } = any,\n  >(\n    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n  withConfig: <Props extends O = O>(\n    config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n  ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\ntype ThemedStyledComponentFactories<T extends object> = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, T>;\n};\n\nexport type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options?: { name: string | null; slot: string | null },\n) => ThemedStyledFunction<\n  C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n  Theme,\n  C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n  C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type StyledObject = ThemedStyledComponentFactories<Theme>;\n\nexport type Styled = StyledFunction & StyledObject;\n"],
+  "mappings": "AAAA;ACkBA;",
+  "names": []
+}

package/dist/esm/styled/utils.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { capitalize } from "@elliemae/ds-utilities";
+import { theme as defaultTheme } from "../theme";
+const systemTheme = defaultTheme;
+const isEmpty = (string) => string.length === 0;
+const coerceWithDefaultTheme = (themeInput) => themeInput ?? systemTheme;
+const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, key) => {
+  if (key === "color") {
+    return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));
+  }
+  return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+}, "");
+export {
+  coerceWithDefaultTheme,
+  isEmpty,
+  propsToClassKey
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/styled/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { capitalize } from '@elliemae/ds-utilities';\nimport type { Theme } from './types';\nimport { theme as defaultTheme } from '../theme';\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme): Theme => themeInput ?? systemTheme;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAA6B,cAAc;AAE3E,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,OACT,OACA,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,WAAW,QAAQ,OAAO,aAAa,OAAO,MAAM,QAAQ,WAAW,OAAO,MAAM;AAAA;AAE7F,SAAO,GAAG,WAAW,QAAQ,OAAO,aAAa,MAAM,WAAW,OAAO,WAAW,MAAM,KAAK;AAAA,GAC9F;",
+  "names": []
+}

package/dist/esm/th.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+const th = (property) => {
+  const thGetter = (value, dfault = "") => {
+    const func = ({ theme }) => {
+      const parts = value.split("-");
+      let result = theme[property];
+      parts.forEach((part) => {
+        if (result)
+          result = result[part];
+      });
+      return result ?? dfault;
+    };
+    return func;
+  };
+  return thGetter;
+};
+th.space = th("space");
+th.fontSize = th("fontSizes");
+th.fontWeight = th("fontWeights");
+th.lineHeight = th("lineHeights");
+th.letterSpacing = th("letterSpacings");
+th.font = th("fonts");
+th.color = th("colors");
+th.breakpoint = th("breakpoints");
+th.media = th("media");
+export {
+  th
+};
+//# sourceMappingURL=th.js.map

package/dist/esm/th.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/th.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/pui-theme';\ntype ThGetter = (value: string, dfault?: string) => ({ theme }: { theme: Theme }) => string;\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n};\n\nexport const th: ThConstructor = (property): ThGetter => {\n  const thGetter: ThGetter = (value, dfault = '') => {\n    const func: ReturnType<ThGetter> = ({ theme }) => {\n      const parts = value.split('-');\n      let result = theme[property];\n      parts.forEach((part) => {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n        if (result) result = result[part as keyof typeof result];\n      });\n      return (result as unknown as string) ?? dfault;\n    };\n    return func;\n  };\n  return thGetter;\n};\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\n"],
+  "mappings": "AAAA;ACcO,MAAM,KAAoB,CAAC,aAAuB;AACvD,QAAM,WAAqB,CAAC,OAAO,SAAS,OAAO;AACjD,UAAM,OAA6B,CAAC,EAAE,YAAY;AAChD,YAAM,QAAQ,MAAM,MAAM;AAC1B,UAAI,SAAS,MAAM;AACnB,YAAM,QAAQ,CAAC,SAAS;AAEtB,YAAI;AAAQ,mBAAS,OAAO;AAAA;AAE9B,aAAQ,UAAgC;AAAA;AAE1C,WAAO;AAAA;AAET,SAAO;AAAA;AAET,GAAG,QAAQ,GAAG;AACd,GAAG,WAAW,GAAG;AACjB,GAAG,aAAa,GAAG;AACnB,GAAG,aAAa,GAAG;AACnB,GAAG,gBAAgB,GAAG;AACtB,GAAG,OAAO,GAAG;AACb,GAAG,QAAQ,GAAG;AACd,GAAG,aAAa,GAAG;AACnB,GAAG,QAAQ,GAAG;",
+  "names": []
+}

package/dist/esm/theme.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { getDefaultTheme } from "@elliemae/pui-theme";
+const theme = getDefaultTheme();
+export {
+  theme
+};
+//# sourceMappingURL=theme.js.map

package/dist/esm/theme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/theme.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getDefaultTheme } from '@elliemae/pui-theme';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const theme = getDefaultTheme() as Theme;\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,QAAQ;",
+  "names": []
+}

package/dist/esm/themeProviderHOC.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "./theme";
+const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ React2.createElement(ThemeProvider, {
+  theme
+}, /* @__PURE__ */ React2.createElement(Component, __spreadValues({}, props)));
+export {
+  themeProviderHOC
+};
+//# sourceMappingURL=themeProviderHOC.js.map

package/dist/esm/themeProviderHOC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/themeProviderHOC.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => (\n  props: Record<string, unknown>,\n): JSX.Element => (\n  <ThemeProvider theme={theme}>\n    <Component {...props} />\n  </ThemeProvider>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEO,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,qCAAC,eAAD;AAAA,EAAe;AAAA,GACb,qCAAC,WAAD,mBAAe;",
+  "names": []
+}