@elliemae/ds-system 3.24.2 → 3.25.0-next.2

package/dist/cjs/styled/generated-attributes/generateAttributes.js

@@ -28,13 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var generateAttributes_exports = {};
 __export(generateAttributes_exports, {
-  generateAttributes: () => generateAttributes
+  generateAttributes: () => generateAttributes,
+  getPartProps: () => getPartProps
 });
 module.exports = __toCommonJS(generateAttributes_exports);
 var React = __toESM(require("react"));
 var import_helpers = require("../helpers.js");
 var import_callbackMerger = require("./utils/callbackMerger.js");
-var import_refMerger = require("./utils/refMerger.js");
 const generateClassName = (props, meta) => {
   if (meta.displayName === null)
     return {};
@@ -49,23 +49,38 @@ const generateDataTestId = (props, meta) => {
     "data-testid": props["data-testid"] ?? (0, import_helpers.displayNameToKebabCase)(meta.displayName)
   };
 };
-const generateGlobalAttributes = (props) => {
+const generateDataDimsumSlot = (props, meta) => {
+  if (meta.displayName === null)
+    return {};
+  return {
+    "data-dimsum-slot": (0, import_helpers.displayNameToPropCase)(meta.displayName)
+  };
+};
+const getPartProps = (props) => {
   const { getOwnerProps, getOwnerPropsArguments } = props;
   if (getOwnerProps === void 0)
     return {};
   const ownerPropsValue = getOwnerProps();
   const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};
-  const elementProps = ownerPropsValue[props["data-testid"]];
+  const elementProps = ownerPropsValue[props["data-dimsum-slot"]] ?? ownerPropsValue[props["data-testid"]];
   if (elementProps === void 0 || elementProps === null)
     return {};
   const resultingObject = typeof elementProps === "function" ? elementProps(ownerPropsArgumentsValue) : elementProps;
-  const resultingObjectWithRefMerged = (0, import_refMerger.refMerger)(props, resultingObject);
-  const resultingObjectWithCallbackMerged = (0, import_callbackMerger.callbackMerger)(props, resultingObjectWithRefMerged);
+  return resultingObject;
+};
+const generateGlobalAttributes = (props) => {
+  const resultingObject = getPartProps(props);
+  const resultingObjectWithCallbackMerged = (0, import_callbackMerger.callbackMerger)(props, resultingObject);
   return resultingObjectWithCallbackMerged;
 };
 const wrap = (func, meta) => (props) => func(props, meta);
 const generateAttributes = (options, displayName) => {
   const meta = { options, displayName };
-  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateGlobalAttributes, meta)];
+  return [
+    wrap(generateClassName, meta),
+    wrap(generateDataTestId, meta),
+    wrap(generateDataDimsumSlot, meta),
+    wrap(generateGlobalAttributes, meta)
+  ];
 };
 //# sourceMappingURL=generateAttributes.js.map

package/dist/cjs/styled/generated-attributes/generateAttributes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styled/generated-attributes/generateAttributes.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\nimport { callbackMerger } from './utils/callbackMerger.js';\nimport { refMerger } from './utils/refMerger.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateGlobalAttributes: InternalAttrsFunc<{ 'data-testid': string } & OwnerInterface> = (props) => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  const elementProps = ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  const resultingObjectWithRefMerged = refMerger(props, resultingObject);\n\n  const resultingObjectWithCallbackMerged = callbackMerger(props, resultingObjectWithRefMerged);\n\n  return resultingObjectWithCallbackMerged;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateGlobalAttributes, meta)];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAuC;AAEvC,4BAA+B;AAC/B,uBAA0B;AAE1B,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,SAAK,uCAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,2BAA0F,CAAC,UAAU;AACzG,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB;AAAW,WAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAEhE,QAAM,eAAe,gBAAgB,MAAM,aAAa,CAAC;AAGzD,MAAI,iBAAiB,UAAa,iBAAiB;AAAM,WAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,QAAM,mCAA+B,4BAAU,OAAO,eAAe;AAErE,QAAM,wCAAoC,sCAAe,OAAO,4BAA4B;AAE5F,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO,CAAC,KAAK,mBAAmB,IAAI,GAAG,KAAK,oBAAoB,IAAI,GAAG,KAAK,0BAA0B,IAAI,CAAC;AAC7G;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase, displayNameToPropCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\nimport { callbackMerger } from './utils/callbackMerger.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateDataDimsumSlot: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-dimsum-slot': displayNameToPropCase(meta.displayName),\n  };\n};\n\nexport const getPartProps = (\n  props: { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface,\n): Record<string, unknown> => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  // TODO: @carusox deprecate data-testid usage in favor of data-dimsum-slot\n  const elementProps = ownerPropsValue[props['data-dimsum-slot']] ?? ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  return resultingObject;\n};\n\nconst generateGlobalAttributes: InternalAttrsFunc<\n  { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface\n> = (props) => {\n  const resultingObject = getPartProps(props);\n\n  const resultingObjectWithCallbackMerged = callbackMerger(props, resultingObject);\n\n  return resultingObjectWithCallbackMerged;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [\n    wrap(generateClassName, meta),\n    wrap(generateDataTestId, meta),\n    wrap(generateDataDimsumSlot, meta),\n    wrap(generateGlobalAttributes, meta),\n  ];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAA8D;AAE9D,4BAA+B;AAE/B,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,SAAK,uCAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,yBAA4C,CAAC,OAAO,SAAS;AACjE,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,wBAAoB,sCAAsB,KAAK,WAAW;AAAA,EAC5D;AACF;AAEO,MAAM,eAAe,CAC1B,UAC4B;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB;AAAW,WAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAGhE,QAAM,eAAe,gBAAgB,MAAM,kBAAkB,CAAC,KAAK,gBAAgB,MAAM,aAAa,CAAC;AAGvG,MAAI,iBAAiB,UAAa,iBAAiB;AAAM,WAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,SAAO;AACT;AAEA,MAAM,2BAEF,CAAC,UAAU;AACb,QAAM,kBAAkB,aAAa,KAAK;AAE1C,QAAM,wCAAoC,sCAAe,OAAO,eAAe;AAE/E,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO;AAAA,IACL,KAAK,mBAAmB,IAAI;AAAA,IAC5B,KAAK,oBAAoB,IAAI;AAAA,IAC7B,KAAK,wBAAwB,IAAI;AAAA,IACjC,KAAK,0BAA0B,IAAI;AAAA,EACrC;AACF;",
   "names": []
 }

package/dist/cjs/styled/generated-attributes/utils/refMerger.js

@@ -28,7 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var refMerger_exports = {};
 __export(refMerger_exports, {
-  refMerger: () => refMerger
+  mergeRefs: () => mergeRefs
 });
 module.exports = __toCommonJS(refMerger_exports);
 var React = __toESM(require("react"));
@@ -42,13 +42,4 @@ const mergeRefs = (ref1, ref2) => (_ref) => {
   else if (ref2)
     ref2.current = _ref;
 };
