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

package/dist/cjs/styled/index.js

@@ -0,0 +1,55 @@
+"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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  background: () => import_system_utilities.background,
+  borders: () => import_system_utilities.borders,
+  boxShadows: () => import_system_utilities.boxShadows,
+  color: () => import_system_utilities.color,
+  createGlobalStyle: () => import_system.createGlobalStyle,
+  css: () => import_system.css,
+  flexboxes: () => import_system_utilities.flexboxes,
+  fontSize: () => import_system_utilities.fontSize,
+  grids: () => import_system_utilities.grids,
+  layout: () => import_system_utilities.layout,
+  sizing: () => import_system_utilities.sizing,
+  slotObjectToDataTestIds: () => import_helpers.slotObjectToDataTestIds,
+  space: () => import_system_utilities.space,
+  styled: () => import_styled.styled
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_styled = require("./styled.js");
+var import_system_utilities = require("./system-utilities/index.js");
+var import_helpers = require("./helpers.js");
+__reExport(styled_exports, require("./types.js"), module.exports);
+__reExport(styled_exports, require("./system-types.js"), module.exports);
+var import_system = require("./system.js");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styled/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAuB;AACvB,8BAWO;AACP,qBAAwC;AACxC,2BAAc,uBAdd;AAeA,2BAAc,8BAfd;AAgBA,oBAAuC;",
+  "names": []
+}

package/dist/cjs/styled/styled.js

@@ -0,0 +1,38 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  styled: () => styled
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_styledFunction = require("./styledFunction.js");
+var import_styledObject = require("./styledObject.js");
+const styled = Object.assign(import_styledFunction.styledFunction, import_styledObject.styledObject);
+//# sourceMappingURL=styled.js.map

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

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

package/dist/cjs/styled/styledFunction.js

@@ -0,0 +1,78 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styledFunction_exports = {};
+__export(styledFunction_exports, {
+  styledFunction: () => styledFunction
+});
+module.exports = __toCommonJS(styledFunction_exports);
+var React = __toESM(require("react"));
+var import_checkNamingConvention = require("./checkNamingConvention.js");
+var import_system = require("./system.js");
+var import_transformers = require("./transformers/index.js");
+var import_coerceWithDefaultTheme = require("./coerceWithDefaultTheme.js");
+var import_expressions = require("./expressions/index.js");
+var import_fixStyleArg = require("./fixStyleArg.js");
+var import_generated_attributes = require("./generated-attributes/index.js");
+const defaultOptions = {
+  name: null,
+  slot: null
+};
+const styledFunction = (tag, options = defaultOptions) => {
+  const { name: componentName, slot: componentSlot } = options;
+  (0, import_checkNamingConvention.checkNamingConvention)(componentName, componentSlot);
+  const baseStyledResolver = (0, import_system.styled)(tag);
+  const styledAttributes = {
+    attrs: (...args) => baseStyledResolver.attrs(...args),
+    withConfig: (...args) => baseStyledResolver.withConfig(...args)
+  };
+  const dsStyledResolver = (styleArg, ...expressions) => {
+    const [styleArgWithMagic, expressionsWithMagic] = (0, import_transformers.magicCssTransform)(styleArg, expressions);
+    const expressionsWithThemeCoerced = (0, import_coerceWithDefaultTheme.coerceWithDefaultTheme)(expressionsWithMagic);
+    if (componentName && componentSlot) {
+      expressionsWithThemeCoerced.push((0, import_expressions.genStyleOverridesExpression)(componentName, componentSlot));
+    }
+    if (componentName && componentSlot === "root") {
+      expressionsWithThemeCoerced.push((0, import_expressions.genVariantOverridesExpression)(componentName));
+    }
+    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;
+    const fixedStyleArg = (0, import_fixStyleArg.fixStyleArg)(styleArgWithMagic, numOfExpressionsAdded);
+    const [displayName, attributes] = (0, import_generated_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);
+};
+//# sourceMappingURL=styledFunction.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styled/styledFunction.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { magicCssTransform } from './transformers/index.js';\nimport type { Options, Theme, ThemedStyledFunctionBase } from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\n\nconst defaultOptions: Options = {\n  name: null,\n  slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n  tag: C,\n  options: Options = defaultOptions,\n) => {\n  const { name: componentName, slot: componentSlot } = options;\n\n  checkNamingConvention(componentName, componentSlot);\n\n  // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n  // We want to account for string | number | symbol that's why we transform it to `keyof any`\n  const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n  // Here we use arrow functions to preserve the `this` context\n  const styledAttributes = {\n    attrs: ((...args) => baseStyledResolver.attrs(...args)) as (typeof baseStyledResolver)['attrs'],\n    withConfig: ((...args) => baseStyledResolver.withConfig(...args)) as (typeof baseStyledResolver)['withConfig'],\n  };\n\n  // Due to the recursive natura of this function, we can't type it properly\n  // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n  // @ts-expect-error explained above\n  const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n    /**\n     * Here we apply a CSS transformation to support MAGIC styled components\n     * This makes it possible to use the following syntax:\n     * color: neutral-100;\n     * background-color: success-900;\n     */\n    const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressions);\n\n    /**\n     * We coerce all the already written expressions with the default theme\n     * This prevents styled components to break when a theme is not provided\n     * either with the HOC or the ThemeProvider\n     */\n    const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n    if (componentName && componentSlot) {\n      // Here we add the style overrides expression\n      expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n    }\n\n    if (componentName && componentSlot === 'root') {\n      // Here we add the variant overrides from the user (only for the root slot\n      expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n    }\n\n    /**\n     * Here we will fix the format of the style argument\n     * We possible added some new expressions into the mix,\n     * so we need to properly adjust the style arg\n     */\n    const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n    const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n    // We will add autocalculated attributes to the styled component\n    const [displayName, attributes] = generateAutoCalculated(options);\n\n    // For each attribute function, we will call `attrs` func with it\n    // This will add the attributes to the styled component\n    const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n      (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n      baseStyledResolver,\n    );\n\n    const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n    if (displayName !== null) {\n      Component.displayName = displayName;\n    }\n\n    return Component;\n  };\n\n  return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mCAAsC;AACtC,oBAAqC;AACrC,0BAAkC;AAElC,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,kCAAuC;AAEvC,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAGzC,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS,mBAAmB,MAAM,GAAG,IAAI;AAAA,IACrD,YAAa,IAAI,SAAS,mBAAmB,WAAW,GAAG,IAAI;AAAA,EACjE;AAKA,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAOzF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,WAAW;AAOzF,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
+  "names": ["baseStyled"]
+}

