@elliemae/ds-system 3.0.0-next.7 → 3.0.0-next.72

package/dist/cjs/spaceUtilities.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/spaceUtilities.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAoB;AACpB,mBAAsB;AAEf,gBAAgB,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,QAAQ,SAAS,UAAU,OAAO,QAAQ,SAAS;AAAO,WAAO;AAC5E,SAAO,GAAG,mBAAM,MAAM;AAAA;AAGjB,mBAAmB,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,mBAAM,MAAM;AAAA;AAGjB,kBAAkB,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,WAAO,uBAAI,oBAAO,SAAS,GAAG,uBAAI,oBAAO,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,uBAAI,oBAAO;AAAQ,WAAO,GAAG,uBAAI,oBAAO;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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAoB;AACpB,mBAAsB;AAEf,gBAAgB,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAAG,WAAO;AAC5E,SAAO,GAAG,mBAAM,MAAM;AACxB;AAEO,mBAAmB,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,mBAAM,MAAM;AACxB;AAEO,kBAAkB,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,WAAO,uBAAI,oBAAO,KAAK,IAAI,GAAG,uBAAI,oBAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,wBACL,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,CAAC,QAAQ,UAAU,MAAM,KAAK;AACjG,SAAO,QAAQ,SAAS,KAAK,QAAQ,UAAU,MAAM;AACvD;AAEO,kBAAkB,OAAiE;AACxF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAC7D,SAAO,SAAS,KAAK;AACvB;AAEO,qBAAqB,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAE;AAC3D,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK;AAChC;AACO,iBAAiB,OAAgC;AACtD,MAAI,uBAAI,oBAAO,KAAK;AAAG,WAAO,GAAG,uBAAI,oBAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,yBAAyB,MAA8C;AAC5E,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAG,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC;AAC9E,WAAO,YAAY,IAAgB;AAAA,EACrC;AACA,SAAO,QAAQ,IAAI;AACrB;",
   "names": []
 }

package/dist/cjs/th.js

@@ -4,46 +4,66 @@ 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 });
+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 target;
+  return to;
 };
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var th_exports = {};
 __export(th_exports, {
+  hexToRgba: () => hexToRgba,
   th: () => th
 });
+module.exports = __toCommonJS(th_exports);
 var React = __toESM(require("react"));
+const hexToRgba = (hex, alpha) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
+  }
+  return ``;
+};
+const colorGetter = (value, dfault = "") => ({ theme }) => {
+  const colorValues = value.split("-");
+  if (colorValues.length === 1)
+    return colorValues[0];
+  if (colorValues.length > 3)
+    return dfault;
+  const [colorType, colorValue, alpha] = colorValues;
+  const themeColor = theme.colors && theme.colors[colorType][colorValue];
+  if (!themeColor)
+    return dfault;
+  if (alpha) {
+    const alphaFloatingNumber = `0.${alpha.slice(1)}`;
+    return hexToRgba(themeColor, alphaFloatingNumber);
+  }
+  return themeColor;
+};
+const genericGetter = (property) => (value, dfault = "") => ({ theme }) => {
+  const parts = value.split("-");
+  let result = theme[property];
+  parts.forEach((part) => {
+    if (result)
+      result = result[part];
+  });
+  return result ?? dfault;
+};
 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;
+  switch (property) {
+    case "colors":
+      return colorGetter;
+    default:
+      return genericGetter(property);
+  }
 };
 th.space = th("space");
 th.fontSize = th("fontSizes");
@@ -54,5 +74,4 @@ th.font = th("fonts");
 th.color = th("colors");
 th.breakpoint = th("breakpoints");
 th.media = th("media");
-module.exports = __toCommonJS(th_exports);
 //# sourceMappingURL=th.js.map

package/dist/cjs/th.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/th.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADchB,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;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: { theme: Theme }) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\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\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  (value: string, dfault = ''): ThemeStringGetter =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAkBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,YAAY;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,SAAS;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,WAAW;AAE3D,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA,EAC9B,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ;AAAA,SACD;AACH,aAAO;AAAA;AAEP,aAAO,cAAc,QAAQ;AAAA;AAEnC;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;",
   "names": []
 }

package/dist/cjs/theme.js

@@ -4,33 +4,26 @@ 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 });
+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 target;
+  return to;
 };
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var theme_exports = {};
 __export(theme_exports, {
   theme: () => theme
 });
