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

package/dist/esm/{styled/index.js → ds-styled/styled.js}

@@ -18,16 +18,28 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import styled_component from "styled-components";
-import { getStyleOverrides, getVariantStyles, variantsResolver } from "./styleGetters";
-import { coerceWithDefaultTheme } from "./utils";
+import { createCss } from "@xstyled/styled-components";
+import { system, compose } from "@xstyled/system";
+import {
+  coerceWithDefaultTheme,
+  getStyleOverrides,
+  magicCssTransform,
+  getVariantStyles,
+  stylesArgThemeCoercion,
+  variantsResolver
+} from "./utilities";
+const { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));
 const styledFunction = (tag, options = { name: null, slot: null }) => {
-  const { name: componentName = null, slot: componentSlot = null } = options;
-  const func = (styleArg, ...expressions) => {
-    const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => typeof stylesArg === "function" ? (props) => stylesArg(__spreadProps(__spreadValues({}, props), {
-      theme: coerceWithDefaultTheme(props.theme)
-    })) : stylesArg) : [];
-    let transformedStyleArg = styleArg;
+  const { name: componentName, slot: componentSlot } = options;
+  const defaultStyledResolver = baseStyledComponent(tag);
+  const attributes = {
+    attrs: defaultStyledResolver.attrs,
+    withConfig: defaultStyledResolver.withConfig
+  };
+  const dimsumStyledResolver = (styleArg, ...expressions) => {
+    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);
+    const expressionsWithDefaultTheme = expressionsWithMagic ? expressionsWithMagic.map(stylesArgThemeCoercion) : [];
+    let transformedStyleArg = styleArgWithMagic;
     if (componentName && componentSlot) {
       expressionsWithDefaultTheme.push((props) => {
         const theme = coerceWithDefaultTheme(props.theme);
@@ -44,35 +56,35 @@ const styledFunction = (tag, options = { name: null, slot: null }) => {
         return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
       });
     }
-    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-    if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressionsWithMagic.length;
+    if (Array.isArray(styleArgWithMagic) && numOfCustomFnsApplied > 0) {
       const placeholders = new Array(numOfCustomFnsApplied).fill("");
-      transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
-        raw: [...styleArg.raw, ...placeholders]
+      transformedStyleArg = Object.assign([...styleArgWithMagic, ...placeholders], {
+        raw: [...styleArgWithMagic.raw, ...placeholders]
       });
-    } else if (typeof styleArg === "function") {
-      transformedStyleArg = (props) => styleArg(__spreadProps(__spreadValues({}, props), { theme: coerceWithDefaultTheme(props.theme) }));
+    } else if (typeof styleArgWithMagic === "function") {
+      transformedStyleArg = (props) => styleArgWithMagic(__spreadProps(__spreadValues({}, props), { theme: coerceWithDefaultTheme(props.theme) }));
     }
-    let Component = styled_component(tag);
     const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
-    if (displayName !== null) {
-      Component = Component.attrs({ className: `${componentName}${componentSlot}` });
-    }
-    Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
+    const classNameObject = displayName !== null ? { className: displayName } : {};
+    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(classNameObject);
+    const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);
     if (displayName !== null) {
       Component.displayName = displayName;
     }
     return Component;
   };
-  return func;
+  return Object.assign(dimsumStyledResolver, attributes);
 };
