@elliemae/ds-legacy-system 1.0.0-rc.1

package/dist/esm/spaceUtilities.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { get } from "lodash";
+import { theme } from "./theme.js";
+function mapGap(gutter) {
+  if (!gutter)
+    return "0rem";
+  if (String(gutter).includes("rem") || String(gutter).includes("px"))
+    return gutter;
+  return `${theme.space[gutter]}`;
+}
+function mapGutter(gutter) {
+  if (!gutter)
+    return "0rem";
+  return `${theme.space[gutter]} * 2`;
+}
+function mapSpace(width) {
+  if (typeof width === "string")
+    return get(theme, width) ? `${get(theme, width)}` : width;
+  return `${width * 100}%`;
+}
+function fixSpaceGutter(width, gutter) {
+  if (!width)
+    return "";
+  if (width === "fit-content")
+    return width;
+  if (Array.isArray(width))
+    return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
+  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
+}
+function fixSpace(width) {
+  if (!width)
+    return "";
+  if (Array.isArray(width))
+    return width.map((w) => mapSpace(w));
+  return mapSpace(width);
+}
+function numbersToFr(grid) {
+  const den = grid.map((f) => f < 1 ? Math.floor(1 / f) : f);
+  return den.map((d) => `${d}fr`);
+}
+function mapGrid(width) {
+  if (get(theme, width))
+    return `${get(theme, width)}`;
+  if (typeof width === "string")
+    return width;
+  const den = width < 1 ? Math.floor(1 / width) : width;
+  return `${den}fr`;
+}
+function mapTemplateGrid(grid) {
+  if (Array.isArray(grid)) {
+    if (grid.some((w) => typeof w === "string"))
+      return grid.map((w) => mapGrid(w));
+    return numbersToFr(grid);
+  }
+  return mapGrid(grid);
+}
+export {
+  fixSpace,
+  fixSpaceGutter,
+  mapGap,
+  mapGrid,
+  mapGutter,
+  mapSpace,
+  mapTemplateGrid,
+  numbersToFr
+};
+//# sourceMappingURL=spaceUtilities.js.map

package/dist/esm/spaceUtilities.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/spaceUtilities.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash';\nimport { theme } from './theme.js';\n\nexport function mapGap(gutter: number | string): number | string {\n  if (!gutter) return '0rem';\n  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n  return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n  if (!gutter) return '0rem';\n  return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n  if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n  return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n  width: string | number | string[] | number[],\n  gutter?: string | number,\n): string | string[] {\n  if (!width) return '';\n  if (width === 'fit-content') return width;\n  if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n  return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n  if (!width) return '';\n  if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n  return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n  const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n  return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n  if (get(theme, width)) return `${get(theme, width)}`;\n  if (typeof width === 'string') return width;\n  const den = width < 1 ? Math.floor(1 / width) : width;\n  return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number | string | (number | string)[]): string | string[] {\n  if (Array.isArray(grid)) {\n    if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n    return numbersToFr(grid as number[]);\n  }\n  return mapGrid(grid);\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,aAAa;AAEf,SAAS,OAAO,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAAG,WAAO;AAC5E,SAAO,GAAG,MAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,UAAU,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,MAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,SAAS,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,WAAO,IAAI,OAAO,KAAK,IAAI,GAAG,IAAI,OAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,SAAS,eACd,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,UAAU;AAAe,WAAO;AACpC,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,CAAC,QAAQ,UAAU,MAAM,KAAK;AACjG,SAAO,QAAQ,SAAS,KAAK,QAAQ,UAAU,MAAM;AACvD;AAEO,SAAS,SAAS,OAAiE;AACxF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAC7D,SAAO,SAAS,KAAK;AACvB;AAEO,SAAS,YAAY,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAE;AAC3D,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK;AAChC;AACO,SAAS,QAAQ,OAAgC;AACtD,MAAI,IAAI,OAAO,KAAK;AAAG,WAAO,GAAG,IAAI,OAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,SAAS,gBAAgB,MAAgE;AAC9F,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAG,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC;AAC9E,WAAO,YAAY,IAAgB;AAAA,EACrC;AACA,SAAO,QAAQ,IAAI;AACrB;",
+  "names": []
+}