-const refMerger = (props, object) => {
-  const newObject = { ...object };
-  newObject.ref = mergeRefs(props.ref, object.ref);
-  newObject.innerRef = mergeRefs(
-    props.innerRef,
-    object.innerRef
-  );
-  return newObject;
-};
 //# sourceMappingURL=refMerger.js.map

package/dist/cjs/styled/generated-attributes/utils/refMerger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/styled/generated-attributes/utils/refMerger.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport type { AnyStyledRef } from '../../types.js';\n\nconst mergeRefs =\n  <T extends HTMLElement>(ref1: AnyStyledRef<T>, ref2: AnyStyledRef<T>) =>\n  (_ref: T | null) => {\n    if (typeof ref1 === 'function') ref1(_ref);\n    else if (ref1) ref1.current = _ref;\n\n    if (typeof ref2 === 'function') ref2(_ref);\n    else if (ref2) ref2.current = _ref;\n  };\n\nexport const refMerger = <T extends { ref?: AnyStyledRef<HTMLElement>; innerRef?: AnyStyledRef<HTMLElement> }>(\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n  object: Record<string, unknown>,\n) => {\n  const newObject: Record<string, unknown> = { ...object };\n\n  newObject.ref = mergeRefs(props.ref as AnyStyledRef<HTMLElement>, object.ref as AnyStyledRef<HTMLElement>);\n  newObject.innerRef = mergeRefs(\n    props.innerRef as AnyStyledRef<HTMLElement>,\n    object.innerRef as AnyStyledRef<HTMLElement>,\n  );\n\n  return newObject;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,MAAM,YACJ,CAAwB,MAAuB,SAC/C,CAAC,SAAmB;AAClB,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAE9B,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAChC;AAEK,MAAM,YAAY,CACvB,OACA,WACG;AACH,QAAM,YAAqC,EAAE,GAAG,OAAO;AAEvD,YAAU,MAAM,UAAU,MAAM,KAAkC,OAAO,GAAgC;AACzG,YAAU,WAAW;AAAA,IACnB,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import type { AnyStyledRef } from '../../types.js';\n\nexport const mergeRefs =\n  <T extends HTMLElement>(ref1: AnyStyledRef<T> | undefined, ref2: AnyStyledRef<T> | undefined) =>\n  (_ref: T | null) => {\n    if (typeof ref1 === 'function') ref1(_ref);\n    else if (ref1) ref1.current = _ref;\n\n    if (typeof ref2 === 'function') ref2(_ref);\n    else if (ref2) ref2.current = _ref;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,YACX,CAAwB,MAAmC,SAC3D,CAAC,SAAmB;AAClB,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAE9B,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAChC;",
   "names": []
 }

package/dist/cjs/styled/helpers.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var helpers_exports = {};
 __export(helpers_exports, {
   displayNameToKebabCase: () => displayNameToKebabCase,
+  displayNameToPropCase: () => displayNameToPropCase,
   propsToClassKey: () => propsToClassKey,
   slotObjectToDataTestIds: () => slotObjectToDataTestIds
 });
@@ -46,6 +47,7 @@ const displayNameToKebabCase = (displayName) => {
   const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
   return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
 };
+const displayNameToPropCase = (displayName) => `ds${displayName.slice(2).split("-").map(capitalize).join("")}`;
 const slotObjectToDataTestIds = (componentName, slotObject) => {
   const obj = {};
   Object.keys(slotObject).forEach((slotName) => {

package/dist/cjs/styled/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/helpers.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["const capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\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;ACAA,YAAuB;ADAvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,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,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,GAAG,EAAE,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,QAAQ;AAC3D,QAAI,QAAQ,IAAI,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["const capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\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 displayNameToPropCase = (displayName: string) =>\n  `ds${displayName.slice(2).split('-').map(capitalize).join('')}`;\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;ACAA,YAAuB;ADAvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,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,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,GAAG,EAAE,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,wBAAwB,CAAC,gBACpC,KAAK,YAAY,MAAM,CAAC,EAAE,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,KAAK,EAAE;AAEvD,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,iBAAiB,WAAW,QAAQ;AAC3D,QAAI,QAAQ,IAAI,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/styled/styledFunction.js

@@ -32,6 +32,7 @@ __export(styledFunction_exports, {
 });
 module.exports = __toCommonJS(styledFunction_exports);
 var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_checkNamingConvention = require("./checkNamingConvention.js");
 var import_system = require("./system.js");
 var import_transformers = require("./transformers/index.js");
@@ -39,10 +40,15 @@ var import_coerceWithDefaultTheme = require("./coerceWithDefaultTheme.js");
 var import_expressions = require("./expressions/index.js");
 var import_fixStyleArg = require("./fixStyleArg.js");
 var import_generated_attributes = require("./generated-attributes/index.js");
+var import_generateAttributes = require("./generated-attributes/generateAttributes.js");
+var import_refMerger = require("./generated-attributes/utils/refMerger.js");
+var import_helpers = require("./helpers.js");
+var import_react = require("react");
 const defaultOptions = {
   name: null,
   slot: null
 };
+const styledFunctionCache = /* @__PURE__ */ new WeakMap();
 const styledFunction = (tag, options = defaultOptions) => {
   const { name: componentName, slot: componentSlot } = options;
   (0, import_checkNamingConvention.checkNamingConvention)(componentName, componentSlot);
@@ -52,7 +58,8 @@ const styledFunction = (tag, options = defaultOptions) => {
     withConfig: (...args) => baseStyledResolver.withConfig(...args)
   };
   const dsStyledResolver = (styleArg, ...expressions) => {
-    const [styleArgWithMagic, expressionsWithMagic] = (0, import_transformers.magicCssTransform)(styleArg, expressions);
+    const expressionsWithDsStyledComponentId = (0, import_transformers.dsStyledComponentTransform)(expressions);
+    const [styleArgWithMagic, expressionsWithMagic] = (0, import_transformers.magicCssTransform)(styleArg, expressionsWithDsStyledComponentId);
     const expressionsWithThemeCoerced = (0, import_coerceWithDefaultTheme.coerceWithDefaultTheme)(expressionsWithMagic);
     if (componentName && componentSlot) {
       expressionsWithThemeCoerced.push((0, import_expressions.genStyleOverridesExpression)(componentName, componentSlot));
@@ -68,10 +75,33 @@ const styledFunction = (tag, options = defaultOptions) => {
       baseStyledResolver
     );
     const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);
+    const MemoizedComponentWithRefsMerged = styledFunctionCache.get(Component);
+    const ComponentWithRefsMerged = MemoizedComponentWithRefsMerged ?? ((props) => {
+      const dataTestId = props["data-testid"] ?? (displayName !== null ? (0, import_helpers.displayNameToKebabCase)(displayName) : "");
+      const dataDimsumSlot = displayName !== null ? (0, import_helpers.displayNameToPropCase)(displayName) : "";
+      const partProps = (0, import_generateAttributes.getPartProps)({
+        ...props,
+        "data-testid": dataTestId,
+        "data-dimsum-slot": dataDimsumSlot
+      });
+      const mergedRef = (0, import_react.useMemo)(
+        () => (0, import_refMerger.mergeRefs)(props.innerRef, partProps.innerRef),
+        [props.innerRef, partProps.innerRef]
+      );
+      const propsWithRefMerged = {
+        ...props,
+        ref: mergedRef,
+        innerRef: mergedRef
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...propsWithRefMerged });
+    });
+    styledFunctionCache.set(Component, ComponentWithRefsMerged);
     if (displayName !== null) {
       Component.displayName = displayName;
     }
-    return Component;
+    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId;
+    ComponentWithRefsMerged.toString = Component.toString;
+    return ComponentWithRefsMerged;
   };
   return Object.assign(dsStyledResolver, styledAttributes);
 };

package/dist/cjs/styled/styledFunction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/styled/styledFunction.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { magicCssTransform } from './transformers/index.js';\nimport type { Options, Theme, ThemedStyledFunctionBase } from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => baseStyledResolver.attrs(...args)) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => baseStyledResolver.withConfig(...args)) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mCAAsC;AACtC,oBAAqC;AACrC,0BAAkC;AAElC,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,kCAAuC;AAEvC,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAGzC,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS,mBAAmB,MAAM,GAAG,IAAI;AAAA,IACrD,YAAa,IAAI,SAAS,mBAAmB,WAAW,GAAG,IAAI;AAAA,EACjE;AAKA,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAOzF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,WAAW;AAOzF,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "sources": ["../../../src/styled/styledFunction.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, StyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  Options,\n  OwnerInterface,\n  InnerRefInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { useMemo } from 'react';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nconst styledFunctionCache = new WeakMap<StyledComponent<any, any>, React.ComponentType<any>>();\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => baseStyledResolver.attrs(...args)) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => baseStyledResolver.withConfig(...args)) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const MemoizedComponentWithRefsMerged = styledFunctionCache.get(Component);\n\n    const ComponentWithRefsMerged =\n      MemoizedComponentWithRefsMerged ??\n      ((props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n        // we may or not have data-testid at this point, so we need to calculate it\n        const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n        // we also need to calculate dataDimsumSlot at this point\n        const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n        // then we get the part props for this slot, and we cast it to use refs\n        const partProps = getPartProps({\n          ...props,\n          'data-testid': dataTestId,\n          'data-dimsum-slot': dataDimsumSlot,\n        }) as {\n          innerRef?: AnyStyledRef<HTMLElement>;\n        };\n\n        const mergedRef = useMemo(\n          () => mergeRefs(props.innerRef, partProps.innerRef),\n          [props.innerRef, partProps.innerRef],\n        );\n\n        const propsWithRefMerged = {\n          ...props,\n          ref: mergedRef,\n          innerRef: mergedRef,\n        } as React.ComponentProps<C>;\n\n        return <Component {...propsWithRefMerged} />;\n      });\n\n    styledFunctionCache.set(Component, ComponentWithRefsMerged);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyIR;AArIf,mCAAsC;AACtC,oBAAqC;AACrC,0BAA8D;AAS9D,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,kCAAuC;AACvC,gCAA6B;AAC7B,uBAA0B;AAC1B,qBAA8D;AAC9D,mBAAwB;AAExB,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,sBAAsB,oBAAI,QAA6D;AAEtF,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAGzC,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS,mBAAmB,MAAM,GAAG,IAAI;AAAA,IACrD,YAAa,IAAI,SAAS,mBAAmB,WAAW,GAAG,IAAI;AAAA,EACjE;AAKA,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,yCAAqC,gDAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,kCAAkC;AAOhH,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,kCAAkC,oBAAoB,IAAI,SAAS;AAEzE,UAAM,0BACJ,oCACC,CAAC,UAA8E;AAE9E,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,WAAO,uCAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,WAAO,sCAAsB,WAAW,IAAI;AAEnF,YAAM,gBAAY,wCAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAID,YAAM,gBAAY;AAAA,QAChB,UAAM,4BAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAEA,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAEA,aAAO,4CAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEF,wBAAoB,IAAI,WAAW,uBAAuB;AAE1D,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AACxD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
   "names": ["baseStyled"]
 }

package/dist/cjs/styled/transformers/dsStyledComponentTransform.js

@@ -0,0 +1,41 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dsStyledComponentTransform_exports = {};
+__export(dsStyledComponentTransform_exports, {
+  dsStyledComponentTransform: () => dsStyledComponentTransform
+});
+module.exports = __toCommonJS(dsStyledComponentTransform_exports);
+var React = __toESM(require("react"));
+const dsStyledComponentTransform = (expressions) => expressions.map((expression) => {
+  if (typeof expression === "function" && "dsStyledComponentId" in expression) {
+    return () => `.${expression.dsStyledComponentId}`;
+  }
+  return expression;
+});
+//# sourceMappingURL=dsStyledComponentTransform.js.map

package/dist/cjs/styled/transformers/dsStyledComponentTransform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/styled/transformers/dsStyledComponentTransform.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { Expressions } from '../types.js';\n\ntype DSStyledComponentTransform = (expressions: Expressions) => Expressions;\n\nexport const dsStyledComponentTransform: DSStyledComponentTransform = (expressions) =>\n  expressions.map((expression) => {\n    if (typeof expression === 'function' && 'dsStyledComponentId' in expression) {\n      return () => `.${expression.dsStyledComponentId as string}`;\n    }\n    return expression;\n  });\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,6BAAyD,CAAC,gBACrE,YAAY,IAAI,CAAC,eAAe;AAC9B,MAAI,OAAO,eAAe,cAAc,yBAAyB,YAAY;AAC3E,WAAO,MAAM,IAAI,WAAW;AAAA,EAC9B;AACA,SAAO;AACT,CAAC;",
+  "names": []
+}

package/dist/cjs/styled/transformers/index.js

@@ -28,9 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var transformers_exports = {};
 __export(transformers_exports, {
+  dsStyledComponentTransform: () => import_dsStyledComponentTransform.dsStyledComponentTransform,
   magicCssTransform: () => import_magicCssTransform.magicCssTransform
 });
 module.exports = __toCommonJS(transformers_exports);
 var React = __toESM(require("react"));
 var import_magicCssTransform = require("./magicCssTransform.js");
+var import_dsStyledComponentTransform = require("./dsStyledComponentTransform.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/styled/transformers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styled/transformers/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { magicCssTransform } from './magicCssTransform.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAkC;",
+  "sourcesContent": ["export { magicCssTransform } from './magicCssTransform.js';\nexport { dsStyledComponentTransform } from './dsStyledComponentTransform.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAkC;AAClC,wCAA2C;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/types.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  CSSObject,\n  Interpolation,\n  InterpolationFunction,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Options {\n  name: string | null;\n  slot: string | null;\n}\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\nexport type AnyStyledRef<T extends HTMLElement> =\n  | React.MutableRefObject<T | null>\n  | ((_ref: T | null) => void)\n  | React.Dispatch<React.SetStateAction<T | null>>\n  | false;\n\nexport type StyleArg<T = any> = TemplateStringsArray | CSSObject | InterpolationFunction<T>;\nexport type Expression<T = any> = Interpolation<T>;\nexport type Expressions<T = any> = Array<Expression<T>>;\nexport type PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport interface ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = {},\n  A extends keyof any = never,\n> {\n  <U extends object>(\n    first: StyleArg<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface, T>>,\n    ...rest: Expressions<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface, T>>\n  ): StyledComponent<C, T, O & U & OwnerInterface, A>;\n}\n\nexport type AttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport type InternalAttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<\n    StyledComponentInnerComponent<React.ComponentType<T & { ref?: AnyStyledRef<HTMLElement> }>>\n  >,\n  meta: {\n    options: Options;\n    displayName: string | null;\n  },\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport interface OwnerInterface {\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport type PartProps = Record<string, unknown> | ((args: object) => Record<string, unknown>) | null | undefined;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyStyledComponent,\n  CSSObject,\n  Interpolation,\n  InterpolationFunction,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport type { ElementType, Ref } from 'react';\nimport type React from 'react';\n\nexport interface Options {\n  name: string | null;\n  slot: string | null;\n}\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\nexport type AnyStyledRef<T extends HTMLElement> =\n  | React.MutableRefObject<T | null>\n  | ((_ref: T | null) => void)\n  | false\n  | null;\n\nexport type StyleArg<T = any> = TemplateStringsArray | CSSObject | InterpolationFunction<T>;\nexport type Expression<T = any> = Interpolation<T>;\nexport type Expressions<T = any> = Array<Expression<T>>;\nexport type PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\ntype ComponentInnerRef<T extends ElementType> = T extends new (props: infer P) => React.Component<any, any>\n  ? Ref<InstanceType<T>> | undefined\n  : React.PropsWithRef<React.ComponentProps<T>>['ref'];\n\nexport type StyledComponentInnerRef<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>> =\n  C extends AnyStyledComponent ? ComponentInnerRef<StyledComponentInnerComponent<C>> : ComponentInnerRef<C>;\n\nexport interface ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = {},\n  A extends keyof any = never,\n> {\n  <U extends object>(\n    first: StyleArg<\n      ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>\n    >,\n    ...rest: Expressions<\n      ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>\n    >\n  ): StyledComponent<C, T, O & U & OwnerInterface & InnerRefInterface<C>, A>;\n}\n\nexport type AttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport type InternalAttrsFunc<T extends object = Record<string, unknown>> = (\n  props: StyledComponentPropsWithRef<\n    StyledComponentInnerComponent<React.ComponentType<T & { ref?: AnyStyledRef<HTMLElement> }>>\n  >,\n  meta: {\n    options: Options;\n    displayName: string | null;\n  },\n) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;\n\nexport interface InnerRefInterface<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>> {\n  innerRef?: StyledComponentInnerRef<C>;\n  ref?: never;\n}\n\nexport interface OwnerInterface {\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport type PartProps = Record<string, unknown> | ((args: object) => Record<string, unknown>) | null | undefined;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/th.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/th.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './styled/index.js';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = <T>({ theme }: PropsWithTheme<T>) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n  zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType]?.[colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  <T,>(value: string, dfault = ''): ThemeStringGetter<T> =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY,CAAC;AAElD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,SAAS,IAAI,UAAU;AAEvE,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAK,OAAe,SAAS,OAC7B,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM,QAAQ;AAC3B,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO,IAA2B;AAAA,EACzD,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './styled/index.js';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = <T>({ theme }: PropsWithTheme<T>) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n  zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType]?.[colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  (value: string, dfault = ''): ThemeStringGetter =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY,CAAC;AAElD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,SAAS,IAAI,UAAU;AAEvE,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM,QAAQ;AAC3B,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO,IAA2B;AAAA,EACzD,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
   "names": []
 }

package/dist/esm/styled/generated-attributes/generateAttributes.js

@@ -1,7 +1,6 @@
 import * as React from "react";
-import { displayNameToKebabCase } from "../helpers.js";
+import { displayNameToKebabCase, displayNameToPropCase } from "../helpers.js";
 import { callbackMerger } from "./utils/callbackMerger.js";
-import { refMerger } from "./utils/refMerger.js";
 const generateClassName = (props, meta) => {
   if (meta.displayName === null)
     return {};
@@ -16,26 +15,42 @@ const generateDataTestId = (props, meta) => {
     "data-testid": props["data-testid"] ?? displayNameToKebabCase(meta.displayName)
   };
 };
-const generateGlobalAttributes = (props) => {
+const generateDataDimsumSlot = (props, meta) => {
+  if (meta.displayName === null)
+    return {};
+  return {
+    "data-dimsum-slot": displayNameToPropCase(meta.displayName)
+  };
+};
+const getPartProps = (props) => {
   const { getOwnerProps, getOwnerPropsArguments } = props;
   if (getOwnerProps === void 0)
     return {};
   const ownerPropsValue = getOwnerProps();
   const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};
-  const elementProps = ownerPropsValue[props["data-testid"]];
+  const elementProps = ownerPropsValue[props["data-dimsum-slot"]] ?? ownerPropsValue[props["data-testid"]];
   if (elementProps === void 0 || elementProps === null)
     return {};
   const resultingObject = typeof elementProps === "function" ? elementProps(ownerPropsArgumentsValue) : elementProps;
-  const resultingObjectWithRefMerged = refMerger(props, resultingObject);
-  const resultingObjectWithCallbackMerged = callbackMerger(props, resultingObjectWithRefMerged);
+  return resultingObject;
+};
+const generateGlobalAttributes = (props) => {
+  const resultingObject = getPartProps(props);
+  const resultingObjectWithCallbackMerged = callbackMerger(props, resultingObject);
   return resultingObjectWithCallbackMerged;
 };
 const wrap = (func, meta) => (props) => func(props, meta);
 const generateAttributes = (options, displayName) => {
   const meta = { options, displayName };
-  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateGlobalAttributes, meta)];
+  return [
+    wrap(generateClassName, meta),
+    wrap(generateDataTestId, meta),
+    wrap(generateDataDimsumSlot, meta),
+    wrap(generateGlobalAttributes, meta)
+  ];
 };
 export {
-  generateAttributes
+  generateAttributes,
+  getPartProps
 };
 //# sourceMappingURL=generateAttributes.js.map

