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

package/dist/esm/utils.js

@@ -0,0 +1,262 @@
+import * as React from "react";
+import { lighten, rgba } from "polished";
+import { reduce } from "lodash";
+import { css, withTheme, keyframes as kfrm, useTheme } from "@xstyled/styled-components";
+import { theme } from "./theme.js";
+import { toMobile } from "./mobileUtilities.js";
+import { th } from "./th.js";
+function truncate(width) {
+  return (props) => css`
+    ${!!width || props.width ? `width: ${props.width || width};` : ""}
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+}
+function flexCenter() {
+  return `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
+}
+function disabled() {
+  return `
+    cursor: not-allowed;
+    pointer-events: none;
+  `;
+}
+function keyframes(obj) {
+  return kfrm`${reduce(
+    obj,
+    (result, value, key) => `
+    ${result}
+    ${key}% {
+      ${value}
+    }
+  `,
+    ""
+  )}
+  `;
+}
+function boxShadow(top, left, blur, color, inset = false) {
+  return `box-shadow: ${inset ? "inset" : ""} ${top} ${left} ${blur} ${color};`;
+}
+function border(color = theme.colors.brand[600], size = "1px", type = "solid") {
+  return `${size} ${type} ${color}`;
+}
+function animation(animationKeyframes, animationLength, animationTimingFn) {
+  return (props) => css`
+    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
+      ${props.animationTimingFn || animationTimingFn};
+  `;
+}
+function focus(color = theme.colors.brand[600]) {
+  return () => css`
+    outline: none;
+    border: 1px solid ${color};
+    box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};
+    border-radius: 2px;
+  `;
+}
+function focusAfter(color) {
+  return css`
+    outline: none;
+    position: relative;
+    &:after {
+      content: '';
+      z-index: 10;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      ${focus(color)}
+    }
+  `;
+}
+function active() {
+  return (props) => css`
+    outline: none;
+    border: 1px solid ${props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
+}
+function hover() {
+  return (props) => css`
+    outline: 1px solid ${props.theme.colors.brand[600]};
+    outline-offset: -1px;
+  `;
+}
+function textStyle(type, weight = "regular") {
+  return (props) => {
+    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;
+    switch (type) {
+      case "h1":
+        cssVar += `
+        font-size: ${toMobile("2.7692rem")};
+        line-height: normal;
+      `;
+        break;
+      case "h2":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[800])};
+        line-height: normal;
+      `;
+        break;
+      case "h3":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[700])};
+        line-height: 1.2;
+      `;
+        break;
+      case "h4":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[600])};
+        line-height: normal;
+      `;
+        break;
+      case "h5":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+      `;
+        break;
+      case "section-header":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.title[500])};
+        line-height: normal;
+        text-transform: uppercase;
+      `;
+        break;
+      case "body":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
+        break;
+      case "body-small":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[300])};
+        line-height: normal;
+      `;
+        break;
+      case "body-micro":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.microText[200])};
+        line-height: normal;
+      `;
+        break;
+      case "list":
+        cssVar += `
+        font-size: ${toMobile(props.theme.fontSizes.value[400])};
+        line-height: normal;
+      `;
+        break;
+      case "link":
+        cssVar += `
+        line-height: ${props.theme.space.xl};
+        color: ${props.theme.colors.brand[600]};
+        cursor: pointer;
+      `;
+        break;
+    }
+    return cssVar;
+  };
+}
+function iconColor(variant = "neutral", type = 400) {
+  return css`
+    fill: ${th.color(`${variant}-${type}`)};
+  `;
+}
+function fakeBorder() {
+  return css`
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
+    border-radius: 2px;
+  `;
+}
+function fakeActive() {
+  return css`
+    outline: none;
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
+    border-radius: 2px;
+  `;
+}
+function clearFocus() {
+  return `
+    border: none;
+    box-shadow: none;
+  `;
+}
+function buttonLink() {
+  return `
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+  `;
+}
+function transition(t = "all 1s ease") {
+  return `
+    transition: ${t};
+  `;
+}
+const onlySafariAndFirefox = (styles) => css`
+  @media not all and (min-resolution: 0.001dpcm) {
+    ${styles}
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    ${styles}
+  }
+`;
+const onlySafari = (styles) => `
+    @media not all and (min-resolution: 0.001dpcm) {
+      ${styles}
+    }
+  `;
+const onlyFirefox = (styles) => `
+    @media screen and (min--moz-device-pixel-ratio: 0) {
+      ${styles}
+    }
+  `;
+const safariAndFirefoxBold = (color) => `
+  @media not all and (min-resolution: 0.001dpcm) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+  @media screen and (min--moz-device-pixel-ratio: 0) {
+    font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.4px ${color};
+  }
+`;
+export {
+  active,
+  animation,
+  border,
+  boxShadow,
+  buttonLink,
+  clearFocus,
+  disabled,
+  fakeActive,
+  fakeBorder,
+  flexCenter,
+  focus,
+  focusAfter,
+  hover,
+  iconColor,
+  keyframes,
+  kfrm,
+  onlyFirefox,
+  onlySafari,
+  onlySafariAndFirefox,
+  rgba,
+  safariAndFirefoxBold,
+  textStyle,
+  transition,
+  truncate,
+  useTheme,
+  withTheme
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-shadow */\n\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\n\nimport type { Theme } from '@elliemae/pui-theme';\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\nimport { toMobile } from './mobileUtilities.js';\nimport { th } from './th.js';\n\nexport { withTheme, rgba, useTheme, kfrm };\n\ntype PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport function truncate(width?: string) {\n  return (props: PropsWithTheme<{ width?: string }>) => css`\n    ${!!width || props.width ? `width: ${(props.width || width) as string};` : ''}\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n}\n\nexport function flexCenter(): string {\n  return `\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  `;\n}\n\nexport function disabled(): string {\n  return `\n    cursor: not-allowed;\n    pointer-events: none;\n  `;\n}\n\nexport function keyframes(obj: Record<string, string>): Keyframes {\n  return kfrm`${reduce(\n    obj,\n    (result, value, key) => `\n    ${result}\n    ${key}% {\n      ${value}\n    }\n  `,\n    '',\n  )}\n  `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n  return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\n// export function color(variant = 'neutral', type: string | number = 400) {\n//   return css`\n//     color: ${th.color(`${variant}-${type}`)};\n//   `;\n// }\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n  return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n  return (props: { animationKeyframes?: string; animationLength?: string; animationTimingFn?: string }) => css`\n    animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n      ${props.animationTimingFn || animationTimingFn};\n  `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n  return () => css`\n    outline: none;\n    border: 1px solid ${color};\n    box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n    border-radius: 2px;\n  `;\n}\n\nexport function focusAfter(color: string) {\n  return css`\n    outline: none;\n    position: relative;\n    &:after {\n      content: '';\n      z-index: 10;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      ${focus(color)}\n    }\n  `;\n}\n\nexport function active() {\n  return (props: PropsWithTheme) => css`\n    outline: none;\n    border: 1px solid ${props.theme.colors.brand[700]};\n    border-radius: 2px;\n  `;\n}\n\nexport function hover() {\n  return (props: PropsWithTheme) => css`\n    outline: 1px solid ${props.theme.colors.brand[600]};\n    outline-offset: -1px;\n  `;\n}\n\nexport function textStyle(type: string, weight: keyof Theme['fontWeights'] = 'regular') {\n  // eslint-disable-next-line complexity\n  return (props: { theme: Theme }): string => {\n    let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n    // eslint-disable-next-line default-case\n    switch (type) {\n      case 'h1':\n        cssVar += `\n        font-size: ${toMobile('2.7692rem')};\n        line-height: normal;\n      `;\n        break;\n      case 'h2':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[800])};\n        line-height: normal;\n      `;\n        break;\n      case 'h3':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[700])};\n        line-height: 1.2;\n      `;\n        break;\n      case 'h4':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[600])};\n        line-height: normal;\n      `;\n        break;\n      case 'h5':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[500])};\n        line-height: normal;\n      `;\n        break;\n      case 'section-header':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.title[500])};\n        line-height: normal;\n        text-transform: uppercase;\n      `;\n        break;\n      case 'body':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[400])};\n        line-height: normal;\n      `;\n        break;\n      case 'body-small':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[300])};\n        line-height: normal;\n      `;\n        break;\n      case 'body-micro':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n        line-height: normal;\n      `;\n        break;\n      case 'list':\n        cssVar += `\n        font-size: ${toMobile(props.theme.fontSizes.value[400])};\n        line-height: normal;\n      `;\n        break;\n      case 'link':\n        cssVar += `\n        line-height: ${props.theme.space.xl};\n        color: ${props.theme.colors.brand[600]};\n        cursor: pointer;\n      `;\n        break;\n    }\n    return cssVar;\n  };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n  return css`\n    fill: ${th.color(`${variant}-${type}`)};\n  `;\n}\n\nexport function fakeBorder() {\n  return css`\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n    border-radius: 2px;\n  `;\n}\n\nexport function fakeActive() {\n  return css`\n    outline: none;\n    box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n    border-radius: 2px;\n  `;\n}\n\nexport function clearFocus(): string {\n  return `\n    border: none;\n    box-shadow: none;\n  `;\n}\n\nexport function buttonLink(): string {\n  return `\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n  return `\n    transition: ${t};\n  `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): FlattenSimpleInterpolation => css`\n  @media not all and (min-resolution: 0.001dpcm) {\n    ${styles}\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    ${styles}\n  }\n`;\n\nexport const onlySafari = (styles: string): string => `\n    @media not all and (min-resolution: 0.001dpcm) {\n      ${styles}\n    }\n  `;\n\nexport const onlyFirefox = (styles: string): string => `\n    @media screen and (min--moz-device-pixel-ratio: 0) {\n      ${styles}\n    }\n  `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\n  @media not all and (min-resolution: 0.001dpcm) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ${color};\n  }\n  @media screen and (min--moz-device-pixel-ratio: 0) {\n    font-weight: 400;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-text-stroke: 0.4px ${color};\n  }\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/xStyledWrapper.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import {
+  styled,
+  typography,
+  background,
+  borders,
+  sizing,
+  space,
+  boxShadows,
+  flexboxes,
+  layout,
+  color
+} from "./index.js";
+import { compose } from "@xstyled/system";
+const XStyledWrapper = styled("div")`
+  ${typography}
+  ${layout}
+  ${space}
+  ${sizing}
+  ${background}
+  ${borders}
+  ${boxShadows}
+  ${flexboxes}
+  ${color}
+`;
+const xStyledCommonProps = compose(
+  typography,
+  background,
+  borders,
+  sizing,
+  space,
+  boxShadows,
+  flexboxes,
+  layout,
+  color
+);
+var xStyledWrapper_default = XStyledWrapper;
+export {
+  XStyledWrapper,
+  xStyledWrapper_default as default,
+  xStyledCommonProps
+};
+//# sourceMappingURL=xStyledWrapper.js.map

package/dist/esm/xStyledWrapper.js.map

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

package/dist/types/arithmetic.d.ts

@@ -0,0 +1,5 @@
+export declare function getNumberAndUnit(numberStrWithUnit: string | number): {
+    number: string;
+    unit: string;
+};
+export declare function op(operator: string, n1: string, n2: string | number): string;

package/dist/types/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const desktopBaseFont = 13;
+export declare const mobileBaseFont = 16;
+export declare const translateUnits: {
+    '8px': string;
+    '16px': string;
+    '32px': string;
+    '48px': string;
+    '56px': string;
+    '64px': string;
+    '72px': string;
+};

package/dist/types/globalStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{
+    device: 'desktop' | 'mobile';
+}, import("styled-components").DefaultTheme>;

package/dist/types/index.d.ts

@@ -0,0 +1,12 @@
+export * from './globalStyles.js';
+export * from './spaceUtilities.js';
+export * from './mobileUtilities.js';
+export * from './utils.js';
+export * from './arithmetic.js';
+export * from './th.js';
+export * from './theme.js';
+export * from './styled/index.js';
+export { position, typography } from '@xstyled/system';
+export { themeProviderHOC } from './themeProviderHOC.js';
+export { ThemeContext } from '@xstyled/styled-components';
+export { xStyledCommonProps, XStyledWrapper } from './xStyledWrapper.js';

package/dist/types/mobileUtilities.d.ts

@@ -0,0 +1,4 @@
+export declare function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string;
+export declare const isMobile: () => boolean;
+export declare function toMobile(unit: string): string;
+export declare const useIsMobile: () => boolean;

package/dist/types/spaceUtilities.d.ts

@@ -0,0 +1,8 @@
+export declare function mapGap(gutter: number | string): number | string;
+export declare function mapGutter(gutter: string | number | undefined): string;
+export declare function mapSpace(width: string | number): string;
+export declare function fixSpaceGutter(width: string | number | string[] | number[], gutter?: string | number): string | string[];
+export declare function fixSpace(width: string | number | string[] | number[]): string | string[];
+export declare function numbersToFr(grid: number[]): string[];
+export declare function mapGrid(width: string | number): string;
+export declare function mapTemplateGrid(grid: number | string | (number | string)[]): string | string[];

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

@@ -0,0 +1 @@
+export declare const checkNamingConvention: (componentName: string | null, componentSlot: string | null) => void;

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

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

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

@@ -0,0 +1,3 @@
+import type { PropsWithTheme } from '../types.js';
+import type { CSSObject } from 'styled-components';
+export declare const genStyleOverridesExpression: (componentName: string, componentSlot: string) => (props: PropsWithTheme) => (string | number | CSSObject | undefined)[] | null;

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

@@ -0,0 +1,3 @@
+import type { PropsWithTheme } from '../types.js';
+import type { CSSObject } from 'styled-components';
+export declare const genVariantOverridesExpression: (componentName: string) => (props: PropsWithTheme) => (string | number | CSSObject | undefined)[];

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

@@ -0,0 +1,2 @@
+export { genStyleOverridesExpression } from './genStyleOverridesExpression.js';
+export { genVariantOverridesExpression } from './genVariantOverridesExpression.js';

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

@@ -0,0 +1,2 @@
+import type { StyleArg } from './types.js';
+export declare const fixStyleArg: (styleArg: StyleArg, numberOfNewExpressions: number) => StyleArg;

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

@@ -0,0 +1,2 @@
+import type { AttrsFunc, Options } from '../types.js';
+export declare const generateAttributes: (options: Options, displayName: string | null) => AttrsFunc<any>[];

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

@@ -0,0 +1,2 @@
+import type { Options } from '../types.js';
+export declare const generateAutoCalculated: (options: Options) => readonly [string | null, import("../types.js").AttrsFunc<any>[]];

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

@@ -0,0 +1,2 @@
+import type { Options } from '../types.js';
+export declare const generateDisplayName: (options: Options) => string | null;

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

@@ -0,0 +1 @@
+export { generateAutoCalculated } from './generateAutoCalculated.js';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { StyledComponentInnerComponent, StyledComponentPropsWithRef } from 'styled-components';
+export declare const callbackMerger: <T>(props: StyledComponentPropsWithRef<StyledComponentInnerComponent<import("react").ComponentType<T>>>, object: Record<string, unknown>) => Record<string, unknown>;

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

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

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

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

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

@@ -0,0 +1,6 @@
+export { styled } from './styled.js';
+export { background, borders, boxShadows, color, flexboxes, fontSize, grids, layout, sizing, space, } from './system-utilities/index.js';
+export { slotObjectToDataTestIds } from './helpers.js';
+export * from './types.js';
+export * from './system-types.js';
+export { css, createGlobalStyle } from './system.js';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const styled: (<C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any> | import("styled-components").AnyStyledComponent>(tag: C, options?: import("./types.js").Options) => import("./types.js").ThemedStyledFunctionBase<C, import("./types.js").Theme, {}, never> & {
+    attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
+        [others: string]: any;
+    } = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, import("./types.js").Theme>) => NewA)) => import("styled-components").ThemedStyledFunction<C, import("./types.js").Theme, {} & NewA, string | number | symbol | keyof NewA>;
+    withConfig: <Props extends {} = {}>(config: import("styled-components").StyledConfig<import("styled-components").StyledComponentPropsWithRef<C> & Props>) => import("styled-components").ThemedStyledFunction<C, import("./types.js").Theme, Props, string | number | symbol>;
+}) & import("./styledObject.js").StyledObject;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';
+import type { Options, Theme, ThemedStyledFunctionBase } from './types.js';
+export declare const styledFunction: <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any> | AnyStyledComponent>(tag: C, options?: Options) => ThemedStyledFunctionBase<C, Theme, {}, never> & {
+    attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
+        [others: string]: any;
+    } = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, Theme>) => NewA)) => ThemedStyledFunction<C, Theme, {} & NewA, string | number | symbol | keyof NewA>;
+    withConfig: <Props extends {} = {}>(config: import("styled-components").StyledConfig<import("styled-components").StyledComponentPropsWithRef<C> & Props>) => ThemedStyledFunction<C, Theme, Props, string | number | symbol>;
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { styledFunction } from './styledFunction.js';
+export type StyledObject = {
+    [TTag in keyof JSX.IntrinsicElements]: ReturnType<typeof styledFunction<TTag>>;
+};
+export declare const styledObject: StyledObject;

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