package/dist/esm/styled/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/styled/checkNamingConvention.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/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,CAAC,EAAE,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/styled/coerceWithDefaultTheme.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { theme as defaultTheme } from "../theme.js";
+const coerceSingleExpressionWithDefaultTheme = (expression) => {
+  if (typeof expression === "function") {
+    return (props) => expression({
+      ...props,
+      theme: props.theme ?? defaultTheme
+    });
+  }
+  return expression;
+};
+const coerceWithDefaultTheme = (expressions) => expressions ? expressions.map(coerceSingleExpressionWithDefaultTheme) : [];
+export {
+  coerceWithDefaultTheme
+};
+//# sourceMappingURL=coerceWithDefaultTheme.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/coerceWithDefaultTheme.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { theme as defaultTheme } from '../theme.js';\nimport type { Expressions, Expression, PropsWithTheme } from './types.js';\n\nconst coerceSingleExpressionWithDefaultTheme = (expression: Expression): Expression => {\n  if (typeof expression === 'function') {\n    return (props: PropsWithTheme) =>\n      expression({\n        ...props,\n        theme: props.theme ?? defaultTheme,\n      });\n  }\n  return expression;\n};\n\nexport const coerceWithDefaultTheme = (expressions: Expressions): Expressions =>\n  expressions ? expressions.map(coerceSingleExpressionWithDefaultTheme) : [];\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,oBAAoB;AAGtC,MAAM,yCAAyC,CAAC,eAAuC;AACrF,MAAI,OAAO,eAAe,YAAY;AACpC,WAAO,CAAC,UACN,WAAW;AAAA,MACT,GAAG;AAAA,MACH,OAAO,MAAM,SAAS;AAAA,IACxB,CAAC;AAAA,EACL;AACA,SAAO;AACT;AAEO,MAAM,yBAAyB,CAAC,gBACrC,cAAc,YAAY,IAAI,sCAAsC,IAAI,CAAC;",
+  "names": []
+}

package/dist/esm/styled/expressions/genStyleOverridesExpression.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { theme as defaultTheme } from "../../theme.js";
+const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
+const genStyleOverridesExpression = (componentName, componentSlot) => (props) => {
+  const styleOverrides = getStyleOverrides(componentName, props.theme ?? defaultTheme);
+  if (styleOverrides) {
+    return [styleOverrides[componentSlot]];
+  }
+  return null;
+};
+export {
+  genStyleOverridesExpression
+};
+//# sourceMappingURL=genStyleOverridesExpression.js.map

package/dist/esm/styled/expressions/genStyleOverridesExpression.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/expressions/genStyleOverridesExpression.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport type { CSSObject } from 'styled-components';\n\nconst getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n  theme.components?.[name]?.styleOverrides || null;\n\nexport const genStyleOverridesExpression =\n  (componentName: string, componentSlot: string) => (props: PropsWithTheme) => {\n    const styleOverrides = getStyleOverrides(componentName, props.theme ?? defaultTheme);\n    if (styleOverrides) {\n      return [styleOverrides[componentSlot]];\n    }\n    return null;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,SAAS,oBAAoB;AAGtC,MAAM,oBAAoB,CAAC,MAAc,UACvC,MAAM,aAAa,IAAI,GAAG,kBAAkB;AAEvC,MAAM,8BACX,CAAC,eAAuB,kBAA0B,CAAC,UAA0B;AAC3E,QAAM,iBAAiB,kBAAkB,eAAe,MAAM,SAAS,YAAY;AACnF,MAAI,gBAAgB;AAClB,WAAO,CAAC,eAAe,aAAa,CAAC;AAAA,EACvC;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/styled/expressions/genVariantOverridesExpression.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { theme as defaultTheme } from "../../theme.js";
+import { propsToClassKey } from "../helpers.js";
+const getVariantStyles = (name, theme) => {
+  const variants = theme.components?.[name]?.variants || [];
+  return variants.reduce(
+    (styles, definition) => {
+      const key = propsToClassKey(definition.props);
+      styles[key] = definition.style;
+      return styles;
+    },
+    {}
+  );
+};
+const genVariantOverridesExpression = (componentName) => (props) => {
+  const theme = props.theme ?? defaultTheme;
+  const variantStyles = getVariantStyles(componentName, theme);
+  const themeVariants = theme?.components?.[componentName]?.variants || [];
+  return themeVariants.reduce(
+    (resultingStyles, themeVariant) => {
+      const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);
+      if (isMatch) {
+        resultingStyles.push(variantStyles[propsToClassKey(themeVariant.props)]);
+      }
+      return resultingStyles;
+    },
+    []
+  );
+};
+export {
+  genVariantOverridesExpression
+};
+//# sourceMappingURL=genVariantOverridesExpression.js.map