package/dist/esm/styled/generated-attributes/generateAttributes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/generated-attributes/generateAttributes.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\nimport { callbackMerger } from './utils/callbackMerger.js';\nimport { refMerger } from './utils/refMerger.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateGlobalAttributes: InternalAttrsFunc<{ 'data-testid': string } & OwnerInterface> = (props) => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  const elementProps = ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  const resultingObjectWithRefMerged = refMerger(props, resultingObject);\n\n  const resultingObjectWithCallbackMerged = callbackMerger(props, resultingObjectWithRefMerged);\n\n  return resultingObjectWithCallbackMerged;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [wrap(generateClassName, meta), wrap(generateDataTestId, meta), wrap(generateGlobalAttributes, meta)];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,8BAA8B;AAEvC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAE1B,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,KAAK,uBAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,2BAA0F,CAAC,UAAU;AACzG,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB;AAAW,WAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAEhE,QAAM,eAAe,gBAAgB,MAAM,aAAa,CAAC;AAGzD,MAAI,iBAAiB,UAAa,iBAAiB;AAAM,WAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,QAAM,+BAA+B,UAAU,OAAO,eAAe;AAErE,QAAM,oCAAoC,eAAe,OAAO,4BAA4B;AAE5F,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO,CAAC,KAAK,mBAAmB,IAAI,GAAG,KAAK,oBAAoB,IAAI,GAAG,KAAK,0BAA0B,IAAI,CAAC;AAC7G;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { displayNameToKebabCase, displayNameToPropCase } from '../helpers.js';\nimport type { AttrsFunc, InternalAttrsFunc, Options, OwnerInterface, PartProps } from '../types.js';\nimport { callbackMerger } from './utils/callbackMerger.js';\n\nconst generateClassName: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    className: meta.displayName,\n  };\n};\n\nconst generateDataTestId: InternalAttrsFunc<{ 'data-testid': string }> = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-testid': props['data-testid'] ?? displayNameToKebabCase(meta.displayName),\n  };\n};\n\nconst generateDataDimsumSlot: InternalAttrsFunc = (props, meta) => {\n  if (meta.displayName === null) return {};\n  return {\n    'data-dimsum-slot': displayNameToPropCase(meta.displayName),\n  };\n};\n\nexport const getPartProps = (\n  props: { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface,\n): Record<string, unknown> => {\n  const { getOwnerProps, getOwnerPropsArguments } = props;\n\n  // If no ownerProps are provided, we won't add global attributes\n  if (getOwnerProps === undefined) return {};\n\n  const ownerPropsValue = getOwnerProps() as Record<string, PartProps>;\n  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};\n\n  // TODO: @carusox deprecate data-testid usage in favor of data-dimsum-slot\n  const elementProps = ownerPropsValue[props['data-dimsum-slot']] ?? ownerPropsValue[props['data-testid']];\n\n  // If no elementProps are present, we won't add global attributes either\n  if (elementProps === undefined || elementProps === null) return {};\n\n  // If elementProps is a function, we call it with the ownerPropsArguments\n  // Otherwise we assign it directly\n  const resultingObject = typeof elementProps === 'function' ? elementProps(ownerPropsArgumentsValue) : elementProps;\n\n  return resultingObject;\n};\n\nconst generateGlobalAttributes: InternalAttrsFunc<\n  { 'data-testid': string; 'data-dimsum-slot': string } & OwnerInterface\n> = (props) => {\n  const resultingObject = getPartProps(props);\n\n  const resultingObjectWithCallbackMerged = callbackMerger(props, resultingObject);\n\n  return resultingObjectWithCallbackMerged;\n};\n\nconst wrap =\n  <T extends object>(\n    func: InternalAttrsFunc<T>,\n    meta: { options: Options; displayName: string | null },\n  ): AttrsFunc<T> =>\n  (props) =>\n    func(props, meta);\n\nexport const generateAttributes = (options: Options, displayName: string | null): AttrsFunc<any>[] => {\n  const meta = { options, displayName };\n\n  // Comprehensive list of all the generators above\n  // ORDER MATTERS: the attributes returned by previous functions, are received as props by the next ones\n  return [\n    wrap(generateClassName, meta),\n    wrap(generateDataTestId, meta),\n    wrap(generateDataDimsumSlot, meta),\n    wrap(generateGlobalAttributes, meta),\n  ];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB,6BAA6B;AAE9D,SAAS,sBAAsB;AAE/B,MAAM,oBAAuC,CAAC,OAAO,SAAS;AAC5D,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,WAAW,KAAK;AAAA,EAClB;AACF;AAEA,MAAM,qBAAmE,CAAC,OAAO,SAAS;AACxF,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,eAAe,MAAM,aAAa,KAAK,uBAAuB,KAAK,WAAW;AAAA,EAChF;AACF;AAEA,MAAM,yBAA4C,CAAC,OAAO,SAAS;AACjE,MAAI,KAAK,gBAAgB;AAAM,WAAO,CAAC;AACvC,SAAO;AAAA,IACL,oBAAoB,sBAAsB,KAAK,WAAW;AAAA,EAC5D;AACF;AAEO,MAAM,eAAe,CAC1B,UAC4B;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAGlD,MAAI,kBAAkB;AAAW,WAAO,CAAC;AAEzC,QAAM,kBAAkB,cAAc;AACtC,QAAM,2BAA2B,yBAAyB,KAAK,CAAC;AAGhE,QAAM,eAAe,gBAAgB,MAAM,kBAAkB,CAAC,KAAK,gBAAgB,MAAM,aAAa,CAAC;AAGvG,MAAI,iBAAiB,UAAa,iBAAiB;AAAM,WAAO,CAAC;AAIjE,QAAM,kBAAkB,OAAO,iBAAiB,aAAa,aAAa,wBAAwB,IAAI;AAEtG,SAAO;AACT;AAEA,MAAM,2BAEF,CAAC,UAAU;AACb,QAAM,kBAAkB,aAAa,KAAK;AAE1C,QAAM,oCAAoC,eAAe,OAAO,eAAe;AAE/E,SAAO;AACT;AAEA,MAAM,OACJ,CACE,MACA,SAEF,CAAC,UACC,KAAK,OAAO,IAAI;AAEb,MAAM,qBAAqB,CAAC,SAAkB,gBAAiD;AACpG,QAAM,OAAO,EAAE,SAAS,YAAY;AAIpC,SAAO;AAAA,IACL,KAAK,mBAAmB,IAAI;AAAA,IAC5B,KAAK,oBAAoB,IAAI;AAAA,IAC7B,KAAK,wBAAwB,IAAI;AAAA,IACjC,KAAK,0BAA0B,IAAI;AAAA,EACrC;AACF;",
   "names": []
 }

package/dist/esm/styled/generated-attributes/utils/refMerger.js

@@ -9,16 +9,7 @@ const mergeRefs = (ref1, ref2) => (_ref) => {
   else if (ref2)
     ref2.current = _ref;
 };
-const refMerger = (props, object) => {
-  const newObject = { ...object };
-  newObject.ref = mergeRefs(props.ref, object.ref);
-  newObject.innerRef = mergeRefs(
-    props.innerRef,
-    object.innerRef
-  );
-  return newObject;
-};
 export {
-  refMerger
+  mergeRefs
 };
 //# sourceMappingURL=refMerger.js.map

package/dist/esm/styled/generated-attributes/utils/refMerger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/styled/generated-attributes/utils/refMerger.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport type { AnyStyledRef } from '../../types.js';\n\nconst mergeRefs =\n  <T extends HTMLElement>(ref1: AnyStyledRef<T>, ref2: AnyStyledRef<T>) =>\n  (_ref: T | null) => {\n    if (typeof ref1 === 'function') ref1(_ref);\n    else if (ref1) ref1.current = _ref;\n\n    if (typeof ref2 === 'function') ref2(_ref);\n    else if (ref2) ref2.current = _ref;\n  };\n\nexport const refMerger = <T extends { ref?: AnyStyledRef<HTMLElement>; innerRef?: AnyStyledRef<HTMLElement> }>(\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n  object: Record<string, unknown>,\n) => {\n  const newObject: Record<string, unknown> = { ...object };\n\n  newObject.ref = mergeRefs(props.ref as AnyStyledRef<HTMLElement>, object.ref as AnyStyledRef<HTMLElement>);\n  newObject.innerRef = mergeRefs(\n    props.innerRef as AnyStyledRef<HTMLElement>,\n    object.innerRef as AnyStyledRef<HTMLElement>,\n  );\n\n  return newObject;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,MAAM,YACJ,CAAwB,MAAuB,SAC/C,CAAC,SAAmB;AAClB,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAE9B,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAChC;AAEK,MAAM,YAAY,CACvB,OACA,WACG;AACH,QAAM,YAAqC,EAAE,GAAG,OAAO;AAEvD,YAAU,MAAM,UAAU,MAAM,KAAkC,OAAO,GAAgC;AACzG,YAAU,WAAW;AAAA,IACnB,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { AnyStyledRef } from '../../types.js';\n\nexport const mergeRefs =\n  <T extends HTMLElement>(ref1: AnyStyledRef<T> | undefined, ref2: AnyStyledRef<T> | undefined) =>\n  (_ref: T | null) => {\n    if (typeof ref1 === 'function') ref1(_ref);\n    else if (ref1) ref1.current = _ref;\n\n    if (typeof ref2 === 'function') ref2(_ref);\n    else if (ref2) ref2.current = _ref;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,YACX,CAAwB,MAAmC,SAC3D,CAAC,SAAmB;AAClB,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAE9B,MAAI,OAAO,SAAS;AAAY,SAAK,IAAI;AAAA,WAChC;AAAM,SAAK,UAAU;AAChC;",
   "names": []
 }

package/dist/esm/styled/helpers.js

@@ -11,6 +11,7 @@ const displayNameToKebabCase = (displayName) => {
   const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
   return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
 };
+const displayNameToPropCase = (displayName) => `ds${displayName.slice(2).split("-").map(capitalize).join("")}`;
 const slotObjectToDataTestIds = (componentName, slotObject) => {
   const obj = {};
   Object.keys(slotObject).forEach((slotName) => {
@@ -21,6 +22,7 @@ const slotObjectToDataTestIds = (componentName, slotObject) => {
 };
 export {
   displayNameToKebabCase,
+  displayNameToPropCase,
   propsToClassKey,
   slotObjectToDataTestIds
 };

package/dist/esm/styled/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/helpers.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\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;ACAvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,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,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,GAAG,EAAE,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,QAAQ;AAC3D,QAAI,QAAQ,IAAI,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst isEmpty = (string: string): boolean => string.length === 0;\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 displayNameToPropCase = (displayName: string) =>\n  `ds${displayName.slice(2).split('-').map(capitalize).join('')}`;\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;ACAvB,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAExD,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,GAAG,CAAC,IAAI,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,GAAG,EAAE,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,wBAAwB,CAAC,gBACpC,KAAK,YAAY,MAAM,CAAC,EAAE,MAAM,GAAG,EAAE,IAAI,UAAU,EAAE,KAAK,EAAE;AAEvD,MAAM,0BAA0B,CACrC,eACA,eAC2B;AAC3B,QAAM,MAAM,CAAC;AACb,SAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,aAAa;AAC5C,UAAM,cAAc,GAAG,iBAAiB,WAAW,QAAQ;AAC3D,QAAI,QAAQ,IAAI,uBAAuB,WAAW;AAAA,EACpD,CAAC;AACD,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled/styledFunction.js

@@ -1,15 +1,21 @@
 import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { checkNamingConvention } from "./checkNamingConvention.js";
 import { styled as baseStyled } from "./system.js";
-import { magicCssTransform } from "./transformers/index.js";
+import { dsStyledComponentTransform, magicCssTransform } from "./transformers/index.js";
 import { coerceWithDefaultTheme } from "./coerceWithDefaultTheme.js";
 import { genStyleOverridesExpression, genVariantOverridesExpression } from "./expressions/index.js";
 import { fixStyleArg } from "./fixStyleArg.js";
 import { generateAutoCalculated } from "./generated-attributes/index.js";
+import { getPartProps } from "./generated-attributes/generateAttributes.js";
+import { mergeRefs } from "./generated-attributes/utils/refMerger.js";
+import { displayNameToKebabCase, displayNameToPropCase } from "./helpers.js";
+import { useMemo } from "react";
 const defaultOptions = {
   name: null,
   slot: null
 };
+const styledFunctionCache = /* @__PURE__ */ new WeakMap();
 const styledFunction = (tag, options = defaultOptions) => {
   const { name: componentName, slot: componentSlot } = options;
   checkNamingConvention(componentName, componentSlot);
@@ -19,7 +25,8 @@ const styledFunction = (tag, options = defaultOptions) => {
     withConfig: (...args) => baseStyledResolver.withConfig(...args)
   };
   const dsStyledResolver = (styleArg, ...expressions) => {
-    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);
+    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);
+    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);
     const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);
     if (componentName && componentSlot) {
       expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));
@@ -35,10 +42,33 @@ const styledFunction = (tag, options = defaultOptions) => {
       baseStyledResolver
     );
     const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);
+    const MemoizedComponentWithRefsMerged = styledFunctionCache.get(Component);
+    const ComponentWithRefsMerged = MemoizedComponentWithRefsMerged ?? ((props) => {
+      const dataTestId = props["data-testid"] ?? (displayName !== null ? displayNameToKebabCase(displayName) : "");
+      const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : "";
+      const partProps = getPartProps({
+        ...props,
+        "data-testid": dataTestId,
+        "data-dimsum-slot": dataDimsumSlot
+      });
+      const mergedRef = useMemo(
+        () => mergeRefs(props.innerRef, partProps.innerRef),
+        [props.innerRef, partProps.innerRef]
+      );
+      const propsWithRefMerged = {
+        ...props,
+        ref: mergedRef,
+        innerRef: mergedRef
+      };
+      return /* @__PURE__ */ jsx(Component, { ...propsWithRefMerged });
+    });
+    styledFunctionCache.set(Component, ComponentWithRefsMerged);
     if (displayName !== null) {
       Component.displayName = displayName;
     }
-    return Component;
+    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId;
+    ComponentWithRefsMerged.toString = Component.toString;
+    return ComponentWithRefsMerged;
   };
   return Object.assign(dsStyledResolver, styledAttributes);
 };