+module.exports = __toCommonJS(theme_exports);
 var React = __toESM(require("react"));
 var import_pui_theme = require("@elliemae/pui-theme");
 const theme = (0, import_pui_theme.getDefaultTheme)();
-module.exports = __toCommonJS(theme_exports);
 //# sourceMappingURL=theme.js.map

package/dist/cjs/theme.js.map

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

package/dist/cjs/themeProviderHOC.js

@@ -18,37 +18,33 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-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 });
+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 target;
+  return to;
 };
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var themeProviderHOC_exports = {};
 __export(themeProviderHOC_exports, {
   themeProviderHOC: () => themeProviderHOC
 });
+module.exports = __toCommonJS(themeProviderHOC_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_styled_components = require("styled-components");
+var import_styled_components = require("@xstyled/styled-components");
 var import_theme = require("./theme");
-const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
-  theme: import_theme.theme
-}, /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, props)));
-module.exports = __toCommonJS(themeProviderHOC_exports);
+const themeProviderHOC = (Component) => {
+  const WrappedComponent = (props) => /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
+    theme: import_theme.theme
+  }, /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, props)));
+  return WrappedComponent;
+};
 //# sourceMappingURL=themeProviderHOC.js.map

package/dist/cjs/themeProviderHOC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themeProviderHOC.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,mDAAC,wCAAD;AAAA,EAAe,OAAO;AAAA,GACpB,mDAAC,WAAD,mBAAe;",
+  "sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from '@xstyled/styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => {\n  const WrappedComponent = (props: Record<string, unknown>): JSX.Element => (\n    <ThemeProvider theme={theme}>\n      <Component {...props} />\n    </ThemeProvider>\n  );\n  return WrappedComponent;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,mDAAC;AAAA,IAAc,OAAO;AAAA,KACpB,mDAAC,8BAAc,MAAO,CACxB;AAEF,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/utils.js

