@elliemae/ds-system 3.0.0-next.2 → 3.0.0-next.6
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/arithmetic.js +55 -0
- package/dist/cjs/arithmetic.js.map +7 -0
- package/dist/cjs/constants.js +47 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/globalStyles.js +47 -0
- package/dist/cjs/globalStyles.js.map +7 -0
- package/dist/cjs/index.js +43 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/mobileUtilities.js +72 -0
- package/dist/cjs/mobileUtilities.js.map +7 -0
- package/dist/cjs/spaceUtilities.js +94 -0
- package/dist/cjs/spaceUtilities.js.map +7 -0
- package/dist/cjs/styled/index.d.js +27 -0
- package/dist/cjs/styled/index.d.js.map +7 -0
- package/dist/cjs/styled/index.js +105 -0
- package/dist/cjs/styled/index.js.map +7 -0
- package/dist/cjs/styled/styleGetters.js +56 -0
- package/dist/cjs/styled/styleGetters.js.map +7 -0
- package/dist/cjs/styled/types.js +35 -0
- package/dist/cjs/styled/types.js.map +7 -0
- package/dist/cjs/styled/utils.js +47 -0
- package/dist/cjs/styled/utils.js.map +7 -0
- package/dist/cjs/th.js +58 -0
- package/dist/cjs/th.js.map +7 -0
- package/dist/cjs/theme.js +36 -0
- package/dist/cjs/theme.js.map +7 -0
- package/dist/cjs/themeProviderHOC.js +54 -0
- package/dist/cjs/themeProviderHOC.js.map +7 -0
- package/dist/cjs/utils.js +294 -0
- package/dist/cjs/utils.js.map +7 -0
- package/{esm → dist/esm}/arithmetic.js +13 -25
- package/dist/esm/arithmetic.js.map +7 -0
- package/dist/esm/constants.js +18 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/globalStyles.js +18 -0
- package/dist/esm/globalStyles.js.map +7 -0
- package/dist/esm/index.js +14 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/mobileUtilities.js +43 -0
- package/dist/esm/mobileUtilities.js.map +7 -0
- package/dist/esm/spaceUtilities.js +65 -0
- package/dist/esm/spaceUtilities.js.map +7 -0
- package/dist/esm/styled/index.d.js +2 -0
- package/dist/esm/styled/index.d.js.map +7 -0
- package/dist/esm/styled/index.js +78 -0
- package/dist/esm/styled/index.js.map +7 -0
- package/dist/esm/styled/styleGetters.js +27 -0
- package/dist/esm/styled/styleGetters.js.map +7 -0
- package/dist/esm/styled/types.js +6 -0
- package/dist/esm/styled/types.js.map +7 -0
- package/dist/esm/styled/utils.js +18 -0
- package/dist/esm/styled/utils.js.map +7 -0
- package/dist/esm/th.js +29 -0
- package/dist/esm/th.js.map +7 -0
- package/dist/esm/theme.js +7 -0
- package/dist/esm/theme.js.map +7 -0
- package/dist/esm/themeProviderHOC.js +27 -0
- package/dist/esm/themeProviderHOC.js.map +7 -0
- package/dist/esm/utils.js +265 -0
- package/dist/esm/utils.js.map +7 -0
- package/package.json +53 -44
- package/cjs/arithmetic.js +0 -43
- package/cjs/constants.js +0 -19
- package/cjs/globalStyles.js +0 -25
- package/cjs/index.js +0 -84
- package/cjs/mobileUtilities.js +0 -41
- package/cjs/spaceUtilities.js +0 -68
- package/cjs/styled/index.d.js +0 -2
- package/cjs/styled/index.js +0 -125
- package/cjs/styled/styleGetters.js +0 -44
- package/cjs/styled/types.js +0 -12
- package/cjs/styled/utils.js +0 -24
- package/cjs/th.js +0 -32
- package/cjs/theme.js +0 -9
- package/cjs/themeProviderHOC.js +0 -29
- package/cjs/utils.js +0 -184
- package/esm/constants.js +0 -13
- package/esm/globalStyles.js +0 -17
- package/esm/index.js +0 -11
- package/esm/mobileUtilities.js +0 -34
- package/esm/spaceUtilities.js +0 -57
- package/esm/styled/index.d.js +0 -1
- package/esm/styled/index.js +0 -116
- package/esm/styled/styleGetters.js +0 -38
- package/esm/styled/types.js +0 -1
- package/esm/styled/utils.js +0 -18
- package/esm/th.js +0 -28
- package/esm/theme.js +0 -5
- package/esm/themeProviderHOC.js +0 -20
- package/esm/utils.js +0 -136
- package/types/arithmetic.d.ts +0 -5
- package/types/constants.d.ts +0 -11
- package/types/globalStyles.d.ts +0 -1
- package/types/index.d.ts +0 -9
- package/types/mobileUtilities.d.ts +0 -4
- package/types/spaceUtilities.d.ts +0 -13
- package/types/styled/index.d.ts +0 -2
- package/types/styled/styleGetters.d.ts +0 -4
- package/types/styled/types.d.ts +0 -28
- package/types/styled/utils.d.ts +0 -6
- package/types/tests/arithmetic.test.d.ts +0 -1
- package/types/th.d.ts +0 -14
- package/types/theme.d.ts +0 -2
- package/types/themeProviderHOC.d.ts +0 -2
- package/types/utils.d.ts +0 -27
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/styled/styleGetters.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme, CSSObject } from './types';\nimport { propsToClassKey } from './utils';\n\nexport const getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n theme.components?.[name]?.styleOverrides || null;\n\nexport const getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n const variants = theme.components?.[name]?.variants || [];\n\n return variants.reduce((styles, definition) => {\n const key = propsToClassKey(definition.props);\n styles[key] = definition.style;\n return styles;\n }, {} as Record<string, CSSObject>);\n};\n\nexport const variantsResolver = (\n props: Record<string, unknown>,\n styles: CSSObject,\n theme: Theme,\n name: string,\n): CSSObject[keyof CSSObject][] => {\n const themeVariants = theme?.components?.[name]?.variants || [];\n\n return themeVariants.reduce((variantsStyles, themeVariant) => {\n const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n if (isMatch) {\n variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);\n }\n return variantsStyles;\n }, [] as CSSObject[keyof CSSObject][]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAgC;AAEzB,MAAM,oBAAoB,CAAC,MAAc,UAC9C,MAAM,aAAa,OAAO,kBAAkB;AAEvC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AACzF,QAAM,WAAW,MAAM,aAAa,OAAO,YAAY;AAEvD,SAAO,SAAS,OAAO,CAAC,QAAQ,eAAe;AAC7C,UAAM,MAAM,kCAAgB,WAAW;AACvC,WAAO,OAAO,WAAW;AACzB,WAAO;AAAA,KACN;AAAA;AAGE,MAAM,mBAAmB,CAC9B,OACA,QACA,OACA,SACiC;AACjC,QAAM,gBAAgB,OAAO,aAAa,OAAO,YAAY;AAE7D,SAAO,cAAc,OAAO,CAAC,gBAAgB,iBAAiB;AAC5D,UAAM,UAAU,OAAO,KAAK,aAAa,OAAO,MAAM,CAAC,QAAQ,MAAM,SAAS,aAAa,MAAM;AACjG,QAAI,SAAS;AACX,qBAAe,KAAK,OAAO,kCAAgB,aAAa;AAAA;AAE1D,WAAO;AAAA,KACN;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var types_exports = {};
|
|
29
|
+
__export(types_exports, {
|
|
30
|
+
CSSObject: () => import_styled_components2.CSSObject
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_styled_components2 = require("styled-components");
|
|
34
|
+
module.exports = __toCommonJS(types_exports);
|
|
35
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 StyledConfig,\n} from 'styled-components';\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\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 = Record<string, unknown>,\n A extends keyof any = never,\n> = <U extends object = Record<string, unknown>>(\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 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\ntype ThemedStyledComponentFactories<T extends object> = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<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) => 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 StyledObject = ThemedStyledComponentFactories<Theme>;\n\nexport type Styled = StyledFunction & StyledObject;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBvB,gCAA0B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var utils_exports = {};
|
|
29
|
+
__export(utils_exports, {
|
|
30
|
+
coerceWithDefaultTheme: () => coerceWithDefaultTheme,
|
|
31
|
+
isEmpty: () => isEmpty,
|
|
32
|
+
propsToClassKey: () => propsToClassKey
|
|
33
|
+
});
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
36
|
+
var import_theme = require("../theme");
|
|
37
|
+
const systemTheme = import_theme.theme;
|
|
38
|
+
const isEmpty = (string) => string.length === 0;
|
|
39
|
+
const coerceWithDefaultTheme = (themeInput) => themeInput ?? systemTheme;
|
|
40
|
+
const propsToClassKey = (props) => Object.keys(props).sort().reduce((classKey, key) => {
|
|
41
|
+
if (key === "color") {
|
|
42
|
+
return classKey + isEmpty(String(classKey)) ? String(props[key]) : (0, import_ds_utilities.capitalize)(String(props[key]));
|
|
43
|
+
}
|
|
44
|
+
return `${classKey}${isEmpty(String(classKey)) ? key : (0, import_ds_utilities.capitalize)(key)}${(0, import_ds_utilities.capitalize)(props[key].toString())}`;
|
|
45
|
+
}, "");
|
|
46
|
+
module.exports = __toCommonJS(utils_exports);
|
|
47
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/styled/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/th.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var th_exports = {};
|
|
29
|
+
__export(th_exports, {
|
|
30
|
+
th: () => th
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
const th = (property) => {
|
|
34
|
+
const thGetter = (value, dfault = "") => {
|
|
35
|
+
const func = ({ theme }) => {
|
|
36
|
+
const parts = value.split("-");
|
|
37
|
+
let result = theme[property];
|
|
38
|
+
parts.forEach((part) => {
|
|
39
|
+
if (result)
|
|
40
|
+
result = result[part];
|
|
41
|
+
});
|
|
42
|
+
return result ?? dfault;
|
|
43
|
+
};
|
|
44
|
+
return func;
|
|
45
|
+
};
|
|
46
|
+
return thGetter;
|
|
47
|
+
};
|
|
48
|
+
th.space = th("space");
|
|
49
|
+
th.fontSize = th("fontSizes");
|
|
50
|
+
th.fontWeight = th("fontWeights");
|
|
51
|
+
th.lineHeight = th("lineHeights");
|
|
52
|
+
th.letterSpacing = th("letterSpacings");
|
|
53
|
+
th.font = th("fonts");
|
|
54
|
+
th.color = th("colors");
|
|
55
|
+
th.breakpoint = th("breakpoints");
|
|
56
|
+
th.media = th("media");
|
|
57
|
+
module.exports = __toCommonJS(th_exports);
|
|
58
|
+
//# sourceMappingURL=th.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/th.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import type { Theme } from '@elliemae/pui-theme';\ntype ThGetter = (value: string, dfault?: string) => ({ theme }: { theme: Theme }) => string;\ntype ThConstructor = ((property: keyof Theme) => ThGetter) & {\n space: ThGetter;\n fontSize: ThGetter;\n fontWeight: ThGetter;\n lineHeight: ThGetter;\n letterSpacing: ThGetter;\n font: ThGetter;\n color: ThGetter;\n breakpoint: ThGetter;\n media: ThGetter;\n};\n\nexport const th: ThConstructor = (property): ThGetter => {\n const thGetter: ThGetter = (value, dfault = '') => {\n const func: ReturnType<ThGetter> = ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n return func;\n };\n return thGetter;\n};\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADchB,MAAM,KAAoB,CAAC,aAAuB;AACvD,QAAM,WAAqB,CAAC,OAAO,SAAS,OAAO;AACjD,UAAM,OAA6B,CAAC,EAAE,YAAY;AAChD,YAAM,QAAQ,MAAM,MAAM;AAC1B,UAAI,SAAS,MAAM;AACnB,YAAM,QAAQ,CAAC,SAAS;AAEtB,YAAI;AAAQ,mBAAS,OAAO;AAAA;AAE9B,aAAQ,UAAgC;AAAA;AAE1C,WAAO;AAAA;AAET,SAAO;AAAA;AAET,GAAG,QAAQ,GAAG;AACd,GAAG,WAAW,GAAG;AACjB,GAAG,aAAa,GAAG;AACnB,GAAG,aAAa,GAAG;AACnB,GAAG,gBAAgB,GAAG;AACtB,GAAG,OAAO,GAAG;AACb,GAAG,QAAQ,GAAG;AACd,GAAG,aAAa,GAAG;AACnB,GAAG,QAAQ,GAAG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var theme_exports = {};
|
|
29
|
+
__export(theme_exports, {
|
|
30
|
+
theme: () => theme
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_pui_theme = require("@elliemae/pui-theme");
|
|
34
|
+
const theme = (0, import_pui_theme.getDefaultTheme)();
|
|
35
|
+
module.exports = __toCommonJS(theme_exports);
|
|
36
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/theme.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { getDefaultTheme } from '@elliemae/pui-theme';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const theme = getDefaultTheme() as Theme;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAGzB,MAAM,QAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __export = (target, all) => {
|
|
23
|
+
for (var name in all)
|
|
24
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
25
|
+
};
|
|
26
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
27
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
28
|
+
for (let key of __getOwnPropNames(module2))
|
|
29
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
30
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
34
|
+
var __toESM = (module2, isNodeMode) => {
|
|
35
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
36
|
+
};
|
|
37
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
38
|
+
return (module2, temp) => {
|
|
39
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
40
|
+
};
|
|
41
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
42
|
+
var themeProviderHOC_exports = {};
|
|
43
|
+
__export(themeProviderHOC_exports, {
|
|
44
|
+
themeProviderHOC: () => themeProviderHOC
|
|
45
|
+
});
|
|
46
|
+
var React = __toESM(require("react"));
|
|
47
|
+
var import_react = __toESM(require("react"));
|
|
48
|
+
var import_styled_components = require("styled-components");
|
|
49
|
+
var import_theme = require("./theme");
|
|
50
|
+
const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
|
|
51
|
+
theme: import_theme.theme
|
|
52
|
+
}, /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, props)));
|
|
53
|
+
module.exports = __toCommonJS(themeProviderHOC_exports);
|
|
54
|
+
//# sourceMappingURL=themeProviderHOC.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/themeProviderHOC.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => (\n props: Record<string, unknown>,\n): JSX.Element => (\n <ThemeProvider theme={theme}>\n <Component {...props} />\n </ThemeProvider>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,mDAAC,wCAAD;AAAA,EAAe,OAAO;AAAA,GACpB,mDAAC,WAAD,mBAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var utils_exports = {};
|
|
29
|
+
__export(utils_exports, {
|
|
30
|
+
active: () => active,
|
|
31
|
+
animation: () => animation,
|
|
32
|
+
border: () => border,
|
|
33
|
+
boxShadow: () => boxShadow,
|
|
34
|
+
buttonLink: () => buttonLink,
|
|
35
|
+
clearFocus: () => clearFocus,
|
|
36
|
+
color: () => color,
|
|
37
|
+
createGlobalStyle: () => import_styled_components.createGlobalStyle,
|
|
38
|
+
css: () => import_styled_components.css,
|
|
39
|
+
disabled: () => disabled,
|
|
40
|
+
fakeActive: () => fakeActive,
|
|
41
|
+
fakeBorder: () => fakeBorder,
|
|
42
|
+
flexCenter: () => flexCenter,
|
|
43
|
+
focus: () => focus,
|
|
44
|
+
focusAfter: () => focusAfter,
|
|
45
|
+
hover: () => hover,
|
|
46
|
+
iconColor: () => iconColor,
|
|
47
|
+
keyframes: () => keyframes,
|
|
48
|
+
kfrm: () => import_styled_components.keyframes,
|
|
49
|
+
onlyFirefox: () => onlyFirefox,
|
|
50
|
+
onlySafari: () => onlySafari,
|
|
51
|
+
onlySafariAndFirefox: () => onlySafariAndFirefox,
|
|
52
|
+
rgba: () => import_polished.rgba,
|
|
53
|
+
safariAndFirefoxBold: () => safariAndFirefoxBold,
|
|
54
|
+
textStyle: () => textStyle,
|
|
55
|
+
transition: () => transition,
|
|
56
|
+
truncate: () => truncate,
|
|
57
|
+
useTheme: () => import_styled_components.useTheme,
|
|
58
|
+
withTheme: () => import_styled_components.withTheme
|
|
59
|
+
});
|
|
60
|
+
var React = __toESM(require("react"));
|
|
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
|
+
function truncate(width) {
|
|
67
|
+
return (props) => import_styled_components.css`
|
|
68
|
+
${!!width || props.width ? `width: ${props.width || width};` : ""}
|
|
69
|
+
white-space: nowrap;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
text-overflow: ellipsis;
|
|
72
|
+
`;
|
|
73
|
+
}
|
|
74
|
+
function flexCenter() {
|
|
75
|
+
return `
|
|
76
|
+
display: flex;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
align-items: center;
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
function disabled() {
|
|
82
|
+
return `
|
|
83
|
+
cursor: not-allowed;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
`;
|
|
86
|
+
}
|
|
87
|
+
function keyframes(obj) {
|
|
88
|
+
return import_styled_components.keyframes`${(0, import_lodash.reduce)(obj, (result, value, key) => `
|
|
89
|
+
${result}
|
|
90
|
+
${key}% {
|
|
91
|
+
${value}
|
|
92
|
+
}
|
|
93
|
+
`, "")}
|
|
94
|
+
`;
|
|
95
|
+
}
|
|
96
|
+
function boxShadow(top, left, blur, color2, inset = false) {
|
|
97
|
+
return `box-shadow: ${inset ? "inset" : ""} ${top} ${left} ${blur} ${color2};`;
|
|
98
|
+
}
|
|
99
|
+
function color(variant = "neutral", type = 400) {
|
|
100
|
+
return import_styled_components.css`
|
|
101
|
+
color: ${(props) => props.theme.colors[variant][type]};
|
|
102
|
+
`;
|
|
103
|
+
}
|
|
104
|
+
function border(color2 = import_theme.theme.colors.brand[600], size = "1px", type = "solid") {
|
|
105
|
+
return `${size} ${type} ${color2}`;
|
|
106
|
+
}
|
|
107
|
+
function animation(animationKeyframes, animationLength, animationTimingFn) {
|
|
108
|
+
return (props) => import_styled_components.css`
|
|
109
|
+
animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
|
|
110
|
+
${props.animationTimingFn || animationTimingFn};
|
|
111
|
+
`;
|
|
112
|
+
}
|
|
113
|
+
function focus(color2 = import_theme.theme.colors.brand[600]) {
|
|
114
|
+
return () => import_styled_components.css`
|
|
115
|
+
outline: none;
|
|
116
|
+
border: 1px solid ${color2};
|
|
117
|
+
box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color2)};
|
|
118
|
+
border-radius: 2px;
|
|
119
|
+
`;
|
|
120
|
+
}
|
|
121
|
+
function focusAfter(color2) {
|
|
122
|
+
return import_styled_components.css`
|
|
123
|
+
outline: none;
|
|
124
|
+
position: relative;
|
|
125
|
+
&:after {
|
|
126
|
+
content: '';
|
|
127
|
+
z-index: 10;
|
|
128
|
+
position: absolute;
|
|
129
|
+
top: 0;
|
|
130
|
+
left: 0;
|
|
131
|
+
width: 100%;
|
|
132
|
+
height: 100%;
|
|
133
|
+
pointer-events: none;
|
|
134
|
+
${focus(color2)}
|
|
135
|
+
}
|
|
136
|
+
`;
|
|
137
|
+
}
|
|
138
|
+
function active() {
|
|
139
|
+
return (props) => import_styled_components.css`
|
|
140
|
+
outline: none;
|
|
141
|
+
border: 1px solid ${props.theme.colors.brand[700]};
|
|
142
|
+
border-radius: 2px;
|
|
143
|
+
`;
|
|
144
|
+
}
|
|
145
|
+
function hover() {
|
|
146
|
+
return (props) => import_styled_components.css`
|
|
147
|
+
outline: 1px solid ${props.theme.colors.brand[600]};
|
|
148
|
+
outline-offset: -1px;
|
|
149
|
+
`;
|
|
150
|
+
}
|
|
151
|
+
function textStyle(type, weight = "regular") {
|
|
152
|
+
return (props) => {
|
|
153
|
+
let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;
|
|
154
|
+
switch (type) {
|
|
155
|
+
case "h1":
|
|
156
|
+
cssVar += `
|
|
157
|
+
font-size: ${(0, import_mobileUtilities.toMobile)("2.7692rem")};
|
|
158
|
+
line-height: normal;
|
|
159
|
+
`;
|
|
160
|
+
break;
|
|
161
|
+
case "h2":
|
|
162
|
+
cssVar += `
|
|
163
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[800])};
|
|
164
|
+
line-height: normal;
|
|
165
|
+
`;
|
|
166
|
+
break;
|
|
167
|
+
case "h3":
|
|
168
|
+
cssVar += `
|
|
169
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[700])};
|
|
170
|
+
line-height: 1.2;
|
|
171
|
+
`;
|
|
172
|
+
break;
|
|
173
|
+
case "h4":
|
|
174
|
+
cssVar += `
|
|
175
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[600])};
|
|
176
|
+
line-height: normal;
|
|
177
|
+
`;
|
|
178
|
+
break;
|
|
179
|
+
case "h5":
|
|
180
|
+
cssVar += `
|
|
181
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
|
|
182
|
+
line-height: normal;
|
|
183
|
+
`;
|
|
184
|
+
break;
|
|
185
|
+
case "section-header":
|
|
186
|
+
cssVar += `
|
|
187
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
|
|
188
|
+
line-height: normal;
|
|
189
|
+
text-transform: uppercase;
|
|
190
|
+
`;
|
|
191
|
+
break;
|
|
192
|
+
case "body":
|
|
193
|
+
cssVar += `
|
|
194
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
|
|
195
|
+
line-height: normal;
|
|
196
|
+
`;
|
|
197
|
+
break;
|
|
198
|
+
case "body-small":
|
|
199
|
+
cssVar += `
|
|
200
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[300])};
|
|
201
|
+
line-height: normal;
|
|
202
|
+
`;
|
|
203
|
+
break;
|
|
204
|
+
case "body-micro":
|
|
205
|
+
cssVar += `
|
|
206
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.microText[200])};
|
|
207
|
+
line-height: normal;
|
|
208
|
+
`;
|
|
209
|
+
break;
|
|
210
|
+
case "list":
|
|
211
|
+
cssVar += `
|
|
212
|
+
font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
|
|
213
|
+
line-height: normal;
|
|
214
|
+
`;
|
|
215
|
+
break;
|
|
216
|
+
case "link":
|
|
217
|
+
cssVar += `
|
|
218
|
+
line-height: ${props.theme.xl};
|
|
219
|
+
color: ${props.theme.colors.brand[600]};
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
`;
|
|
222
|
+
break;
|
|
223
|
+
}
|
|
224
|
+
return cssVar;
|
|
225
|
+
};
|
|
226
|
+
}
|
|
227
|
+
function iconColor(variant = "neutral", type = 400) {
|
|
228
|
+
return import_styled_components.css`
|
|
229
|
+
fill: ${(props) => props.theme.colors[variant][type]};
|
|
230
|
+
`;
|
|
231
|
+
}
|
|
232
|
+
function fakeBorder() {
|
|
233
|
+
return import_styled_components.css`
|
|
234
|
+
box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
|
|
235
|
+
border-radius: 2px;
|
|
236
|
+
`;
|
|
237
|
+
}
|
|
238
|
+
function fakeActive() {
|
|
239
|
+
return import_styled_components.css`
|
|
240
|
+
outline: none;
|
|
241
|
+
box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
|
|
242
|
+
border-radius: 2px;
|
|
243
|
+
`;
|
|
244
|
+
}
|
|
245
|
+
function clearFocus() {
|
|
246
|
+
return `
|
|
247
|
+
border: none;
|
|
248
|
+
box-shadow: none;
|
|
249
|
+
`;
|
|
250
|
+
}
|
|
251
|
+
function buttonLink() {
|
|
252
|
+
return `
|
|
253
|
+
background-color: transparent;
|
|
254
|
+
border: 1px solid transparent;
|
|
255
|
+
cursor: pointer;
|
|
256
|
+
`;
|
|
257
|
+
}
|
|
258
|
+
function transition(t = "all 1s ease") {
|
|
259
|
+
return `
|
|
260
|
+
transition: ${t};
|
|
261
|
+
`;
|
|
262
|
+
}
|
|
263
|
+
const onlySafariAndFirefox = (styles) => import_styled_components.css`
|
|
264
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
265
|
+
${styles}
|
|
266
|
+
}
|
|
267
|
+
@media screen and (min--moz-device-pixel-ratio: 0) {
|
|
268
|
+
${styles}
|
|
269
|
+
}
|
|
270
|
+
`;
|
|
271
|
+
const onlySafari = (styles) => `
|
|
272
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
273
|
+
${styles}
|
|
274
|
+
}
|
|
275
|
+
`;
|
|
276
|
+
const onlyFirefox = (styles) => `
|
|
277
|
+
@media screen and (min--moz-device-pixel-ratio: 0) {
|
|
278
|
+
${styles}
|
|
279
|
+
}
|
|
280
|
+
`;
|
|
281
|
+
const safariAndFirefoxBold = (color2) => `
|
|
282
|
+
@media not all and (min-resolution: 0.001dpcm) {
|
|
283
|
+
font-weight: 400;
|
|
284
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
|
285
|
+
-webkit-text-stroke: 0.4px ${color2};
|
|
286
|
+
}
|
|
287
|
+
@media screen and (min--moz-device-pixel-ratio: 0) {
|
|
288
|
+
font-weight: 400;
|
|
289
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
|
290
|
+
-webkit-text-stroke: 0.4px ${color2};
|
|
291
|
+
}
|
|
292
|
+
`;
|
|
293
|
+
module.exports = __toCommonJS(utils_exports);
|
|
294
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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, 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;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;AACvB,+BAA0F;AAC1F,mBAAsB;AACtB,6BAAyB;AAIlB,kBAAkB,OAAgB;AACvC,SAAO,CAAC,UAAU;AAAA,MACd,CAAC,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,SAAS,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5D,sBAA8B;AACnC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF,oBAA4B;AACjC,SAAO;AAAA;AAAA;AAAA;AAAA;AAMF,mBAAmB,KAAyC;AACjE,SAAO,qCAAO,0BACZ,KACA,CAAC,QAAQ,OAAO,QAAQ;AAAA,MACtB;AAAA,MACA;AAAA,QACE;AAAA;AAAA,KAGJ;AAAA;AAAA;AAMG,mBAAmB,KAAa,MAAc,MAAc,QAAe,QAAQ,OAAe;AACvG,SAAO,eAAe,QAAQ,UAAU,MAAM,OAAO,QAAQ,QAAQ;AAAA;AAGhE,eAAe,UAAU,WAAW,OAAO,KAAK;AACrD,SAAO;AAAA,aACI,CAAC,UAAU,MAAM,MAAM,OAAO,SAAS;AAAA;AAAA;AAI7C,gBAAgB,SAAQ,mBAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO,SAAiB;AAC5F,SAAO,GAAG,QAAQ,QAAQ;AAAA;AAGrB,mBAAmB,oBAA4B,iBAAyB,mBAA2B;AACxG,SAAO,CAAC,UAAU;AAAA,iBACH,MAAM,sBAAsB,sBAAsB,MAAM,mBAAmB;AAAA,QACpF,MAAM,qBAAqB;AAAA;AAAA;AAI5B,eAAe,SAAgB,mBAAM,OAAO,MAAM,MAAM;AAC7D,SAAO,MAAM;AAAA;AAAA,wBAES;AAAA,kCACU,6BAAQ,KAAK;AAAA;AAAA;AAAA;AAKxC,oBAAoB,QAAe;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAYD,MAAM;AAAA;AAAA;AAAA;AAKP,kBAAkB;AACvB,SAAO,CAAC,UAAU;AAAA;AAAA,wBAEI,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAK1C,iBAAiB;AACtB,SAAO,CAAC,UAAU;AAAA,yBACK,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAK3C,mBAAmB,MAAc,SAAS,WAAW;AAE1D,SAAO,CAAC,UAAkB;AACxB,QAAI,SAAS,gBAAgB,MAAM,MAAM,YAAY;AAErD,YAAQ;AAAA,WACD;AACH,kBAAU;AAAA,qBACG,qCAAS;AAAA;AAAA;AAGtB;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAIlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAGtD;AAAA,WACG;AACH,kBAAU;AAAA,qBACG,qCAAS,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAGlD;AAAA,WACG;AACH,kBAAU;AAAA,uBACK,MAAM,MAAM;AAAA,iBAClB,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAGlC;AAAA;AAEJ,WAAO;AAAA;AAAA;AAIJ,mBAAmB,UAAU,WAAW,OAAO,KAAK;AACzD,SAAO;AAAA,YACG,CAAC,UAAU,MAAM,MAAM,OAAO,SAAS;AAAA;AAAA;AAI5C,sBAAsB;AAC3B,SAAO;AAAA,kCACyB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjE,sBAAsB;AAC3B,SAAO;AAAA;AAAA,kCAEyB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAK/D,sBAA8B;AACnC,SAAO;AAAA;AAAA;AAAA;AAAA;AAMF,sBAA8B;AACnC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF,oBAAoB,IAAI,eAAuB;AACpD,SAAO;AAAA,kBACS;AAAA;AAAA;AAIX,MAAM,uBAAuB,CAAC,WAA2B;AAAA;AAAA,MAE1D;AAAA;AAAA;AAAA,MAGA;AAAA;AAAA;AAIC,MAAM,aAAa,CAAC,WAA2B;AAAA;AAAA,QAE9C;AAAA;AAAA;AAID,MAAM,cAAc,CAAC,WAA2B;AAAA;AAAA,QAE/C;AAAA;AAAA;AAID,MAAM,uBAAuB,CAAC,WAA0B;AAAA;AAAA;AAAA;AAAA,iCAI9B;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|