@elliemae/ds-system 3.0.4-rc.4 → 3.1.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ds-styled/types.js.map +1 -1
- package/dist/cjs/ds-styled/utilities/background.js +1 -3
- package/dist/cjs/ds-styled/utilities/background.js.map +2 -2
- package/dist/cjs/ds-styled/utilities/border.js +5 -13
- package/dist/cjs/ds-styled/utilities/border.js.map +2 -2
- package/dist/cjs/th.js +1 -0
- package/dist/cjs/th.js.map +2 -2
- package/dist/esm/ds-styled/utilities/background.js +1 -3
- package/dist/esm/ds-styled/utilities/background.js.map +2 -2
- package/dist/esm/ds-styled/utilities/border.js +5 -13
- package/dist/esm/ds-styled/utilities/border.js.map +2 -2
- package/dist/esm/th.js +1 -0
- package/dist/esm/th.js.map +2 -2
- package/package.json +5 -5
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/ds-styled/types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n AnyStyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n CSSObject,\n StyledComponent,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n Interpolation,\n InterpolationFunction,\n StyledConfig,\n} from 'styled-components';\nimport type { 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 ThProps = Required<PropsWithTheme>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,9 +27,7 @@ var React = __toESM(require("react"));
|
|
|
27
27
|
var import_system = require("@xstyled/system");
|
|
28
28
|
var import_th = require("../../th");
|
|
29
29
|
function bgColorGetter(value) {
|
|
30
|
-
return
|
|
31
|
-
return `${import_th.th.color(value, value)(props)}`;
|
|
32
|
-
};
|
|
30
|
+
return (props) => `${import_th.th.color(value, value)(props)}`;
|
|
33
31
|
}
|
|
34
32
|
bgColorGetter.meta = {};
|
|
35
33
|
const bg = (0, import_system.style)({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/ds-styled/utilities/background.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA+B;AAC/B,gBAAmB;AAGnB,uBAAuB,OAAe;AACpC,SAAO,
|
|
4
|
+
"sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction bgColorGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA+B;AAC/B,gBAAmB;AAGnB,uBAAuB,OAAe;AACpC,SAAO,CAAC,UAAkC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,7 @@ var import_system = require("@xstyled/system");
|
|
|
28
28
|
var import_th = require("../../th");
|
|
29
29
|
const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
|
|
30
30
|
function borderGetter(value) {
|
|
31
|
-
return
|
|
31
|
+
return (props) => {
|
|
32
32
|
const color = value.match(colorReg);
|
|
33
33
|
let borderCss = ``;
|
|
34
34
|
if (color) {
|
|
@@ -42,27 +42,19 @@ function borderGetter(value) {
|
|
|
42
42
|
}
|
|
43
43
|
borderGetter.meta = {};
|
|
44
44
|
function borderColorGetter(value) {
|
|
45
|
-
return
|
|
46
|
-
return `${import_th.th.color(value, value)(props)}`;
|
|
47
|
-
};
|
|
45
|
+
return (props) => `${import_th.th.color(value, value)(props)}`;
|
|
48
46
|
}
|
|
49
47
|
borderColorGetter.meta = {};
|
|
50
48
|
function borderStyleGetter(value) {
|
|
51
|
-
return
|
|
52
|
-
return value;
|
|
53
|
-
};
|
|
49
|
+
return () => value;
|
|
54
50
|
}
|
|
55
51
|
borderStyleGetter.meta = {};
|
|
56
52
|
function borderWidthGetter(value) {
|
|
57
|
-
return
|
|
58
|
-
return `${import_th.th.space(value, value)(props)}`;
|
|
59
|
-
};
|
|
53
|
+
return (props) => `${import_th.th.space(value, value)(props)}`;
|
|
60
54
|
}
|
|
61
55
|
borderWidthGetter.meta = {};
|
|
62
56
|
function borderRadiusGetter(value) {
|
|
63
|
-
return
|
|
64
|
-
return `${import_th.th.space(value, value)(props)}`;
|
|
65
|
-
};
|
|
57
|
+
return (props) => `${import_th.th.space(value, value)(props)}`;
|
|
66
58
|
}
|
|
67
59
|
borderRadiusGetter.meta = {};
|
|
68
60
|
const border = (0, import_system.style)({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/ds-styled/utilities/border.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, 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 (props: PropsWithTheme): 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 (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nfunction borderWidthGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.space(value, value)(props as ThProps)}`;\n}\n\nborderWidthGetter.meta = {};\n\nfunction borderRadiusGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.space(value, value)(props as ThProps)}`;\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,oBAA+B;AAC/B,gBAAmB;AAGnB,MAAM,WAAW;AAEjB,sBAAsB,OAAe;AACnC,SAAO,CAAC,UAAkC;AACxC,UAAM,QAAQ,MAAM,MAAM,QAAQ;AAClC,QAAI,YAAY;AAEhB,QAAI,OAAO;AACT,YAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,EAAE,EAAE,KAAK;AACvD,kBAAY,GAAG,aAAG,MAAM,MAAM,EAAE,EAAE,KAAgB,KAAK;AAAA,IACzD,OAAO;AACL,kBAAY;AAAA,IACd;AAEA,WAAO;AAAA,EACT;AACF;AAEA,aAAa,OAAO,CAAC;AAErB,2BAA2B,OAAe;AACxC,SAAO,CAAC,UAAkC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,kBAAkB,OAAO,CAAC;AAE1B,2BAA2B,OAAe;AACxC,SAAO,MAAc;AACvB;AAEA,kBAAkB,OAAO,CAAC;AAE1B,2BAA2B,OAAe;AACxC,SAAO,CAAC,UAAkC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,kBAAkB,OAAO,CAAC;AAE1B,4BAA4B,OAAe;AACzC,SAAO,CAAC,UAAkC,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,mBAAmB,OAAO,CAAC;AAE3B,MAAM,SAAS,yBAAM;AAAA,EACnB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,YAAY,yBAAM;AAAA,EACtB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,eAAe,yBAAM;AAAA,EACzB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,aAAa,yBAAM;AAAA,EACvB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,iBAAiB,yBAAM;AAAA,EAC3B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,oBAAoB,yBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,mBAAmB,yBAAM;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAkB,yBAAM;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,iBAAiB,yBAAM;AAAA,EAC3B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,oBAAoB,yBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,mBAAmB,yBAAM;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAkB,yBAAM;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,iBAAiB,yBAAM;AAAA,EAC3B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,oBAAoB,yBAAM;AAAA,EAC9B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,mBAAmB,yBAAM;AAAA,EAC7B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,kBAAkB,yBAAM;AAAA,EAC5B,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAED,MAAM,eAAe,yBAAM;AAAA,EACzB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,UAAU,2BACrB,QACA,WACA,cACA,YACA,aACA,aACA,gBACA,mBACA,iBACA,kBACA,aACA,gBACA,mBACA,iBACA,kBACA,aACA,gBACA,mBACA,iBACA,kBACA,YACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/th.js
CHANGED
package/dist/cjs/th.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/th.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: { theme: Theme }) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n space: ThGetter;\n fontSize: ThGetter;\n fontWeight: ThGetter;\n lineHeight: ThGetter;\n letterSpacing: ThGetter;\n font: ThGetter;\n color: ThGetter;\n breakpoint: ThGetter;\n media: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n (value, dfault = '') =>\n ({ theme }) => {\n const colorValues = value.split('-');\n\n if (colorValues.length === 1) return colorValues[0];\n\n if (colorValues.length > 3) return dfault;\n\n const [colorType, colorValue, alpha] = colorValues as [\n keyof Theme['colors'],\n keyof Theme['colors'][keyof Theme['colors']],\n string,\n ];\n\n const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n if (!themeColor) return dfault;\n\n if (alpha) {\n const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n return hexToRgba(themeColor, alphaFloatingNumber);\n }\n\n return themeColor;\n };\n\nconst genericGetter =\n (property: keyof Theme) =>\n (value: string, dfault = ''): ThemeStringGetter =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n\nexport const th: ThConstructor = (property): ThGetter => {\n switch (property) {\n case 'colors' as keyof Theme:\n return colorGetter;\n default:\n return genericGetter(property);\n }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: { theme: Theme }) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n space: ThGetter;\n fontSize: ThGetter;\n fontWeight: ThGetter;\n lineHeight: ThGetter;\n letterSpacing: ThGetter;\n font: ThGetter;\n color: ThGetter;\n breakpoint: ThGetter;\n media: ThGetter;\n zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n (value, dfault = '') =>\n ({ theme }) => {\n const colorValues = value.split('-');\n\n if (colorValues.length === 1) return colorValues[0];\n\n if (colorValues.length > 3) return dfault;\n\n const [colorType, colorValue, alpha] = colorValues as [\n keyof Theme['colors'],\n keyof Theme['colors'][keyof Theme['colors']],\n string,\n ];\n\n const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n if (!themeColor) return dfault;\n\n if (alpha) {\n const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n return hexToRgba(themeColor, alphaFloatingNumber);\n }\n\n return themeColor;\n };\n\nconst genericGetter =\n (property: keyof Theme) =>\n (value: string, dfault = ''): ThemeStringGetter =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n\nexport const th: ThConstructor = (property): ThGetter => {\n switch (property) {\n case 'colors' as keyof Theme:\n return colorGetter;\n default:\n return genericGetter(property);\n }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,YAAY;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,SAAS;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,WAAW;AAE3D,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA,EAC9B,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ;AAAA,SACD;AACH,aAAO;AAAA;AAEP,aAAO,cAAc,QAAQ;AAAA;AAEnC;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { style, compose } from "@xstyled/system";
|
|
3
3
|
import { th } from "../../th";
|
|
4
4
|
function bgColorGetter(value) {
|
|
5
|
-
return
|
|
6
|
-
return `${th.color(value, value)(props)}`;
|
|
7
|
-
};
|
|
5
|
+
return (props) => `${th.color(value, value)(props)}`;
|
|
8
6
|
}
|
|
9
7
|
bgColorGetter.meta = {};
|
|
10
8
|
const bg = style({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/background.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type {
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAGA,uBAAuB,OAAe;AACpC,SAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction bgColorGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAGA,uBAAuB,OAAe;AACpC,SAAO,CAAC,UAAkC,GAAG,GAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACtF;AAEA,cAAc,OAAO,CAAC;AAEtB,MAAM,KAAK,MAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,aAAa,QAAQ,EAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { style, compose } from "@xstyled/system";
|
|
|
3
3
|
import { th } from "../../th";
|
|
4
4
|
const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
|
|
5
5
|
function borderGetter(value) {
|
|
6
|
-
return
|
|
6
|
+
return (props) => {
|
|
7
7
|
const color = value.match(colorReg);
|
|
8
8
|
let borderCss = ``;
|
|
9
9
|
if (color) {
|
|
@@ -17,27 +17,19 @@ function borderGetter(value) {
|
|
|
17
17
|
}
|
|
18
18
|
borderGetter.meta = {};
|
|
19
19
|
function borderColorGetter(value) {
|
|
20
|
-
return
|
|
21
|
-
return `${th.color(value, value)(props)}`;
|
|
22
|
-
};
|
|
20
|
+
return (props) => `${th.color(value, value)(props)}`;
|
|
23
21
|
}
|
|
24
22
|
borderColorGetter.meta = {};
|
|
25
23
|
function borderStyleGetter(value) {
|
|
26
|
-
return
|
|
27
|
-
return value;
|
|
28
|
-
};
|
|
24
|
+
return () => value;
|
|
29
25
|
}
|
|
30
26
|
borderStyleGetter.meta = {};
|
|
31
27
|
function borderWidthGetter(value) {
|
|
32
|
-
return
|
|
33
|
-
return `${th.space(value, value)(props)}`;
|
|
34
|
-
};
|
|
28
|
+
return (props) => `${th.space(value, value)(props)}`;
|
|
35
29
|
}
|
|
36
30
|
borderWidthGetter.meta = {};
|
|
37
31
|
function borderRadiusGetter(value) {
|
|
38
|
-
return
|
|
39
|
-
return `${th.space(value, value)(props)}`;
|
|
40
|
-
};
|
|
32
|
+
return (props) => `${th.space(value, value)(props)}`;
|
|
41
33
|
}
|
|
42
34
|
borderRadiusGetter.meta = {};
|
|
43
35
|
const border = style({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/border.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, 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 (props: PropsWithTheme): 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 (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nfunction borderWidthGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.space(value, value)(props as ThProps)}`;\n}\n\nborderWidthGetter.meta = {};\n\nfunction borderRadiusGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.space(value, value)(props as ThProps)}`;\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/th.js
CHANGED
package/dist/esm/th.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/th.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: { theme: Theme }) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n space: ThGetter;\n fontSize: ThGetter;\n fontWeight: ThGetter;\n lineHeight: ThGetter;\n letterSpacing: ThGetter;\n font: ThGetter;\n color: ThGetter;\n breakpoint: ThGetter;\n media: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n (value, dfault = '') =>\n ({ theme }) => {\n const colorValues = value.split('-');\n\n if (colorValues.length === 1) return colorValues[0];\n\n if (colorValues.length > 3) return dfault;\n\n const [colorType, colorValue, alpha] = colorValues as [\n keyof Theme['colors'],\n keyof Theme['colors'][keyof Theme['colors']],\n string,\n ];\n\n const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n if (!themeColor) return dfault;\n\n if (alpha) {\n const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n return hexToRgba(themeColor, alphaFloatingNumber);\n }\n\n return themeColor;\n };\n\nconst genericGetter =\n (property: keyof Theme) =>\n (value: string, dfault = ''): ThemeStringGetter =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n\nexport const th: ThConstructor = (property): ThGetter => {\n switch (property) {\n case 'colors' as keyof Theme:\n return colorGetter;\n default:\n return genericGetter(property);\n }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\n"],
|
|
5
|
-
"mappings": "AAAA;ACGO,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: { theme: Theme }) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n space: ThGetter;\n fontSize: ThGetter;\n fontWeight: ThGetter;\n lineHeight: ThGetter;\n letterSpacing: ThGetter;\n font: ThGetter;\n color: ThGetter;\n breakpoint: ThGetter;\n media: ThGetter;\n zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n (value, dfault = '') =>\n ({ theme }) => {\n const colorValues = value.split('-');\n\n if (colorValues.length === 1) return colorValues[0];\n\n if (colorValues.length > 3) return dfault;\n\n const [colorType, colorValue, alpha] = colorValues as [\n keyof Theme['colors'],\n keyof Theme['colors'][keyof Theme['colors']],\n string,\n ];\n\n const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n if (!themeColor) return dfault;\n\n if (alpha) {\n const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n return hexToRgba(themeColor, alphaFloatingNumber);\n }\n\n return themeColor;\n };\n\nconst genericGetter =\n (property: keyof Theme) =>\n (value: string, dfault = ''): ThemeStringGetter =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n\nexport const th: ThConstructor = (property): ThGetter => {\n switch (property) {\n case 'colors' as keyof Theme:\n return colorGetter;\n default:\n return genericGetter(property);\n }\n};\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\nth.zIndex = th('zIndex');\n"],
|
|
5
|
+
"mappings": "AAAA;ACGO,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,YAAY;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,SAAS;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,WAAW;AAE3D,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA,EAC9B,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ;AAAA,SACD;AACH,aAAO;AAAA;AAEP,aAAO,cAAc,QAAQ;AAAA;AAEnC;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-system",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -95,19 +95,19 @@
|
|
|
95
95
|
},
|
|
96
96
|
"publishConfig": {
|
|
97
97
|
"access": "public",
|
|
98
|
-
"typeSafety":
|
|
98
|
+
"typeSafety": true
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
101
|
-
"@elliemae/ds-utilities": "3.0
|
|
101
|
+
"@elliemae/ds-utilities": "3.1.0-next.2",
|
|
102
102
|
"polished": "~3.6.7"
|
|
103
103
|
},
|
|
104
104
|
"devDependencies": {
|
|
105
|
-
"@elliemae/pui-theme": "~2.
|
|
105
|
+
"@elliemae/pui-theme": "~2.5.0",
|
|
106
106
|
"@testing-library/jest-dom": "~5.16.2",
|
|
107
107
|
"styled-components": "~5.3.3"
|
|
108
108
|
},
|
|
109
109
|
"peerDependencies": {
|
|
110
|
-
"@elliemae/pui-theme": "^2.
|
|
110
|
+
"@elliemae/pui-theme": "^2.5.0",
|
|
111
111
|
"lodash": "^4.17.21",
|
|
112
112
|
"react": "~17.0.2",
|
|
113
113
|
"react-dom": "^17.0.2",
|