package/dist/esm/styled/styledFunction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styledFunction.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { magicCssTransform } from './transformers/index.js';\nimport type { Options, Theme, ThemedStyledFunctionBase } from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => baseStyledResolver.attrs(...args)) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => baseStyledResolver.withConfig(...args)) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,6BAA6B;AACtC,SAAS,UAAU,kBAAkB;AACrC,SAAS,yBAAyB;AAElC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAGzC,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS,mBAAmB,MAAM,GAAG,IAAI;AAAA,IACrD,YAAa,IAAI,SAAS,mBAAmB,WAAW,GAAG,IAAI;AAAA,EACjE;AAKA,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAOzF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,WAAW;AAOzF,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styledFunction.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, StyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n  AnyStyledRef,\n  Options,\n  OwnerInterface,\n  InnerRefInterface,\n  Theme,\n  ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { useMemo } from 'react';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nconst styledFunctionCache = new WeakMap<StyledComponent<any, any>, React.ComponentType<any>>();\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => baseStyledResolver.attrs(...args)) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => baseStyledResolver.withConfig(...args)) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a transformation to the expressions only.\n     * Since this resolver is returning a HOC of a styled-component, the syntax support for\n     * selecting the className of another styled-component is not available anymore.\n     * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n     * the corresponding id\n     */\n    const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    const MemoizedComponentWithRefsMerged = styledFunctionCache.get(Component);\n\n    const ComponentWithRefsMerged =\n      MemoizedComponentWithRefsMerged ??\n      ((props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n        // we may or not have data-testid at this point, so we need to calculate it\n        const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n        // we also need to calculate dataDimsumSlot at this point\n        const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n        // then we get the part props for this slot, and we cast it to use refs\n        const partProps = getPartProps({\n          ...props,\n          'data-testid': dataTestId,\n          'data-dimsum-slot': dataDimsumSlot,\n        }) as {\n          innerRef?: AnyStyledRef<HTMLElement>;\n        };\n\n        const mergedRef = useMemo(\n          () => mergeRefs(props.innerRef, partProps.innerRef),\n          [props.innerRef, partProps.innerRef],\n        );\n\n        const propsWithRefMerged = {\n          ...props,\n          ref: mergedRef,\n          innerRef: mergedRef,\n        } as React.ComponentProps<C>;\n\n        return <Component {...propsWithRefMerged} />;\n      });\n\n    styledFunctionCache.set(Component, ComponentWithRefsMerged);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore We use dsStyledComponent to access the original's component id\n    ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n    ComponentWithRefsMerged.toString = Component.toString;\n\n    return ComponentWithRefsMerged;\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyIR;AArIf,SAAS,6BAA6B;AACtC,SAAS,UAAU,kBAAkB;AACrC,SAAS,4BAA4B,yBAAyB;AAS9D,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,eAAe;AAExB,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,sBAAsB,oBAAI,QAA6D;AAEtF,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAGzC,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS,mBAAmB,MAAM,GAAG,IAAI;AAAA,IACrD,YAAa,IAAI,SAAS,mBAAmB,WAAW,GAAG,IAAI;AAAA,EACjE;AAKA,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,qCAAqC,2BAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,kCAAkC;AAOhH,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,kCAAkC,oBAAoB,IAAI,SAAS;AAEzE,UAAM,0BACJ,oCACC,CAAC,UAA8E;AAE9E,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,OAAO,uBAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,OAAO,sBAAsB,WAAW,IAAI;AAEnF,YAAM,YAAY,aAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAID,YAAM,YAAY;AAAA,QAChB,MAAM,UAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAEA,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAEA,aAAO,oBAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEF,wBAAoB,IAAI,WAAW,uBAAuB;AAE1D,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AACxD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
   "names": []
 }

package/dist/esm/styled/transformers/dsStyledComponentTransform.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+const dsStyledComponentTransform = (expressions) => expressions.map((expression) => {
+  if (typeof expression === "function" && "dsStyledComponentId" in expression) {
+    return () => `.${expression.dsStyledComponentId}`;
+  }
+  return expression;
+});
+export {
+  dsStyledComponentTransform
+};
+//# sourceMappingURL=dsStyledComponentTransform.js.map

package/dist/esm/styled/transformers/dsStyledComponentTransform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/transformers/dsStyledComponentTransform.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Expressions } from '../types.js';\n\ntype DSStyledComponentTransform = (expressions: Expressions) => Expressions;\n\nexport const dsStyledComponentTransform: DSStyledComponentTransform = (expressions) =>\n  expressions.map((expression) => {\n    if (typeof expression === 'function' && 'dsStyledComponentId' in expression) {\n      return () => `.${expression.dsStyledComponentId as string}`;\n    }\n    return expression;\n  });\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIhB,MAAM,6BAAyD,CAAC,gBACrE,YAAY,IAAI,CAAC,eAAe;AAC9B,MAAI,OAAO,eAAe,cAAc,yBAAyB,YAAY;AAC3E,WAAO,MAAM,IAAI,WAAW;AAAA,EAC9B;AACA,SAAO;AACT,CAAC;",
+  "names": []
+}

