@elliemae/ds-system 3.60.0-next.9 → 3.70.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/utils.js +0 -29
- package/dist/cjs/utils.js.map +2 -2
- package/dist/esm/utils.js +0 -29
- package/dist/esm/utils.js.map +2 -2
- package/dist/types/utils.d.ts +1 -4
- package/package.json +25 -29
package/dist/cjs/utils.js
CHANGED
|
@@ -38,8 +38,6 @@ __export(utils_exports, {
|
|
|
38
38
|
fakeActive: () => fakeActive,
|
|
39
39
|
fakeBorder: () => fakeBorder,
|
|
40
40
|
flexCenter: () => flexCenter,
|
|
41
|
-
focus: () => focus,
|
|
42
|
-
focusAfter: () => focusAfter,
|
|
43
41
|
hover: () => hover,
|
|
44
42
|
iconColor: () => iconColor,
|
|
45
43
|
keyframes: () => keyframes,
|
|
@@ -47,7 +45,6 @@ __export(utils_exports, {
|
|
|
47
45
|
onlyFirefox: () => onlyFirefox,
|
|
48
46
|
onlySafari: () => onlySafari,
|
|
49
47
|
onlySafariAndFirefox: () => onlySafariAndFirefox,
|
|
50
|
-
rgba: () => import_polished.rgba,
|
|
51
48
|
safariAndFirefoxBold: () => safariAndFirefoxBold,
|
|
52
49
|
textStyle: () => textStyle,
|
|
53
50
|
transition: () => transition,
|
|
@@ -57,7 +54,6 @@ __export(utils_exports, {
|
|
|
57
54
|
});
|
|
58
55
|
module.exports = __toCommonJS(utils_exports);
|
|
59
56
|
var React = __toESM(require("react"));
|
|
60
|
-
var import_polished = require("polished");
|
|
61
57
|
var import_lodash_es = require("lodash-es");
|
|
62
58
|
var import_styled_components = require("@xstyled/styled-components");
|
|
63
59
|
var import_theme = require("./theme.js");
|
|
@@ -109,31 +105,6 @@ function animation(animationKeyframes, animationLength, animationTimingFn) {
|
|
|
109
105
|
${props.animationTimingFn || animationTimingFn};
|
|
110
106
|
`;
|
|
111
107
|
}
|
|
112
|
-
function focus(color = import_theme.theme.colors.brand[600]) {
|
|
113
|
-
return () => import_styled_components.css`
|
|
114
|
-
outline: none;
|
|
115
|
-
border: 1px solid ${color};
|
|
116
|
-
box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color)};
|
|
117
|
-
border-radius: 2px;
|
|
118
|
-
`;
|
|
119
|
-
}
|
|
120
|
-
function focusAfter(color) {
|
|
121
|
-
return import_styled_components.css`
|
|
122
|
-
outline: none;
|
|
123
|
-
position: relative;
|
|
124
|
-
&:after {
|
|
125
|
-
content: '';
|
|
126
|
-
z-index: 10;
|
|
127
|
-
position: absolute;
|
|
128
|
-
top: 0;
|
|
129
|
-
left: 0;
|
|
130
|
-
width: 100%;
|
|
131
|
-
height: 100%;
|
|
132
|
-
pointer-events: none;
|
|
133
|
-
${focus(color)}
|
|
134
|
-
}
|
|
135
|
-
`;
|
|
136
|
-
}
|
|
137
108
|
function active() {
|
|
138
109
|
return (props) => import_styled_components.css`
|
|
139
110
|
outline: none;
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/* 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 { reduce } from 'lodash-es';\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, 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\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["kfrm", "kfrm"]
|
|
7
7
|
}
|
package/dist/esm/utils.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { lighten, rgba } from "polished";
|
|
3
2
|
import { reduce } from "lodash-es";
|
|
4
3
|
import { css, withTheme, keyframes as kfrm, useTheme } from "@xstyled/styled-components";
|
|
5
4
|
import { theme } from "./theme.js";
|
|
@@ -51,31 +50,6 @@ function animation(animationKeyframes, animationLength, animationTimingFn) {
|
|
|
51
50
|
${props.animationTimingFn || animationTimingFn};
|
|
52
51
|
`;
|
|
53
52
|
}
|
|
54
|
-
function focus(color = theme.colors.brand[600]) {
|
|
55
|
-
return () => css`
|
|
56
|
-
outline: none;
|
|
57
|
-
border: 1px solid ${color};
|
|
58
|
-
box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};
|
|
59
|
-
border-radius: 2px;
|
|
60
|
-
`;
|
|
61
|
-
}
|
|
62
|
-
function focusAfter(color) {
|
|
63
|
-
return css`
|
|
64
|
-
outline: none;
|
|
65
|
-
position: relative;
|
|
66
|
-
&:after {
|
|
67
|
-
content: '';
|
|
68
|
-
z-index: 10;
|
|
69
|
-
position: absolute;
|
|
70
|
-
top: 0;
|
|
71
|
-
left: 0;
|
|
72
|
-
width: 100%;
|
|
73
|
-
height: 100%;
|
|
74
|
-
pointer-events: none;
|
|
75
|
-
${focus(color)}
|
|
76
|
-
}
|
|
77
|
-
`;
|
|
78
|
-
}
|
|
79
53
|
function active() {
|
|
80
54
|
return (props) => css`
|
|
81
55
|
outline: none;
|
|
@@ -242,8 +216,6 @@ export {
|
|
|
242
216
|
fakeActive,
|
|
243
217
|
fakeBorder,
|
|
244
218
|
flexCenter,
|
|
245
|
-
focus,
|
|
246
|
-
focusAfter,
|
|
247
219
|
hover,
|
|
248
220
|
iconColor,
|
|
249
221
|
keyframes,
|
|
@@ -251,7 +223,6 @@ export {
|
|
|
251
223
|
onlyFirefox,
|
|
252
224
|
onlySafari,
|
|
253
225
|
onlySafariAndFirefox,
|
|
254
|
-
rgba,
|
|
255
226
|
safariAndFirefoxBold,
|
|
256
227
|
textStyle,
|
|
257
228
|
transition,
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
|
-
"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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACSvB,SAAS,
|
|
4
|
+
"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 { reduce } from 'lodash-es';\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, 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\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/utils.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Theme } from '@elliemae/pui-theme';
|
|
2
|
-
import { rgba } from 'polished';
|
|
3
2
|
import type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';
|
|
4
3
|
import { withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';
|
|
5
|
-
export { withTheme,
|
|
4
|
+
export { withTheme, useTheme, kfrm };
|
|
6
5
|
type PropsWithTheme<T = Record<string, unknown>> = T & {
|
|
7
6
|
theme: Theme;
|
|
8
7
|
};
|
|
@@ -19,8 +18,6 @@ export declare function animation(animationKeyframes: string, animationLength: s
|
|
|
19
18
|
animationLength?: string;
|
|
20
19
|
animationTimingFn?: string;
|
|
21
20
|
}) => FlattenSimpleInterpolation;
|
|
22
|
-
export declare function focus(color?: string): () => FlattenSimpleInterpolation;
|
|
23
|
-
export declare function focusAfter(color: string): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("@xstyled/system").Theme>>;
|
|
24
21
|
export declare function active(): (props: PropsWithTheme) => FlattenSimpleInterpolation;
|
|
25
22
|
export declare function hover(): (props: PropsWithTheme) => FlattenSimpleInterpolation;
|
|
26
23
|
export declare function textStyle(type: string, weight?: keyof Theme['fontWeights']): (props: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-system",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.70.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -35,41 +35,37 @@
|
|
|
35
35
|
"reportFile": "tests.xml",
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
|
-
"scripts": {
|
|
39
|
-
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
40
|
-
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
41
|
-
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
42
|
-
"dts": "node ../../../scripts/dts.mjs",
|
|
43
|
-
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
44
|
-
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
|
|
45
|
-
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch"
|
|
46
|
-
},
|
|
47
38
|
"publishConfig": {
|
|
48
39
|
"access": "public",
|
|
49
40
|
"typeSafety": false
|
|
50
41
|
},
|
|
51
42
|
"dependencies": {
|
|
52
|
-
"@xstyled/styled-components": "
|
|
53
|
-
"@xstyled/system": "
|
|
54
|
-
"@xstyled/util": "
|
|
55
|
-
"polished": "catalog:"
|
|
43
|
+
"@xstyled/styled-components": "~3.8.1",
|
|
44
|
+
"@xstyled/system": "~3.8.1",
|
|
45
|
+
"@xstyled/util": "~3.7.0"
|
|
56
46
|
},
|
|
57
47
|
"devDependencies": {
|
|
58
|
-
"@elliemae/
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"@elliemae/
|
|
62
|
-
"
|
|
63
|
-
"jest-cli": "catalog:",
|
|
64
|
-
"styled-components": "catalog:"
|
|
48
|
+
"@elliemae/pui-theme": "~2.13.0",
|
|
49
|
+
"jest": "^30.0.0",
|
|
50
|
+
"styled-components": "~5.3.9",
|
|
51
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.1",
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.1"
|
|
65
53
|
},
|
|
66
54
|
"peerDependencies": {
|
|
67
|
-
"@elliemae/pui-theme": "
|
|
68
|
-
"csstype": "
|
|
69
|
-
"lodash-es": "
|
|
70
|
-
"react": "
|
|
71
|
-
"react-dom": "
|
|
72
|
-
"styled-components": "
|
|
55
|
+
"@elliemae/pui-theme": "~2.13.0",
|
|
56
|
+
"csstype": "^3.0.0",
|
|
57
|
+
"lodash-es": "^4.17.21",
|
|
58
|
+
"react": "^18.3.1",
|
|
59
|
+
"react-dom": "^18.3.1",
|
|
60
|
+
"styled-components": "~5.3.9"
|
|
73
61
|
},
|
|
74
|
-
"
|
|
75
|
-
|
|
62
|
+
"scripts": {
|
|
63
|
+
"test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
|
|
64
|
+
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
65
|
+
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
66
|
+
"dts": "node ../../../scripts/dts.mjs",
|
|
67
|
+
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
68
|
+
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
|
|
69
|
+
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch"
|
|
70
|
+
}
|
|
71
|
+
}
|