package/dist/cjs/styled/styledObject.js

@@ -0,0 +1,42 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styledObject_exports = {};
+__export(styledObject_exports, {
+  styledObject: () => styledObject
+});
+module.exports = __toCommonJS(styledObject_exports);
+var React = __toESM(require("react"));
+var import_styledFunction = require("./styledFunction.js");
+var import_system = require("./system.js");
+const keyofJsxIntrinsicElements = Object.keys(import_system.styled);
+const styledObject = keyofJsxIntrinsicElements.reduce((obj, key) => {
+  obj[key] = (0, import_styledFunction.styledFunction)(key);
+  return obj;
+}, {});
+//# sourceMappingURL=styledObject.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styled/styledObject.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styledFunction } from './styledFunction.js';\nimport { styled as baseStyled } from './system.js';\n\ntype PreStyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: unknown;\n};\n\nexport type StyledObject = {\n  [TTag in keyof JSX.IntrinsicElements]: ReturnType<typeof styledFunction<TTag>>;\n};\n\nconst keyofJsxIntrinsicElements = Object.keys(baseStyled) as (keyof JSX.IntrinsicElements)[];\n\nexport const styledObject = keyofJsxIntrinsicElements.reduce((obj, key) => {\n  obj[key] = styledFunction(key);\n  return obj;\n}, {} as PreStyledObject) as StyledObject;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAA+B;AAC/B,oBAAqC;AAUrC,MAAM,4BAA4B,OAAO,KAAK,cAAAA,MAAU;AAEjD,MAAM,eAAe,0BAA0B,OAAO,CAAC,KAAK,QAAQ;AACzE,MAAI,GAAG,QAAI,sCAAe,GAAG;AAC7B,SAAO;AACT,GAAG,CAAC,CAAoB;",
+  "names": ["baseStyled"]
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styled/system-types.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import 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  TypographyProps,\n  FlexboxesProps,\n} from '@xstyled/system';\nimport type { Theme } from './types.js';\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type {\n  LayoutProps,\n  SizingProps,\n  FontSizeProps,\n  PositionProps,\n  BoxShadowProps,\n  LineHeightProps,\n} 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\nexport type { TypographyProps, FlexboxesProps };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "names": []
+}