package/dist/esm/styled/transformers/index.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { magicCssTransform } from "./magicCssTransform.js";
+import { dsStyledComponentTransform } from "./dsStyledComponentTransform.js";
 export {
+  dsStyledComponentTransform,
   magicCssTransform
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/styled/transformers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/transformers/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { magicCssTransform } from './magicCssTransform.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { magicCssTransform } from './magicCssTransform.js';\nexport { dsStyledComponentTransform } from './dsStyledComponentTransform.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAClC,SAAS,kCAAkC;",
   "names": []
 }

package/dist/esm/th.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/th.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './styled/index.js';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = <T>({ theme }: PropsWithTheme<T>) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n  zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType]?.[colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  <T,>(value: string, dfault = ''): ThemeStringGetter<T> =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY,CAAC;AAElD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,SAAS,IAAI,UAAU;AAEvE,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAK,OAAe,SAAS,OAC7B,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM,QAAQ;AAC3B,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO,IAA2B;AAAA,EACzD,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './styled/index.js';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n  if (result) {\n    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n  }\n  return ``;\n};\n\ntype ThemeStringGetter = <T>({ theme }: PropsWithTheme<T>) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n  space: ThGetter;\n  fontSize: ThGetter;\n  fontWeight: ThGetter;\n  lineHeight: ThGetter;\n  letterSpacing: ThGetter;\n  font: ThGetter;\n  color: ThGetter;\n  breakpoint: ThGetter;\n  media: ThGetter;\n  zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n  (value, dfault = '') =>\n  ({ theme }) => {\n    const colorValues = value.split('-');\n\n    if (colorValues.length === 1) return colorValues[0];\n\n    if (colorValues.length > 3) return dfault;\n\n    const [colorType, colorValue, alpha] = colorValues as [\n      keyof Theme['colors'],\n      keyof Theme['colors'][keyof Theme['colors']],\n      string,\n    ];\n\n    const themeColor = theme.colors && theme.colors[colorType]?.[colorValue];\n\n    if (!themeColor) return dfault;\n\n    if (alpha) {\n      const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n      return hexToRgba(themeColor, alphaFloatingNumber);\n    }\n\n    return themeColor;\n  };\n\nconst genericGetter =\n  (property: keyof Theme) =>\n  (value: string, dfault = ''): ThemeStringGetter =>\n  ({ theme }) => {\n    const parts = value.split('-');\n    let result = theme[property];\n    parts.forEach((part) => {\n      if (result) result = result[part as keyof typeof result];\n    });\n    return (result as unknown as string) ?? dfault;\n  };\n\nexport const th: ThConstructor = (property): ThGetter => {\n  switch (property) {\n    case 'colors' as keyof Theme:\n      return colorGetter;\n    default:\n      return genericGetter(property);\n  }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY,CAAC;AAElD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,KAAK,IAAI;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,SAAS,IAAI,UAAU;AAEvE,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,MAAM,MAAM;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM,QAAQ;AAC3B,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO,IAA2B;AAAA,EACzD,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,cAAc,QAAQ;AAAA,EACjC;AACF;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
   "names": []
 }

