@elliemae/ds-system 3.12.0-rc.2 → 3.12.0-rc.21

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

@@ -0,0 +1,49 @@
+"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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var attributes_exports = {};
+__export(attributes_exports, {
+  generateAutoCalculatedProperties: () => generateAutoCalculatedProperties
+});
+module.exports = __toCommonJS(attributes_exports);
+var React = __toESM(require("react"));
+var import_utilities = require("./utilities");
+const generateAttributes = (displayName) => {
+  const generator = (props) => {
+    const attributes = {};
+    if (displayName) {
+      attributes.className = displayName;
+      attributes["data-testid"] = props["data-testid"] ?? (0, import_utilities.displayNameToKebabCase)(displayName);
+    }
+    return attributes;
+  };
+  return generator;
+};
+const generateAutoCalculatedProperties = (options) => {
+  const { name: componentName, slot: componentSlot } = options;
+  const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
+  const attributes = generateAttributes(displayName);
+  return { displayName, attributes };
+};
+//# sourceMappingURL=attributes.js.map

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

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

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

@@ -32,12 +32,14 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_styled_components = require("@xstyled/styled-components");
 var import_system = require("@xstyled/system");
+var import_attributes = require("./attributes");
 var import_utilities = require("./utilities");
 const { css, styled: baseStyledComponent, createGlobalStyle } = (0, import_styled_components.createCss)((0, import_system.compose)(import_system.system));
 const styledFunction = (tag, options = { name: null, slot: null }) => {
   const { name: componentName, slot: componentSlot } = options;
+  (0, import_utilities.checkNamingConvention)(componentName, componentSlot);
   const defaultStyledResolver = baseStyledComponent(tag);
-  const attributes = {
+  const styledAttributes = {
     attrs: defaultStyledResolver.attrs,
     withConfig: defaultStyledResolver.withConfig
   };
@@ -70,18 +72,15 @@ const styledFunction = (tag, options = { name: null, slot: null }) => {
     } else if (typeof styleArgWithMagic === "function") {
       transformedStyleArg = (props) => styleArgWithMagic({ ...props, theme: (0, import_utilities.coerceWithDefaultTheme)(props.theme) });
     }
-    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
-    const classNameObject = displayName !== null ? { className: displayName } : {};
-    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(
-      classNameObject
-    );
+    const { displayName, attributes } = (0, import_attributes.generateAutoCalculatedProperties)(options);
+    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(attributes);
     const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);
     if (displayName !== null) {
       Component.displayName = displayName;
     }
     return Component;
   };