package/dist/cjs/styled/system-utilities/background.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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var background_exports = {};
+__export(background_exports, {
+  background: () => background
+});
+module.exports = __toCommonJS(background_exports);
+var React = __toESM(require("react"));
+var import_system = require("@xstyled/system");
+var import_th = require("../../th.js");
+const bgColorGetter = (value) => (props) => `${import_th.th.color(value, value)(props)}`;
+bgColorGetter.meta = {};
+const bg = (0, import_system.style)({
+  prop: ["backgroundColor", "bg"],
+  css: "background-color",
+  themeGet: bgColorGetter
+});
+const background = (0, import_system.compose)(bg);
+//# sourceMappingURL=background.js.map

package/dist/cjs/styled/system-utilities/background.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/styled/system-utilities/background.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th.js';\nimport type { PropsWithTheme } from '../types.js';\nimport type { BackgroundProps } from '../system-types.js';\n\ninterface DSThemeGetter extends ThemeGetter {\n  (value: string): (props: PropsWithTheme) => string;\n  meta: Record<string, unknown>;\n}\n\nconst bgColorGetter: DSThemeGetter = (value: string) => (props) => `${th.color(value, value)(props as PropsWithTheme)}`;\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n  prop: ['backgroundColor', 'bg'],\n  css: 'background-color',\n  themeGet: bgColorGetter,\n});\n\nexport const background = compose<BackgroundProps>(bg);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAiD;AACjD,gBAAmB;AASnB,MAAM,gBAA+B,CAAC,UAAkB,CAAC,UAAU,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAuB;AAEpH,cAAc,OAAO,CAAC;AAEtB,MAAM,SAAK,qBAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,iBAAa,uBAAyB,EAAE;",
+  "names": []
+}

package/dist/cjs/styled/system-utilities/border.js