package/dist/types/styled/generated-attributes/generateAttributes.d.ts

@@ -1,2 +1,6 @@
-import type { AttrsFunc, Options } from '../types.js';
+import type { AttrsFunc, Options, OwnerInterface } from '../types.js';
+export declare const getPartProps: (props: {
+    'data-testid': string;
+    'data-dimsum-slot': string;
+} & OwnerInterface) => Record<string, unknown>;
 export declare const generateAttributes: (options: Options, displayName: string | null) => AttrsFunc<any>[];

package/dist/types/styled/generated-attributes/utils/refMerger.d.ts

@@ -1,7 +1,2 @@
-/// <reference types="react" />
-import type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';
 import type { AnyStyledRef } from '../../types.js';
-export declare const refMerger: <T extends {
-    ref?: AnyStyledRef<HTMLElement> | undefined;
-    innerRef?: AnyStyledRef<HTMLElement> | undefined;
-}>(props: StyledComponentPropsWithRef<StyledComponentInnerComponent<import("react").ComponentType<T>>>, object: Record<string, unknown>) => Record<string, unknown>;
+export declare const mergeRefs: <T extends HTMLElement>(ref1: AnyStyledRef<T> | undefined, ref2: AnyStyledRef<T> | undefined) => (_ref: T | null) => void;

