@elliemae/ds-system 3.1.0-next.0 → 3.1.0-next.1
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/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/package.json +3 -3
|
@@ -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": "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",
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-system",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -95,10 +95,10 @@
|
|
|
95
95
|
},
|
|
96
96
|
"publishConfig": {
|
|
97
97
|
"access": "public",
|
|
98
|
-
"typeSafety":
|
|
98
|
+
"typeSafety": true
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
101
|
-
"@elliemae/ds-utilities": "3.1.0-next.
|
|
101
|
+
"@elliemae/ds-utilities": "3.1.0-next.1",
|
|
102
102
|
"polished": "~3.6.7"
|
|
103
103
|
},
|
|
104
104
|
"devDependencies": {
|