@elliemae/ds-system 3.0.0-next.9 → 3.0.1

package/dist/cjs/arithmetic.js

@@ -4,35 +4,34 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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 arithmetic_exports = {};
 __export(arithmetic_exports, {
   getNumberAndUnit: () => getNumberAndUnit,
   op: () => op
 });
+module.exports = __toCommonJS(arithmetic_exports);
 var React = __toESM(require("react"));
 function getNumberAndUnit(numberStrWithUnit) {
-  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
+  const matchResult = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
+  let number = "0";
+  let unit = "px";
+  if (matchResult) {
+    [number, unit] = matchResult;
+  }
   return { number, unit };
 }
 function op(operator, n1, n2) {
@@ -40,16 +39,15 @@ function op(operator, n1, n2) {
   const { number: number2, unit: unit2 } = getNumberAndUnit(n2);
   switch (operator) {
     case "*":
-      return Number(number) * Number(number2) + (unit || unit2);
+      return `${Number(number) * Number(number2)}${unit || unit2}`;
     case "+":
-      return Number(number) + Number(number2) + (unit || unit2);
+      return `${Number(number) + Number(number2)}${unit || unit2}`;
     case "-":
-      return Number(number) - Number(number2) + (unit || unit2);
+      return `${Number(number) - Number(number2)}${unit || unit2}`;
     case "/":
-      return Number(number) / Number(number2) + (unit || unit2);
+      return `${Number(number) / Number(number2)}${unit || unit2}`;
     default:
-      return Number(number) + Number(number2) + (unit || unit2);
+      return `${Number(number) + Number(number2)}${unit || unit2}`;
   }
 }
-module.exports = __toCommonJS(arithmetic_exports);
 //# sourceMappingURL=arithmetic.js.map

package/dist/cjs/arithmetic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/arithmetic.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export function getNumberAndUnit(\n  numberStrWithUnit: string | number,\n): { number: string; unit: string } {\n  const [number, unit] = String(numberStrWithUnit).match(\n    /[a-z]+|[(/^\\-?\\d*.\\d+|\\d+),?]+/gi,\n  );\n  return { number, unit };\n}\n\nexport function op(operator: string, n1: string, n2: string | number): string {\n  const { number, unit } = getNumberAndUnit(n1);\n  const { number: number2, unit: unit2 } = getNumberAndUnit(n2);\n  switch (operator) {\n    case '*':\n      return Number(number) * Number(number2) + (unit || unit2);\n    case '+':\n      return Number(number) + Number(number2) + (unit || unit2);\n    case '-':\n      return Number(number) - Number(number2) + (unit || unit2);\n    case '/':\n      return Number(number) / Number(number2) + (unit || unit2);\n    default:\n      return Number(number) + Number(number2) + (unit || unit2);\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,0BACL,mBACkC;AAClC,QAAM,CAAC,QAAQ,QAAQ,OAAO,mBAAmB,MAC/C;AAEF,SAAO,EAAE,QAAQ;AAAA;AAGZ,YAAY,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,SAAS,iBAAiB;AAC1C,QAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,iBAAiB;AAC1D,UAAQ;AAAA,SACD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAEnD,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAAA;",
+  "sourcesContent": ["export function getNumberAndUnit(numberStrWithUnit: string | number): { number: string; unit: string } {\n  const matchResult = String(numberStrWithUnit).match(/[a-z]+|[(/^\\-?\\d*.\\d+|\\d+),?]+/gi);\n  let number = '0';\n  let unit = 'px';\n  if (matchResult) {\n    [number, unit] = matchResult;\n  }\n\n  return { number, unit };\n}\n\nexport function op(operator: string, n1: string, n2: string | number): string {\n  const { number, unit } = getNumberAndUnit(n1);\n  const { number: number2, unit: unit2 } = getNumberAndUnit(n2);\n  switch (operator) {\n    case '*':\n      return `${Number(number) * Number(number2)}${unit || unit2}`;\n    case '+':\n      return `${Number(number) + Number(number2)}${unit || unit2}`;\n    case '-':\n      return `${Number(number) - Number(number2)}${unit || unit2}`;\n    case '/':\n      return `${Number(number) / Number(number2)}${unit || unit2}`;\n    default:\n      return `${Number(number) + Number(number2)}${unit || unit2}`;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,0BAA0B,mBAAsE;AACrG,QAAM,cAAc,OAAO,iBAAiB,EAAE,MAAM,kCAAkC;AACtF,MAAI,SAAS;AACb,MAAI,OAAO;AACX,MAAI,aAAa;AACf,KAAC,QAAQ,IAAI,IAAI;AAAA,EACnB;AAEA,SAAO,EAAE,QAAQ,KAAK;AACxB;AAEO,YAAY,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,SAAS,iBAAiB,EAAE;AAC5C,QAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,iBAAiB,EAAE;AAC5D,UAAQ;AAAA,SACD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,SAClD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,SAClD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA,SAClD;AACH,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA;AAErD,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,OAAO,IAAI,QAAQ;AAAA;AAE3D;",
   "names": []
 }

package/dist/cjs/constants.js

@@ -4,33 +4,27 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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 constants_exports = {};
 __export(constants_exports, {
   desktopBaseFont: () => desktopBaseFont,
   mobileBaseFont: () => mobileBaseFont,
   translateUnits: () => translateUnits
 });
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 const desktopBaseFont = 13;
 const mobileBaseFont = 16;
@@ -43,5 +37,4 @@ const translateUnits = {
   "64px": "48px",
   "72px": "64px"
 };
-module.exports = __toCommonJS(constants_exports);
 //# sourceMappingURL=constants.js.map

package/dist/cjs/constants.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/constants.ts", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const desktopBaseFont = 13;\n\nexport const mobileBaseFont = 16;\n\nexport const translateUnits = {\n  '8px': '4px',\n  '16px': '8px',\n  '32px': '16px',\n  '48px': '24px',\n  '56px': '32px',\n  '64px': '48px',\n  '72px': '64px',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;",
   "names": []
 }

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

@@ -0,0 +1,37 @@
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ds_styled_exports = {};
+__export(ds_styled_exports, {
+  boxShadows: () => import_system.boxShadow,
+  flexboxes: () => import_system.flexboxes,
+  grids: () => import_system.grids,
+  layout: () => import_system.layout,
+  space: () => import_system.space
+});
+module.exports = __toCommonJS(ds_styled_exports);
+var React = __toESM(require("react"));
+__reExport(ds_styled_exports, require("./styled"), module.exports);
+var import_system = require("@xstyled/system");
+__reExport(ds_styled_exports, require("./utilities/border"), module.exports);
+__reExport(ds_styled_exports, require("./utilities/background"), module.exports);
+__reExport(ds_styled_exports, require("./utilities/sizing"), module.exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ds-styled/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './styled';\n\nexport { layout, space, flexboxes, grids, boxShadow as boxShadows } from '@xstyled/system';\nexport * from './utilities/border';\nexport * from './utilities/background';\nexport * from './utilities/sizing';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAc,qBAAd;AAEA,oBAAyE;AACzE,8BAAc,+BAHd;AAIA,8BAAc,mCAJd;AAKA,8BAAc,+BALd;",
+  "names": []
+}

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

@@ -0,0 +1,103 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 styled_exports = {};
+__export(styled_exports, {
+  createGlobalStyle: () => createGlobalStyle,
+  css: () => css,
+  styled: () => styled
+});
+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_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;
+  const defaultStyledResolver = baseStyledComponent(tag);
+  const attributes = {
+    attrs: defaultStyledResolver.attrs,
+    withConfig: defaultStyledResolver.withConfig
+  };
+  const dimsumStyledResolver = (styleArg, ...expressions) => {
+    const [styleArgWithMagic, expressionsWithMagic] = (0, import_utilities.magicCssTransform)(styleArg, expressions);
+    const expressionsWithDefaultTheme = expressionsWithMagic ? expressionsWithMagic.map(import_utilities.stylesArgThemeCoercion) : [];
+    let transformedStyleArg = styleArgWithMagic;
+    if (componentName && componentSlot) {
+      expressionsWithDefaultTheme.push((props) => {
+        const theme = (0, import_utilities.coerceWithDefaultTheme)(props.theme);
+        const styleOverrides = (0, import_utilities.getStyleOverrides)(componentName, theme);
+        if (styleOverrides) {
+          return [styleOverrides[componentSlot]];
+        }
+        return null;
+      });
+    }
+    if (componentName && componentSlot === "root") {
+      expressionsWithDefaultTheme.push((props) => {
+        const theme = (0, import_utilities.coerceWithDefaultTheme)(props.theme);
+        return (0, import_utilities.variantsResolver)(props, (0, import_utilities.getVariantStyles)(componentName, theme), theme, componentName);
+      });
+    }
+    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressionsWithMagic.length;
+    if (Array.isArray(styleArgWithMagic) && numOfCustomFnsApplied > 0) {
+      const placeholders = new Array(numOfCustomFnsApplied).fill("");
+      transformedStyleArg = Object.assign([...styleArgWithMagic, ...placeholders], {
+        raw: [...styleArgWithMagic.raw, ...placeholders]
+      });
+    } else if (typeof styleArgWithMagic === "function") {
+      transformedStyleArg = (props) => styleArgWithMagic(__spreadProps(__spreadValues({}, 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 Component = defaultStyledResolverWithClassName(transformedStyleArg, ...expressionsWithDefaultTheme);
+    if (displayName !== null) {
+      Component.displayName = displayName;
+    }
+    return Component;
+  };
+  return Object.assign(dimsumStyledResolver, attributes);
+};
+const styledObject = Object.keys(baseStyledComponent).reduce((obj, key) => {
+  const castedKey = key;
+  obj[castedKey] = styledFunction(castedKey);
+  return obj;
+}, {});
+const styled = Object.assign(styledFunction, styledObject);
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +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 { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';\nimport { 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  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,sBAAsB,wCAAU,2BAAQ,oBAAM,CAAC;AAGzF,MAAM,iBAAmC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,KAAK,MAAM;AACtF,QAAM,EAAE,MAAM,eAAe,MAAM,kBAAkB;AAErD,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,wBAAwB,wCAAkB,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,QAAQ,6CAAuB,MAAM,KAAK;AAChD,cAAM,iBAAiB,wCAAkB,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,6CAAuB,MAAM,KAAK;AAChD,eAAO,uCAAiB,OAAO,uCAAiB,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,iCAAK,QAAL,EAAY,OAAO,6CAAuB,MAAM,KAAK,EAAE,EAAC;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,MAC/D,eACF;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;",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+var React = __toESM(require("react"));
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +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  Props,\n} from 'styled-components';\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 = { theme?: Theme } & Record<string, unknown>;\n\nexport type GetterProps = Props<Theme>;\nexport type ThProps = Required<GetterProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "names": []
+}

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

@@ -0,0 +1,41 @@
+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 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");
+function bgColorGetter(value) {
+  return function(props) {
+    return `${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/ds-styled/utilities/background.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ds-styled/utilities/background.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { GetterProps, ThProps } from '../types';\n\nfunction bgColorGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.color(value, value)(props as ThProps)}`;\n  };\n}\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n  prop: ['backgroundColor', 'bg'],\n  css: 'background-color',\n  themeGet: bgColorGetter,\n});\n\nexport const background = compose(bg);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA+B;AAC/B,gBAAmB;AAGnB,uBAAuB,OAAe;AACpC,SAAO,SAAU,OAA4B;AAC3C,WAAO,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAAA,EACnD;AACF;AAEA,cAAc,OAAO,CAAC;AAEtB,MAAM,KAAK,yBAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,aAAa,2BAAQ,EAAE;",
+  "names": []
+}

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

@@ -0,0 +1,174 @@
+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 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");
+const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
+function borderGetter(value) {
+  return function(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 = {};
+function borderColorGetter(value) {
+  return function(props) {
+    return `${import_th.th.color(value, value)(props)}`;
+  };
+}
+borderColorGetter.meta = {};
+function borderStyleGetter(value) {
+  return function(props) {
+    return value;
+  };
+}
+borderStyleGetter.meta = {};
+function borderWidthGetter(value) {
+  return function(props) {
+    return `${import_th.th.space(value, value)(props)}`;
+  };
+}
+borderWidthGetter.meta = {};
+function borderRadiusGetter(value) {
+  return function(props) {
+    return `${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/ds-styled/utilities/border.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ds-styled/utilities/border.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { GetterProps, ThProps } from '../types';\n\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nfunction borderGetter(value: string) {\n  return function (props: GetterProps): 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 ThProps)} ${widthAndStyle}`;\n    } else {\n      borderCss = value;\n    }\n\n    return borderCss;\n  };\n}\n\nborderGetter.meta = {};\n\nfunction borderColorGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.color(value, value)(props as ThProps)}`;\n  };\n}\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n  return function (props: GetterProps): string {\n    return value;\n  };\n}\n\nborderStyleGetter.meta = {};\n\nfunction borderWidthGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.space(value, value)(props as ThProps)}`;\n  };\n}\n\nborderWidthGetter.meta = {};\n\nfunction borderRadiusGetter(value: string) {\n  return function (props: GetterProps): string {\n    return `${th.space(value, value)(props as ThProps)}`;\n  };\n}\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": []
+}