package/dist/types/styled/helpers.d.ts

@@ -2,4 +2,5 @@ export declare const propsToClassKey: (props: Record<string, {
     toString: () => string;
 }>) => string;
 export declare const displayNameToKebabCase: (displayName: string) => string;
+export declare const displayNameToPropCase: (displayName: string) => string;
 export declare const slotObjectToDataTestIds: (componentName: string, slotObject: Record<string, string>) => Record<string, string>;

package/dist/types/styled/transformers/dsStyledComponentTransform.d.ts

@@ -0,0 +1,4 @@
+import type { Expressions } from '../types.js';
+type DSStyledComponentTransform = (expressions: Expressions) => Expressions;
+export declare const dsStyledComponentTransform: DSStyledComponentTransform;
+export {};

package/dist/types/styled/transformers/index.d.ts

@@ -1 +1,2 @@
 export { magicCssTransform } from './magicCssTransform.js';
+export { dsStyledComponentTransform } from './dsStyledComponentTransform.js';

package/dist/types/styled/types.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-import type { CSSObject, Interpolation, InterpolationFunction, StyledComponent, StyledComponentInnerComponent, StyledComponentPropsWithRef, ThemedStyledProps } from 'styled-components';
+import type { AnyStyledComponent, CSSObject, Interpolation, InterpolationFunction, StyledComponent, StyledComponentInnerComponent, StyledComponentPropsWithRef, ThemedStyledProps } from 'styled-components';
 import type { Theme as PuiTheme } from '@elliemae/pui-theme';