-const styledObject = Object.keys(styled_component).reduce((obj, key) => {
+const styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {
   const castedKey = key;
   obj[castedKey] = styledFunction(castedKey);
   return obj;
 }, {});
 const styled = Object.assign(styledFunction, styledObject);
 export {
+  createGlobalStyle,
+  css,
   styled
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +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 { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport { DSStyledFunction, DSStyledFunctionInternal, DSStyledObject, PropsWithTheme } from './types';\nimport {\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  const defaultStyledResolver = baseStyledComponent(tag);\n\n  const attributes = {\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\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    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    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n    const classNameObject = displayName !== null ? { className: displayName } : {};\n\n    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(\n      classNameObject as unknown as Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>,\n    );\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, attributes);\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;ACMA;AACA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAM,EAAE,KAAK,QAAQ,qBAAqB,sBAAsB,UAAU,QAAQ,MAAM,CAAC;AAGzF,MAAM,iBAAmC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,KAAK,MAAM;AACtF,QAAM,EAAE,MAAM,eAAe,MAAM,kBAAkB;AAErD,QAAM,wBAAwB,oBAAoB,GAAG;AAErD,QAAM,aAAa;AAAA,IACjB,OAAO,sBAAsB;AAAA,IAC7B,YAAY,sBAAsB;AAAA,EACpC;AAGA,QAAM,uBAAiD,CAAC,aAAa,gBAAgB;AAKnF,UAAM,CAAC,mBAAmB,wBAAwB,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;AAEA,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,iCAAK,QAAL,EAAY,OAAO,uBAAuB,MAAM,KAAK,EAAE,EAAC;AAAA,IAC9E;AAEA,UAAM,cAAc,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE7G,UAAM,kBAAkB,gBAAgB,OAAO,EAAE,WAAW,YAAY,IAAI,CAAC;AAE7E,UAAM,qCAAqC,sBAAsB,MAC/D,eACF;AAEA,UAAM,YAAY,mCAAmC,qBAAqB,GAAG,2BAA2B;AAExG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,sBAAsB,UAAU;AACvD;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;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { style, compose } from "@xstyled/system";
+import { th } from "../../th";
+function bgColorGetter(value) {
+  return function(props) {
+    return `${th.color(value, value)(props)}`;
+  };
+}
+bgColorGetter.meta = {};
+const bg = style({
+  prop: ["backgroundColor", "bg"],
+  css: "background-color",
+  themeGet: bgColorGetter
+});
+const background = compose(bg);
+export {
+  background
+};
+//# sourceMappingURL=background.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/background.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { GetterProps, ThProps } from '../types';\n\nfunction bgColorGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.color(value, value)(props as ThProps)}`;\n  };\n}\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n  prop: ['backgroundColor', 'bg'],\n  css: 'background-color',\n  themeGet: bgColorGetter,\n});\n\nexport const background = compose(bg);\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,uBAAuB,OAAe;AACpC,SAAO,SAAU,OAA4B;AAC3C,WAAO,GAAG,GAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAAA,EACnD;AACF;AAEA,cAAc,OAAO,CAAC;AAEtB,MAAM,KAAK,MAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,aAAa,QAAQ,EAAE;",
+  "names": []
+}

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

@@ -0,0 +1,152 @@
+import * as React from "react";
+import { style, compose } from "@xstyled/system";
+import { th } from "../../th";
+const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
+function borderGetter(value) {
+  return function(props) {
+    const color = value.match(colorReg);
+    let borderCss = ``;
+    if (color) {
+      const widthAndStyle = value.replace(color[0], "").trim();
+      borderCss = `${th.color(color[0])(props)} ${widthAndStyle}`;
+    } else {
+      borderCss = value;
+    }
+    return borderCss;
+  };
+}
+borderGetter.meta = {};
+function borderColorGetter(value) {
+  return function(props) {
+    return `${th.color(value, value)(props)}`;
+  };
+}
+borderColorGetter.meta = {};
+function borderStyleGetter(value) {
+  return function(props) {
+    return value;
+  };
+}
+borderStyleGetter.meta = {};
+function borderWidthGetter(value) {
+  return function(props) {
+    return `${th.space(value, value)(props)}`;
+  };
+}
+borderWidthGetter.meta = {};
+function borderRadiusGetter(value) {
+  return function(props) {
+    return `${th.space(value, value)(props)}`;
+  };
+}
+borderRadiusGetter.meta = {};
+const border = style({
+  prop: "border",
+  css: "border",
+  themeGet: borderGetter
+});
+const borderTop = style({
+  prop: "borderTop",
+  css: "border-top",
+  themeGet: borderGetter
+});
+const borderBottom = style({
+  prop: "borderBottom",
+  css: "border-bottom",
+  themeGet: borderGetter
+});
+const borderRight = style({
+  prop: "borderRight",
+  css: "border-right",
+  themeGet: borderGetter
+});
+const borderLeft = style({
+  prop: "borderLeft",
+  css: "border-left",
+  themeGet: borderGetter
+});
+const borderColor = style({
+  prop: "borderColor",
+  css: "border-color",
+  themeGet: borderColorGetter
+});
+const borderTopColor = style({
+  prop: "borderTopColor",
+  css: "border-top-color",
+  themeGet: borderColorGetter
+});
+const borderBottomColor = style({
+  prop: "borderBottomColor",
+  css: "border-bottom-color",
+  themeGet: borderColorGetter
+});
+const borderRightColor = style({
+  prop: "borderRightColor",
+  css: "border-right-color",
+  themeGet: borderColorGetter
+});
+const borderLeftColor = style({
+  prop: "borderLeftColor",
+  css: "border-left-color",
+  themeGet: borderColorGetter
+});
+const borderStyle = style({
+  prop: "borderStyle",
+  css: "border-style",
+  themeGet: borderStyleGetter
+});
+const borderTopStyle = style({
+  prop: "borderTopStyle",
+  css: "border-top-style",
+  themeGet: borderStyleGetter
+});
+const borderBottomStyle = style({
+  prop: "borderBottomStyle",
+  css: "border-bottom-style",
+  themeGet: borderStyleGetter
+});
+const borderRightStyle = style({
+  prop: "borderRightStyle",
+  css: "border-right-style",
+  themeGet: borderStyleGetter
+});
+const borderLeftStyle = style({
+  prop: "borderLeftStyle",
+  css: "border-left-style",
+  themeGet: borderStyleGetter
+});
+const borderWidth = style({
+  prop: "borderWidth",
+  css: "border-width",
+  themeGet: borderWidthGetter
+});
+const borderTopWidth = style({
+  prop: "borderTopWidth",
+  css: "border-top-width",
+  themeGet: borderWidthGetter
+});
+const borderBottomWidth = style({
+  prop: "borderBottomWidth",
+  css: "border-bottom-width",
+  themeGet: borderWidthGetter
+});
+const borderRightWidth = style({
+  prop: "borderRightWidth",
+  css: "border-right-width",
+  themeGet: borderWidthGetter
+});
+const borderLeftWidth = style({
+  prop: "borderLeftWidth",
+  css: "border-left-width",
+  themeGet: borderWidthGetter
+});
+const borderRadius = style({
+  prop: "borderRadius",
+  css: "border-radius",
+  themeGet: borderRadiusGetter
+});
+const borders = compose(border, borderTop, borderBottom, borderLeft, borderRight, borderColor, borderTopColor, borderBottomColor, borderLeftColor, borderRightColor, borderStyle, borderTopStyle, borderBottomStyle, borderLeftStyle, borderRightStyle, borderWidth, borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderRadius);
+export {
+  borders
+};
+//# sourceMappingURL=border.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/border.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { GetterProps, ThProps } from '../types';\n\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nfunction borderGetter(value: string) {\n  return function (props: GetterProps): string {\n    const color = value.match(colorReg);\n    let borderCss = ``;\n\n    if (color) {\n      const widthAndStyle = value.replace(color[0], '').trim();\n      borderCss = `${th.color(color[0])(props as ThProps)} ${widthAndStyle}`;\n    } else {\n      borderCss = value;\n    }\n\n    return borderCss;\n  };\n}\n\nborderGetter.meta = {};\n\nfunction borderColorGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.color(value, value)(props as ThProps)}`;\n  };\n}\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n  return function (props: GetterProps): string {\n    return value;\n  };\n}\n\nborderStyleGetter.meta = {};\n\nfunction borderWidthGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.space(value, value)(props as ThProps)}`;\n  };\n}\n\nborderWidthGetter.meta = {};\n\nfunction borderRadiusGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.space(value, value)(props as ThProps)}`;\n  };\n}\n\nborderRadiusGetter.meta = {};\n\nconst border = style({\n  prop: 'border',\n  css: 'border',\n  themeGet: borderGetter,\n});\n\nconst borderTop = style({\n  prop: 'borderTop',\n  css: 'border-top',\n  themeGet: borderGetter,\n});\n\nconst borderBottom = style({\n  prop: 'borderBottom',\n  css: 'border-bottom',\n  themeGet: borderGetter,\n});\n\nconst borderRight = style({\n  prop: 'borderRight',\n  css: 'border-right',\n  themeGet: borderGetter,\n});\n\nconst borderLeft = style({\n  prop: 'borderLeft',\n  css: 'border-left',\n  themeGet: borderGetter,\n});\n\nconst borderColor = style({\n  prop: 'borderColor',\n  css: 'border-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderTopColor = style({\n  prop: 'borderTopColor',\n  css: 'border-top-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderBottomColor = style({\n  prop: 'borderBottomColor',\n  css: 'border-bottom-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderRightColor = style({\n  prop: 'borderRightColor',\n  css: 'border-right-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderLeftColor = style({\n  prop: 'borderLeftColor',\n  css: 'border-left-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderStyle = style({\n  prop: 'borderStyle',\n  css: 'border-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderTopStyle = style({\n  prop: 'borderTopStyle',\n  css: 'border-top-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderBottomStyle = style({\n  prop: 'borderBottomStyle',\n  css: 'border-bottom-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderRightStyle = style({\n  prop: 'borderRightStyle',\n  css: 'border-right-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderLeftStyle = style({\n  prop: 'borderLeftStyle',\n  css: 'border-left-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderWidth = style({\n  prop: 'borderWidth',\n  css: 'border-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderTopWidth = style({\n  prop: 'borderTopWidth',\n  css: 'border-top-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderBottomWidth = style({\n  prop: 'borderBottomWidth',\n  css: 'border-bottom-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRightWidth = style({\n  prop: 'borderRightWidth',\n  css: 'border-right-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderLeftWidth = style({\n  prop: 'borderLeftWidth',\n  css: 'border-left-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRadius = style({\n  prop: 'borderRadius',\n  css: 'border-radius',\n  themeGet: borderRadiusGetter,\n});\n\nexport const borders = compose(\n  border,\n  borderTop,\n  borderBottom,\n  borderLeft,\n  borderRight,\n  borderColor,\n  borderTopColor,\n  borderBottomColor,\n  borderLeftColor,\n  borderRightColor,\n  borderStyle,\n  borderTopStyle,\n  borderBottomStyle,\n  borderLeftStyle,\n  borderRightStyle,\n  borderWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  borderRightWidth,\n  borderRadius,\n);\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { capitalize } from "@elliemae/ds-utilities";
+import { theme as defaultTheme } from "../../theme";
+const systemTheme = defaultTheme;
+const isEmpty = (string) => string.length === 0;
+const coerceWithDefaultTheme = (themeInput) => themeInput ?? systemTheme;
+const stylesArgThemeCoercion = (stylesArg) => {
+  if (typeof stylesArg === "function") {
+    return (props) => stylesArg(__spreadProps(__spreadValues({}, props), {
+      theme: coerceWithDefaultTheme(props.theme)
+    }));
+  }
+  return stylesArg;
+};
+const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, key) => {
+  if (key === "color") {
+    return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));
+  }
+  return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+}, "");
+export {
+  coerceWithDefaultTheme,
+  isEmpty,
+  propsToClassKey,
+  stylesArgThemeCoercion
+};
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/helpers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Interpolation } from 'styled-components';\nimport { capitalize } from '@elliemae/ds-utilities';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AAEA;AAEA,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAAyC,cAAc;AAEvF,MAAM,yBAAyB,CAAC,cAAsD;AAC3F,MAAI,OAAO,cAAc,YAAY;AACnC,WAAO,CAAC,UACN,UAAU,iCACL,QADK;AAAA,MAER,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,EAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,WAAY,SAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,IAAI,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,KAAK,SAAS,CAAC;AAC3G,GAAG,EAAE;",
+  "names": []
+}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+export * from "./magicCssTransform";
+export * from "./resolvers";
+export * from "./helpers";
+export * from "./sizing";
+export * from "./border";
+export * from "./background";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { th } from "../../th";
+const COLOR_REGEX = /(neutral|brand|success|warning|danger)-(100|200|300|400|500|600|700|800|900|000|050|080)/g;
+const magicfyCss = (rawValue) => {
+  let matches;
+  let lastIndex = 0;
+  const splittedValue = [];
+  const themeGetters = [];
+  while (matches = COLOR_REGEX.exec(rawValue)) {
+    const [match] = matches;
+    splittedValue.push(rawValue.slice(lastIndex, matches.index));
+    themeGetters.push(th.color(match, match));
+    lastIndex = matches.index + match.length;
+  }
+  splittedValue.push(rawValue.slice(lastIndex, rawValue.length));
+  return [splittedValue, themeGetters];
+};
+const magicCssTransform = (styleArg, expressions) => {
+  if (!Array.isArray(styleArg))
+    return [styleArg, expressions];
+  const magicStyleArg = [];
+  const magicExpressions = [];
+  const templateStringArray = styleArg;
+  templateStringArray.forEach((templateString, index) => {
+    const [splittedTemplateString, themeGetters] = magicfyCss(templateString);
+    magicStyleArg.push(...splittedTemplateString);
+    magicExpressions.push(...themeGetters);
+    if (index < expressions.length)
+      magicExpressions.push(expressions[index]);
+  });
+  return [Object.assign(magicStyleArg, { raw: [...magicStyleArg] }), magicExpressions];
+};
+export {
+  magicCssTransform
+};
+//# sourceMappingURL=magicCssTransform.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/magicCssTransform.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 no-cond-assign */\nimport { CSSObject, Interpolation, InterpolationFunction } from 'styled-components';\nimport { th } from '../../th';\n\ntype StyleArg = CSSObject | InterpolationFunction<any> | TemplateStringsArray;\ntype Expressions = Interpolation<any>[];\ntype MagicCssTransform = (styleArg: StyleArg, expressions: Expressions) => [StyleArg, Expressions];\n\n// This file is heavily inspired by https://github.com/gregberge/xstyled/blob/c0c92b459bb3a5de46d7854be3667861f816baa5/packages/core/src/transform.ts#L65\n// Please refer to that file to understand of the idea of the css transformer\n\nconst COLOR_REGEX = /(neutral|brand|success|warning|danger)-(100|200|300|400|500|600|700|800|900|000|050|080)/g;\n\nconst magicfyCss = (rawValue: string): [string[], Interpolation<any>[]] => {\n  let matches;\n  let lastIndex = 0;\n  const splittedValue: string[] = [];\n  const themeGetters = [];\n  while ((matches = COLOR_REGEX.exec(rawValue))) {\n    const [match] = matches;\n    splittedValue.push(rawValue.slice(lastIndex, matches.index));\n\n    themeGetters.push(th.color(match, match));\n\n    lastIndex = matches.index + match.length;\n  }\n  splittedValue.push(rawValue.slice(lastIndex, rawValue.length));\n  return [splittedValue, themeGetters];\n};\n\nexport const magicCssTransform: MagicCssTransform = (styleArg, expressions) => {\n  if (!Array.isArray(styleArg)) return [styleArg, expressions];\n\n  const magicStyleArg: string[] = [];\n  const magicExpressions: Expressions = [];\n\n  const templateStringArray = styleArg as TemplateStringsArray;\n\n  templateStringArray.forEach((templateString, index) => {\n    const [splittedTemplateString, themeGetters] = magicfyCss(templateString);\n    magicStyleArg.push(...splittedTemplateString);\n    magicExpressions.push(...themeGetters);\n    if (index < expressions.length) magicExpressions.push(expressions[index]);\n  });\n\n  return [Object.assign(magicStyleArg, { raw: [...magicStyleArg] }), magicExpressions];\n};\n"],
+  "mappings": "AAAA;ACIA;AASA,MAAM,cAAc;AAEpB,MAAM,aAAa,CAAC,aAAuD;AACzE,MAAI;AACJ,MAAI,YAAY;AAChB,QAAM,gBAA0B,CAAC;AACjC,QAAM,eAAe,CAAC;AACtB,SAAQ,UAAU,YAAY,KAAK,QAAQ,GAAI;AAC7C,UAAM,CAAC,SAAS;AAChB,kBAAc,KAAK,SAAS,MAAM,WAAW,QAAQ,KAAK,CAAC;AAE3D,iBAAa,KAAK,GAAG,MAAM,OAAO,KAAK,CAAC;AAExC,gBAAY,QAAQ,QAAQ,MAAM;AAAA,EACpC;AACA,gBAAc,KAAK,SAAS,MAAM,WAAW,SAAS,MAAM,CAAC;AAC7D,SAAO,CAAC,eAAe,YAAY;AACrC;AAEO,MAAM,oBAAuC,CAAC,UAAU,gBAAgB;AAC7E,MAAI,CAAC,MAAM,QAAQ,QAAQ;AAAG,WAAO,CAAC,UAAU,WAAW;AAE3D,QAAM,gBAA0B,CAAC;AACjC,QAAM,mBAAgC,CAAC;AAEvC,QAAM,sBAAsB;AAE5B,sBAAoB,QAAQ,CAAC,gBAAgB,UAAU;AACrD,UAAM,CAAC,wBAAwB,gBAAgB,WAAW,cAAc;AACxE,kBAAc,KAAK,GAAG,sBAAsB;AAC5C,qBAAiB,KAAK,GAAG,YAAY;AACrC,QAAI,QAAQ,YAAY;AAAQ,uBAAiB,KAAK,YAAY,MAAM;AAAA,EAC1E,CAAC;AAED,SAAO,CAAC,OAAO,OAAO,eAAe,EAAE,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,gBAAgB;AACrF;",
+  "names": []
+}