@@ -0,0 +1,188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var border_exports = {};
+__export(border_exports, {
+  borders: () => borders
+});
+module.exports = __toCommonJS(border_exports);
+var React = __toESM(require("react"));
+var import_system = require("@xstyled/system");
+var import_th = require("../../th.js");
+const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
+const borderGetter = (value) => (props) => {
+  const color = value?.match?.(colorReg);
+  let borderCss = ``;
+  if (color) {
+    const widthAndStyle = value.replace(color[0], "").trim();
+    borderCss = `${import_th.th.color(color[0])(props)} ${widthAndStyle}`;
+  } else {
+    borderCss = value;
+  }
+  return borderCss;
+};
+borderGetter.meta = {};
+const borderColorGetter = (value) => (props) => `${import_th.th.color(value, value)(props)}`;
+borderColorGetter.meta = {};
+function borderStyleGetter(value) {
+  return () => value;
+}
+borderStyleGetter.meta = {};
+const borderWidthGetter = (value) => (props) => `${import_th.th.space(value, value)(props)}`;
+borderWidthGetter.meta = {};
+const borderRadiusGetter = (value) => (props) => `${import_th.th.space(value, value)(props)}`;
+borderRadiusGetter.meta = {};
+const border = (0, import_system.style)({
+  prop: "border",
+  css: "border",
+  themeGet: borderGetter
+});
+const borderTop = (0, import_system.style)({
+  prop: "borderTop",
+  css: "border-top",
+  themeGet: borderGetter
+});
+const borderBottom = (0, import_system.style)({
+  prop: "borderBottom",
+  css: "border-bottom",
+  themeGet: borderGetter
+});
+const borderRight = (0, import_system.style)({
+  prop: "borderRight",
+  css: "border-right",
+  themeGet: borderGetter
+});
+const borderLeft = (0, import_system.style)({
+  prop: "borderLeft",
+  css: "border-left",
+  themeGet: borderGetter
+});
+const borderColor = (0, import_system.style)({
+  prop: "borderColor",
+  css: "border-color",
+  themeGet: borderColorGetter
+});
+const borderTopColor = (0, import_system.style)({
+  prop: "borderTopColor",
+  css: "border-top-color",
+  themeGet: borderColorGetter
+});
+const borderBottomColor = (0, import_system.style)({
+  prop: "borderBottomColor",
+  css: "border-bottom-color",
+  themeGet: borderColorGetter
+});
+const borderRightColor = (0, import_system.style)({
+  prop: "borderRightColor",
+  css: "border-right-color",
+  themeGet: borderColorGetter
+});
+const borderLeftColor = (0, import_system.style)({
+  prop: "borderLeftColor",
+  css: "border-left-color",
+  themeGet: borderColorGetter
+});
+const borderStyle = (0, import_system.style)({
+  prop: "borderStyle",
+  css: "border-style",
+  themeGet: borderStyleGetter
+});
+const borderTopStyle = (0, import_system.style)({
+  prop: "borderTopStyle",
+  css: "border-top-style",
+  themeGet: borderStyleGetter
+});
+const borderBottomStyle = (0, import_system.style)({
+  prop: "borderBottomStyle",
+  css: "border-bottom-style",
+  themeGet: borderStyleGetter
+});
+const borderRightStyle = (0, import_system.style)({
+  prop: "borderRightStyle",
+  css: "border-right-style",
+  themeGet: borderStyleGetter
+});
+const borderLeftStyle = (0, import_system.style)({
+  prop: "borderLeftStyle",
+  css: "border-left-style",
+  themeGet: borderStyleGetter
+});
+const borderWidth = (0, import_system.style)({
+  prop: "borderWidth",
+  css: "border-width",
+  themeGet: borderWidthGetter
+});
+const borderTopWidth = (0, import_system.style)({
+  prop: "borderTopWidth",
+  css: "border-top-width",
+  themeGet: borderWidthGetter
+});
+const borderBottomWidth = (0, import_system.style)({
+  prop: "borderBottomWidth",
+  css: "border-bottom-width",
+  themeGet: borderWidthGetter
+});
+const borderRightWidth = (0, import_system.style)({
+  prop: "borderRightWidth",
+  css: "border-right-width",
+  themeGet: borderWidthGetter
+});
+const borderLeftWidth = (0, import_system.style)({
+  prop: "borderLeftWidth",
+  css: "border-left-width",
+  themeGet: borderWidthGetter
+});
+const borderRadius = (0, import_system.style)({
+  prop: "borderRadius",
+  css: "border-radius",
+  themeGet: borderRadiusGetter
+});
+const borders = (0, import_system.compose)(
+  border,
+  borderTop,
+  borderBottom,
+  borderLeft,
+  borderRight,
+  borderColor,
+  borderTopColor,
+  borderBottomColor,
+  borderLeftColor,
+  borderRightColor,
+  borderStyle,
+  borderTopStyle,
+  borderBottomStyle,
+  borderLeftStyle,
+  borderRightStyle,
+  borderWidth,
+  borderTopWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  borderRightWidth,
+  borderRadius
+);
+//# sourceMappingURL=border.js.map

