@elliemae/ds-system 3.16.0 → 3.16.1

package/dist/cjs/ds-styled/utilities/space.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/ds-styled/utilities/space.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/space.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { space as xstyledSpace, type StyleGenerator } from '@xstyled/system';\nimport type { SpaceProps } from '../types';\n\nexport const space = xstyledSpace as unknown as StyleGenerator<SpaceProps>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA2D;AAGpD,MAAM,QAAQ,cAAAA;",
+  "sourcesContent": ["import { space as xstyledSpace, type StyleGenerator } from '@xstyled/system';\nimport type { SpaceProps } from '../types.js';\n\nexport const space = xstyledSpace as unknown as StyleGenerator<SpaceProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA2D;AAGpD,MAAM,QAAQ,cAAAA;",
   "names": ["xstyledSpace"]
 }

package/dist/cjs/globalStyles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -28,8 +32,8 @@ __export(globalStyles_exports, {
 });
 module.exports = __toCommonJS(globalStyles_exports);
 var React = __toESM(require("react"));
-var import_ds_styled = require("./ds-styled");
-var import_th = require("./th");
+var import_ds_styled = require("./ds-styled/index.js");
+var import_th = require("./th.js");
 const GlobalStyles = import_ds_styled.createGlobalStyle`
   :root, body {
     overscroll-behavior-y: none;

package/dist/cjs/globalStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/globalStyles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createGlobalStyle } from './ds-styled';\nimport { th } from './th';\n\nexport const GlobalStyles = createGlobalStyle<{ device: 'desktop' | 'mobile' }>`\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  /* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAkC;AAClC,gBAAmB;AAEZ,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAW,MAAM,WAAW,YAAY,SAAS;AAAA;AAAA,wBAE3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOjD,aAAG,WAAW,SAAS;AAAA,aAC7B,aAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { createGlobalStyle } from './ds-styled/index.js';\nimport { th } from './th.js';\n\nexport const GlobalStyles = createGlobalStyle<{ device: 'desktop' | 'mobile' }>`\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  /* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAkC;AAClC,gBAAmB;AAEZ,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAW,MAAM,WAAW,YAAY,SAAS;AAAA;AAAA,wBAE3C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOjD,aAAG,WAAW,SAAS;AAAA,aAC7B,aAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/index.js

@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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
 ));
@@ -34,16 +38,16 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./globalStyles"), module.exports);
-__reExport(src_exports, require("./spaceUtilities"), module.exports);
-__reExport(src_exports, require("./mobileUtilities"), module.exports);
-__reExport(src_exports, require("./utils"), module.exports);
-__reExport(src_exports, require("./arithmetic"), module.exports);
-__reExport(src_exports, require("./th"), module.exports);
-__reExport(src_exports, require("./theme"), module.exports);
-__reExport(src_exports, require("./ds-styled"), module.exports);
+__reExport(src_exports, require("./globalStyles.js"), module.exports);
+__reExport(src_exports, require("./spaceUtilities.js"), module.exports);
+__reExport(src_exports, require("./mobileUtilities.js"), module.exports);
+__reExport(src_exports, require("./utils.js"), module.exports);
+__reExport(src_exports, require("./arithmetic.js"), module.exports);
+__reExport(src_exports, require("./th.js"), module.exports);
+__reExport(src_exports, require("./theme.js"), module.exports);
+__reExport(src_exports, require("./ds-styled/index.js"), module.exports);
 var import_system = require("@xstyled/system");
-var import_themeProviderHOC = require("./themeProviderHOC");
+var import_themeProviderHOC = require("./themeProviderHOC.js");
 var import_styled_components = require("@xstyled/styled-components");
-var import_xStyledWrapper = require("./xStyledWrapper");
+var import_xStyledWrapper = require("./xStyledWrapper.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './globalStyles';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './ds-styled';\nexport { position, typography } from '@xstyled/system';\nexport { themeProviderHOC } from './themeProviderHOC';\nexport { ThemeContext } from '@xstyled/styled-components';\nexport { xStyledCommonProps, XStyledWrapper } from './xStyledWrapper';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2BAAd;AACA,wBAAc,6BADd;AAEA,wBAAc,8BAFd;AAGA,wBAAc,oBAHd;AAIA,wBAAc,yBAJd;AAKA,wBAAc,iBALd;AAMA,wBAAc,oBANd;AAOA,wBAAc,wBAPd;AAQA,oBAAqC;AACrC,8BAAiC;AACjC,+BAA6B;AAC7B,4BAAmD;",
+  "sourcesContent": ["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 './ds-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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;AACA,wBAAc,gCADd;AAEA,wBAAc,iCAFd;AAGA,wBAAc,uBAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,oBALd;AAMA,wBAAc,uBANd;AAOA,wBAAc,iCAPd;AAQA,oBAAqC;AACrC,8BAAiC;AACjC,+BAA6B;AAC7B,4BAAmD;",
   "names": []
 }

package/dist/cjs/mobileUtilities.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -32,8 +36,8 @@ __export(mobileUtilities_exports, {
 module.exports = __toCommonJS(mobileUtilities_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_theme = require("./theme");
-var import_constants = require("./constants");
+var import_theme = require("./theme.js");
+var import_constants = require("./constants.js");
 function __UNSAFE_SPACE_TO_DIMSUM(unit) {
   if (unit in import_constants.translateUnits)
     return import_constants.translateUnits[unit];

package/dist/cjs/mobileUtilities.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/mobileUtilities.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport { 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 (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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,mBAAsB;AACtB,uBAAgE;AAGzD,SAAS,yBAAyB,MAAsB;AAC7D,MAAI,QAAQ;AAAgB,WAAO,gCAAe;AAClD,SAAO,GAAI,WAAW,IAAI,KAAK,kCAAiB,oCAAoB;AACtE;AAEO,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,OAAO,mBAAM,YAAY,OAAO,MAAM,IAAI,EAAE,EAAE,IAAI,OAAO,cAAc;AAChF;AAEO,SAAS,SAAS,MAAsB;AAC7C,MAAI,CAAC,SAAS;AAAG,WAAO;AACxB,SAAO,GAAG,WAAW,IAAI,KAAK,mCAAkB;AAClD;AAEO,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,SAAS,CAAC;AAExD,8BAAU,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;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,mBAAsB;AACtB,uBAAgE;AAGzD,SAAS,yBAAyB,MAAsB;AAC7D,MAAI,QAAQ;AAAgB,WAAO,gCAAe,IAAmC;AACrF,SAAO,GAAI,WAAW,IAAI,KAAK,kCAAiB,oCAAoB;AACtE;AAEO,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,OAAO,mBAAM,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,mCAAkB;AAClD;AAEO,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,SAAS,CAAC;AAExD,8BAAU,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/cjs/package.json

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

package/dist/cjs/spaceUtilities.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -36,7 +40,7 @@ __export(spaceUtilities_exports, {
 module.exports = __toCommonJS(spaceUtilities_exports);
 var React = __toESM(require("react"));
 var import_lodash = require("lodash");
-var import_theme = require("./theme");
+var import_theme = require("./theme.js");
 function mapGap(gutter) {
   if (!gutter)
     return "0rem";

package/dist/cjs/spaceUtilities.js.map

@@ -1,7 +1,7 @@
 {
   "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 (width === 'fit-content') return width;\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;AAAA;ACAA,YAAuB;ADAvB,oBAAoB;AACpB,mBAAsB;AAEf,SAAS,OAAO,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,SAAS,UAAU,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,mBAAM,MAAM;AACxB;AAEO,SAAS,SAAS,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,eAAO,mBAAI,oBAAO,KAAK,IAAI,OAAG,mBAAI,oBAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,SAAS,eACd,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,UAAU;AAAe,WAAO;AACpC,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,SAAS,SAAS,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,SAAS,YAAY,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,SAAS,QAAQ,OAAgC;AACtD,UAAI,mBAAI,oBAAO,KAAK;AAAG,WAAO,OAAG,mBAAI,oBAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,SAAS,gBAAgB,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;",
+  "sourcesContent": ["import { get } from 'lodash';\nimport { theme } from './theme.js';\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 (width === 'fit-content') return width;\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;AAAA;ACAA,YAAuB;ADAvB,oBAAoB;AACpB,mBAAsB;AAEf,SAAS,OAAO,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,MAAkC;AAC1D;AAEO,SAAS,UAAU,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,mBAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,SAAS,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,eAAO,mBAAI,oBAAO,KAAK,IAAI,OAAG,mBAAI,oBAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,SAAS,eACd,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,UAAU;AAAe,WAAO;AACpC,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,SAAS,SAAS,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,SAAS,YAAY,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,SAAS,QAAQ,OAAgC;AACtD,UAAI,mBAAI,oBAAO,KAAK;AAAG,WAAO,OAAG,mBAAI,oBAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,SAAS,gBAAgB,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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/th.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/th.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './ds-styled';\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 }: PropsWithTheme) => 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  zIndex: 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');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,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;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,aAAa;AAE7D,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,MAAM,MAAM;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,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;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;AACrB,GAAG,SAAS,GAAG,QAAQ;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './ds-styled/index.js';\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 }: PropsWithTheme) => 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  zIndex: 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');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY,CAAC;AAElD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,SAAS,IAAI,UAAU;AAEvE,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,MAAM,MAAM;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM,QAAQ;AAC3B,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO,IAA2B;AAAA,EACzD,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;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;AACrB,GAAG,SAAS,GAAG,QAAQ;",
   "names": []
 }

package/dist/cjs/theme.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

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;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAGzB,MAAM,YAAQ,kCAAgB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAGzB,MAAM,YAAQ,kCAAgB;",
   "names": []
 }

package/dist/cjs/themeProviderHOC.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -30,7 +34,7 @@ module.exports = __toCommonJS(themeProviderHOC_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_styled_components = require("@xstyled/styled-components");
-var import_theme = require("./theme");
+var import_theme = require("./theme.js");
 const themeProviderHOC = (Component) => {
   const WrappedComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme: import_theme.theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) });
   return WrappedComponent;

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 '@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;ADOjB;AANN,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,4CAAC,0CAAc,OAAO,oBACpB,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEF,SAAO;AACT;",
+  "sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\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;ADOjB;AANN,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,4CAAC,0CAAc,OAAO,oBACpB,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEF,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/utils.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -56,9 +60,9 @@ 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");
-var import_mobileUtilities = require("./mobileUtilities");
-var import_th = require("./th");
+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};` : ""}

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 @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';\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\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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",
+  "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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -30,29 +34,29 @@ __export(xStyledWrapper_exports, {
 });
 module.exports = __toCommonJS(xStyledWrapper_exports);
 var React = __toESM(require("react"));
-var import__ = require(".");
+var import_index = require("./index.js");
 var import_system = require("@xstyled/system");
-const XStyledWrapper = (0, import__.styled)("div")`
-  ${import__.typography}
-  ${import__.layout}
-  ${import__.space}
-  ${import__.sizing}
-  ${import__.background}
-  ${import__.borders}
-  ${import__.boxShadows}
-  ${import__.flexboxes}
-  ${import__.color}
+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__.typography,
-  import__.background,
-  import__.borders,
-  import__.sizing,
-  import__.space,
-  import__.boxShadows,
-  import__.flexboxes,
-  import__.layout,
-  import__.color
+  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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/xStyledWrapper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, typography, background, borders, sizing, space, boxShadows, flexboxes, layout, color } from '.';\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,eAA6G;AAG7G,oBAAwB;AAEjB,MAAM,qBAAiB,iBAAO,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;",
+  "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/ds-styled/attributes.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { displayNameToKebabCase } from "./utilities";
+import { displayNameToKebabCase } from "./utilities/index.js";
 const generateAttributes = (displayName) => {
   const generator = (props) => {
     const attributes = {};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ds-styled/attributes.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSStyledConfig } from './types';\nimport type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport { displayNameToKebabCase } from './utilities';\n\ntype AttrsFunc = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<Record<string, unknown>>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nconst generateAttributes = (displayName: string | null): AttrsFunc => {\n  const generator: AttrsFunc = (props) => {\n    const attributes: ReturnType<AttrsFunc> = {};\n    if (displayName) {\n      // We add the className, useful for variants\n      attributes.className = displayName;\n\n      // We add an autocalculated data-testid if not present\n      attributes['data-testid'] = (props['data-testid'] as string) ?? displayNameToKebabCase(displayName);\n    }\n    return attributes;\n  };\n  return generator;\n};\n\nexport const generateAutoCalculatedProperties = (options: DSStyledConfig) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n  const attributes = generateAttributes(displayName);\n\n  return { displayName, attributes };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,8BAA8B;AAMvC,MAAM,qBAAqB,CAAC,gBAA0C;AACpE,QAAM,YAAuB,CAAC,UAAU;AACtC,UAAM,aAAoC,CAAC;AAC3C,QAAI,aAAa;AAEf,iBAAW,YAAY;AAGvB,iBAAW,iBAAkB,MAAM,kBAA6B,uBAAuB,WAAW;AAAA,IACpG;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,mCAAmC,CAAC,YAA4B;AAC3E,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,QAAM,cAAc,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE7G,QAAM,aAAa,mBAAmB,WAAW;AAEjD,SAAO,EAAE,aAAa,WAAW;AACnC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSStyledConfig } from './types.js';\nimport type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport { displayNameToKebabCase } from './utilities/index.js';\n\ntype AttrsFunc = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<Record<string, unknown>>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nconst generateAttributes = (displayName: string | null): AttrsFunc => {\n  const generator: AttrsFunc = (props) => {\n    const attributes: ReturnType<AttrsFunc> = {};\n    if (displayName) {\n      // We add the className, useful for variants\n      attributes.className = displayName;\n\n      // We add an autocalculated data-testid if not present\n      attributes['data-testid'] = (props['data-testid'] as string) ?? displayNameToKebabCase(displayName);\n    }\n    return attributes;\n  };\n  return generator;\n};\n\nexport const generateAutoCalculatedProperties = (options: DSStyledConfig) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n  const attributes = generateAttributes(displayName);\n\n  return { displayName, attributes };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,8BAA8B;AAMvC,MAAM,qBAAqB,CAAC,gBAA0C;AACpE,QAAM,YAAuB,CAAC,UAAU;AACtC,UAAM,aAAoC,CAAC;AAC3C,QAAI,aAAa;AAEf,iBAAW,YAAY;AAGvB,iBAAW,aAAa,IAAK,MAAM,aAAa,KAAgB,uBAAuB,WAAW;AAAA,IACpG;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,mCAAmC,CAAC,YAA4B;AAC3E,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,QAAM,cAAc,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE7G,QAAM,aAAa,mBAAmB,WAAW;AAEjD,SAAO,EAAE,aAAa,WAAW;AACnC;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-export * from "./styled";
+export * from "./styled.js";
 import { layout, flexboxes, grids, boxShadow, fontSize } from "@xstyled/system";
-export * from "./utilities";
-export * from "./types";
+export * from "./utilities/index.js";
+export * from "./types.js";
 export {
   boxShadow as boxShadows,
   flexboxes,

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

@@ -1,7 +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';\nexport { layout, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities';\nexport * from './types';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './styled.js';\nexport { layout, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities/index.js';\nexport * from './types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,QAAQ,WAAW,OAAoB,WAAY,gBAAgB;AAC5E,cAAc;AACd,cAAc;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { createCss } from "@xstyled/styled-components";
 import { system, compose } from "@xstyled/system";
-import { generateAutoCalculatedProperties } from "./attributes";
+import { generateAutoCalculatedProperties } from "./attributes.js";
 import {
   checkNamingConvention,
   coerceWithDefaultTheme,
@@ -10,7 +10,7 @@ import {
   getVariantStyles,
   stylesArgThemeCoercion,
   variantsResolver
-} from "./utilities";
+} from "./utilities/index.js";
 const { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));
 const styledFunction = (tag, options = { name: null, slot: null }) => {
   const { name: componentName, slot: componentSlot } = options;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ds-styled/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/unbound-method */\n/* eslint-disable complexity */\nimport { createCss } from '@xstyled/styled-components';\nimport { system, compose } from '@xstyled/system';\nimport { generateAutoCalculatedProperties } from './attributes';\nimport type { DSStyledFunction, DSStyledFunctionInternal, DSStyledObject, PropsWithTheme } from './types';\nimport {\n  checkNamingConvention,\n  coerceWithDefaultTheme,\n  getStyleOverrides,\n  magicCssTransform,\n  getVariantStyles,\n  stylesArgThemeCoercion,\n  variantsResolver,\n} from './utilities';\n\nconst { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));\n\n// @ts-ignore\nconst styledFunction: DSStyledFunction = (tag, options = { name: null, slot: null }) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // @ts-ignore\n  const defaultStyledResolver = baseStyledComponent(tag);\n\n  const styledAttributes = {\n    attrs: defaultStyledResolver.attrs,\n    withConfig: defaultStyledResolver.withConfig,\n  };\n\n  // @ts-ignore\n  const dimsumStyledResolver: DSStyledFunctionInternal = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\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 = expressionsWithMagic ? expressionsWithMagic.map(stylesArgThemeCoercion) : [];\n\n    let transformedStyleArg = styleArgWithMagic;\n\n    /*\n     * Here we get the style overrides from the user\n     */\n    if (componentName && componentSlot) {\n      expressionsWithDefaultTheme.push((props: PropsWithTheme) => {\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: PropsWithTheme) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n      });\n    }\n\n    // Here we will fix format of the style argument (since we added more things from the variants and overrides)\n    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressionsWithMagic.length;\n\n    if (Array.isArray(styleArgWithMagic) && numOfCustomFnsApplied > 0) {\n      // Here we are adding placeholders for all the new functions that we are gonna call\n      const placeholders = new Array(numOfCustomFnsApplied).fill('') as string[];\n      transformedStyleArg = Object.assign([...styleArgWithMagic, ...placeholders], {\n        raw: [...(styleArgWithMagic as TemplateStringsArray).raw, ...placeholders],\n      });\n    } else if (typeof styleArgWithMagic === 'function') {\n      // Here we just coerce with the default theme\n      transformedStyleArg = (props: PropsWithTheme) =>\n        styleArgWithMagic({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n    }\n\n    // We add autocalculated attributes to the styled component\n    const { displayName, attributes } = generateAutoCalculatedProperties(options);\n    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(attributes);\n\n    const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dimsumStyledResolver, styledAttributes);\n};\n\n// Here we create an object with the IntrinsicElements keys pointing to the styledFunction\nconst styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {\n  const castedKey = key as keyof JSX.IntrinsicElements;\n  obj[castedKey] = styledFunction(castedKey);\n  return obj;\n}, {} as DSStyledObject);\n\nexport const styled = Object.assign(styledFunction, styledObject);\nexport { css, createGlobalStyle };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACMvB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,eAAe;AAChC,SAAS,wCAAwC;AAEjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,EAAE,KAAK,QAAQ,qBAAqB,kBAAkB,IAAI,UAAU,QAAQ,MAAM,CAAC;AAGzF,MAAM,iBAAmC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,KAAK,MAAM;AACtF,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAGlD,QAAM,wBAAwB,oBAAoB,GAAG;AAErD,QAAM,mBAAmB;AAAA,IACvB,OAAO,sBAAsB;AAAA,IAC7B,YAAY,sBAAsB;AAAA,EACpC;AAGA,QAAM,uBAAiD,CAAC,aAAa,gBAAgB;AAInF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,WAAW;AAOzF,UAAM,8BAA8B,uBAAuB,qBAAqB,IAAI,sBAAsB,IAAI,CAAC;AAE/G,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAA0B;AAC1D,cAAM,QAAQ,uBAAuB,MAAM,KAAK;AAChD,cAAM,iBAAiB,kBAAkB,eAAe,KAAK;AAC7D,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe,cAAc;AAAA,QACvC;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAKA,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAA0B;AAC1D,cAAM,QAAQ,uBAAuB,MAAM,KAAK;AAChD,eAAO,iBAAiB,OAAO,iBAAiB,eAAe,KAAK,GAAG,OAAO,aAAa;AAAA,MAC7F,CAAC;AAAA,IACH;AAGA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,QAAI,MAAM,QAAQ,iBAAiB,KAAK,wBAAwB,GAAG;AAEjE,YAAM,eAAe,IAAI,MAAM,qBAAqB,EAAE,KAAK,EAAE;AAC7D,4BAAsB,OAAO,OAAO,CAAC,GAAG,mBAAmB,GAAG,YAAY,GAAG;AAAA,QAC3E,KAAK,CAAC,GAAI,kBAA2C,KAAK,GAAG,YAAY;AAAA,MAC3E,CAAC;AAAA,IACH,WAAW,OAAO,sBAAsB,YAAY;AAElD,4BAAsB,CAAC,UACrB,kBAAkB,EAAE,GAAG,OAAO,OAAO,uBAAuB,MAAM,KAAK,EAAE,CAAC;AAAA,IAC9E;AAGA,UAAM,EAAE,aAAa,WAAW,IAAI,iCAAiC,OAAO;AAC5E,UAAM,qCAAqC,sBAAsB,MAAM,UAAU;AAEjF,UAAM,YAAY,mCAAmC,qBAAqB,GAAG,2BAA2B;AAExG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,sBAAsB,gBAAgB;AAC7D;AAGA,MAAM,eAAe,OAAO,KAAK,mBAAmB,EAAE,OAAO,CAAC,KAAK,QAAQ;AACzE,QAAM,YAAY;AAClB,MAAI,aAAa,eAAe,SAAS;AACzC,SAAO;AACT,GAAG,CAAC,CAAmB;AAEhB,MAAM,SAAS,OAAO,OAAO,gBAAgB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/unbound-method */\n/* eslint-disable complexity */\nimport { createCss } from '@xstyled/styled-components';\nimport { system, compose } from '@xstyled/system';\nimport { generateAutoCalculatedProperties } from './attributes.js';\nimport type { DSStyledFunction, DSStyledFunctionInternal, DSStyledObject, PropsWithTheme } from './types.js';\nimport {\n  checkNamingConvention,\n  coerceWithDefaultTheme,\n  getStyleOverrides,\n  magicCssTransform,\n  getVariantStyles,\n  stylesArgThemeCoercion,\n  variantsResolver,\n} from './utilities/index.js';\n\nconst { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));\n\n// @ts-ignore\nconst styledFunction: DSStyledFunction = (tag, options = { name: null, slot: null }) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // @ts-ignore\n  const defaultStyledResolver = baseStyledComponent(tag);\n\n  const styledAttributes = {\n    attrs: defaultStyledResolver.attrs,\n    withConfig: defaultStyledResolver.withConfig,\n  };\n\n  // @ts-ignore\n  const dimsumStyledResolver: DSStyledFunctionInternal = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\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 = expressionsWithMagic ? expressionsWithMagic.map(stylesArgThemeCoercion) : [];\n\n    let transformedStyleArg = styleArgWithMagic;\n\n    /*\n     * Here we get the style overrides from the user\n     */\n    if (componentName && componentSlot) {\n      expressionsWithDefaultTheme.push((props: PropsWithTheme) => {\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: PropsWithTheme) => {\n        const theme = coerceWithDefaultTheme(props.theme);\n        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n      });\n    }\n\n    // Here we will fix format of the style argument (since we added more things from the variants and overrides)\n    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressionsWithMagic.length;\n\n    if (Array.isArray(styleArgWithMagic) && numOfCustomFnsApplied > 0) {\n      // Here we are adding placeholders for all the new functions that we are gonna call\n      const placeholders = new Array(numOfCustomFnsApplied).fill('') as string[];\n      transformedStyleArg = Object.assign([...styleArgWithMagic, ...placeholders], {\n        raw: [...(styleArgWithMagic as TemplateStringsArray).raw, ...placeholders],\n      });\n    } else if (typeof styleArgWithMagic === 'function') {\n      // Here we just coerce with the default theme\n      transformedStyleArg = (props: PropsWithTheme) =>\n        styleArgWithMagic({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n    }\n\n    // We add autocalculated attributes to the styled component\n    const { displayName, attributes } = generateAutoCalculatedProperties(options);\n    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(attributes);\n\n    const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dimsumStyledResolver, styledAttributes);\n};\n\n// Here we create an object with the IntrinsicElements keys pointing to the styledFunction\nconst styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {\n  const castedKey = key as keyof JSX.IntrinsicElements;\n  obj[castedKey] = styledFunction(castedKey);\n  return obj;\n}, {} as DSStyledObject);\n\nexport const styled = Object.assign(styledFunction, styledObject);\nexport { css, createGlobalStyle };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,eAAe;AAChC,SAAS,wCAAwC;AAEjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,EAAE,KAAK,QAAQ,qBAAqB,kBAAkB,IAAI,UAAU,QAAQ,MAAM,CAAC;AAGzF,MAAM,iBAAmC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,KAAK,MAAM;AACtF,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAGlD,QAAM,wBAAwB,oBAAoB,GAAG;AAErD,QAAM,mBAAmB;AAAA,IACvB,OAAO,sBAAsB;AAAA,IAC7B,YAAY,sBAAsB;AAAA,EACpC;AAGA,QAAM,uBAAiD,CAAC,aAAa,gBAAgB;AAInF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,WAAW;AAOzF,UAAM,8BAA8B,uBAAuB,qBAAqB,IAAI,sBAAsB,IAAI,CAAC;AAE/G,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAA0B;AAC1D,cAAM,QAAQ,uBAAuB,MAAM,KAAK;AAChD,cAAM,iBAAiB,kBAAkB,eAAe,KAAK;AAC7D,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe,aAAa,CAAC;AAAA,QACvC;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAKA,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAA0B;AAC1D,cAAM,QAAQ,uBAAuB,MAAM,KAAK;AAChD,eAAO,iBAAiB,OAAO,iBAAiB,eAAe,KAAK,GAAG,OAAO,aAAa;AAAA,MAC7F,CAAC;AAAA,IACH;AAGA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,QAAI,MAAM,QAAQ,iBAAiB,KAAK,wBAAwB,GAAG;AAEjE,YAAM,eAAe,IAAI,MAAM,qBAAqB,EAAE,KAAK,EAAE;AAC7D,4BAAsB,OAAO,OAAO,CAAC,GAAG,mBAAmB,GAAG,YAAY,GAAG;AAAA,QAC3E,KAAK,CAAC,GAAI,kBAA2C,KAAK,GAAG,YAAY;AAAA,MAC3E,CAAC;AAAA,IACH,WAAW,OAAO,sBAAsB,YAAY;AAElD,4BAAsB,CAAC,UACrB,kBAAkB,EAAE,GAAG,OAAO,OAAO,uBAAuB,MAAM,KAAK,EAAE,CAAC;AAAA,IAC9E;AAGA,UAAM,EAAE,aAAa,WAAW,IAAI,iCAAiC,OAAO;AAC5E,UAAM,qCAAqC,sBAAsB,MAAM,UAAU;AAEjF,UAAM,YAAY,mCAAmC,qBAAqB,GAAG,2BAA2B;AAExG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,sBAAsB,gBAAgB;AAC7D;AAGA,MAAM,eAAe,OAAO,KAAK,mBAAmB,EAAE,OAAO,CAAC,KAAK,QAAQ;AACzE,QAAM,YAAY;AAClB,MAAI,SAAS,IAAI,eAAe,SAAS;AACzC,SAAO;AACT,GAAG,CAAC,CAAmB;AAEhB,MAAM,SAAS,OAAO,OAAO,gBAAgB,YAAY;",
   "names": []
 }

package/dist/esm/ds-styled/utilities/background.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { style, compose } from "@xstyled/system";
-import { th } from "../../th";
+import { th } from "../../th.js";
 const bgColorGetter = (value) => (props) => `${th.color(value, value)(props)}`;
 bgColorGetter.meta = {};
 const bg = style({