package/dist/esm/{styled/styleGetters.js → ds-styled/utilities/resolvers.js}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { propsToClassKey } from "./utils";
+import { propsToClassKey } from "./helpers";
 const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
 const getVariantStyles = (name, theme) => {
   const variants = theme.components?.[name]?.variants || [];
@@ -24,4 +24,4 @@ export {
   getVariantStyles,
   variantsResolver
 };
-//# sourceMappingURL=styleGetters.js.map
+//# sourceMappingURL=resolvers.js.map

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

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

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { style, compose, getSize } from "@xstyled/system";
+const width = style({
+  prop: ["width", "w"],
+  css: "width",
+  themeGet: getSize
+});
+const height = style({
+  prop: ["height", "h"],
+  css: "height",
+  themeGet: getSize
+});
+const maxHeight = style({
+  prop: ["maxH", "maxHeight"],
+  css: "max-height",
+  themeGet: getSize
+});
+const maxWidth = style({
+  prop: ["maxW", "maxWidth"],
+  css: "max-width",
+  themeGet: getSize
+});
+const minHeight = style({
+  prop: ["minH", "minHeight"],
+  css: "min-height",
+  themeGet: getSize
+});
+const minWidth = style({
+  prop: ["minW", "minWidth"],
+  css: "min-width",
+  themeGet: getSize
+});
+const sizing = compose(width, maxWidth, height, maxHeight, minHeight, minWidth);
+export {
+  sizing
+};
+//# sourceMappingURL=sizing.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/sizing.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose, getSize } from '@xstyled/system';\n\nconst width = style({\n  prop: ['width', 'w'],\n  css: 'width',\n  themeGet: getSize,\n});\n\nconst height = style({\n  prop: ['height', 'h'],\n  css: 'height',\n  themeGet: getSize,\n});\n\nconst maxHeight = style({\n  prop: ['maxH', 'maxHeight'],\n  css: 'max-height',\n  themeGet: getSize,\n});\n\nconst maxWidth = style({\n  prop: ['maxW', 'maxWidth'],\n  css: 'max-width',\n  themeGet: getSize,\n});\n\nconst minHeight = style({\n  prop: ['minH', 'minHeight'],\n  css: 'min-height',\n  themeGet: getSize,\n});\n\nconst minWidth = style({\n  prop: ['minW', 'minWidth'],\n  css: 'min-width',\n  themeGet: getSize,\n});\n\nexport const sizing = compose(width, maxWidth, height, maxHeight, minHeight, minWidth);\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,QAAQ,MAAM;AAAA,EAClB,MAAM,CAAC,SAAS,GAAG;AAAA,EACnB,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,SAAS,MAAM;AAAA,EACnB,MAAM,CAAC,UAAU,GAAG;AAAA,EACpB,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,YAAY,MAAM;AAAA,EACtB,MAAM,CAAC,QAAQ,WAAW;AAAA,EAC1B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,WAAW,MAAM;AAAA,EACrB,MAAM,CAAC,QAAQ,UAAU;AAAA,EACzB,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,YAAY,MAAM;AAAA,EACtB,MAAM,CAAC,QAAQ,WAAW;AAAA,EAC1B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,WAAW,MAAM;AAAA,EACrB,MAAM,CAAC,QAAQ,UAAU;AAAA,EACzB,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,SAAS,QAAQ,OAAO,UAAU,QAAQ,WAAW,WAAW,QAAQ;",
+  "names": []
+}

