@elliemae/ds-system 3.12.0 → 3.13.0-next.1

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 {\n  SpaceProps as XstyledSpace,\n  MarginProps,\n  MarginTopProps,\n  MarginRightProps,\n  MarginBottomProps,\n  MarginLeftProps,\n  MarginXProps,\n  MarginYProps,\n  PaddingProps,\n  PaddingTopProps,\n  PaddingRightProps,\n  PaddingBottomProps,\n  PaddingLeftProps,\n  PaddingXProps,\n  PaddingYProps,\n  ColorProps as XstyledColor,\n} from '@xstyled/system';\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\nexport interface 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<T = Record<string, unknown>> = { theme: Theme } & T;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type { LayoutProps, SizingProps, FontSizeProps, PositionProps, BoxShadowProps } from '@xstyled/system';\n\ninterface DummyColorTheme {\n  'neutral-100': true;\n  'neutral-200': true;\n  'neutral-300': true;\n  'neutral-400': true;\n  'neutral-500': true;\n  'neutral-600': true;\n  'neutral-700': true;\n  'neutral-800': true;\n  'neutral-000': true;\n  'neutral-050': true;\n  'neutral-080': true;\n  'brand-100': true;\n  'brand-200': true;\n  'brand-300': true;\n  'brand-400': true;\n  'brand-500': true;\n  'brand-600': true;\n  'brand-700': true;\n  'brand-800': true;\n  'success-300': true;\n  'success-900': true;\n  'warning-400': true;\n  'warning-600': true;\n  'warning-900': true;\n  'danger-200': true;\n  'danger-900': true;\n}\n\n// Redeclaring types as interfaces to prevent TS errors\n\ninterface MarginAndPaddings\n  extends MarginProps,\n    MarginTopProps,\n    MarginRightProps,\n    MarginBottomProps,\n    MarginLeftProps,\n    MarginXProps,\n    MarginYProps,\n    PaddingProps,\n    PaddingTopProps,\n    PaddingRightProps,\n    PaddingBottomProps,\n    PaddingLeftProps,\n    PaddingXProps,\n    PaddingYProps {}\n\ntype SpacePropsT = {\n  [key in keyof XstyledSpace]?: XstyledSpace[key];\n} & {\n  [key in keyof MarginAndPaddings]?: XstyledSpace[key] | keyof Theme['space'];\n};\n\ntype ColorPropsT = {\n  [key in keyof XstyledColor]?: XstyledColor[key] | keyof DummyColorTheme;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface SpaceProps extends SpacePropsT {}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ColorProps extends ColorPropsT {}\n\nexport interface BorderProps {\n  border?: string;\n  borderTop?: string;\n  borderBottom?: string;\n  borderRight?: string;\n  borderLeft?: string;\n  borderColor?: keyof DummyColorTheme;\n  borderTopColor?: keyof DummyColorTheme;\n  borderBottomColor?: keyof DummyColorTheme;\n  borderRightColor?: keyof DummyColorTheme;\n  borderLeftColor?: keyof DummyColorTheme;\n  borderStyle?: string;\n  borderTopStyle?: string;\n  borderBottomStyle?: string;\n  borderRightStyle?: string;\n  borderLeftStyle?: string;\n  borderWidth?: keyof Theme['space'];\n  borderTopWidth?: keyof Theme['space'];\n  borderBottomWidth?: keyof Theme['space'];\n  borderRightWidth?: keyof Theme['space'];\n  borderLeftWidth?: keyof Theme['space'];\n  borderRadius?: keyof Theme['space'];\n}\n\nexport interface BackgroundProps {\n  backgroundColor?: keyof DummyColorTheme;\n  bg?: keyof DummyColorTheme;\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "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 { SpaceProps as XstyledSpace, ColorProps as XstyledColor } from '@xstyled/system';\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\nexport interface 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<T = Record<string, unknown>> = { theme: Theme } & T;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type { LayoutProps, SizingProps, FontSizeProps, PositionProps, BoxShadowProps } from '@xstyled/system';\n\ninterface DummyColorTheme {\n  'neutral-100': true;\n  'neutral-200': true;\n  'neutral-300': true;\n  'neutral-400': true;\n  'neutral-500': true;\n  'neutral-600': true;\n  'neutral-700': true;\n  'neutral-800': true;\n  'neutral-000': true;\n  'neutral-050': true;\n  'neutral-080': true;\n  'brand-100': true;\n  'brand-200': true;\n  'brand-300': true;\n  'brand-400': true;\n  'brand-500': true;\n  'brand-600': true;\n  'brand-700': true;\n  'brand-800': true;\n  'success-300': true;\n  'success-900': true;\n  'warning-400': true;\n  'warning-600': true;\n  'warning-900': true;\n  'danger-200': true;\n  'danger-900': true;\n}\n\n// Redeclaring types as interfaces to prevent TS errors\ntype SpacePropsT = {\n  [key in keyof XstyledSpace]?: XstyledSpace[key] | keyof Theme['space'];\n};\n\ntype ColorPropsT = {\n  [key in keyof XstyledColor]?: XstyledColor[key] | keyof DummyColorTheme;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface SpaceProps extends SpacePropsT {}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ColorProps extends ColorPropsT {}\n\nexport interface BorderProps {\n  border?: string;\n  borderTop?: string;\n  borderBottom?: string;\n  borderRight?: string;\n  borderLeft?: string;\n  borderColor?: keyof DummyColorTheme;\n  borderTopColor?: keyof DummyColorTheme;\n  borderBottomColor?: keyof DummyColorTheme;\n  borderRightColor?: keyof DummyColorTheme;\n  borderLeftColor?: keyof DummyColorTheme;\n  borderStyle?: string;\n  borderTopStyle?: string;\n  borderBottomStyle?: string;\n  borderRightStyle?: string;\n  borderLeftStyle?: string;\n  borderWidth?: keyof Theme['space'];\n  borderTopWidth?: keyof Theme['space'];\n  borderBottomWidth?: keyof Theme['space'];\n  borderRightWidth?: keyof Theme['space'];\n  borderLeftWidth?: keyof Theme['space'];\n  borderRadius?: keyof Theme['space'];\n}\n\nexport interface BackgroundProps {\n  backgroundColor?: keyof DummyColorTheme;\n  bg?: keyof DummyColorTheme;\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

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