-  return Object.assign(dimsumStyledResolver, attributes);
+  return Object.assign(dimsumStyledResolver, styledAttributes);
 };
 const styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {
   const castedKey = key;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/ds-styled/types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyStyledComponent,\n  StyledComponentInnerAttrs,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  CSSObject,\n  StyledComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n  Interpolation,\n  InterpolationFunction,\n  StyledConfig,\n} from 'styled-components';\nimport type { SpaceProps as XstyledSpace, ColorProps as XstyledColor } from '@xstyled/system';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\ninterface DSStyledConfig {\n  name: string | null;\n  slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> = <U extends object>(\n  first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n  // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n  // My head already hurts enough so maybe later...\n  attrs<\n    U,\n    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n      [others: string]: any;\n    } = any,\n  >(\n    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n  withConfig: <Props extends O = O>(\n    config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n  ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options?: DSStyledConfig,\n) => ThemedStyledFunction<\n  C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n  Theme,\n  C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n  C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n  ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme<T = Record<string, unknown>> = { theme: Theme } & T;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type { LayoutProps, SizingProps, FontSizeProps, PositionProps, BoxShadowProps } from '@xstyled/system';\n\ninterface DummyColorTheme {\n  'neutral-100': true;\n  'neutral-200': true;\n  'neutral-300': true;\n  'neutral-400': true;\n  'neutral-500': true;\n  'neutral-600': true;\n  'neutral-700': true;\n  'neutral-800': true;\n  'neutral-000': true;\n  'neutral-050': true;\n  'neutral-080': true;\n  'brand-100': true;\n  'brand-200': true;\n  'brand-300': true;\n  'brand-400': true;\n  'brand-500': true;\n  'brand-600': true;\n  'brand-700': true;\n  'brand-800': true;\n  'success-300': true;\n  'success-900': true;\n  'warning-400': true;\n  'warning-600': true;\n  'warning-900': true;\n  'danger-200': true;\n  'danger-900': true;\n}\n\n// Redeclaring types as interfaces to prevent TS errors\ntype SpacePropsT = {\n  [key in keyof XstyledSpace]?: XstyledSpace[key] | keyof Theme['space'];\n};\n\ntype ColorPropsT = {\n  [key in keyof XstyledColor]?: XstyledColor[key] | keyof DummyColorTheme;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface SpaceProps extends SpacePropsT {}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ColorProps extends ColorPropsT {}\n\nexport interface BorderProps {\n  border?: string;\n  borderTop?: string;\n  borderBottom?: string;\n  borderRight?: string;\n  borderLeft?: string;\n  borderColor?: keyof DummyColorTheme;\n  borderTopColor?: keyof DummyColorTheme;\n  borderBottomColor?: keyof DummyColorTheme;\n  borderRightColor?: keyof DummyColorTheme;\n  borderLeftColor?: keyof DummyColorTheme;\n  borderStyle?: string;\n  borderTopStyle?: string;\n  borderBottomStyle?: string;\n  borderRightStyle?: string;\n  borderLeftStyle?: string;\n  borderWidth?: keyof Theme['space'];\n  borderTopWidth?: keyof Theme['space'];\n  borderBottomWidth?: keyof Theme['space'];\n  borderRightWidth?: keyof Theme['space'];\n  borderLeftWidth?: keyof Theme['space'];\n  borderRadius?: keyof Theme['space'];\n}\n\nexport interface BackgroundProps {\n  backgroundColor?: keyof DummyColorTheme;\n  bg?: keyof DummyColorTheme;\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n  AnyStyledComponent,\n  StyledComponentInnerAttrs,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  CSSObject,\n  StyledComponent,\n  StyledComponentPropsWithRef,\n  ThemedStyledProps,\n  Interpolation,\n  InterpolationFunction,\n  StyledConfig,\n} from 'styled-components';\nimport type {\n  SpaceProps as XstyledSpace,\n  MarginProps,\n  MarginTopProps,\n  MarginRightProps,\n  MarginBottomProps,\n  MarginLeftProps,\n  MarginXProps,\n  MarginYProps,\n  PaddingProps,\n  PaddingTopProps,\n  PaddingRightProps,\n  PaddingBottomProps,\n  PaddingLeftProps,\n  PaddingXProps,\n  PaddingYProps,\n  ColorProps as XstyledColor,\n} from '@xstyled/system';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n  components?: {\n    [componentName: string]: {\n      styleOverrides?: CSSObject;\n      variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n    };\n  };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\nexport interface DSStyledConfig {\n  name: string | null;\n  slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> = <U extends object>(\n  first:\n    | TemplateStringsArray\n    | CSSObject\n    | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n  T extends object,\n  O extends object = Record<string, unknown>,\n  A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n  // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n  // My head already hurts enough so maybe later...\n  attrs<\n    U,\n    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n      [others: string]: any;\n    } = any,\n  >(\n    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n  ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n  withConfig: <Props extends O = O>(\n    config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n  ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options?: DSStyledConfig,\n) => ThemedStyledFunction<\n  C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n  Theme,\n  C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n  C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n  ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme<T = Record<string, unknown>> = { theme: Theme } & T;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type { LayoutProps, SizingProps, FontSizeProps, PositionProps, BoxShadowProps } from '@xstyled/system';\n\ninterface DummyColorTheme {\n  'neutral-100': true;\n  'neutral-200': true;\n  'neutral-300': true;\n  'neutral-400': true;\n  'neutral-500': true;\n  'neutral-600': true;\n  'neutral-700': true;\n  'neutral-800': true;\n  'neutral-000': true;\n  'neutral-050': true;\n  'neutral-080': true;\n  'brand-100': true;\n  'brand-200': true;\n  'brand-300': true;\n  'brand-400': true;\n  'brand-500': true;\n  'brand-600': true;\n  'brand-700': true;\n  'brand-800': true;\n  'success-300': true;\n  'success-900': true;\n  'warning-400': true;\n  'warning-600': true;\n  'warning-900': true;\n  'danger-200': true;\n  'danger-900': true;\n}\n\n// Redeclaring types as interfaces to prevent TS errors\n\ninterface MarginAndPaddings\n  extends MarginProps,\n    MarginTopProps,\n    MarginRightProps,\n    MarginBottomProps,\n    MarginLeftProps,\n    MarginXProps,\n    MarginYProps,\n    PaddingProps,\n    PaddingTopProps,\n    PaddingRightProps,\n    PaddingBottomProps,\n    PaddingLeftProps,\n    PaddingXProps,\n    PaddingYProps {}\n\ntype SpacePropsT = {\n  [key in keyof XstyledSpace]?: XstyledSpace[key];\n} & {\n  [key in keyof MarginAndPaddings]?: XstyledSpace[key] | keyof Theme['space'];\n};\n\ntype ColorPropsT = {\n  [key in keyof XstyledColor]?: XstyledColor[key] | keyof DummyColorTheme;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface SpaceProps extends SpacePropsT {}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ColorProps extends ColorPropsT {}\n\nexport interface BorderProps {\n  border?: string;\n  borderTop?: string;\n  borderBottom?: string;\n  borderRight?: string;\n  borderLeft?: string;\n  borderColor?: keyof DummyColorTheme;\n  borderTopColor?: keyof DummyColorTheme;\n  borderBottomColor?: keyof DummyColorTheme;\n  borderRightColor?: keyof DummyColorTheme;\n  borderLeftColor?: keyof DummyColorTheme;\n  borderStyle?: string;\n  borderTopStyle?: string;\n  borderBottomStyle?: string;\n  borderRightStyle?: string;\n  borderLeftStyle?: string;\n  borderWidth?: keyof Theme['space'];\n  borderTopWidth?: keyof Theme['space'];\n  borderBottomWidth?: keyof Theme['space'];\n  borderRightWidth?: keyof Theme['space'];\n  borderLeftWidth?: keyof Theme['space'];\n  borderRadius?: keyof Theme['space'];\n}\n\nexport interface BackgroundProps {\n  backgroundColor?: keyof DummyColorTheme;\n  bg?: keyof DummyColorTheme;\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

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

@@ -0,0 +1,45 @@
+"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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkNamingConvention_exports = {};
+__export(checkNamingConvention_exports, {
+  checkNamingConvention: () => checkNamingConvention
+});
+module.exports = __toCommonJS(checkNamingConvention_exports);
+var React = __toESM(require("react"));
+const checkNamingConvention = (componentName, componentSlot) => {
+  if (componentName !== null) {
+    const matches = componentName.match(/DS([A-Z]|[a-z]|[0-9])*/);
+    if (!matches || matches.length === 0 || matches[0].length !== componentName.length) {
+      console.warn(`BAD FORMAT FOR COMPONENT NAME ${componentName}, use DSWhateverComponentTitled`);
+    }
+  }
+  if (componentSlot !== null) {
+    const isValid = /([a-z]-)*/.test(componentSlot);
+    if (!isValid) {
+      console.warn(`BAD FORMAT FOR COMPONENT SLOT ${componentSlot}, use any-component-slot`);
+    }
+  }
+};
+//# sourceMappingURL=checkNamingConvention.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ds-styled/utilities/checkNamingConvention.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-console */\n\nexport const checkNamingConvention = (componentName: string | null, componentSlot: string | null): void => {\n  // We just check that the name is correctly written, should be removed in the future\n  if (componentName !== null) {\n    const matches = componentName.match(/DS([A-Z]|[a-z]|[0-9])*/);\n    if (!matches || matches.length === 0 || matches[0].length !== componentName.length) {\n      console.warn(`BAD FORMAT FOR COMPONENT NAME ${componentName}, use DSWhateverComponentTitled`);\n    }\n  }\n  if (componentSlot !== null) {\n    const isValid = /([a-z]-)*/.test(componentSlot);\n    if (!isValid) {\n      console.warn(`BAD FORMAT FOR COMPONENT SLOT ${componentSlot}, use any-component-slot`);\n    }\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,wBAAwB,CAAC,eAA8B,kBAAuC;AAEzG,MAAI,kBAAkB,MAAM;AAC1B,UAAM,UAAU,cAAc,MAAM,wBAAwB;AAC5D,QAAI,CAAC,WAAW,QAAQ,WAAW,KAAK,QAAQ,GAAG,WAAW,cAAc,QAAQ;AAClF,cAAQ,KAAK,iCAAiC,8CAA8C;AAAA,IAC9F;AAAA,EACF;AACA,MAAI,kBAAkB,MAAM;AAC1B,UAAM,UAAU,YAAY,KAAK,aAAa;AAC9C,QAAI,CAAC,SAAS;AACZ,cAAQ,KAAK,iCAAiC,uCAAuC;AAAA,IACvF;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -25,6 +25,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var helpers_exports = {};
 __export(helpers_exports, {
   coerceWithDefaultTheme: () => coerceWithDefaultTheme,
+  displayNameToKebabCase: () => displayNameToKebabCase,
   isEmpty: () => isEmpty,
   propsToClassKey: () => propsToClassKey,
   stylesArgThemeCoercion: () => stylesArgThemeCoercion
@@ -51,4 +52,8 @@ const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, k
   }
   return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
 }, "");
+const displayNameToKebabCase = (displayName) => {
+  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
+  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
+};
 //# sourceMappingURL=helpers.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/helpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAsC;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc,aAAAA;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAAyC,cAAc;AAEvF,MAAM,yBAAyB,CAAC,cAAsD;AAC3F,MAAI,OAAO,cAAc,YAAY;AACnC,WAAO,CAAC,UACN,UAAU;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,IAAI,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,KAAK,SAAS,CAAC;AAC3G,GAAG,EAAE;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAsC;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc,aAAAA;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAAyC,cAAc;AAEvF,MAAM,yBAAyB,CAAC,cAAsD;AAC3F,MAAI,OAAO,cAAc,YAAY;AACnC,WAAO,CAAC,UACN,UAAU;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,IAAI,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,KAAK,SAAS,CAAC;AAC3G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;",
   "names": ["defaultTheme"]
 }

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

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(utilities_exports);
 var React = __toESM(require("react"));
 __reExport(utilities_exports, require("./background"), module.exports);
 __reExport(utilities_exports, require("./border"), module.exports);