package/dist/cjs/styled/system-utilities/border.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/styled/system-utilities/border.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable prettier/prettier */\n/* eslint-disable max-lines */\nimport { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th.js';\nimport type { PropsWithTheme } from '../types.js';\ninterface DSThemeGetter extends ThemeGetter {\n  (value: string): (props: PropsWithTheme) => string;\n}\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nconst borderGetter: DSThemeGetter =\n  (value: string) =>\n  (props): string => {\n    const color = value?.match?.(colorReg);\n    let borderCss = ``;\n\n    if (color) {\n      const widthAndStyle = value.replace(color[0], '').trim();\n      borderCss = `${th.color(color[0])(props as PropsWithTheme)} ${widthAndStyle}`;\n    } else {\n      borderCss = value;\n    }\n\n    return borderCss;\n  };\n\nborderGetter.meta = {};\n\nconst borderColorGetter: DSThemeGetter =\n  (value: string) =>\n  (props): string =>\n    `${th.color(value, value)(props as PropsWithTheme)}`;\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n  return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nconst borderWidthGetter: DSThemeGetter =\n  (value: string) =>\n  (props): string =>\n    `${th.space(value, value)(props as PropsWithTheme)}`;\n\nborderWidthGetter.meta = {};\n\nconst borderRadiusGetter: DSThemeGetter =\n  (value: string) =>\n  (props): string =>\n    `${th.space(value, value)(props as PropsWithTheme)}`;\n\nborderRadiusGetter.meta = {};\n\nconst border = style({\n  prop: 'border',\n  css: 'border',\n  themeGet: borderGetter,\n});\n\nconst borderTop = style({\n  prop: 'borderTop',\n  css: 'border-top',\n  themeGet: borderGetter,\n});\n\nconst borderBottom = style({\n  prop: 'borderBottom',\n  css: 'border-bottom',\n  themeGet: borderGetter,\n});\n\nconst borderRight = style({\n  prop: 'borderRight',\n  css: 'border-right',\n  themeGet: borderGetter,\n});\n\nconst borderLeft = style({\n  prop: 'borderLeft',\n  css: 'border-left',\n  themeGet: borderGetter,\n});\n\nconst borderColor = style({\n  prop: 'borderColor',\n  css: 'border-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderTopColor = style({\n  prop: 'borderTopColor',\n  css: 'border-top-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderBottomColor = style({\n  prop: 'borderBottomColor',\n  css: 'border-bottom-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderRightColor = style({\n  prop: 'borderRightColor',\n  css: 'border-right-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderLeftColor = style({\n  prop: 'borderLeftColor',\n  css: 'border-left-color',\n  themeGet: borderColorGetter,\n});\n\nconst borderStyle = style({\n  prop: 'borderStyle',\n  css: 'border-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderTopStyle = style({\n  prop: 'borderTopStyle',\n  css: 'border-top-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderBottomStyle = style({\n  prop: 'borderBottomStyle',\n  css: 'border-bottom-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderRightStyle = style({\n  prop: 'borderRightStyle',\n  css: 'border-right-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderLeftStyle = style({\n  prop: 'borderLeftStyle',\n  css: 'border-left-style',\n  themeGet: borderStyleGetter,\n});\n\nconst borderWidth = style({\n  prop: 'borderWidth',\n  css: 'border-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderTopWidth = style({\n  prop: 'borderTopWidth',\n  css: 'border-top-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderBottomWidth = style({\n  prop: 'borderBottomWidth',\n  css: 'border-bottom-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRightWidth = style({\n  prop: 'borderRightWidth',\n  css: 'border-right-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderLeftWidth = style({\n  prop: 'borderLeftWidth',\n  css: 'border-left-width',\n  themeGet: borderWidthGetter,\n});\n\nconst borderRadius = style({\n  prop: 'borderRadius',\n  css: 'border-radius',\n  themeGet: borderRadiusGetter,\n});\n\nexport const borders = compose(\n  border,\n  borderTop,\n  borderBottom,\n  borderLeft,\n  borderRight,\n  borderColor,\n  borderTopColor,\n  borderBottomColor,\n  borderLeftColor,\n  borderRightColor,\n  borderStyle,\n  borderTopStyle,\n  borderBottomStyle,\n  borderLeftStyle,\n  borderRightStyle,\n  borderWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  borderRightWidth,\n  borderRadius,\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,47 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_exports = {};
+__export(color_exports, {
+  color: () => color
+});
+module.exports = __toCommonJS(color_exports);
+var React = __toESM(require("react"));
+var import_system = require("@xstyled/system");
+var import_th = require("../../th.js");
+function colorGetter(value) {
+  return (props) => `${import_th.th.color(value, value)(props)}`;
+}
+colorGetter.meta = {};
+const colorStyled = (0, import_system.style)({
+  prop: ["color"],
+  css: ["color"],
+  themeGet: colorGetter
+});
+const color = (0, import_system.compose)(colorStyled);
+//# sourceMappingURL=color.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/styled/system-utilities/color.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { Theme, Props } from '@xstyled/system';\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th.js';\nimport type { PropsWithTheme } from '../types.js';\nimport type { ColorProps } from '../system-types.js';\n\nfunction colorGetter(value: string) {\n  return (props: PropsWithTheme | Props<Theme>): string => `${th.color(value, value)(props as PropsWithTheme)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style<ColorProps>({\n  prop: ['color'],\n  css: ['color'],\n  themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,oBAA+B;AAC/B,gBAAmB;AAInB,SAAS,YAAY,OAAe;AAClC,SAAO,CAAC,UAAiD,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAuB;AAC5G;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,kBAAc,qBAAkB;AAAA,EACpC,MAAM,CAAC,OAAO;AAAA,EACd,KAAK,CAAC,OAAO;AAAA,EACb,UAAU;AACZ,CAAC;AAEM,MAAM,YAAQ,uBAAQ,WAAW;",
+  "names": []
+}