@@ -28,6 +28,7 @@ __export(helpers_exports, {
   displayNameToKebabCase: () => displayNameToKebabCase,
   isEmpty: () => isEmpty,
   propsToClassKey: () => propsToClassKey,
+  slotObjectToDataTestIds: () => slotObjectToDataTestIds,
   stylesArgThemeCoercion: () => stylesArgThemeCoercion
 });
 module.exports = __toCommonJS(helpers_exports);
@@ -56,4 +57,12 @@ const displayNameToKebabCase = (displayName) => {
   const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
   return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
 };
+const slotObjectToDataTestIds = (componentName, slotObject) => {
+  const obj = {};
+  Object.keys(slotObject).forEach((slotName) => {
+    const displayName = `${componentName}-${slotObject[slotName]}`;
+    obj[slotName] = displayNameToKebabCase(displayName);
+  });
+  return obj;
+};
 //# sourceMappingURL=helpers.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/helpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\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\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAsC;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc,aAAAA;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;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;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,YAAY,QAAQ,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;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\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\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n\nexport const slotObjectToDataTestIds = (\n  componentName: string,\n  slotObject: Record<string, string>,\n): Record<string, string> => {\n  const obj = {} as Record<string, string>;\n  Object.keys(slotObject).forEach((slotName) => {\n    const displayName = `${componentName}-${slotObject[slotName]}`;\n    obj[slotName] = displayNameToKebabCase(displayName);\n  });\n  return obj;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAsC;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc,aAAAA;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;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;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,YAAY,QAAQ,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;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;AAEO,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,iBAAiB,WAAW;AACnD,QAAI,YAAY,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
   "names": ["defaultTheme"]
 }