+__reExport(utilities_exports, require("./checkNamingConvention"), module.exports);
 __reExport(utilities_exports, require("./color"), module.exports);
 __reExport(utilities_exports, require("./helpers"), module.exports);
 __reExport(utilities_exports, require("./magicCssTransform"), module.exports);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ds-styled/utilities/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './background';\nexport * from './border';\nexport * from './color';\nexport * from './helpers';\nexport * from './magicCssTransform';\nexport * from './resolvers';\nexport * from './sizing';\nexport * from './space';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,yBAAd;AACA,8BAAc,qBADd;AAEA,8BAAc,oBAFd;AAGA,8BAAc,sBAHd;AAIA,8BAAc,gCAJd;AAKA,8BAAc,wBALd;AAMA,8BAAc,qBANd;AAOA,8BAAc,oBAPd;",
+  "sourcesContent": ["export * from './background';\nexport * from './border';\nexport * from './checkNamingConvention';\nexport * from './color';\nexport * from './helpers';\nexport * from './magicCssTransform';\nexport * from './resolvers';\nexport * from './sizing';\nexport * from './space';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,yBAAd;AACA,8BAAc,qBADd;AAEA,8BAAc,oCAFd;AAGA,8BAAc,oBAHd;AAIA,8BAAc,sBAJd;AAKA,8BAAc,gCALd;AAMA,8BAAc,wBANd;AAOA,8BAAc,qBAPd;AAQA,8BAAc,oBARd;",
   "names": []
 }