@@ -4,27 +4,20 @@ 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 });
+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 target;
+  return to;
 };
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(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,
@@ -34,8 +27,6 @@ __export(utils_exports, {
   buttonLink: () => buttonLink,
   clearFocus: () => clearFocus,
   color: () => color,
-  createGlobalStyle: () => import_styled_components.createGlobalStyle,
-  css: () => import_styled_components.css,
   disabled: () => disabled,
   fakeActive: () => fakeActive,
   fakeBorder: () => fakeBorder,
@@ -45,7 +36,7 @@ __export(utils_exports, {
   hover: () => hover,
   iconColor: () => iconColor,
   keyframes: () => keyframes,
-  kfrm: () => import_styled_components.keyframes,
+  kfrm: () => import_styled_components2.keyframes,
   onlyFirefox: () => onlyFirefox,
   onlySafari: () => onlySafari,
   onlySafariAndFirefox: () => onlySafariAndFirefox,
@@ -54,17 +45,19 @@ __export(utils_exports, {
   textStyle: () => textStyle,
   transition: () => transition,
   truncate: () => truncate,
-  useTheme: () => import_styled_components.useTheme,
-  withTheme: () => import_styled_components.withTheme
+  useTheme: () => import_styled_components2.useTheme,
+  withTheme: () => import_styled_components2.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("styled-components");
+var import_styled_components2 = require("@xstyled/styled-components");
 var import_theme = require("./theme");
 var import_mobileUtilities = require("./mobileUtilities");
+var import_th = require("./th");
 function truncate(width) {
-  return (props) => import_styled_components.css`
+  return (props) => import_styled_components2.css`
     ${!!width || props.width ? `width: ${props.width || width};` : ""}
     white-space: nowrap;
     overflow: hidden;
@@ -85,7 +78,7 @@ function disabled() {
   `;
 }
 function keyframes(obj) {
-  return import_styled_components.keyframes`${(0, import_lodash.reduce)(obj, (result, value, key) => `
+  return import_styled_components2.keyframes`${(0, import_lodash.reduce)(obj, (result, value, key) => `
     ${result}
     ${key}% {
       ${value}
@@ -97,21 +90,21 @@ 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]};
+  return import_styled_components2.css`
+    color: ${import_th.th.color(`${variant}-${type}`)};
   `;
 }
 function border(color2 = import_theme.theme.colors.brand[600], size = "1px", type = "solid") {
   return `${size} ${type} ${color2}`;
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
-  return (props) => import_styled_components.css`
+  return (props) => import_styled_components2.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`
+  return () => import_styled_components2.css`
     outline: none;
     border: 1px solid ${color2};
     box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color2)};
@@ -119,7 +112,7 @@ function focus(color2 = import_theme.theme.colors.brand[600]) {
   `;
 }
 function focusAfter(color2) {
-  return import_styled_components.css`
+  return import_styled_components2.css`
     outline: none;
     position: relative;
     &:after {
@@ -136,14 +129,14 @@ function focusAfter(color2) {
   `;
 }
 function active() {
-  return (props) => import_styled_components.css`
+  return (props) => import_styled_components2.css`
     outline: none;
     border: 1px solid ${props.theme.colors.brand[700]};
     border-radius: 2px;
   `;
 }
 function hover() {
-  return (props) => import_styled_components.css`
+  return (props) => import_styled_components2.css`
     outline: 1px solid ${props.theme.colors.brand[600]};
     outline-offset: -1px;
   `;
@@ -215,7 +208,7 @@ function textStyle(type, weight = "regular") {
         break;
       case "link":
         cssVar += `
-        line-height: ${props.theme.xl};
+        line-height: ${props.theme.space.xl};
         color: ${props.theme.colors.brand[600]};
         cursor: pointer;
       `;
@@ -225,18 +218,18 @@ function textStyle(type, weight = "regular") {
   };
 }
 function iconColor(variant = "neutral", type = 400) {
-  return import_styled_components.css`
-    fill: ${(props) => props.theme.colors[variant][type]};
+  return import_styled_components2.css`
+    fill: ${import_th.th.color(`${variant}-${type}`)};
   `;
 }
 function fakeBorder() {
-  return import_styled_components.css`
+  return import_styled_components2.css`
     box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
     border-radius: 2px;
   `;
 }
 function fakeActive() {
-  return import_styled_components.css`
+  return import_styled_components2.css`
     outline: none;
     box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
     border-radius: 2px;
@@ -260,7 +253,7 @@ function transition(t = "all 1s ease") {
     transition: ${t};
   `;
 }
-const onlySafariAndFirefox = (styles) => import_styled_components.css`
+const onlySafariAndFirefox = (styles) => import_styled_components2.css`
   @media not all and (min-resolution: 0.001dpcm) {
     ${styles}
   }
@@ -290,5 +283,4 @@ const safariAndFirefoxBold = (color2) => `
     -webkit-text-stroke: 0.4px ${color2};
   }
 `;
-module.exports = __toCommonJS(utils_exports);
 //# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\n\nexport { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };\n\nexport function truncate(width?: string) {\n  return (props) => css`\n    ${!!width || props.width ? `width: ${props.width || width};` : ''}\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n}\n\nexport function flexCenter(): string {\n  return `\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  `;\n}\n\nexport function disabled(): string {\n  return `\n    cursor: not-allowed;\n    pointer-events: none;\n  `;\n}\n\nexport function keyframes(obj: Record<string, unknown>): Keyframes {\n  return kfrm`${reduce(\n    obj,\n    (result, value, key) => `\n    ${result}\n    ${key}% {\n      ${value}\n    }\n  `,\n    '',\n  )}\n  `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n  return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\nexport function color(variant = 'neutral', type = 400) {\n  return css`\n    color: ${(props) => props.theme.colors[variant][type]};\n  `;\n}\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n  return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n  return (props) => css`\n    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n      ${props.animationTimingFn || animationTimingFn};\n  `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n  return () => css`\n    outline: none;\n    border: 1px solid ${color};\n    box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n    border-radius: 2px;\n  `;\n}\n\nexport function focusAfter(color: string) {\n  return css`\n    outline: none;\n    position: relative;\n    &:after {\n      content: '';\n      z-index: 10;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      ${focus(color)}\n    }\n  `;\n}\n\nexport function active() {\n  return (props) => css`\n    outline: none;\n    border: 1px solid ${props.theme.colors.brand[700]};\n    border-radius: 2px;\n  `;\n}\n\nexport function hover() {\n  return (props) => css`\n    outline: 1px solid ${props.theme.colors.brand[600]};\n    outline-offset: -1px;\n  `;\n}\n\nexport function textStyle(type: string, weight = 'regular') {\n  // eslint-disable-next-line complexity\n  return (props): string => {\n    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n    // eslint-disable-next-line default-case\n    switch (type) {\n      case 'h1':\n        cssVar += `\n        font-size: ${toMobile('2.7692rem')};\n        line-height: normal;\n      `;\n        break;\n      case 'h2':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[800])};\n        line-height: normal;\n      `;\n        break;\n      case 'h3':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[700])};\n        line-height: 1.2;\n      `;\n        break;\n      case 'h4':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[600])};\n        line-height: normal;\n      `;\n        break;\n      case 'h5':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[500])};\n        line-height: normal;\n      `;\n        break;\n      case 'section-header':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[500])};\n        line-height: normal;\n        text-transform: uppercase;\n      `;\n        break;\n      case 'body':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[400])};\n        line-height: normal;\n      `;\n        break;\n      case 'body-small':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[300])};\n        line-height: normal;\n      `;\n        break;\n      case 'body-micro':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n        line-height: normal;\n      `;\n        break;\n      case 'list':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[400])};\n        line-height: normal;\n      `;\n        break;\n      case 'link':\n        cssVar += `\n        line-height: ${props.theme.xl};\n        color: ${props.theme.colors.brand[600]};\n        cursor: pointer;\n      `;\n        break;\n    }\n    return cssVar;\n  };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n  return css`\n    fill: ${(props) => props.theme.colors[variant][type]};\n  `;\n}\n\nexport function fakeBorder() {\n  return css`\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n    border-radius: 2px;\n  `;\n}\n\nexport function fakeActive() {\n  return css`\n    outline: none;\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n    border-radius: 2px;\n  `;\n}\n\nexport function clearFocus(): string {\n  return `\n    border: none;\n    box-shadow: none;\n  `;\n}\n\nexport function buttonLink(): string {\n  return `\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n  return `\n    transition: ${t};\n  `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): string => css`\n  @media not all and (min-resolution: 0.001dpcm) {\n    ${styles}\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    ${styles}\n  }\n`;\n\nexport const onlySafari = (styles: string): string => `\n    @media not all and (min-resolution: 0.001dpcm) {\n      ${styles}\n    }\n  `;\n\nexport const onlyFirefox = (styles: string): string => `\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ${styles}\n    }\n  `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\n  @media not all and (min-resolution: 0.001dpcm) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ${color};\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ${color};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "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 { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\nimport { th } from './th';\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\nexport 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": []
 }

package/dist/esm/arithmetic.js

@@ -1,6 +1,11 @@
 import * as React from "react";
 function getNumberAndUnit(numberStrWithUnit) {
-  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
+  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) {
@@ -8,15 +13,15 @@ function op(operator, n1, n2) {
   const { number: number2, unit: unit2 } = getNumberAndUnit(n2);
   switch (operator) {
     case "*":
-      return Number(number) * Number(number2) + (unit || unit2);
+      return `${Number(number) * Number(number2)}${unit || unit2}`;
     case "+":
-      return Number(number) + Number(number2) + (unit || unit2);
+      return `${Number(number) + Number(number2)}${unit || unit2}`;
     case "-":
-      return Number(number) - Number(number2) + (unit || unit2);
+      return `${Number(number) - Number(number2)}${unit || unit2}`;
     case "/":
-      return Number(number) / Number(number2) + (unit || unit2);
+      return `${Number(number) / Number(number2)}${unit || unit2}`;
     default:
-      return Number(number) + Number(number2) + (unit || unit2);
+      return `${Number(number) + Number(number2)}${unit || unit2}`;
   }
 }
 export {

package/dist/esm/arithmetic.js.map

@@ -1,7 +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;",
+  "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;ACAO,0BAA0B,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,YAAY,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,SAAS,iBAAiB,EAAE;AAC5C,QAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,iBAAiB,EAAE;AAC5D,UAAQ;AAAA,SACD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,SAClD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,SAClD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,SAClD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA;AAErD,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA;AAE3D;",
   "names": []
 }

package/dist/esm/constants.js.map

@@ -2,6 +2,6 @@
   "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;",
+  "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;AACV;",
   "names": []
 }

package/dist/esm/ds-styled/index.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+export * from "./styled";
+import { layout, space, flexboxes, grids, boxShadow } from "@xstyled/system";
+export * from "./utilities/border";
+export * from "./utilities/background";
+export * from "./utilities/sizing";
+export {
+  boxShadow as boxShadows,
+  flexboxes,
+  grids,
+  layout,
+  space
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ds-styled/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './styled';\n\nexport { layout, space, flexboxes, grids, boxShadow as boxShadows } from '@xstyled/system';\nexport * from './utilities/border';\nexport * from './utilities/background';\nexport * from './utilities/sizing';\n"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AACA;AACA;",
+  "names": []
+}