+import type { ElementType, Ref } from 'react';
+import type React from 'react';
 export interface Options {
     name: string | null;
     slot: string | null;
@@ -18,15 +19,17 @@ export interface Theme extends PuiTheme {
         };
     };
 }
-export type AnyStyledRef<T extends HTMLElement> = React.MutableRefObject<T | null> | ((_ref: T | null) => void) | React.Dispatch<React.SetStateAction<T | null>> | false;
+export type AnyStyledRef<T extends HTMLElement> = React.MutableRefObject<T | null> | ((_ref: T | null) => void) | false | null;
 export type StyleArg<T = any> = TemplateStringsArray | CSSObject | InterpolationFunction<T>;
 export type Expression<T = any> = Interpolation<T>;
 export type Expressions<T = any> = Array<Expression<T>>;
 export type PropsWithTheme<T = Record<string, unknown>> = T & {
     theme: Theme;
 };
+type ComponentInnerRef<T extends ElementType> = T extends new (props: infer P) => React.Component<any, any> ? Ref<InstanceType<T>> | undefined : React.PropsWithRef<React.ComponentProps<T>>['ref'];
+export type StyledComponentInnerRef<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>> = C extends AnyStyledComponent ? ComponentInnerRef<StyledComponentInnerComponent<C>> : ComponentInnerRef<C>;
 export interface ThemedStyledFunctionBase<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> {
-    <U extends object>(first: StyleArg<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface, T>>, ...rest: Expressions<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface, T>>): StyledComponent<C, T, O & U & OwnerInterface, A>;
+    <U extends object>(first: StyleArg<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>>, ...rest: Expressions<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface & InnerRefInterface<C>, T>>): StyledComponent<C, T, O & U & OwnerInterface & InnerRefInterface<C>, A>;
 }
 export type AttrsFunc<T extends object = Record<string, unknown>> = (props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;
 export type InternalAttrsFunc<T extends object = Record<string, unknown>> = (props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T & {
@@ -35,8 +38,13 @@ export type InternalAttrsFunc<T extends object = Record<string, unknown>> = (pro
     options: Options;
     displayName: string | null;
 }) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;
+export interface InnerRefInterface<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>> {
+    innerRef?: StyledComponentInnerRef<C>;
+    ref?: never;
+}
 export interface OwnerInterface {
     getOwnerProps?: () => object;
     getOwnerPropsArguments?: () => object;
 }
 export type PartProps = Record<string, unknown> | ((args: object) => Record<string, unknown>) | null | undefined;
+export {};

package/dist/types/xStyledWrapper.d.ts

@@ -1,3 +1,3 @@
-export declare const XStyledWrapper: import("styled-components").StyledComponent<"div", import("./index.js").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("./index.js").OwnerInterface, never>;
+export declare const XStyledWrapper: import("styled-components").StyledComponent<"div", import("./index.js").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("./index.js").OwnerInterface & import("./index.js").InnerRefInterface<"div">, never>;
 export declare const xStyledCommonProps: import("@xstyled/system").StyleGenerator<import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("./index.js").BackgroundProps & import("./index.js").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("./index.js").ColorProps>;
 export default XStyledWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "3.24.2",
+  "version": "3.25.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -100,7 +100,7 @@
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "@elliemae/pui-theme": "~2.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.24.2"
+    "@elliemae/ds-monorepo-devops": "3.25.0-next.2"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "^2.7.0",