package/dist/cjs/themeProviderHOC.js

@@ -32,12 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_styled_components = require("@xstyled/styled-components");
 var import_theme = require("./theme");
 const themeProviderHOC = (Component) => {
-  const WrappedComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, {
-    theme: import_theme.theme,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-      ...props
-    })
-  });
+  const WrappedComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { theme: import_theme.theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) });
   return WrappedComponent;
 };
 //# sourceMappingURL=themeProviderHOC.js.map

package/dist/cjs/themeProviderHOC.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/themeProviderHOC.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from '@xstyled/styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => {\n  const WrappedComponent = (props: Record<string, unknown>): JSX.Element => (\n    <ThemeProvider theme={theme}>\n      <Component {...props} />\n    </ThemeProvider>\n  );\n  return WrappedComponent;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOjB;AANN,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,4CAAC;AAAA,IAAc,OAAO;AAAA,IACpB,sDAAC;AAAA,MAAW,GAAG;AAAA,KAAO;AAAA,GACxB;AAEF,SAAO;AACT;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOjB;AANN,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,4CAAC,0CAAc,OAAO,oBACpB,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEF,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/xStyledWrapper.js

@@ -33,6 +33,7 @@ var React = __toESM(require("react"));
 var import__ = require(".");
 var import_system = require("@xstyled/system");
 const XStyledWrapper = (0, import__.styled)("div")`
+  ${import__.typography}
   ${import__.layout}
   ${import__.space}
   ${import__.sizing}
@@ -41,9 +42,9 @@ const XStyledWrapper = (0, import__.styled)("div")`
   ${import__.boxShadows}
   ${import__.flexboxes}
   ${import__.color}