package/dist/cjs/xStyledWrapper.js

@@ -33,7 +33,6 @@ var React = __toESM(require("react"));
 var import__ = require(".");
 var import_system = require("@xstyled/system");
 const XStyledWrapper = (0, import__.styled)("div")`
-  ${import__.typography}
   ${import__.layout}
   ${import__.space}
   ${import__.sizing}
@@ -42,9 +41,9 @@ const XStyledWrapper = (0, import__.styled)("div")`
   ${import__.boxShadows}
   ${import__.flexboxes}
   ${import__.color}
+  ${import__.typography}
 `;
 const xStyledCommonProps = (0, import_system.compose)(
-  import__.typography,
   import__.background,
   import__.borders,
   import__.sizing,
@@ -52,7 +51,8 @@ const xStyledCommonProps = (0, import_system.compose)(
   import__.boxShadows,
   import__.flexboxes,
   import__.layout,
-  import__.color
+  import__.color,
+  import__.typography
 );
 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"],
+  "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  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n  ${color}\n  ${typography}\n`;\n\nexport const xStyledCommonProps = compose(\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  color,\n  typography,\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;",
   "names": []
 }

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

@@ -23,11 +23,20 @@ const displayNameToKebabCase = (displayName) => {
   const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
   return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
 };
+const slotObjectToDataTestIds = (componentName, slotObject) => {
+  const obj = {};
+  Object.keys(slotObject).forEach((slotName) => {
+    const displayName = `${componentName}-${slotObject[slotName]}`;
+    obj[slotName] = displayNameToKebabCase(displayName);
+  });
+  return obj;
+};
 export {
   coerceWithDefaultTheme,
   displayNameToKebabCase,
   isEmpty,
   propsToClassKey,
+  slotObjectToDataTestIds,
   stylesArgThemeCoercion
 };
 //# sourceMappingURL=helpers.js.map

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

@@ -1,7 +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 type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\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\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,SAAS,oBAAoB;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,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;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;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,YAAY,QAAQ,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;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\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\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n\nexport const slotObjectToDataTestIds = (\n  componentName: string,\n  slotObject: Record<string, string>,\n): Record<string, string> => {\n  const obj = {} as Record<string, string>;\n  Object.keys(slotObject).forEach((slotName) => {\n    const displayName = `${componentName}-${slotObject[slotName]}`;\n    obj[slotName] = displayNameToKebabCase(displayName);\n  });\n  return obj;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,SAAS,oBAAoB;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,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;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;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,YAAY,QAAQ,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;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;AAEO,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,iBAAiB,WAAW;AACnD,QAAI,YAAY,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/dist/esm/xStyledWrapper.js

@@ -2,7 +2,6 @@ import * as React from "react";
 import { styled, typography, background, borders, sizing, space, boxShadows, flexboxes, layout, color } from ".";
 import { compose } from "@xstyled/system";
 const XStyledWrapper = styled("div")`
-  ${typography}
   ${layout}
   ${space}
   ${sizing}
@@ -11,9 +10,9 @@ const XStyledWrapper = styled("div")`
   ${boxShadows}
   ${flexboxes}
   ${color}
+  ${typography}
 `;
 const xStyledCommonProps = compose(
-  typography,
   background,
   borders,
   sizing,
@@ -21,7 +20,8 @@ const xStyledCommonProps = compose(
   boxShadows,
   flexboxes,
   layout,
-  color
+  color,
+  typography
 );
 var xStyledWrapper_default = XStyledWrapper;
 export {

package/dist/esm/xStyledWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/xStyledWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n  ${color}\n  ${typography}\n`;\n\nexport const xStyledCommonProps = compose(\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  color,\n  typography,\n);\n\nexport default XStyledWrapper;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,YAAY,YAAY,SAAS,QAAQ,OAAO,YAAY,WAAW,QAAQ,aAAa;AAG7G,SAAS,eAAe;AAEjB,MAAM,iBAAiB,OAAO,KAAK;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,yBAAQ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "3.12.0",
+  "version": "3.13.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [