@elliemae/ds-system 2.2.0-alpha.3 → 2.2.0-alpha.4
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/cjs/globalStyles.js +1 -1
- package/cjs/index.js +9 -9
- package/cjs/mobileUtilities.js +3 -3
- package/cjs/spaceUtilities.js +2 -2
- package/cjs/styled/index.js +4 -4
- package/cjs/styled/index.js.map +2 -2
- package/cjs/styled/styleGetters.js +1 -1
- package/cjs/styled/types.js +1 -1
- package/cjs/styled/types.js.map +1 -1
- package/cjs/styled/utils.js +2 -2
- package/cjs/styled/utils.js.map +2 -2
- package/cjs/theme.js +1 -1
- package/cjs/themeProviderHOC.js +2 -2
- package/cjs/utils.js +23 -24
- package/cjs/utils.js.map +2 -2
- package/esm/styled/index.js +2 -2
- package/esm/styled/index.js.map +2 -2
- package/esm/styled/types.js.map +1 -1
- package/esm/styled/utils.js.map +2 -2
- package/esm/utils.js +2 -3
- package/esm/utils.js.map +2 -2
- package/package.json +5 -5
- package/types/styled/types.d.ts +1 -2
- package/types/utils.d.ts +1 -2
package/cjs/globalStyles.js
CHANGED
|
@@ -30,7 +30,7 @@ __export(globalStyles_exports, {
|
|
|
30
30
|
GlobalStyles: () => GlobalStyles
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_utils =
|
|
33
|
+
var import_utils = require("./utils");
|
|
34
34
|
const GlobalStyles = import_utils.createGlobalStyle`
|
|
35
35
|
:root, body {
|
|
36
36
|
overscroll-behavior-y: none;
|
package/cjs/index.js
CHANGED
|
@@ -30,14 +30,14 @@ __export(src_exports, {
|
|
|
30
30
|
themeProviderHOC: () => import_themeProviderHOC.themeProviderHOC
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
__reExport(src_exports,
|
|
34
|
-
__reExport(src_exports,
|
|
35
|
-
__reExport(src_exports,
|
|
36
|
-
__reExport(src_exports,
|
|
37
|
-
__reExport(src_exports,
|
|
38
|
-
__reExport(src_exports,
|
|
39
|
-
__reExport(src_exports,
|
|
40
|
-
__reExport(src_exports,
|
|
41
|
-
var import_themeProviderHOC =
|
|
33
|
+
__reExport(src_exports, require("./globalStyles"));
|
|
34
|
+
__reExport(src_exports, require("./spaceUtilities"));
|
|
35
|
+
__reExport(src_exports, require("./mobileUtilities"));
|
|
36
|
+
__reExport(src_exports, require("./utils"));
|
|
37
|
+
__reExport(src_exports, require("./arithmetic"));
|
|
38
|
+
__reExport(src_exports, require("./th"));
|
|
39
|
+
__reExport(src_exports, require("./theme"));
|
|
40
|
+
__reExport(src_exports, require("./styled"));
|
|
41
|
+
var import_themeProviderHOC = require("./themeProviderHOC");
|
|
42
42
|
module.exports = __toCommonJS(src_exports);
|
|
43
43
|
//# sourceMappingURL=index.js.map
|
package/cjs/mobileUtilities.js
CHANGED
|
@@ -33,9 +33,9 @@ __export(mobileUtilities_exports, {
|
|
|
33
33
|
useIsMobile: () => useIsMobile
|
|
34
34
|
});
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var import_react =
|
|
37
|
-
var import_theme =
|
|
38
|
-
var import_constants =
|
|
36
|
+
var import_react = require("react");
|
|
37
|
+
var import_theme = require("./theme");
|
|
38
|
+
var import_constants = require("./constants");
|
|
39
39
|
function __UNSAFE_SPACE_TO_DIMSUM(unit) {
|
|
40
40
|
if (import_constants.translateUnits[unit])
|
|
41
41
|
return import_constants.translateUnits[unit];
|
package/cjs/spaceUtilities.js
CHANGED
|
@@ -37,8 +37,8 @@ __export(spaceUtilities_exports, {
|
|
|
37
37
|
numbersToFr: () => numbersToFr
|
|
38
38
|
});
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
|
-
var import_lodash =
|
|
41
|
-
var import_theme =
|
|
40
|
+
var import_lodash = require("lodash");
|
|
41
|
+
var import_theme = require("./theme");
|
|
42
42
|
function mapGap(gutter) {
|
|
43
43
|
if (!gutter)
|
|
44
44
|
return "0rem";
|
package/cjs/styled/index.js
CHANGED
|
@@ -31,10 +31,10 @@ __export(styled_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_styled_components = __toESM(require("styled-components"));
|
|
34
|
-
var import_styleGetters =
|
|
35
|
-
var import_utils =
|
|
34
|
+
var import_styleGetters = require("./styleGetters");
|
|
35
|
+
var import_utils = require("./utils");
|
|
36
36
|
const styledFunction = (tag, options = { name: null, slot: null }) => {
|
|
37
|
-
const { name: componentName, slot: componentSlot } = options;
|
|
37
|
+
const { name: componentName = null, slot: componentSlot = null } = options;
|
|
38
38
|
const func = (styleArg, ...expressions) => {
|
|
39
39
|
const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => typeof stylesArg === "function" ? (props) => stylesArg({
|
|
40
40
|
...props,
|
|
@@ -67,7 +67,7 @@ const styledFunction = (tag, options = { name: null, slot: null }) => {
|
|
|
67
67
|
transformedStyleArg = (props) => styleArg({ ...props, theme: (0, import_utils.coerceWithDefaultTheme)(props.theme) });
|
|
68
68
|
}
|
|
69
69
|
let Component = (0, import_styled_components.default)(tag);
|
|
70
|
-
const displayName = componentName !== null && componentSlot !== null ? `${componentName}
|
|
70
|
+
const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
|
|
71
71
|
if (displayName !== null) {
|
|
72
72
|
Component = Component.attrs({ className: `${componentName}${componentSlot}` });
|
|
73
73
|
}
|
package/cjs/styled/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled_component, { StyledComponentPropsWithRef } from 'styled-components';\nimport { Styled, StyledFunction, StyledObject } from './types';\nimport { getStyleOverrides, getVariantStyles, variantsResolver } from './styleGetters';\nimport { coerceWithDefaultTheme } from './utils';\n\nconst styledFunction: StyledFunction = (tag, options = { name: null, slot: null }) => {\n const { name: componentName, slot: componentSlot } = options;\n const func: ReturnType<StyledFunction> = (styleArg, ...expressions) => {\n /*\n * These are the internal expression written in dimsum\n * We just coerce with the default theme in case users\n * forget to add the ThemeProvider\n */\n const expressionsWithDefaultTheme = expressions\n ? expressions.map<typeof expressions[number]>((stylesArg) =>\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA8D;AAE9D,0BAAsE;AACtE,mBAAuC;AAEvC,MAAM,iBAAiC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,WAAW;AACpF,QAAM,EAAE,MAAM,
|
|
4
|
+
"sourcesContent": ["import styled_component, { StyledComponentPropsWithRef } from 'styled-components';\nimport { Styled, StyledFunction, StyledObject } from './types';\nimport { getStyleOverrides, getVariantStyles, variantsResolver } from './styleGetters';\nimport { coerceWithDefaultTheme } from './utils';\n\nconst styledFunction: StyledFunction = (tag, options = { name: null, slot: null }) => {\n const { name: componentName = null, slot: componentSlot = null } = options;\n const func: ReturnType<StyledFunction> = (styleArg, ...expressions) => {\n /*\n * These are the internal expression written in dimsum\n * We just coerce with the default theme in case users\n * forget to add the ThemeProvider\n */\n const expressionsWithDefaultTheme = expressions\n ? expressions.map<typeof expressions[number]>((stylesArg) =>\n typeof stylesArg === 'function'\n ? (props) =>\n stylesArg({\n ...props,\n theme: coerceWithDefaultTheme(props.theme),\n })\n : stylesArg,\n )\n : [];\n\n let transformedStyleArg = styleArg;\n\n /*\n * Here we get the style overrides from the user\n */\n if (componentName && componentSlot) {\n expressionsWithDefaultTheme.push((props) => {\n const theme = coerceWithDefaultTheme(props.theme);\n const styleOverrides = getStyleOverrides(componentName, theme);\n if (styleOverrides) {\n return [styleOverrides[componentSlot]];\n }\n return null;\n });\n }\n\n /*\n * Here we get the variant overrides from the user (only for the root)\n */\n if (componentName && componentSlot === 'root') {\n expressionsWithDefaultTheme.push((props) => {\n const theme = coerceWithDefaultTheme(props.theme);\n return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n });\n }\n\n const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;\n\n if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {\n // Here we are adding placeholders for all the new functions that we are gonna call\n const placeholders: string[] = new Array(numOfCustomFnsApplied).fill('');\n transformedStyleArg = Object.assign([...styleArg, ...placeholders], {\n raw: [...(styleArg as TemplateStringsArray).raw, ...placeholders],\n });\n } else if (typeof styleArg === 'function') {\n // Here we just coerce with the default theme\n transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n }\n let Component = styled_component(tag);\n\n const displayName =\n componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n if (displayName !== null) {\n Component = Component.attrs({ className: `${componentName}${componentSlot}` } as unknown as Partial<\n StyledComponentPropsWithRef<typeof tag>\n >);\n }\n\n Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n if (displayName !== null) {\n Component.displayName = displayName;\n }\n\n return Component;\n };\n return func;\n};\n\nconst styledObject = Object.keys(styled_component).reduce((obj, key) => {\n const castedKey = key as keyof JSX.IntrinsicElements;\n obj[castedKey] = styledFunction(castedKey);\n return obj;\n}, {} as StyledObject);\n\nexport const styled: Styled = Object.assign(styledFunction, styledObject);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA8D;AAE9D,0BAAsE;AACtE,mBAAuC;AAEvC,MAAM,iBAAiC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,WAAW;AACpF,QAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,gBAAgB,SAAS;AACnE,QAAM,OAAmC,CAAC,aAAa,gBAAgB;AAMrE,UAAM,8BAA8B,cAChC,YAAY,IAAgC,CAAC,cAC7C,OAAO,cAAc,aACjB,CAAC,UACD,UAAU;AAAA,SACL;AAAA,MACH,OAAO,yCAAuB,MAAM;AAAA,SAEtC,aAEJ;AAEJ,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,yCAAuB,MAAM;AAC3C,cAAM,iBAAiB,2CAAkB,eAAe;AACxD,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe;AAAA;AAEzB,eAAO;AAAA;AAAA;AAOX,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,yCAAuB,MAAM;AAC3C,eAAO,0CAAiB,OAAO,0CAAiB,eAAe,QAAQ,OAAO;AAAA;AAAA;AAIlF,UAAM,wBAAwB,4BAA4B,SAAS,YAAY;AAE/E,QAAI,MAAM,QAAQ,aAAa,wBAAwB,GAAG;AAExD,YAAM,eAAyB,IAAI,MAAM,uBAAuB,KAAK;AACrE,4BAAsB,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,eAAe;AAAA,QAClE,KAAK,CAAC,GAAI,SAAkC,KAAK,GAAG;AAAA;AAAA,eAE7C,OAAO,aAAa,YAAY;AAEzC,4BAAsB,CAAC,UAAU,SAAS,KAAK,OAAO,OAAO,yCAAuB,MAAM;AAAA;AAE5F,QAAI,YAAY,sCAAiB;AAEjC,UAAM,cACJ,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE3F,QAAI,gBAAgB,MAAM;AACxB,kBAAY,UAAU,MAAM,EAAE,WAAW,GAAG,gBAAgB;AAAA;AAK9D,gBAAY,UAAU,qBAAqB,GAAG;AAE9C,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA;AAG1B,WAAO;AAAA;AAET,SAAO;AAAA;AAGT,MAAM,eAAe,OAAO,KAAK,kCAAkB,OAAO,CAAC,KAAK,QAAQ;AACtE,QAAM,YAAY;AAClB,MAAI,aAAa,eAAe;AAChC,SAAO;AAAA,GACN;AAEI,MAAM,SAAiB,OAAO,OAAO,gBAAgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,7 +32,7 @@ __export(styleGetters_exports, {
|
|
|
32
32
|
variantsResolver: () => variantsResolver
|
|
33
33
|
});
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_utils =
|
|
35
|
+
var import_utils = require("./utils");
|
|
36
36
|
const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
|
|
37
37
|
const getVariantStyles = (name, theme) => {
|
|
38
38
|
const variants = theme.components?.[name]?.variants || [];
|
package/cjs/styled/types.js
CHANGED
|
@@ -30,6 +30,6 @@ __export(types_exports, {
|
|
|
30
30
|
CSSObject: () => import_styled_components2.CSSObject
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_styled_components2 =
|
|
33
|
+
var import_styled_components2 = require("styled-components");
|
|
34
34
|
module.exports = __toCommonJS(types_exports);
|
|
35
35
|
//# sourceMappingURL=types.js.map
|
package/cjs/styled/types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport {\n AnyStyledComponent,\n CSSObject,\n Interpolation,\n InterpolationFunction,\n StyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n} from 'styled-components';\n\nexport { CSSObject } from 'styled-components';\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\nexport type ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = {},\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\ntype ThemedStyledComponentFactories<T extends object> = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;\n};\n\nexport type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: { name: string | null; slot: string | null },\n) => ThemedStyledFunctionBase<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {},\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport {\n AnyStyledComponent,\n CSSObject,\n Interpolation,\n InterpolationFunction,\n StyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n} from 'styled-components';\n\nexport { CSSObject } from 'styled-components';\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\nexport type ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = {},\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\ntype ThemedStyledComponentFactories<T extends object> = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;\n};\n\nexport type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: { name: string | null; slot: string | null; },\n) => ThemedStyledFunctionBase<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {},\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type StyledObject = ThemedStyledComponentFactories<Theme>;\n\nexport type Styled = StyledFunction & StyledObject;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADevB,gCAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/cjs/styled/utils.js
CHANGED
|
@@ -32,8 +32,8 @@ __export(utils_exports, {
|
|
|
32
32
|
propsToClassKey: () => propsToClassKey
|
|
33
33
|
});
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_ds_utilities =
|
|
36
|
-
var import_theme =
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
36
|
+
var import_theme = require("../theme");
|
|
37
37
|
const systemTheme = import_theme.theme;
|
|
38
38
|
const isEmpty = (string) => string.length === 0;
|
|
39
39
|
const coerceWithDefaultTheme = (themeInput) => themeInput ?? systemTheme;
|
package/cjs/styled/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { capitalize } from '@elliemae/ds-utilities';\nimport type { Theme } from './types';\nimport { theme as defaultTheme } from '../theme';\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme): Theme => themeInput ?? systemTheme;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n Object.keys(props)\n .sort()\n .reduce((classKey, key) => {\n if (key === 'color') {\n return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));\n }\n return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n }, '');\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAE3B,mBAAsC;AAEtC,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAA6B,cAAc;AAE3E,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,OACT,OACA,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,WAAW,QAAQ,OAAO,aAAa,OAAO,MAAM,QAAQ,oCAAW,OAAO,MAAM;AAAA;AAE7F,SAAO,GAAG,WAAW,QAAQ,OAAO,aAAa,MAAM,oCAAW,OAAO,oCAAW,MAAM,KAAK;AAAA,GAC9F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/cjs/theme.js
CHANGED
|
@@ -30,7 +30,7 @@ __export(theme_exports, {
|
|
|
30
30
|
theme: () => theme
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_pui_theme =
|
|
33
|
+
var import_pui_theme = require("@elliemae/pui-theme");
|
|
34
34
|
const theme = (0, import_pui_theme.getDefaultTheme)();
|
|
35
35
|
module.exports = __toCommonJS(theme_exports);
|
|
36
36
|
//# sourceMappingURL=theme.js.map
|
package/cjs/themeProviderHOC.js
CHANGED
|
@@ -31,8 +31,8 @@ __export(themeProviderHOC_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_styled_components =
|
|
35
|
-
var import_theme =
|
|
34
|
+
var import_styled_components = require("styled-components");
|
|
35
|
+
var import_theme = require("./theme");
|
|
36
36
|
const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
|
|
37
37
|
theme: import_theme.theme
|
|
38
38
|
}, /* @__PURE__ */ import_react.default.createElement(Component, {
|
package/cjs/utils.js
CHANGED
|
@@ -34,8 +34,8 @@ __export(utils_exports, {
|
|
|
34
34
|
buttonLink: () => buttonLink,
|
|
35
35
|
clearFocus: () => clearFocus,
|
|
36
36
|
color: () => color,
|
|
37
|
-
createGlobalStyle: () =>
|
|
38
|
-
css: () =>
|
|
37
|
+
createGlobalStyle: () => import_styled_components.createGlobalStyle,
|
|
38
|
+
css: () => import_styled_components.css,
|
|
39
39
|
disabled: () => disabled,
|
|
40
40
|
fakeActive: () => fakeActive,
|
|
41
41
|
fakeBorder: () => fakeBorder,
|
|
@@ -45,7 +45,7 @@ __export(utils_exports, {
|
|
|
45
45
|
hover: () => hover,
|
|
46
46
|
iconColor: () => iconColor,
|
|
47
47
|
keyframes: () => keyframes,
|
|
48
|
-
kfrm: () =>
|
|
48
|
+
kfrm: () => import_styled_components.keyframes,
|
|
49
49
|
onlyFirefox: () => onlyFirefox,
|
|
50
50
|
onlySafari: () => onlySafari,
|
|
51
51
|
onlySafariAndFirefox: () => onlySafariAndFirefox,
|
|
@@ -54,17 +54,17 @@ __export(utils_exports, {
|
|
|
54
54
|
textStyle: () => textStyle,
|
|
55
55
|
transition: () => transition,
|
|
56
56
|
truncate: () => truncate,
|
|
57
|
-
useTheme: () =>
|
|
58
|
-
withTheme: () =>
|
|
57
|
+
useTheme: () => import_styled_components.useTheme,
|
|
58
|
+
withTheme: () => import_styled_components.withTheme
|
|
59
59
|
});
|
|
60
60
|
var React = __toESM(require("react"));
|
|
61
|
-
var import_polished =
|
|
62
|
-
var import_lodash =
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var
|
|
61
|
+
var import_polished = require("polished");
|
|
62
|
+
var import_lodash = require("lodash");
|
|
63
|
+
var import_styled_components = require("styled-components");
|
|
64
|
+
var import_theme = require("./theme");
|
|
65
|
+
var import_mobileUtilities = require("./mobileUtilities");
|
|
66
66
|
function truncate(width) {
|
|
67
|
-
return (props) =>
|
|
67
|
+
return (props) => import_styled_components.css`
|
|
68
68
|
${!!width || props.width ? `width: ${props.width || width};` : ""}
|
|
69
69
|
white-space: nowrap;
|
|
70
70
|
overflow: hidden;
|
|
@@ -85,7 +85,7 @@ function disabled() {
|
|
|
85
85
|
`;
|
|
86
86
|
}
|
|
87
87
|
function keyframes(obj) {
|
|
88
|
-
return
|
|
88
|
+
return import_styled_components.keyframes`${(0, import_lodash.reduce)(obj, (result, value, key) => `
|
|
89
89
|
${result}
|
|
90
90
|
${key}% {
|
|
91
91
|
${value}
|
|
@@ -97,7 +97,7 @@ function boxShadow(top, left, blur, color2, inset = false) {
|
|
|
97
97
|
return `box-shadow: ${inset ? "inset" : ""} ${top} ${left} ${blur} ${color2};`;
|
|
98
98
|
}
|
|
99
99
|
function color(variant = "neutral", type = 400) {
|
|
100
|
-
return
|
|
100
|
+
return import_styled_components.css`
|
|
101
101
|
color: ${(props) => props.theme.colors[variant][type]};
|
|
102
102
|
`;
|
|
103
103
|
}
|
|
@@ -105,14 +105,13 @@ function border(color2 = import_theme.theme.colors.brand[600], size = "1px", typ
|
|
|
105
105
|
return `${size} ${type} ${color2}`;
|
|
106
106
|
}
|
|
107
107
|
function animation(animationKeyframes, animationLength, animationTimingFn) {
|
|
108
|
-
return (props) =>
|
|
109
|
-
animation: ${props.animationKeyframes || animationKeyframes}
|
|
110
|
-
${props.animationLength || animationLength}
|
|
108
|
+
return (props) => import_styled_components.css`
|
|
109
|
+
animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
|
|
111
110
|
${props.animationTimingFn || animationTimingFn};
|
|
112
111
|
`;
|
|
113
112
|
}
|
|
114
113
|
function focus(color2 = import_theme.theme.colors.brand[600]) {
|
|
115
|
-
return () =>
|
|
114
|
+
return () => import_styled_components.css`
|
|
116
115
|
outline: none;
|
|
117
116
|
border: 1px solid ${color2};
|
|
118
117
|
box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color2)};
|
|
@@ -120,7 +119,7 @@ function focus(color2 = import_theme.theme.colors.brand[600]) {
|
|
|
120
119
|
`;
|
|
121
120
|
}
|
|
122
121
|
function focusAfter(color2) {
|
|
123
|
-
return
|
|
122
|
+
return import_styled_components.css`
|
|
124
123
|
outline: none;
|
|
125
124
|
position: relative;
|
|
126
125
|
&:after {
|
|
@@ -137,14 +136,14 @@ function focusAfter(color2) {
|
|
|
137
136
|
`;
|
|
138
137
|
}
|
|
139
138
|
function active() {
|
|
140
|
-
return (props) =>
|
|
139
|
+
return (props) => import_styled_components.css`
|
|
141
140
|
outline: none;
|
|
142
141
|
border: 1px solid ${props.theme.colors.brand[700]};
|
|
143
142
|
border-radius: 2px;
|
|
144
143
|
`;
|
|
145
144
|
}
|
|
146
145
|
function hover() {
|
|
147
|
-
return (props) =>
|
|
146
|
+
return (props) => import_styled_components.css`
|
|
148
147
|
outline: 1px solid ${props.theme.colors.brand[600]};
|
|
149
148
|
outline-offset: -1px;
|
|
150
149
|
`;
|
|
@@ -226,18 +225,18 @@ function textStyle(type, weight = "regular") {
|
|
|
226
225
|
};
|
|
227
226
|
}
|
|
228
227
|
function iconColor(variant = "neutral", type = 400) {
|
|
229
|
-
return
|
|
228
|
+
return import_styled_components.css`
|
|
230
229
|
fill: ${(props) => props.theme.colors[variant][type]};
|
|
231
230
|
`;
|
|
232
231
|
}
|
|
233
232
|
function fakeBorder() {
|
|
234
|
-
return
|
|
233
|
+
return import_styled_components.css`
|
|
235
234
|
box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
|
|
236
235
|
border-radius: 2px;
|
|
237
236
|
`;
|
|
238
237
|
}
|
|
239
238
|
function fakeActive() {
|
|
240
|
-
return
|
|
239
|
+
return import_styled_components.css`
|
|
241
240
|
outline: none;
|
|
242
241
|
box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
|
|
243
242
|
border-radius: 2px;
|
|
@@ -261,7 +260,7 @@ function transition(t = "all 1s ease") {
|
|
|
261
260
|
transition: ${t};
|
|
262
261
|
`;
|
|
263
262
|
}
|
|
264
|
-
const onlySafariAndFirefox = (styles) =>
|
|
263
|
+
const onlySafariAndFirefox = (styles) => import_styled_components.css`
|
|
265
264
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
266
265
|
${styles}
|
|
267
266
|
}
|
package/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 no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,sBAA8B;AAC9B,oBAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\n\nexport { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };\n\nexport function truncate(width?: string) {\n return (props) => css`\n ${!!width || props.width ? `width: ${props.width || width};` : ''}\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, unknown>): 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\nexport function color(variant = 'neutral', type = 400) {\n return css`\n color: ${(props) => props.theme.colors[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) => 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) => 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) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight = 'regular') {\n // eslint-disable-next-line complexity\n return (props): 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.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: ${(props) => props.theme.colors[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): string => 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": []
|
|
7
7
|
}
|
package/esm/styled/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import styled_component from "styled-components";
|
|
|
3
3
|
import { getStyleOverrides, getVariantStyles, variantsResolver } from "./styleGetters";
|
|
4
4
|
import { coerceWithDefaultTheme } from "./utils";
|
|
5
5
|
const styledFunction = (tag, options = { name: null, slot: null }) => {
|
|
6
|
-
const { name: componentName, slot: componentSlot } = options;
|
|
6
|
+
const { name: componentName = null, slot: componentSlot = null } = options;
|
|
7
7
|
const func = (styleArg, ...expressions) => {
|
|
8
8
|
const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => typeof stylesArg === "function" ? (props) => stylesArg({
|
|
9
9
|
...props,
|
|
@@ -36,7 +36,7 @@ const styledFunction = (tag, options = { name: null, slot: null }) => {
|
|
|
36
36
|
transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });
|
|
37
37
|
}
|
|
38
38
|
let Component = styled_component(tag);
|
|
39
|
-
const displayName = componentName !== null && componentSlot !== null ? `${componentName}
|
|
39
|
+
const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
|
|
40
40
|
if (displayName !== null) {
|
|
41
41
|
Component = Component.attrs({ className: `${componentName}${componentSlot}` });
|
|
42
42
|
}
|
package/esm/styled/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled_component, { StyledComponentPropsWithRef } from 'styled-components';\nimport { Styled, StyledFunction, StyledObject } from './types';\nimport { getStyleOverrides, getVariantStyles, variantsResolver } from './styleGetters';\nimport { coerceWithDefaultTheme } from './utils';\n\nconst styledFunction: StyledFunction = (tag, options = { name: null, slot: null }) => {\n const { name: componentName, slot: componentSlot } = options;\n const func: ReturnType<StyledFunction> = (styleArg, ...expressions) => {\n /*\n * These are the internal expression written in dimsum\n * We just coerce with the default theme in case users\n * forget to add the ThemeProvider\n */\n const expressionsWithDefaultTheme = expressions\n ? expressions.map<typeof expressions[number]>((stylesArg) =>\n
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AACA;AAEA,MAAM,iBAAiC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,WAAW;AACpF,QAAM,EAAE,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled_component, { StyledComponentPropsWithRef } from 'styled-components';\nimport { Styled, StyledFunction, StyledObject } from './types';\nimport { getStyleOverrides, getVariantStyles, variantsResolver } from './styleGetters';\nimport { coerceWithDefaultTheme } from './utils';\n\nconst styledFunction: StyledFunction = (tag, options = { name: null, slot: null }) => {\n const { name: componentName = null, slot: componentSlot = null } = options;\n const func: ReturnType<StyledFunction> = (styleArg, ...expressions) => {\n /*\n * These are the internal expression written in dimsum\n * We just coerce with the default theme in case users\n * forget to add the ThemeProvider\n */\n const expressionsWithDefaultTheme = expressions\n ? expressions.map<typeof expressions[number]>((stylesArg) =>\n typeof stylesArg === 'function'\n ? (props) =>\n stylesArg({\n ...props,\n theme: coerceWithDefaultTheme(props.theme),\n })\n : stylesArg,\n )\n : [];\n\n let transformedStyleArg = styleArg;\n\n /*\n * Here we get the style overrides from the user\n */\n if (componentName && componentSlot) {\n expressionsWithDefaultTheme.push((props) => {\n const theme = coerceWithDefaultTheme(props.theme);\n const styleOverrides = getStyleOverrides(componentName, theme);\n if (styleOverrides) {\n return [styleOverrides[componentSlot]];\n }\n return null;\n });\n }\n\n /*\n * Here we get the variant overrides from the user (only for the root)\n */\n if (componentName && componentSlot === 'root') {\n expressionsWithDefaultTheme.push((props) => {\n const theme = coerceWithDefaultTheme(props.theme);\n return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n });\n }\n\n const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;\n\n if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {\n // Here we are adding placeholders for all the new functions that we are gonna call\n const placeholders: string[] = new Array(numOfCustomFnsApplied).fill('');\n transformedStyleArg = Object.assign([...styleArg, ...placeholders], {\n raw: [...(styleArg as TemplateStringsArray).raw, ...placeholders],\n });\n } else if (typeof styleArg === 'function') {\n // Here we just coerce with the default theme\n transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n }\n let Component = styled_component(tag);\n\n const displayName =\n componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n if (displayName !== null) {\n Component = Component.attrs({ className: `${componentName}${componentSlot}` } as unknown as Partial<\n StyledComponentPropsWithRef<typeof tag>\n >);\n }\n\n Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n if (displayName !== null) {\n Component.displayName = displayName;\n }\n\n return Component;\n };\n return func;\n};\n\nconst styledObject = Object.keys(styled_component).reduce((obj, key) => {\n const castedKey = key as keyof JSX.IntrinsicElements;\n obj[castedKey] = styledFunction(castedKey);\n return obj;\n}, {} as StyledObject);\n\nexport const styled: Styled = Object.assign(styledFunction, styledObject);\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AACA;AAEA,MAAM,iBAAiC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,WAAW;AACpF,QAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,gBAAgB,SAAS;AACnE,QAAM,OAAmC,CAAC,aAAa,gBAAgB;AAMrE,UAAM,8BAA8B,cAChC,YAAY,IAAgC,CAAC,cAC7C,OAAO,cAAc,aACjB,CAAC,UACD,UAAU;AAAA,SACL;AAAA,MACH,OAAO,uBAAuB,MAAM;AAAA,SAEtC,aAEJ;AAEJ,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,uBAAuB,MAAM;AAC3C,cAAM,iBAAiB,kBAAkB,eAAe;AACxD,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe;AAAA;AAEzB,eAAO;AAAA;AAAA;AAOX,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,uBAAuB,MAAM;AAC3C,eAAO,iBAAiB,OAAO,iBAAiB,eAAe,QAAQ,OAAO;AAAA;AAAA;AAIlF,UAAM,wBAAwB,4BAA4B,SAAS,YAAY;AAE/E,QAAI,MAAM,QAAQ,aAAa,wBAAwB,GAAG;AAExD,YAAM,eAAyB,IAAI,MAAM,uBAAuB,KAAK;AACrE,4BAAsB,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,eAAe;AAAA,QAClE,KAAK,CAAC,GAAI,SAAkC,KAAK,GAAG;AAAA;AAAA,eAE7C,OAAO,aAAa,YAAY;AAEzC,4BAAsB,CAAC,UAAU,SAAS,KAAK,OAAO,OAAO,uBAAuB,MAAM;AAAA;AAE5F,QAAI,YAAY,iBAAiB;AAEjC,UAAM,cACJ,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE3F,QAAI,gBAAgB,MAAM;AACxB,kBAAY,UAAU,MAAM,EAAE,WAAW,GAAG,gBAAgB;AAAA;AAK9D,gBAAY,UAAU,qBAAqB,GAAG;AAE9C,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA;AAG1B,WAAO;AAAA;AAET,SAAO;AAAA;AAGT,MAAM,eAAe,OAAO,KAAK,kBAAkB,OAAO,CAAC,KAAK,QAAQ;AACtE,QAAM,YAAY;AAClB,MAAI,aAAa,eAAe;AAChC,SAAO;AAAA,GACN;AAEI,MAAM,SAAiB,OAAO,OAAO,gBAAgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/esm/styled/types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport {\n AnyStyledComponent,\n CSSObject,\n Interpolation,\n InterpolationFunction,\n StyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n} from 'styled-components';\n\nexport { CSSObject } from 'styled-components';\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\nexport type ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = {},\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\ntype ThemedStyledComponentFactories<T extends object> = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;\n};\n\nexport type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: { name: string | null; slot: string | null },\n) => ThemedStyledFunctionBase<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {},\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport {\n AnyStyledComponent,\n CSSObject,\n Interpolation,\n InterpolationFunction,\n StyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n} from 'styled-components';\n\nexport { CSSObject } from 'styled-components';\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\nexport type ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = {},\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\ntype ThemedStyledComponentFactories<T extends object> = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;\n};\n\nexport type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: { name: string | null; slot: string | null; },\n) => ThemedStyledFunctionBase<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {},\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type StyledObject = ThemedStyledComponentFactories<Theme>;\n\nexport type Styled = StyledFunction & StyledObject;\n"],
|
|
5
5
|
"mappings": "AAAA;ACeA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/esm/styled/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/utils.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { capitalize } from '@elliemae/ds-utilities';\nimport type { Theme } from './types';\nimport { theme as defaultTheme } from '../theme';\n\nconst systemTheme = defaultTheme;\n\nexport const isEmpty = (string: string): boolean => string.length === 0;\n\nexport const coerceWithDefaultTheme = (themeInput: Theme): Theme => themeInput ?? systemTheme;\n\nexport const propsToClassKey = (props: Record<string, { toString: () => string }>): string =>\n Object.keys(props)\n .sort()\n .reduce((classKey, key) => {\n if (key === 'color') {\n return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));\n }\n return `${classKey}${isEmpty(String(classKey)) ? key : capitalize(key)}${capitalize(props[key].toString())}`;\n }, '');\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,cAAc;AAEb,MAAM,UAAU,CAAC,WAA4B,OAAO,WAAW;AAE/D,MAAM,yBAAyB,CAAC,eAA6B,cAAc;AAE3E,MAAM,kBAAkB,CAAC,UAC9B,OAAO,KAAK,OACT,OACA,OAAO,CAAC,UAAU,QAAQ;AACzB,MAAI,QAAQ,SAAS;AACnB,WAAO,WAAW,QAAQ,OAAO,aAAa,OAAO,MAAM,QAAQ,WAAW,OAAO,MAAM;AAAA;AAE7F,SAAO,GAAG,WAAW,QAAQ,OAAO,aAAa,MAAM,WAAW,OAAO,WAAW,MAAM,KAAK;AAAA,GAC9F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/esm/utils.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { lighten, rgba } from "polished";
|
|
3
3
|
import { reduce } from "lodash";
|
|
4
|
+
import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from "styled-components";
|
|
4
5
|
import { theme } from "./theme";
|
|
5
6
|
import { toMobile } from "./mobileUtilities";
|
|
6
|
-
import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from "styled-components";
|
|
7
7
|
function truncate(width) {
|
|
8
8
|
return (props) => css`
|
|
9
9
|
${!!width || props.width ? `width: ${props.width || width};` : ""}
|
|
@@ -47,8 +47,7 @@ function border(color2 = theme.colors.brand[600], size = "1px", type = "solid")
|
|
|
47
47
|
}
|
|
48
48
|
function animation(animationKeyframes, animationLength, animationTimingFn) {
|
|
49
49
|
return (props) => css`
|
|
50
|
-
animation: ${props.animationKeyframes || animationKeyframes}
|
|
51
|
-
${props.animationLength || animationLength}
|
|
50
|
+
animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
|
|
52
51
|
${props.animationTimingFn || animationTimingFn};
|
|
53
52
|
`;
|
|
54
53
|
}
|
package/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 no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\
|
|
5
|
-
"mappings": "AAAA;ACGA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\n\nexport { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };\n\nexport function truncate(width?: string) {\n return (props) => css`\n ${!!width || props.width ? `width: ${props.width || width};` : ''}\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, unknown>): 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\nexport function color(variant = 'neutral', type = 400) {\n return css`\n color: ${(props) => props.theme.colors[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) => 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) => 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) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight = 'regular') {\n // eslint-disable-next-line complexity\n return (props): 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.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: ${(props) => props.theme.colors[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): string => 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-system",
|
|
3
|
-
"version": "2.2.0-alpha.
|
|
3
|
+
"version": "2.2.0-alpha.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -89,16 +89,16 @@
|
|
|
89
89
|
"generateSubmodules": true
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@elliemae/ds-utilities": "2.2.0-alpha.
|
|
92
|
+
"@elliemae/ds-utilities": "2.2.0-alpha.4",
|
|
93
93
|
"polished": "~3.6.7"
|
|
94
94
|
},
|
|
95
95
|
"devDependencies": {
|
|
96
|
-
"@elliemae/pui-theme": "~2.
|
|
97
|
-
"@testing-library/jest-dom": "~5.
|
|
96
|
+
"@elliemae/pui-theme": "~2.3.0",
|
|
97
|
+
"@testing-library/jest-dom": "~5.16.1",
|
|
98
98
|
"styled-components": "~5.3.3"
|
|
99
99
|
},
|
|
100
100
|
"peerDependencies": {
|
|
101
|
-
"@elliemae/pui-theme": "^2.
|
|
101
|
+
"@elliemae/pui-theme": "^2.3.0",
|
|
102
102
|
"lodash": "^4.17.21",
|
|
103
103
|
"react": "~17.0.2",
|
|
104
104
|
"react-dom": "^17.0.2",
|
package/types/styled/types.d.ts
CHANGED
|
@@ -23,6 +23,5 @@ export declare type StyledFunction = <C extends AnyStyledComponent | keyof JSX.I
|
|
|
23
23
|
name: string | null;
|
|
24
24
|
slot: string | null;
|
|
25
25
|
}) => ThemedStyledFunctionBase<C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C, Theme, C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {}, C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never>;
|
|
26
|
-
export
|
|
27
|
-
}
|
|
26
|
+
export declare type StyledObject = ThemedStyledComponentFactories<Theme>;
|
|
28
27
|
export declare type Styled = StyledFunction & StyledObject;
|
package/types/utils.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { rgba } from 'polished';
|
|
2
|
-
import { Keyframes } from 'styled-components';
|
|
3
|
-
import { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';
|
|
2
|
+
import { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';
|
|
4
3
|
export { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };
|
|
5
4
|
export declare function truncate(width?: string): (props: any) => import("styled-components").FlattenSimpleInterpolation;
|
|
6
5
|
export declare function flexCenter(): string;
|