@elliemae/ds-system 3.1.2 → 3.1.3

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

@@ -22,7 +22,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var ds_styled_exports = {};
 __export(ds_styled_exports, {
   boxShadows: () => import_system.boxShadow,
-  color: () => import_color.color,
   flexboxes: () => import_system.flexboxes,
   fontSize: () => import_system.fontSize,
   grids: () => import_system.grids,
@@ -33,9 +32,6 @@ module.exports = __toCommonJS(ds_styled_exports);
 var React = __toESM(require("react"));
 __reExport(ds_styled_exports, require("./styled"), module.exports);
 var import_system = require("@xstyled/system");
-__reExport(ds_styled_exports, require("./utilities/border"), module.exports);
-__reExport(ds_styled_exports, require("./utilities/background"), module.exports);
-__reExport(ds_styled_exports, require("./utilities/sizing"), module.exports);
-var import_color = require("./utilities/color");
+__reExport(ds_styled_exports, require("./utilities"), module.exports);
 __reExport(ds_styled_exports, require("./types"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ds-styled/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './styled';\n\nexport { layout, space, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities/border';\nexport * from './utilities/background';\nexport * from './utilities/sizing';\nexport { color } from './utilities/color';\n\nexport * from './types';", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,qBAAd;AAEA,oBAAmF;AACnF,8BAAc,+BAHd;AAIA,8BAAc,mCAJd;AAKA,8BAAc,+BALd;AAMA,mBAAsB;AAEtB,8BAAc,oBARd;",
+  "sourcesContent": ["export * from './styled';\nexport { layout, space, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities';\nexport * from './types';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,qBAAd;AACA,oBAAmF;AACnF,8BAAc,wBAFd;AAGA,8BAAc,oBAHd;",
   "names": []
 }

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

@@ -4,10 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -19,12 +15,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
-__export(types_exports, {
-  LayoutProps: () => import_system.LayoutProps,
-  SizingProps: () => import_system.SizingProps,
-  SpaceProps: () => import_system.SpaceProps
-});
 module.exports = __toCommonJS(types_exports);
 var React = __toESM(require("react"));
-var import_system = require("@xstyled/system");
 //# sourceMappingURL=types.js.map

package/dist/cjs/ds-styled/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ds-styled/types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyStyledComponent,\n  StyledComponentInnerAttrs,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  CSSObject,\n  StyledComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n  Interpolation,\n  InterpolationFunction,\n  StyledConfig,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\ninterface DSStyledConfig {\n  name: string | null;\n  slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> = <U extends object>(\n  first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n  // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n  // My head already hurts enough so maybe later...\n  attrs<\n    U,\n    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n      [others: string]: any;\n    } = any,\n  >(\n    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n  withConfig: <Props extends O = O>(\n    config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n  ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options?: DSStyledConfig,\n) => ThemedStyledFunction<\n  C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n  Theme,\n  C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n  C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n  ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme = { theme?: Theme } & Record<string, unknown>;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport { SpaceProps, LayoutProps, SizingProps } from '@xstyled/system';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFvB,oBAAqD;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyStyledComponent,\n  StyledComponentInnerAttrs,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  CSSObject,\n  StyledComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n  Interpolation,\n  InterpolationFunction,\n  StyledConfig,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\ninterface DSStyledConfig {\n  name: string | null;\n  slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> = <U extends object>(\n  first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n  // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n  // My head already hurts enough so maybe later...\n  attrs<\n    U,\n    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n      [others: string]: any;\n    } = any,\n  >(\n    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n  withConfig: <Props extends O = O>(\n    config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n  ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options?: DSStyledConfig,\n) => ThemedStyledFunction<\n  C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n  Theme,\n  C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n  C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n  ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme = { theme?: Theme } & Record<string, unknown>;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport type { SpaceProps, LayoutProps, SizingProps } from '@xstyled/system';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

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

@@ -29,27 +29,11 @@ var import_th = require("../../th");
 function colorGetter(value) {
   return (props) => `${import_th.th.color(value, value)(props)}`;
 }
-const cssColorGetter = (value) => {
-  if (!value)
-    return null;
-  if (typeof value === "string") {
-    return (props) => ({
-      color: colorGetter(value)(props)
-    });
-  }
-  return (props) => Object.keys(value).reduce((prev, current) => {
-    if (current === "_")
-      prev.color = colorGetter(value[current])(props);
-    else
-      prev[`&:${current}`] = { color: colorGetter(value[current])(props) };
-    return prev;
-  }, {});
-};
 colorGetter.meta = {};
 const colorStyled = (0, import_system.style)({
   prop: ["color"],
-  css: cssColorGetter,
-  cssProps: ["color"]
+  css: ["color"],
+  themeGet: colorGetter
 });
 const color = (0, import_system.compose)(colorStyled);
 //# sourceMappingURL=color.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/color.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { style, compose, CSSFromProps, CSSObject } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\nconst cssColorGetter = (value: string | Record<string, string>): CSSFromProps | null => {\n  if (!value) return null;\n  if (typeof value === 'string') {\n    return (props: PropsWithTheme) => ({\n      color: colorGetter(value)(props),\n    });\n  }\n  return (props: PropsWithTheme) =>\n    Object.keys(value).reduce((prev, current) => {\n      if (current === '_') prev.color = colorGetter(value[current])(props);\n      else prev[`&:${current}`] = { color: colorGetter(value[current])(props) };\n      return prev;\n    }, {} as CSSObject);\n};\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n  prop: ['color'],\n  css: cssColorGetter,\n  cssProps: ['color'],\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAwD;AACxD,gBAAmB;AAGnB,qBAAqB,OAAe;AAClC,SAAO,CAAC,UAAkC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,MAAM,iBAAiB,CAAC,UAAgE;AACtF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,CAAC,UAA2B;AAAA,MACjC,OAAO,YAAY,KAAK,EAAE,KAAK;AAAA,IACjC;AAAA,EACF;AACA,SAAO,CAAC,UACN,OAAO,KAAK,KAAK,EAAE,OAAO,CAAC,MAAM,YAAY;AAC3C,QAAI,YAAY;AAAK,WAAK,QAAQ,YAAY,MAAM,QAAQ,EAAE,KAAK;AAAA;AAC9D,WAAK,KAAK,aAAa,EAAE,OAAO,YAAY,MAAM,QAAQ,EAAE,KAAK,EAAE;AACxE,WAAO;AAAA,EACT,GAAG,CAAC,CAAc;AACtB;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM,CAAC,OAAO;AAAA,EACd,KAAK;AAAA,EACL,UAAU,CAAC,OAAO;AACpB,CAAC;AAEM,MAAM,QAAQ,2BAAQ,WAAW;",
+  "sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n  prop: ['color'],\n  css: ['color'],\n  themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA+B;AAC/B,gBAAmB;AAGnB,qBAAqB,OAAe;AAClC,SAAO,CAAC,UAAkC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM,CAAC,OAAO;AAAA,EACd,KAAK,CAAC,OAAO;AAAA,EACb,UAAU;AACZ,CAAC;AAEM,MAAM,QAAQ,2BAAQ,WAAW;",
   "names": []
 }

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

@@ -18,10 +18,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utilities_exports = {};
 module.exports = __toCommonJS(utilities_exports);
 var React = __toESM(require("react"));
+__reExport(utilities_exports, require("./background"), module.exports);
+__reExport(utilities_exports, require("./border"), module.exports);
+__reExport(utilities_exports, require("./color"), module.exports);
+__reExport(utilities_exports, require("./helpers"), module.exports);
 __reExport(utilities_exports, require("./magicCssTransform"), module.exports);
 __reExport(utilities_exports, require("./resolvers"), module.exports);
-__reExport(utilities_exports, require("./helpers"), module.exports);
 __reExport(utilities_exports, require("./sizing"), module.exports);
-__reExport(utilities_exports, require("./border"), module.exports);
-__reExport(utilities_exports, require("./background"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './magicCssTransform';\nexport * from './resolvers';\nexport * from './helpers';\nexport * from './sizing';\nexport * from './border';\nexport * from './background';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,gCAAd;AACA,8BAAc,wBADd;AAEA,8BAAc,sBAFd;AAGA,8BAAc,qBAHd;AAIA,8BAAc,qBAJd;AAKA,8BAAc,yBALd;",
+  "sourcesContent": ["export * from './background';\nexport * from './border';\nexport * from './color';\nexport * from './helpers';\nexport * from './magicCssTransform';\nexport * from './resolvers';\nexport * from './sizing';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,yBAAd;AACA,8BAAc,qBADd;AAEA,8BAAc,oBAFd;AAGA,8BAAc,sBAHd;AAIA,8BAAc,gCAJd;AAKA,8BAAc,wBALd;AAMA,8BAAc,qBANd;",
   "names": []
 }

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

@@ -1,14 +1,10 @@
 import * as React from "react";
 export * from "./styled";
 import { layout, space, flexboxes, grids, boxShadow, fontSize } from "@xstyled/system";
-export * from "./utilities/border";
-export * from "./utilities/background";
-export * from "./utilities/sizing";
-import { color } from "./utilities/color";
+export * from "./utilities";
 export * from "./types";
 export {
   boxShadow as boxShadows,
-  color,
   flexboxes,
   fontSize,
   grids,

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';\n\nexport { layout, space, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities/border';\nexport * from './utilities/background';\nexport * from './utilities/sizing';\nexport { color } from './utilities/color';\n\nexport * from './types';"],
-  "mappings": "AAAA;ACAA;AAEA;AACA;AACA;AACA;AACA;AAEA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './styled';\nexport { layout, space, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';\nexport * from './utilities';\nexport * from './types';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
   "names": []
 }

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

@@ -1,8 +1,2 @@
 import * as React from "react";
-import { SpaceProps, LayoutProps, SizingProps } from "@xstyled/system";
-export {
-  LayoutProps,
-  SizingProps,
-  SpaceProps
-};
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ds-styled/types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyStyledComponent,\n  StyledComponentInnerAttrs,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  CSSObject,\n  StyledComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n  Interpolation,\n  InterpolationFunction,\n  StyledConfig,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\ninterface DSStyledConfig {\n  name: string | null;\n  slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> = <U extends object>(\n  first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n  // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n  // My head already hurts enough so maybe later...\n  attrs<\n    U,\n    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n      [others: string]: any;\n    } = any,\n  >(\n    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n  withConfig: <Props extends O = O>(\n    config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n  ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options?: DSStyledConfig,\n) => ThemedStyledFunction<\n  C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n  Theme,\n  C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n  C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n  ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme = { theme?: Theme } & Record<string, unknown>;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport { SpaceProps, LayoutProps, SizingProps } from '@xstyled/system';\n"],
-  "mappings": "AAAA;ACyFA;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
   "names": []
 }

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

@@ -4,27 +4,11 @@ import { th } from "../../th";
 function colorGetter(value) {
   return (props) => `${th.color(value, value)(props)}`;
 }
-const cssColorGetter = (value) => {
-  if (!value)
-    return null;
-  if (typeof value === "string") {
-    return (props) => ({
-      color: colorGetter(value)(props)
-    });
-  }
-  return (props) => Object.keys(value).reduce((prev, current) => {
-    if (current === "_")
-      prev.color = colorGetter(value[current])(props);
-    else
-      prev[`&:${current}`] = { color: colorGetter(value[current])(props) };
-    return prev;
-  }, {});
-};
 colorGetter.meta = {};
 const colorStyled = style({
   prop: ["color"],
-  css: cssColorGetter,
-  cssProps: ["color"]
+  css: ["color"],
+  themeGet: colorGetter
 });
 const color = compose(colorStyled);
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/color.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose, CSSFromProps, CSSObject } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\nconst cssColorGetter = (value: string | Record<string, string>): CSSFromProps | null => {\n  if (!value) return null;\n  if (typeof value === 'string') {\n    return (props: PropsWithTheme) => ({\n      color: colorGetter(value)(props),\n    });\n  }\n  return (props: PropsWithTheme) =>\n    Object.keys(value).reduce((prev, current) => {\n      if (current === '_') prev.color = colorGetter(value[current])(props);\n      else prev[`&:${current}`] = { color: colorGetter(value[current])(props) };\n      return prev;\n    }, {} as CSSObject);\n};\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n  prop: ['color'],\n  css: cssColorGetter,\n  cssProps: ['color'],\n});\n\nexport const color = compose(colorStyled);\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGA,qBAAqB,OAAe;AAClC,SAAO,CAAC,UAAkC,GAAG,GAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,MAAM,iBAAiB,CAAC,UAAgE;AACtF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,CAAC,UAA2B;AAAA,MACjC,OAAO,YAAY,KAAK,EAAE,KAAK;AAAA,IACjC;AAAA,EACF;AACA,SAAO,CAAC,UACN,OAAO,KAAK,KAAK,EAAE,OAAO,CAAC,MAAM,YAAY;AAC3C,QAAI,YAAY;AAAK,WAAK,QAAQ,YAAY,MAAM,QAAQ,EAAE,KAAK;AAAA;AAC9D,WAAK,KAAK,aAAa,EAAE,OAAO,YAAY,MAAM,QAAQ,EAAE,KAAK,EAAE;AACxE,WAAO;AAAA,EACT,GAAG,CAAC,CAAc;AACtB;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,cAAc,MAAM;AAAA,EACxB,MAAM,CAAC,OAAO;AAAA,EACd,KAAK;AAAA,EACL,UAAU,CAAC,OAAO;AACpB,CAAC;AAEM,MAAM,QAAQ,QAAQ,WAAW;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n  prop: ['color'],\n  css: ['color'],\n  themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,qBAAqB,OAAe;AAClC,SAAO,CAAC,UAAkC,GAAG,GAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,cAAc,MAAM;AAAA,EACxB,MAAM,CAAC,OAAO;AAAA,EACd,KAAK,CAAC,OAAO;AAAA,EACb,UAAU;AACZ,CAAC;AAEM,MAAM,QAAQ,QAAQ,WAAW;",
   "names": []
 }

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

@@ -1,8 +1,9 @@
 import * as React from "react";
+export * from "./background";
+export * from "./border";
+export * from "./color";
+export * from "./helpers";
 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

@@ -1,7 +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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './background';\nexport * from './border';\nexport * from './color';\nexport * from './helpers';\nexport * from './magicCssTransform';\nexport * from './resolvers';\nexport * from './sizing';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -96,12 +96,12 @@
     "polished": "~3.6.7"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.5.0",
+    "@elliemae/pui-theme": "~2.6.0",
     "@testing-library/jest-dom": "~5.16.2",
     "styled-components": "~5.3.3"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.5.0",
+    "@elliemae/pui-theme": "^2.6.0",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",