-  ${import__.typography}
 `;
 const xStyledCommonProps = (0, import_system.compose)(
+  import__.typography,
   import__.background,
   import__.borders,
   import__.sizing,
@@ -51,8 +52,7 @@ const xStyledCommonProps = (0, import_system.compose)(
   import__.boxShadows,
   import__.flexboxes,
   import__.layout,
-  import__.color,
-  import__.typography
+  import__.color
 );
 var xStyledWrapper_default = XStyledWrapper;
 //# sourceMappingURL=xStyledWrapper.js.map

package/dist/cjs/xStyledWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/xStyledWrapper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, typography, background, borders, sizing, space, boxShadows, flexboxes, layout, color } from '.';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { compose } from '@xstyled/system';\n\nexport const XStyledWrapper = styled('div')`\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n  ${color}\n  ${typography}\n`;\n\nexport const xStyledCommonProps = compose(\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  color,\n  typography,\n);\n\nexport default XStyledWrapper;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { styled, typography, background, borders, sizing, space, boxShadows, flexboxes, layout, color } from '.';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\nimport { compose } from '@xstyled/system';\n\nexport const XStyledWrapper = styled('div')`\n  ${typography}\n  ${layout}\n  ${space}\n  ${sizing}\n  ${background}\n  ${borders}\n  ${boxShadows}\n  ${flexboxes}\n  ${color}\n`;\n\nexport const xStyledCommonProps = compose(\n  typography,\n  background,\n  borders,\n  sizing,\n  space,\n  boxShadows,\n  flexboxes,\n  layout,\n  color,\n);\n\nexport default XStyledWrapper;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,eAA6G;AAG7G,oBAAwB;AAEjB,MAAM,qBAAiB,iBAAO,KAAK;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,yBAAQ;",
   "names": []
 }

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { displayNameToKebabCase } from "./utilities";
+const generateAttributes = (displayName) => {
+  const generator = (props) => {
+    const attributes = {};
+    if (displayName) {
+      attributes.className = displayName;
+      attributes["data-testid"] = props["data-testid"] ?? displayNameToKebabCase(displayName);
+    }
+    return attributes;
+  };
+  return generator;
+};
+const generateAutoCalculatedProperties = (options) => {
+  const { name: componentName, slot: componentSlot } = options;
+  const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
+  const attributes = generateAttributes(displayName);
+  return { displayName, attributes };
+};
+export {
+  generateAutoCalculatedProperties
+};
+//# sourceMappingURL=attributes.js.map

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

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

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

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { createCss } from "@xstyled/styled-components";
 import { system, compose } from "@xstyled/system";
+import { generateAutoCalculatedProperties } from "./attributes";
 import {
+  checkNamingConvention,
   coerceWithDefaultTheme,
   getStyleOverrides,
   magicCssTransform,
@@ -12,8 +14,9 @@ import {
 const { css, styled: baseStyledComponent, createGlobalStyle } = createCss(compose(system));
 const styledFunction = (tag, options = { name: null, slot: null }) => {
   const { name: componentName, slot: componentSlot } = options;
+  checkNamingConvention(componentName, componentSlot);
   const defaultStyledResolver = baseStyledComponent(tag);
-  const attributes = {
+  const styledAttributes = {
     attrs: defaultStyledResolver.attrs,
     withConfig: defaultStyledResolver.withConfig
   };
@@ -46,18 +49,15 @@ const styledFunction = (tag, options = { name: null, slot: null }) => {
     } else if (typeof styleArgWithMagic === "function") {
       transformedStyleArg = (props) => styleArgWithMagic({ ...props, theme: coerceWithDefaultTheme(props.theme) });
     }
-    const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
-    const classNameObject = displayName !== null ? { className: displayName } : {};
-    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(
-      classNameObject
-    );
+    const { displayName, attributes } = generateAutoCalculatedProperties(options);
+    const defaultStyledResolverWithClassName = defaultStyledResolver.attrs(attributes);
     const Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);
     if (displayName !== null) {
       Component.displayName = displayName;
     }
     return Component;
   };
-  return Object.assign(dimsumStyledResolver, attributes);
+  return Object.assign(dimsumStyledResolver, styledAttributes);
 };
 const styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {
   const castedKey = key;

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

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

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+const checkNamingConvention = (componentName, componentSlot) => {
+  if (componentName !== null) {
+    const matches = componentName.match(/DS([A-Z]|[a-z]|[0-9])*/);
+    if (!matches || matches.length === 0 || matches[0].length !== componentName.length) {
+      console.warn(`BAD FORMAT FOR COMPONENT NAME ${componentName}, use DSWhateverComponentTitled`);
+    }
+  }
+  if (componentSlot !== null) {
+    const isValid = /([a-z]-)*/.test(componentSlot);
+    if (!isValid) {
+      console.warn(`BAD FORMAT FOR COMPONENT SLOT ${componentSlot}, use any-component-slot`);
+    }
+  }
+};
+export {
+  checkNamingConvention
+};
+//# sourceMappingURL=checkNamingConvention.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/checkNamingConvention.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-console */\n\nexport const checkNamingConvention = (componentName: string | null, componentSlot: string | null): void => {\n  // We just check that the name is correctly written, should be removed in the future\n  if (componentName !== null) {\n    const matches = componentName.match(/DS([A-Z]|[a-z]|[0-9])*/);\n    if (!matches || matches.length === 0 || matches[0].length !== componentName.length) {\n      console.warn(`BAD FORMAT FOR COMPONENT NAME ${componentName}, use DSWhateverComponentTitled`);\n    }\n  }\n  if (componentSlot !== null) {\n    const isValid = /([a-z]-)*/.test(componentSlot);\n    if (!isValid) {\n      console.warn(`BAD FORMAT FOR COMPONENT SLOT ${componentSlot}, use any-component-slot`);\n    }\n  }\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,wBAAwB,CAAC,eAA8B,kBAAuC;AAEzG,MAAI,kBAAkB,MAAM;AAC1B,UAAM,UAAU,cAAc,MAAM,wBAAwB;AAC5D,QAAI,CAAC,WAAW,QAAQ,WAAW,KAAK,QAAQ,GAAG,WAAW,cAAc,QAAQ;AAClF,cAAQ,KAAK,iCAAiC,8CAA8C;AAAA,IAC9F;AAAA,EACF;AACA,MAAI,kBAAkB,MAAM;AAC1B,UAAM,UAAU,YAAY,KAAK,aAAa;AAC9C,QAAI,CAAC,SAAS;AACZ,cAAQ,KAAK,iCAAiC,uCAAuC;AAAA,IACvF;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -19,8 +19,13 @@ const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, k
   }
   return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
 }, "");
+const displayNameToKebabCase = (displayName) => {
+  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
+  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
+};
 export {
   coerceWithDefaultTheme,
+  displayNameToKebabCase,
   isEmpty,
   propsToClassKey,
   stylesArgThemeCoercion

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/helpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,SAAS,oBAAoB;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAAyC,cAAc;AAEvF,MAAM,yBAAyB,CAAC,cAAsD;AAC3F,MAAI,OAAO,cAAc,YAAY;AACnC,WAAO,CAAC,UACN,UAAU;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,IAAI,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,KAAK,SAAS,CAAC;AAC3G,GAAG,EAAE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Interpolation } from 'styled-components';\nimport type { PropsWithTheme, Theme } from '../types';\nimport { theme as defaultTheme } from '../../theme';\n\nconst capitalize = (string: string): string => string.charAt(0).toUpperCase() + string.slice(1);\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme | undefined): Theme => themeInput ?? systemTheme;\n\nexport const stylesArgThemeCoercion = (stylesArg: Interpolation<any>): Interpolation<any> => {\n  if (typeof stylesArg === 'function') {\n    return (props: PropsWithTheme) =>\n      stylesArg({\n        ...props,\n        theme: coerceWithDefaultTheme(props.theme),\n      });\n  }\n  return stylesArg;\n};\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n  Object.keys(props)\n    .sort()\n    .reduce((classKey, key) => {\n      if (key === 'color') {\n        return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));\n      }\n      return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n    }, '');\n\nexport const displayNameToKebabCase = (displayName: string) => {\n  // We also remove \"DS\" preffix\n  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);\n\n  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join('-')}`;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,SAAS,oBAAoB;AAEtC,MAAM,aAAa,CAAC,WAA2B,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AAE9F,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAAyC,cAAc;AAEvF,MAAM,yBAAyB,CAAC,cAAsD;AAC3F,MAAI,OAAO,cAAc,YAAY;AACnC,WAAO,CAAC,UACN,UAAU;AAAA,MACR,GAAG;AAAA,MACH,OAAO,uBAAuB,MAAM,KAAK;AAAA,IAC3C,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,KAAK,EACd,KAAK,EACL,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,YAAY,QAAQ,OAAO,QAAQ,CAAC,IAAI,OAAO,MAAM,IAAI,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AAAA,EACnG;AACA,SAAO,GAAG,WAAW,QAAQ,OAAO,QAAQ,CAAC,IAAI,MAAM,WAAW,GAAG,IAAI,WAAW,MAAM,KAAK,SAAS,CAAC;AAC3G,GAAG,EAAE;AAEF,MAAM,yBAAyB,CAAC,gBAAwB;AAE7D,QAAM,8BAA8B,YAAY,MAAM,WAAW,EAAE,MAAM,CAAC;AAE1E,SAAO,MAAM,4BAA4B,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,EAAE,KAAK,GAAG;AACrF;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 export * from "./background";
 export * from "./border";