package/dist/esm/styled/expressions/genVariantOverridesExpression.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/expressions/genVariantOverridesExpression.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { PropsWithTheme, Theme } from '../types.js';\nimport { theme as defaultTheme } from '../../theme.js';\nimport type { CSSObject } from 'styled-components';\nimport { propsToClassKey } from '../helpers.js';\n\nconst getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n  const variants = theme.components?.[name]?.variants || [];\n\n  return variants.reduce(\n    (styles, definition) => {\n      const key = propsToClassKey(definition.props);\n      styles[key] = definition.style;\n      return styles;\n    },\n    {} as Record<string, CSSObject>,\n  );\n};\n\nexport const genVariantOverridesExpression = (componentName: string) => (props: PropsWithTheme) => {\n  const theme = props.theme ?? defaultTheme;\n  const variantStyles = getVariantStyles(componentName, theme);\n\n  const themeVariants = theme?.components?.[componentName]?.variants || [];\n\n  return themeVariants.reduce(\n    (resultingStyles, themeVariant) => {\n      const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n      if (isMatch) {\n        resultingStyles.push(variantStyles[propsToClassKey(themeVariant.props)]);\n      }\n      return resultingStyles;\n    },\n    [] as CSSObject[keyof CSSObject][],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,SAAS,oBAAoB;AAEtC,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AAClF,QAAM,WAAW,MAAM,aAAa,IAAI,GAAG,YAAY,CAAC;AAExD,SAAO,SAAS;AAAA,IACd,CAAC,QAAQ,eAAe;AACtB,YAAM,MAAM,gBAAgB,WAAW,KAAK;AAC5C,aAAO,GAAG,IAAI,WAAW;AACzB,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,MAAM,gCAAgC,CAAC,kBAA0B,CAAC,UAA0B;AACjG,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,gBAAgB,iBAAiB,eAAe,KAAK;AAE3D,QAAM,gBAAgB,OAAO,aAAa,aAAa,GAAG,YAAY,CAAC;AAEvE,SAAO,cAAc;AAAA,IACnB,CAAC,iBAAiB,iBAAiB;AACjC,YAAM,UAAU,OAAO,KAAK,aAAa,KAAK,EAAE,MAAM,CAAC,QAAQ,MAAM,GAAG,MAAM,aAAa,MAAM,GAAG,CAAC;AACrG,UAAI,SAAS;AACX,wBAAgB,KAAK,cAAc,gBAAgB,aAAa,KAAK,CAAC,CAAC;AAAA,MACzE;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/expressions/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { genStyleOverridesExpression } from './genStyleOverridesExpression.js';\nexport { genVariantOverridesExpression } from './genVariantOverridesExpression.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mCAAmC;AAC5C,SAAS,qCAAqC;",
+  "names": []
+}

package/dist/esm/styled/fixStyleArg.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { theme as defaultTheme } from "../theme.js";
+const isTemplateStringsArray = (styleArg) => Array.isArray(styleArg);
+const fixStyleArg = (styleArg, numberOfNewExpressions) => {
+  if (isTemplateStringsArray(styleArg) && numberOfNewExpressions > 0) {
+    const placeholders = new Array(numberOfNewExpressions).fill("");
+    return Object.assign([...styleArg, ...placeholders], {
+      raw: [...styleArg.raw, ...placeholders]
+    });
+  } else if (typeof styleArg === "function") {
+    return (props) => styleArg({ ...props, theme: props.theme ?? defaultTheme });
+  }
+  return styleArg;
+};
+export {
+  fixStyleArg
+};
+//# sourceMappingURL=fixStyleArg.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/fixStyleArg.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { theme as defaultTheme } from '../theme.js';\nimport type { PropsWithTheme, StyleArg } from './types.js';\n\nconst isTemplateStringsArray = (styleArg: StyleArg): styleArg is TemplateStringsArray => Array.isArray(styleArg);\n\nexport const fixStyleArg = (styleArg: StyleArg, numberOfNewExpressions: number): StyleArg => {\n  if (isTemplateStringsArray(styleArg) && numberOfNewExpressions > 0) {\n    // Here we are adding placeholders for all the new functions that we are gonna call\n    const placeholders = new Array(numberOfNewExpressions).fill('') as string[];\n    return Object.assign([...styleArg, ...placeholders], {\n      raw: [...styleArg.raw, ...placeholders],\n    });\n  } else if (typeof styleArg === 'function') {\n    // Here we just coerce with the default theme\n    return (props: PropsWithTheme) => styleArg({ ...props, theme: props.theme ?? defaultTheme });\n  }\n  return styleArg;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,oBAAoB;AAGtC,MAAM,yBAAyB,CAAC,aAAyD,MAAM,QAAQ,QAAQ;AAExG,MAAM,cAAc,CAAC,UAAoB,2BAA6C;AAC3F,MAAI,uBAAuB,QAAQ,KAAK,yBAAyB,GAAG;AAElE,UAAM,eAAe,IAAI,MAAM,sBAAsB,EAAE,KAAK,EAAE;AAC9D,WAAO,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,YAAY,GAAG;AAAA,MACnD,KAAK,CAAC,GAAG,SAAS,KAAK,GAAG,YAAY;AAAA,IACxC,CAAC;AAAA,EACH,WAAW,OAAO,aAAa,YAAY;AAEzC,WAAO,CAAC,UAA0B,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM,SAAS,aAAa,CAAC;AAAA,EAC7F;AACA,SAAO;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { displayNameToKebabCase } from "../helpers.js";
+import { callbackMerger } from "./utils/callbackMerger.js";
+import { refMerger } from "./utils/refMerger.js";
+const generateClassName = (props, meta) => {
+  if (meta.displayName === null)
+    return {};
+  return {
+    className: meta.displayName
+  };
+};
+const generateDataTestId = (props, meta) => {
+  if (meta.displayName === null)
+    return {};
+  return {
+    "data-testid": props["data-testid"] ?? displayNameToKebabCase(meta.displayName)
+  };
+};
+const generateGlobalAttributes = (props) => {
+  const { getOwnerProps, getOwnerPropsArguments } = props;
+  if (getOwnerProps === void 0)
+    return {};
+  const ownerPropsValue = getOwnerProps();
+  const ownerPropsArgumentsValue = getOwnerPropsArguments?.() ?? {};
+  const elementProps = 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 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)];
+};
+export {
+  generateAttributes
+};
+//# sourceMappingURL=generateAttributes.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { generateDisplayName } from "./generateDisplayName.js";
+import { generateAttributes } from "./generateAttributes.js";
+const generateAutoCalculated = (options) => {
+  const displayName = generateDisplayName(options);
+  const attributes = generateAttributes(options, displayName);
+  return [displayName, attributes];
+};
+export {
+  generateAutoCalculated
+};
+//# sourceMappingURL=generateAutoCalculated.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/generated-attributes/generateAutoCalculated.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Options } from '../types.js';\nimport { generateDisplayName } from './generateDisplayName.js';\nimport { generateAttributes } from './generateAttributes.js';\n\nexport const generateAutoCalculated = (options: Options) => {\n  const displayName = generateDisplayName(options);\n\n  const attributes = generateAttributes(options, displayName);\n\n  return [displayName, attributes] as const;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAE5B,MAAM,yBAAyB,CAAC,YAAqB;AAC1D,QAAM,cAAc,oBAAoB,OAAO;AAE/C,QAAM,aAAa,mBAAmB,SAAS,WAAW;AAE1D,SAAO,CAAC,aAAa,UAAU;AACjC;",
+  "names": []
+}

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+const generateDisplayName = (options) => {
+  const { name: componentName, slot: componentSlot } = options;
+  if (componentName === null || componentSlot === null)
+    return null;
+  return `${componentName}-${componentSlot}`;
+};
+export {
+  generateDisplayName
+};
+//# sourceMappingURL=generateDisplayName.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/generated-attributes/generateDisplayName.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Options } from '../types.js';\n\nexport const generateDisplayName = (options: Options) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  if (componentName === null || componentSlot === null) return null;\n\n  return `${componentName}-${componentSlot}`;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,sBAAsB,CAAC,YAAqB;AACvD,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,MAAI,kBAAkB,QAAQ,kBAAkB;AAAM,WAAO;AAE7D,SAAO,GAAG,iBAAiB;AAC7B;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/styled/generated-attributes/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { generateAutoCalculated } from './generateAutoCalculated.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,8BAA8B;",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+const notARefKey = (key) => !["ref", "innerRef"].includes(key);
+const callbackMerger = (props, object) => {
+  const newObject = { ...object };
+  Object.keys(object).forEach((key) => {
+    const propsValue = props[key];
+    const resultingObjectValue = object[key];
+    if (typeof propsValue === "function" && typeof resultingObjectValue === "function" && notARefKey(key)) {
+      newObject[key] = (...args) => {
+        propsValue(...args);
+        resultingObjectValue(...args);
+      };
+    }
+  });
+  return newObject;
+};
+export {
+  callbackMerger
+};
+//# sourceMappingURL=callbackMerger.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/styled/generated-attributes/utils/callbackMerger.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\n\nconst notARefKey = (key: string) => !['ref', 'innerRef'].includes(key);\n\nexport const callbackMerger = <T>(\n  props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>,\n  object: Record<string, unknown>,\n) => {\n  const newObject: Record<string, unknown> = { ...object };\n\n  Object.keys(object).forEach((key) => {\n    const propsValue = (props as unknown as Record<string, unknown>)[key];\n    const resultingObjectValue = object[key];\n    // If the value is a function and the resultingObject has a function with the same key\n    // We merge the 2 functions (we also check that the key is not a ref key)\n    if (typeof propsValue === 'function' && typeof resultingObjectValue === 'function' && notARefKey(key)) {\n      newObject[key] = (...args: unknown[]) => {\n        propsValue(...args);\n        resultingObjectValue(...args);\n      };\n    }\n  });\n  return newObject;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,aAAa,CAAC,QAAgB,CAAC,CAAC,OAAO,UAAU,EAAE,SAAS,GAAG;AAE9D,MAAM,iBAAiB,CAC5B,OACA,WACG;AACH,QAAM,YAAqC,EAAE,GAAG,OAAO;AAEvD,SAAO,KAAK,MAAM,EAAE,QAAQ,CAAC,QAAQ;AACnC,UAAM,aAAc,MAA6C,GAAG;AACpE,UAAM,uBAAuB,OAAO,GAAG;AAGvC,QAAI,OAAO,eAAe,cAAc,OAAO,yBAAyB,cAAc,WAAW,GAAG,GAAG;AACrG,gBAAU,GAAG,IAAI,IAAI,SAAoB;AACvC,mBAAW,GAAG,IAAI;AAClB,6BAAqB,GAAG,IAAI;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+const mergeRefs = (ref1, ref2) => (_ref) => {
+  if (typeof ref1 === "function")
+    ref1(_ref);
+  else if (ref1)
+    ref1.current = _ref;
+  if (typeof ref2 === "function")
+    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
+};
+//# sourceMappingURL=refMerger.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/dist/esm/styled/helpers.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
+const isEmpty = (string) => string.length === 0;
+const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, key) => {
+  if (key === "color") {
+    return classKey + (isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key])));
+  }
+  return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+}, "");
+const displayNameToKebabCase = (displayName) => {
+  const displayNameSplitOnUppercase = displayName.split(/(?=[A-Z])/).slice(2);
+  return `ds-${displayNameSplitOnUppercase.map((part) => part.toLowerCase()).join("-")}`;
+};
+const slotObjectToDataTestIds = (componentName, slotObject) => {
+  const obj = {};
+  Object.keys(slotObject).forEach((slotName) => {
+    const displayName = `${componentName}-${slotObject[slotName]}`;
+    obj[slotName] = displayNameToKebabCase(displayName);
+  });
+  return obj;
+};
+export {
+  displayNameToKebabCase,
+  propsToClassKey,
+  slotObjectToDataTestIds
+};
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/dist/esm/styled/index.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { styled } from "./styled.js";
+import {
+  background,
+  borders,
+  boxShadows,
+  color,
+  flexboxes,
+  fontSize,
+  grids,
+  layout,
+  sizing,
+  space
+} from "./system-utilities/index.js";
+import { slotObjectToDataTestIds } from "./helpers.js";
+export * from "./types.js";
+export * from "./system-types.js";
+import { css, createGlobalStyle } from "./system.js";
+export {
+  background,
+  borders,
+  boxShadows,
+  color,
+  createGlobalStyle,
+  css,
+  flexboxes,
+  fontSize,
+  grids,
+  layout,
+  sizing,
+  slotObjectToDataTestIds,
+  space,
+  styled
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { styled } from './styled.js';\nexport {\n  background,\n  borders,\n  boxShadows,\n  color,\n  flexboxes,\n  fontSize,\n  grids,\n  layout,\n  sizing,\n  space,\n} from './system-utilities/index.js';\nexport { slotObjectToDataTestIds } from './helpers.js';\nexport * from './types.js';\nexport * from './system-types.js';\nexport { css, createGlobalStyle } from './system.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,cAAc;AACd,cAAc;AACd,SAAS,KAAK,yBAAyB;",
+  "names": []
+}

