@elliemae/ds-system 2.2.0-alpha.3 → 3.0.0-next.0

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.
Files changed (61) hide show
  1. package/cjs/arithmetic.js +30 -42
  2. package/cjs/constants.js +15 -43
  3. package/cjs/globalStyles.js +22 -44
  4. package/cjs/index.js +83 -42
  5. package/cjs/mobileUtilities.js +26 -57
  6. package/cjs/spaceUtilities.js +46 -72
  7. package/cjs/styled/index.d.js +2 -27
  8. package/cjs/styled/index.js +93 -57
  9. package/cjs/styled/styleGetters.js +30 -42
  10. package/cjs/styled/types.js +11 -34
  11. package/cjs/styled/utils.js +23 -46
  12. package/cjs/th.js +29 -49
  13. package/cjs/theme.js +9 -36
  14. package/cjs/themeProviderHOC.js +29 -42
  15. package/cjs/utils.js +146 -257
  16. package/esm/arithmetic.js +25 -13
  17. package/esm/constants.js +9 -14
  18. package/esm/globalStyles.js +15 -16
  19. package/esm/index.js +11 -14
  20. package/esm/mobileUtilities.js +17 -26
  21. package/esm/spaceUtilities.js +35 -43
  22. package/esm/styled/index.d.js +1 -2
  23. package/esm/styled/index.js +79 -23
  24. package/esm/styled/styleGetters.js +23 -12
  25. package/esm/styled/types.js +1 -6
  26. package/esm/styled/utils.js +16 -16
  27. package/esm/th.js +25 -20
  28. package/esm/theme.js +4 -6
  29. package/esm/themeProviderHOC.js +20 -13
  30. package/esm/utils.js +98 -228
  31. package/package.json +2 -2
  32. package/cjs/arithmetic.js.map +0 -7
  33. package/cjs/constants.js.map +0 -7
  34. package/cjs/globalStyles.js.map +0 -7
  35. package/cjs/index.js.map +0 -7
  36. package/cjs/mobileUtilities.js.map +0 -7
  37. package/cjs/spaceUtilities.js.map +0 -7
  38. package/cjs/styled/index.d.js.map +0 -7
  39. package/cjs/styled/index.js.map +0 -7
  40. package/cjs/styled/styleGetters.js.map +0 -7
  41. package/cjs/styled/types.js.map +0 -7
  42. package/cjs/styled/utils.js.map +0 -7
  43. package/cjs/th.js.map +0 -7
  44. package/cjs/theme.js.map +0 -7
  45. package/cjs/themeProviderHOC.js.map +0 -7
  46. package/cjs/utils.js.map +0 -7
  47. package/esm/arithmetic.js.map +0 -7
  48. package/esm/constants.js.map +0 -7
  49. package/esm/globalStyles.js.map +0 -7
  50. package/esm/index.js.map +0 -7
  51. package/esm/mobileUtilities.js.map +0 -7
  52. package/esm/spaceUtilities.js.map +0 -7
  53. package/esm/styled/index.d.js.map +0 -7
  54. package/esm/styled/index.js.map +0 -7
  55. package/esm/styled/styleGetters.js.map +0 -7
  56. package/esm/styled/types.js.map +0 -7
  57. package/esm/styled/utils.js.map +0 -7
  58. package/esm/th.js.map +0 -7
  59. package/esm/theme.js.map +0 -7
  60. package/esm/themeProviderHOC.js.map +0 -7
  61. package/esm/utils.js.map +0 -7
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/mobileUtilities.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useEffect } from 'react';\nimport { theme } from './theme';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n if (translateUnits[unit]) return translateUnits[unit];\n return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\n}\n\nexport function toMobile(unit: string): string {\n if (!isMobile()) return unit;\n return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;\n}\n\nexport const useIsMobile = (): boolean => {\n const [mobile, setMobile] = useState<boolean>(isMobile());\n useEffect(() => {\n function handleResize() {\n setMobile(isMobile());\n }\n if (window) window.addEventListener('resize', handleResize);\n return () => {\n if (window) window.removeEventListener('resize', handleResize);\n };\n }, []);\n if (!window) return false;\n return mobile;\n};\n\nexport const isMobile = (): boolean => {\n if (!window) return false;\n return (\n Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0\n );\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AAGO,kCAAkC,MAAsB;AAC7D,MAAI,eAAe;AAAO,WAAO,eAAe;AAChD,SAAO,GAAI,WAAW,QAAS,kBAAiB,mBAAoB;AAAA;AAG/D,kBAAkB,MAAsB;AAC7C,MAAI,CAAC;AAAY,WAAO;AACxB,SAAO,GAAG,WAAW,QAAS,mBAAkB;AAAA;AAG3C,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,YAAU,MAAM;AACd,4BAAwB;AACtB,gBAAU;AAAA;AAEZ,QAAI;AAAQ,aAAO,iBAAiB,UAAU;AAC9C,WAAO,MAAM;AACX,UAAI;AAAQ,eAAO,oBAAoB,UAAU;AAAA;AAAA,KAElD;AACH,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AAAA;AAGF,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,OAAO,MAAM,YAAY,OAAO,MAAM,MAAM,MAAM,OAAO,cAAc;AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/spaceUtilities.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash';\nimport { theme } from './theme';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px'))\n return gutter;\n return `${theme.space[gutter]}`;\n}\n\nexport function mapGutter(gutter: string | number): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string')\n return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number,\n gutter: string | number,\n): string | string[] {\n if (!width) return '';\n if (Array.isArray(width))\n return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\n/**\n * Grid\n *\n * @param grid\n */\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string'))\n return grid.map((w) => mapGrid(w));\n return numbersToFr(grid);\n }\n return mapGrid(grid);\n}\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAEO,gBAAgB,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,QAAQ,SAAS,UAAU,OAAO,QAAQ,SAAS;AAC5D,WAAO;AACT,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,mBAAmB,QAAiC;AACzD,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,kBAAkB,OAAgC;AACvD,MAAI,OAAO,UAAU;AACnB,WAAO,IAAI,OAAO,SAAS,GAAG,IAAI,OAAO,WAAW;AACtD,SAAO,GAAG,QAAQ;AAAA;AAGb,wBACL,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAChB,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,SAAS,UAAU;AAC9D,SAAO,QAAQ,SAAS,aAAa,UAAU;AAAA;AAG1C,kBAAkB,OAA2C;AAClE,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAAQ,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS;AAC3D,SAAO,SAAS;AAAA;AAQX,qBAAqB,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,KAAK;AACzD,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG;AAAA;AAEpB,iBAAiB,OAAgC;AACtD,MAAI,IAAI,OAAO;AAAQ,WAAO,GAAG,IAAI,OAAO;AAC5C,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,SAAS;AAChD,SAAO,GAAG;AAAA;AAGL,yBAAyB,MAAmC;AACjE,MAAI,MAAM,QAAQ,OAAO;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM;AAChC,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ;AACjC,WAAO,YAAY;AAAA;AAErB,SAAO,QAAQ;AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 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 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 = 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,eAAe,MAAM,kBAAkB;AACrD,QAAM,OAAmC,CAAC,aAAa,gBAAgB;AAMrE,UAAM,8BAA8B,cAChC,YAAY,IAAgC,CAAC,cAC3C,OAAO,cAAc,aACjB,CAAC,UACC,UAAU;AAAA,SACL;AAAA,MACH,OAAO,uBAAuB,MAAM;AAAA,SAExC,aAEN;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,cAAc,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,gBAAgB,kBAAkB;AAE5G,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
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styleGetters.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
- "mappings": "AAAA;ACEA;AAEO,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,gBAAgB,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,gBAAgB,aAAa;AAAA;AAE1D,WAAO;AAAA,KACN;AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 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 interface StyledObject extends ThemedStyledComponentFactories<Theme> {}\n\nexport type Styled = StyledFunction & StyledObject;\n"],
5
- "mappings": "AAAA;ACeA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/utils.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from './types';\nimport { capitalize } from '@elliemae/ds-utilities';\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;ACCA;AACA;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
- "names": []
7
- }
package/esm/th.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/th.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type thGetter = (value: string, dfault: string) => (theme: any) => string;\ntype thConstructor = ((property: string) => 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 =\n (property) =>\n (value, dfault) =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part];\n });\n return result ?? dfault;\n };\n\nth.space = th('space');\nth.fontSize = th('fontSizes');\nth.fontWeight = th('fontWeights');\nth.lineHeight = th('lineHeights');\nth.letterSpacing = th('letterSpacings');\nth.font = th('fonts');\nth.color = th('colors');\nth.breakpoint = th('breakpoints');\nth.media = th('media');\n"],
5
- "mappings": "AAAA;ACaO,MAAM,KACX,CAAC,aACD,CAAC,OAAO,WACR,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM;AAC1B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA;AAE9B,SAAO,UAAU;AAAA;AAGrB,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
- }
package/esm/theme.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/theme.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getDefaultTheme } from '@elliemae/pui-theme';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const theme = getDefaultTheme() as Theme;\n"],
5
- "mappings": "AAAA;ACAA;AAGO,MAAM,QAAQ;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/themeProviderHOC.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,qCAAC,eAAD;AAAA,EAAe;AAAA,GACb,qCAAC,WAAD;AAAA,KAAe;AAAA;",
6
- "names": []
7
- }
package/esm/utils.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 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';\nimport { css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';\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(\n animationKeyframes: string,\n animationLength: string,\n animationTimingFn: string,\n) {\n return (props) => css`\n animation: ${props.animationKeyframes || animationKeyframes}\n ${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
- "names": []
7
- }