+export * from "./checkNamingConvention";
 export * from "./color";
 export * from "./helpers";
 export * from "./magicCssTransform";

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

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

package/dist/esm/themeProviderHOC.js

@@ -3,12 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { ThemeProvider } from "@xstyled/styled-components";
 import { theme } from "./theme";
 const themeProviderHOC = (Component) => {
-  const WrappedComponent = (props) => /* @__PURE__ */ jsx(ThemeProvider, {
-    theme,
-    children: /* @__PURE__ */ jsx(Component, {
-      ...props
-    })
-  });
+  const WrappedComponent = (props) => /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(Component, { ...props }) });
   return WrappedComponent;
 };
 export {

package/dist/esm/themeProviderHOC.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/themeProviderHOC.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ThemeProvider } from '@xstyled/styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => {\n  const WrappedComponent = (props: Record<string, unknown>): JSX.Element => (\n    <ThemeProvider theme={theme}>\n      <Component {...props} />\n    </ThemeProvider>\n  );\n  return WrappedComponent;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACOjB;AANN,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,oBAAC;AAAA,IAAc;AAAA,IACb,8BAAC;AAAA,MAAW,GAAG;AAAA,KAAO;AAAA,GACxB;AAEF,SAAO;AACT;",
+  "mappings": "AAAA,YAAY,WAAW;ACOjB;AANN,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEf,MAAM,mBAAmB,CAAC,cAAiC;AAChE,QAAM,mBAAmB,CAAC,UACxB,oBAAC,iBAAc,OACb,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEF,SAAO;AACT;",
   "names": []
 }

package/dist/esm/xStyledWrapper.js

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

package/dist/esm/xStyledWrapper.js.map

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

package/package.json

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