package/dist/esm/styled/styled.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { styledFunction } from "./styledFunction.js";
+import { styledObject } from "./styledObject.js";
+const styled = Object.assign(styledFunction, styledObject);
+export {
+  styled
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styledFunction } from './styledFunction.js';\nimport { styledObject } from './styledObject.js';\n\nexport const styled = Object.assign(styledFunction, styledObject);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAEtB,MAAM,SAAS,OAAO,OAAO,gBAAgB,YAAY;",
+  "names": []
+}

package/dist/esm/styled/styledFunction.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { checkNamingConvention } from "./checkNamingConvention.js";
+import { styled as baseStyled } from "./system.js";
+import { 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";
+const defaultOptions = {
+  name: null,
+  slot: null
+};
+const styledFunction = (tag, options = defaultOptions) => {
+  const { name: componentName, slot: componentSlot } = options;
+  checkNamingConvention(componentName, componentSlot);
+  const baseStyledResolver = baseStyled(tag);
+  const styledAttributes = {
+    attrs: (...args) => baseStyledResolver.attrs(...args),
+    withConfig: (...args) => baseStyledResolver.withConfig(...args)
+  };
+  const dsStyledResolver = (styleArg, ...expressions) => {
+    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);
+    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);
+    if (componentName && componentSlot) {
+      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));
+    }
+    if (componentName && componentSlot === "root") {
+      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));
+    }
+    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;
+    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);
+    const [displayName, attributes] = generateAutoCalculated(options);
+    const baseStyledResolverWithAttributes = attributes.reduce(
+      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),
+      baseStyledResolver
+    );
+    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);
+    if (displayName !== null) {
+      Component.displayName = displayName;
+    }
+    return Component;
+  };
+  return Object.assign(dsStyledResolver, styledAttributes);
+};
+export {
+  styledFunction
+};
+//# sourceMappingURL=styledFunction.js.map

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

@@ -0,0 +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;",
+  "names": []
+}