@@ -0,0 +1,74 @@
+import type { SpaceProps as XstyledSpace, MarginProps, MarginTopProps, MarginRightProps, MarginBottomProps, MarginLeftProps, MarginXProps, MarginYProps, PaddingProps, PaddingTopProps, PaddingRightProps, PaddingBottomProps, PaddingLeftProps, PaddingXProps, PaddingYProps, ColorProps as XstyledColor, TypographyProps, FlexboxesProps } from '@xstyled/system';
+import type { Theme } from './types.js';
+export type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';
+export type { LayoutProps, SizingProps, FontSizeProps, PositionProps, BoxShadowProps, LineHeightProps, } from '@xstyled/system';
+interface DummyColorTheme {
+    'neutral-100': true;
+    'neutral-200': true;
+    'neutral-300': true;
+    'neutral-400': true;
+    'neutral-500': true;
+    'neutral-600': true;
+    'neutral-700': true;
+    'neutral-800': true;
+    'neutral-000': true;
+    'neutral-050': true;
+    'neutral-080': true;
+    'brand-100': true;
+    'brand-200': true;
+    'brand-300': true;
+    'brand-400': true;
+    'brand-500': true;
+    'brand-600': true;
+    'brand-700': true;
+    'brand-800': true;
+    'success-300': true;
+    'success-900': true;
+    'warning-400': true;
+    'warning-600': true;
+    'warning-900': true;
+    'danger-200': true;
+    'danger-900': true;
+}
+interface MarginAndPaddings extends MarginProps, MarginTopProps, MarginRightProps, MarginBottomProps, MarginLeftProps, MarginXProps, MarginYProps, PaddingProps, PaddingTopProps, PaddingRightProps, PaddingBottomProps, PaddingLeftProps, PaddingXProps, PaddingYProps {
+}
+type SpacePropsT = {
+    [key in keyof XstyledSpace]?: XstyledSpace[key];
+} & {
+    [key in keyof MarginAndPaddings]?: XstyledSpace[key] | keyof Theme['space'];
+};
+type ColorPropsT = {
+    [key in keyof XstyledColor]?: XstyledColor[key] | keyof DummyColorTheme;
+};
+export interface SpaceProps extends SpacePropsT {
+}
+export interface ColorProps extends ColorPropsT {
+}
+export interface BorderProps {
+    border?: string;
+    borderTop?: string;
+    borderBottom?: string;
+    borderRight?: string;
+    borderLeft?: string;
+    borderColor?: keyof DummyColorTheme;
+    borderTopColor?: keyof DummyColorTheme;
+    borderBottomColor?: keyof DummyColorTheme;
+    borderRightColor?: keyof DummyColorTheme;
+    borderLeftColor?: keyof DummyColorTheme;
+    borderStyle?: string;
+    borderTopStyle?: string;
+    borderBottomStyle?: string;
+    borderRightStyle?: string;
+    borderLeftStyle?: string;
+    borderWidth?: keyof Theme['space'];
+    borderTopWidth?: keyof Theme['space'];
+    borderBottomWidth?: keyof Theme['space'];
+    borderRightWidth?: keyof Theme['space'];
+    borderLeftWidth?: keyof Theme['space'];
+    borderRadius?: keyof Theme['space'];
+}
+export interface BackgroundProps {
+    backgroundColor?: keyof DummyColorTheme;
+    bg?: keyof DummyColorTheme;
+}
+export type { TypographyProps, FlexboxesProps };