package/dist/esm/globalStyles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createGlobalStyle } from "./utils";
+import { createGlobalStyle } from "./ds-styled";
 const GlobalStyles = createGlobalStyle`
   :root, body {
     overscroll-behavior-y: none;

package/dist/esm/globalStyles.js.map

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

package/dist/esm/index.js

@@ -6,7 +6,7 @@ export * from "./utils";
 export * from "./arithmetic";
 export * from "./th";
 export * from "./theme";
-export * from "./styled";
+export * from "./ds-styled";
 import { themeProviderHOC } from "./themeProviderHOC";
 export {
   themeProviderHOC

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './globalStyles';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './styled';\nexport { themeProviderHOC } from './themeProviderHOC';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './globalStyles';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './ds-styled';\nexport { themeProviderHOC } from './themeProviderHOC';\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
   "names": []
 }

package/dist/esm/mobileUtilities.js

@@ -3,10 +3,15 @@ import { useState, useEffect } from "react";
 import { theme } from "./theme";
 import { desktopBaseFont, mobileBaseFont, translateUnits } from "./constants";
 function __UNSAFE_SPACE_TO_DIMSUM(unit) {
-  if (translateUnits[unit])
+  if (unit in translateUnits)
     return translateUnits[unit];
   return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
 }
+const isMobile = () => {
+  if (!window)
+    return false;
+  return Number(theme.breakpoints.medium.split("px")[0]) - window.innerWidth >= 0;
+};
 function toMobile(unit) {
   if (!isMobile())
     return unit;
@@ -18,22 +23,15 @@ const useIsMobile = () => {
     function handleResize() {
       setMobile(isMobile());
     }
-    if (window)
-      window.addEventListener("resize", handleResize);
+    window?.addEventListener("resize", handleResize);
     return () => {
-      if (window)
-        window.removeEventListener("resize", handleResize);
+      window?.removeEventListener("resize", handleResize);
     };
   }, []);
   if (!window)
     return false;
   return mobile;
 };
-const isMobile = () => {
-  if (!window)
-    return false;
-  return Number(theme.breakpoints.medium.split("px")[0]) - window.innerWidth >= 0;
-};
 export {
   __UNSAFE_SPACE_TO_DIMSUM,
   isMobile,

package/dist/esm/mobileUtilities.js.map

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