package/dist/types/styled/system-utilities/background.d.ts

@@ -0,0 +1,2 @@
+import type { BackgroundProps } from '../system-types.js';
+export declare const background: import("@xstyled/system").StyleGenerator<BackgroundProps>;

package/dist/types/styled/system-utilities/border.d.ts

@@ -0,0 +1 @@
+export declare const borders: import("@xstyled/system").StyleGenerator<{}>;

package/dist/types/styled/system-utilities/color.d.ts

@@ -0,0 +1,2 @@
+import type { ColorProps } from '../system-types.js';
+export declare const color: import("@xstyled/system").StyleGenerator<ColorProps>;

package/dist/types/styled/system-utilities/index.d.ts

@@ -0,0 +1,6 @@
+export { layout, flexboxes, grids, boxShadow as boxShadows, fontSize } from '@xstyled/system';
+export { background } from './background.js';
+export { borders } from './border.js';
+export { color } from './color.js';
+export { sizing } from './sizing.js';
+export { space } from './space.js';

package/dist/types/styled/system-utilities/sizing.d.ts

@@ -0,0 +1 @@
+export declare const sizing: import("@xstyled/system").StyleGenerator<{}>;

package/dist/types/styled/system-utilities/space.d.ts

@@ -0,0 +1,3 @@
+import { type StyleGenerator } from '@xstyled/system';
+import type { SpaceProps } from '../system-types.js';
+export declare const space: StyleGenerator<SpaceProps>;

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

@@ -0,0 +1 @@
+export declare const css: import("styled-components").BaseThemedCssFunction<import("@xstyled/system").Theme>, styled: import("@xstyled/styled-components").XStyled<import("@xstyled/system").StyleGenerator<import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>>>, createGlobalStyle: typeof import("styled-components").createGlobalStyle;

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

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

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

@@ -0,0 +1,4 @@
+import type { Expressions, StyleArg } from '../types.js';
+type MagicCssTransform = (styleArg: StyleArg, expressions: Expressions) => [StyleArg, Expressions];
+export declare const magicCssTransform: MagicCssTransform;
+export {};