@elliemae/ds-system 3.1.4 → 3.1.5-rc.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ds-styled/types.js.map +1 -1
- package/dist/cjs/ds-styled/utilities/background.js +1 -3
- package/dist/cjs/ds-styled/utilities/background.js.map +2 -2
- package/dist/cjs/ds-styled/utilities/border.js +14 -22
- package/dist/cjs/ds-styled/utilities/border.js.map +2 -2
- package/dist/cjs/ds-styled/utilities/color.js.map +2 -2
- package/dist/cjs/th.js.map +2 -2
- package/dist/esm/ds-styled/utilities/background.js +1 -3
- package/dist/esm/ds-styled/utilities/background.js.map +2 -2
- package/dist/esm/ds-styled/utilities/border.js +14 -22
- package/dist/esm/ds-styled/utilities/border.js.map +2 -2
- package/dist/esm/ds-styled/utilities/color.js.map +2 -2
- package/dist/esm/th.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/ds-styled/types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n AnyStyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n CSSObject,\n StyledComponent,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n Interpolation,\n InterpolationFunction,\n StyledConfig,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n components?: {\n [componentName: string]: {\n styleOverrides?: CSSObject;\n variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n };\n };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\ninterface DSStyledConfig {\n name: string | null;\n slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = Record<string, unknown>,\n A extends keyof any = never,\n> = <U extends object>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = Record<string, unknown>,\n A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n // My head already hurts enough so maybe later...\n attrs<\n U,\n NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n [others: string]: any;\n } = any,\n >(\n attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n withConfig: <Props extends O = O>(\n config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: DSStyledConfig,\n) => ThemedStyledFunction<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme = { theme
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {\n AnyStyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n CSSObject,\n StyledComponent,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n Interpolation,\n InterpolationFunction,\n StyledConfig,\n} from 'styled-components';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\n\nexport interface Theme extends PuiTheme {\n components?: {\n [componentName: string]: {\n styleOverrides?: CSSObject;\n variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n };\n };\n}\n\ntype Attrs<P, A extends Partial<P>, T> = ((props: ThemedStyledProps<P, T>) => A) | A;\n\ninterface DSStyledConfig {\n name: string | null;\n slot: string | null;\n}\n\ntype ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = Record<string, unknown>,\n A extends keyof any = never,\n> = <U extends object>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ninterface ThemedStyledFunction<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = Record<string, unknown>,\n A extends keyof any = never,\n> extends ThemedStyledFunctionBase<C, T, O, A> {\n // Fun thing: 'attrs' can also provide a polymorphic 'as' prop\n // My head already hurts enough so maybe later...\n attrs<\n U,\n NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {\n [others: string]: any;\n } = any,\n >(\n attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>,\n ): ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;\n\n withConfig: <Props extends O = O>(\n config: StyledConfig<StyledComponentPropsWithRef<C> & Props>,\n ) => ThemedStyledFunction<C, T, Props, A>;\n}\n\nexport type DSStyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: DSStyledConfig,\n) => ThemedStyledFunction<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : unknown,\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type DSStyledObject = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<keyof JSX.IntrinsicElements, Theme>;\n};\n\nexport type DSStyledFunctionInternal = (\n ...args: Parameters<ReturnType<DSStyledFunction>>\n) => ReturnType<ReturnType<DSStyledFunction>>;\n\nexport type PropsWithTheme<T = Record<string, unknown>> = { theme: Theme } & T;\n\nexport type ThProps = Required<PropsWithTheme>;\n\nexport type { SpaceProps, LayoutProps, SizingProps } from '@xstyled/system';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,9 +26,7 @@ module.exports = __toCommonJS(background_exports);
|
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
27
|
var import_system = require("@xstyled/system");
|
|
28
28
|
var import_th = require("../../th");
|
|
29
|
-
|
|
30
|
-
return (props) => `${import_th.th.color(value, value)(props)}`;
|
|
31
|
-
}
|
|
29
|
+
const bgColorGetter = (value) => (props) => `${import_th.th.color(value, value)(props)}`;
|
|
32
30
|
bgColorGetter.meta = {};
|
|
33
31
|
const bg = (0, import_system.style)({
|
|
34
32
|
prop: ["backgroundColor", "bg"],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/ds-styled/utilities/background.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\ninterface DSThemeGetter extends ThemeGetter {\n (value: string): (props: PropsWithTheme) => string;\n}\n\nconst bgColorGetter: DSThemeGetter = (value: string) => (props) => `${th.color(value, value)(props as ThProps)}`;\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n prop: ['backgroundColor', 'bg'],\n css: 'background-color',\n themeGet: bgColorGetter,\n});\n\nexport const background = compose(bg);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAiD;AACjD,gBAAmB;AAOnB,MAAM,gBAA+B,CAAC,UAAkB,CAAC,UAAU,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAE7G,cAAc,OAAO,CAAC;AAEtB,MAAM,KAAK,yBAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,aAAa,2BAAQ,EAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,35 +27,27 @@ var React = __toESM(require("react"));
|
|
|
27
27
|
var import_system = require("@xstyled/system");
|
|
28
28
|
var import_th = require("../../th");
|
|
29
29
|
const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
};
|
|
42
|
-
}
|
|
30
|
+
const borderGetter = (value) => (props) => {
|
|
31
|
+
const color = value?.match?.(colorReg);
|
|
32
|
+
let borderCss = ``;
|
|
33
|
+
if (color) {
|
|
34
|
+
const widthAndStyle = value.replace(color[0], "").trim();
|
|
35
|
+
borderCss = `${import_th.th.color(color[0])(props)} ${widthAndStyle}`;
|
|
36
|
+
} else {
|
|
37
|
+
borderCss = value;
|
|
38
|
+
}
|
|
39
|
+
return borderCss;
|
|
40
|
+
};
|
|
43
41
|
borderGetter.meta = {};
|
|
44
|
-
|
|
45
|
-
return (props) => `${import_th.th.color(value, value)(props)}`;
|
|
46
|
-
}
|
|
42
|
+
const borderColorGetter = (value) => (props) => `${import_th.th.color(value, value)(props)}`;
|
|
47
43
|
borderColorGetter.meta = {};
|
|
48
44
|
function borderStyleGetter(value) {
|
|
49
45
|
return () => value;
|
|
50
46
|
}
|
|
51
47
|
borderStyleGetter.meta = {};
|
|
52
|
-
|
|
53
|
-
return (props) => `${import_th.th.space(value, value)(props)}`;
|
|
54
|
-
}
|
|
48
|
+
const borderWidthGetter = (value) => (props) => `${import_th.th.space(value, value)(props)}`;
|
|
55
49
|
borderWidthGetter.meta = {};
|
|
56
|
-
|
|
57
|
-
return (props) => `${import_th.th.space(value, value)(props)}`;
|
|
58
|
-
}
|
|
50
|
+
const borderRadiusGetter = (value) => (props) => `${import_th.th.space(value, value)(props)}`;
|
|
59
51
|
borderRadiusGetter.meta = {};
|
|
60
52
|
const border = (0, import_system.style)({
|
|
61
53
|
prop: "border",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/ds-styled/utilities/border.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable prettier/prettier */\n/* eslint-disable max-lines */\nimport { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\ninterface DSThemeGetter extends ThemeGetter {\n (value: string): (props: PropsWithTheme) => string;\n}\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nconst borderGetter: DSThemeGetter =\n (value: string) =>\n (props): string => {\n const color = value?.match?.(colorReg);\n let borderCss = ``;\n\n if (color) {\n const widthAndStyle = value.replace(color[0], '').trim();\n borderCss = `${th.color(color[0])(props as ThProps)} ${widthAndStyle}`;\n } else {\n borderCss = value;\n }\n\n return borderCss;\n };\n\nborderGetter.meta = {};\n\nconst borderColorGetter: DSThemeGetter =\n (value: string) =>\n (props): string =>\n `${th.color(value, value)(props as ThProps)}`;\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nconst borderWidthGetter: DSThemeGetter =\n (value: string) =>\n (props): string =>\n `${th.space(value, value)(props as ThProps)}`;\n\nborderWidthGetter.meta = {};\n\nconst borderRadiusGetter: DSThemeGetter =\n (value: string) =>\n (props): string =>\n `${th.space(value, value)(props as ThProps)}`;\n\nborderRadiusGetter.meta = {};\n\nconst border = style({\n prop: 'border',\n css: 'border',\n themeGet: borderGetter,\n});\n\nconst borderTop = style({\n prop: 'borderTop',\n css: 'border-top',\n themeGet: borderGetter,\n});\n\nconst borderBottom = style({\n prop: 'borderBottom',\n css: 'border-bottom',\n themeGet: borderGetter,\n});\n\nconst borderRight = style({\n prop: 'borderRight',\n css: 'border-right',\n themeGet: borderGetter,\n});\n\nconst borderLeft = style({\n prop: 'borderLeft',\n css: 'border-left',\n themeGet: borderGetter,\n});\n\nconst borderColor = style({\n prop: 'borderColor',\n css: 'border-color',\n themeGet: borderColorGetter,\n});\n\nconst borderTopColor = style({\n prop: 'borderTopColor',\n css: 'border-top-color',\n themeGet: borderColorGetter,\n});\n\nconst borderBottomColor = style({\n prop: 'borderBottomColor',\n css: 'border-bottom-color',\n themeGet: borderColorGetter,\n});\n\nconst borderRightColor = style({\n prop: 'borderRightColor',\n css: 'border-right-color',\n themeGet: borderColorGetter,\n});\n\nconst borderLeftColor = style({\n prop: 'borderLeftColor',\n css: 'border-left-color',\n themeGet: borderColorGetter,\n});\n\nconst borderStyle = style({\n prop: 'borderStyle',\n css: 'border-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderTopStyle = style({\n prop: 'borderTopStyle',\n css: 'border-top-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderBottomStyle = style({\n prop: 'borderBottomStyle',\n css: 'border-bottom-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderRightStyle = style({\n prop: 'borderRightStyle',\n css: 'border-right-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderLeftStyle = style({\n prop: 'borderLeftStyle',\n css: 'border-left-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderWidth = style({\n prop: 'borderWidth',\n css: 'border-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderTopWidth = style({\n prop: 'borderTopWidth',\n css: 'border-top-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderBottomWidth = style({\n prop: 'borderBottomWidth',\n css: 'border-bottom-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderRightWidth = style({\n prop: 'borderRightWidth',\n css: 'border-right-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderLeftWidth = style({\n prop: 'borderLeftWidth',\n css: 'border-left-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderRadius = style({\n prop: 'borderRadius',\n css: 'border-radius',\n themeGet: borderRadiusGetter,\n});\n\nexport const borders = compose(\n border,\n borderTop,\n borderBottom,\n borderLeft,\n borderRight,\n borderColor,\n borderTopColor,\n borderBottomColor,\n borderLeftColor,\n borderRightColor,\n borderStyle,\n borderTopStyle,\n borderBottomStyle,\n borderLeftStyle,\n borderRightStyle,\n borderWidth,\n borderTopWidth,\n borderBottomWidth,\n borderLeftWidth,\n borderRightWidth,\n borderRadius,\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/ds-styled/utilities/color.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n prop: ['color'],\n css: ['color'],\n themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { style, compose, Theme, Props } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n return (props: PropsWithTheme | Props<Theme>): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n prop: ['color'],\n css: ['color'],\n themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAA6C;AAC7C,gBAAmB;AAGnB,qBAAqB,OAAe;AAClC,SAAO,CAAC,UAAiD,GAAG,aAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACrG;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,cAAc,yBAAM;AAAA,EACxB,MAAM,CAAC,OAAO;AAAA,EACd,KAAK,CAAC,OAAO;AAAA,EACb,UAAU;AACZ,CAAC;AAEM,MAAM,QAAQ,2BAAQ,WAAW;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/th.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/th.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './ds-styled';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: PropsWithTheme) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\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 zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n (value, dfault = '') =>\n ({ theme }) => {\n const colorValues = value.split('-');\n\n if (colorValues.length === 1) return colorValues[0];\n\n if (colorValues.length > 3) return dfault;\n\n const [colorType, colorValue, alpha] = colorValues as [\n keyof Theme['colors'],\n keyof Theme['colors'][keyof Theme['colors']],\n string,\n ];\n\n const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n if (!themeColor) return dfault;\n\n if (alpha) {\n const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n return hexToRgba(themeColor, alphaFloatingNumber);\n }\n\n return themeColor;\n };\n\nconst genericGetter =\n (property: keyof Theme) =>\n (value: string, dfault = ''): ThemeStringGetter =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n\nexport const th: ThConstructor = (property): ThGetter => {\n switch (property) {\n case 'colors' as keyof Theme:\n return colorGetter;\n default:\n return genericGetter(property);\n }\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');\nth.zIndex = th('zIndex');\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,YAAY;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,SAAS;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,WAAW;AAE3D,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA,EAC9B,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ;AAAA,SACD;AACH,aAAO;AAAA;AAEP,aAAO,cAAc,QAAQ;AAAA;AAEnC;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { style, compose } from "@xstyled/system";
|
|
3
3
|
import { th } from "../../th";
|
|
4
|
-
|
|
5
|
-
return (props) => `${th.color(value, value)(props)}`;
|
|
6
|
-
}
|
|
4
|
+
const bgColorGetter = (value) => (props) => `${th.color(value, value)(props)}`;
|
|
7
5
|
bgColorGetter.meta = {};
|
|
8
6
|
const bg = style({
|
|
9
7
|
prop: ["backgroundColor", "bg"],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/background.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\ninterface DSThemeGetter extends ThemeGetter {\n (value: string): (props: PropsWithTheme) => string;\n}\n\nconst bgColorGetter: DSThemeGetter = (value: string) => (props) => `${th.color(value, value)(props as ThProps)}`;\n\nbgColorGetter.meta = {};\n\nconst bg = style({\n prop: ['backgroundColor', 'bg'],\n css: 'background-color',\n themeGet: bgColorGetter,\n});\n\nexport const background = compose(bg);\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAOA,MAAM,gBAA+B,CAAC,UAAkB,CAAC,UAAU,GAAG,GAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AAE7G,cAAc,OAAO,CAAC;AAEtB,MAAM,KAAK,MAAM;AAAA,EACf,MAAM,CAAC,mBAAmB,IAAI;AAAA,EAC9B,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;AAEM,MAAM,aAAa,QAAQ,EAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,35 +2,27 @@ import * as React from "react";
|
|
|
2
2
|
import { style, compose } from "@xstyled/system";
|
|
3
3
|
import { th } from "../../th";
|
|
4
4
|
const colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
-
}
|
|
5
|
+
const borderGetter = (value) => (props) => {
|
|
6
|
+
const color = value?.match?.(colorReg);
|
|
7
|
+
let borderCss = ``;
|
|
8
|
+
if (color) {
|
|
9
|
+
const widthAndStyle = value.replace(color[0], "").trim();
|
|
10
|
+
borderCss = `${th.color(color[0])(props)} ${widthAndStyle}`;
|
|
11
|
+
} else {
|
|
12
|
+
borderCss = value;
|
|
13
|
+
}
|
|
14
|
+
return borderCss;
|
|
15
|
+
};
|
|
18
16
|
borderGetter.meta = {};
|
|
19
|
-
|
|
20
|
-
return (props) => `${th.color(value, value)(props)}`;
|
|
21
|
-
}
|
|
17
|
+
const borderColorGetter = (value) => (props) => `${th.color(value, value)(props)}`;
|
|
22
18
|
borderColorGetter.meta = {};
|
|
23
19
|
function borderStyleGetter(value) {
|
|
24
20
|
return () => value;
|
|
25
21
|
}
|
|
26
22
|
borderStyleGetter.meta = {};
|
|
27
|
-
|
|
28
|
-
return (props) => `${th.space(value, value)(props)}`;
|
|
29
|
-
}
|
|
23
|
+
const borderWidthGetter = (value) => (props) => `${th.space(value, value)(props)}`;
|
|
30
24
|
borderWidthGetter.meta = {};
|
|
31
|
-
|
|
32
|
-
return (props) => `${th.space(value, value)(props)}`;
|
|
33
|
-
}
|
|
25
|
+
const borderRadiusGetter = (value) => (props) => `${th.space(value, value)(props)}`;
|
|
34
26
|
borderRadiusGetter.meta = {};
|
|
35
27
|
const border = style({
|
|
36
28
|
prop: "border",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/border.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable prettier/prettier */\n/* eslint-disable max-lines */\nimport { style, compose, type ThemeGetter } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\ninterface DSThemeGetter extends ThemeGetter {\n (value: string): (props: PropsWithTheme) => string;\n}\nconst colorReg = /(?:neutral|brand|success|danger|warning)-[0-9]{3}(?:-a[0-9]{2})?/;\n\nconst borderGetter: DSThemeGetter =\n (value: string) =>\n (props): string => {\n const color = value?.match?.(colorReg);\n let borderCss = ``;\n\n if (color) {\n const widthAndStyle = value.replace(color[0], '').trim();\n borderCss = `${th.color(color[0])(props as ThProps)} ${widthAndStyle}`;\n } else {\n borderCss = value;\n }\n\n return borderCss;\n };\n\nborderGetter.meta = {};\n\nconst borderColorGetter: DSThemeGetter =\n (value: string) =>\n (props): string =>\n `${th.color(value, value)(props as ThProps)}`;\n\nborderColorGetter.meta = {};\n\nfunction borderStyleGetter(value: string) {\n return (): string => value;\n}\n\nborderStyleGetter.meta = {};\n\nconst borderWidthGetter: DSThemeGetter =\n (value: string) =>\n (props): string =>\n `${th.space(value, value)(props as ThProps)}`;\n\nborderWidthGetter.meta = {};\n\nconst borderRadiusGetter: DSThemeGetter =\n (value: string) =>\n (props): string =>\n `${th.space(value, value)(props as ThProps)}`;\n\nborderRadiusGetter.meta = {};\n\nconst border = style({\n prop: 'border',\n css: 'border',\n themeGet: borderGetter,\n});\n\nconst borderTop = style({\n prop: 'borderTop',\n css: 'border-top',\n themeGet: borderGetter,\n});\n\nconst borderBottom = style({\n prop: 'borderBottom',\n css: 'border-bottom',\n themeGet: borderGetter,\n});\n\nconst borderRight = style({\n prop: 'borderRight',\n css: 'border-right',\n themeGet: borderGetter,\n});\n\nconst borderLeft = style({\n prop: 'borderLeft',\n css: 'border-left',\n themeGet: borderGetter,\n});\n\nconst borderColor = style({\n prop: 'borderColor',\n css: 'border-color',\n themeGet: borderColorGetter,\n});\n\nconst borderTopColor = style({\n prop: 'borderTopColor',\n css: 'border-top-color',\n themeGet: borderColorGetter,\n});\n\nconst borderBottomColor = style({\n prop: 'borderBottomColor',\n css: 'border-bottom-color',\n themeGet: borderColorGetter,\n});\n\nconst borderRightColor = style({\n prop: 'borderRightColor',\n css: 'border-right-color',\n themeGet: borderColorGetter,\n});\n\nconst borderLeftColor = style({\n prop: 'borderLeftColor',\n css: 'border-left-color',\n themeGet: borderColorGetter,\n});\n\nconst borderStyle = style({\n prop: 'borderStyle',\n css: 'border-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderTopStyle = style({\n prop: 'borderTopStyle',\n css: 'border-top-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderBottomStyle = style({\n prop: 'borderBottomStyle',\n css: 'border-bottom-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderRightStyle = style({\n prop: 'borderRightStyle',\n css: 'border-right-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderLeftStyle = style({\n prop: 'borderLeftStyle',\n css: 'border-left-style',\n themeGet: borderStyleGetter,\n});\n\nconst borderWidth = style({\n prop: 'borderWidth',\n css: 'border-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderTopWidth = style({\n prop: 'borderTopWidth',\n css: 'border-top-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderBottomWidth = style({\n prop: 'borderBottomWidth',\n css: 'border-bottom-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderRightWidth = style({\n prop: 'borderRightWidth',\n css: 'border-right-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderLeftWidth = style({\n prop: 'borderLeftWidth',\n css: 'border-left-width',\n themeGet: borderWidthGetter,\n});\n\nconst borderRadius = style({\n prop: 'borderRadius',\n css: 'border-radius',\n themeGet: borderRadiusGetter,\n});\n\nexport const borders = compose(\n border,\n borderTop,\n borderBottom,\n borderLeft,\n borderRight,\n borderColor,\n borderTopColor,\n borderBottomColor,\n borderLeftColor,\n borderRightColor,\n borderStyle,\n borderTopStyle,\n borderBottomStyle,\n borderLeftStyle,\n borderRightStyle,\n borderWidth,\n borderTopWidth,\n borderBottomWidth,\n borderLeftWidth,\n borderRightWidth,\n borderRadius,\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/ds-styled/utilities/color.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n return (props: PropsWithTheme): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n prop: ['color'],\n css: ['color'],\n themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAGA,qBAAqB,OAAe;AAClC,SAAO,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { style, compose, Theme, Props } from '@xstyled/system';\nimport { th } from '../../th';\nimport type { PropsWithTheme, ThProps } from '../types';\n\nfunction colorGetter(value: string) {\n return (props: PropsWithTheme | Props<Theme>): string => `${th.color(value, value)(props as ThProps)}`;\n}\n\ncolorGetter.meta = {};\n\nconst colorStyled = style({\n prop: ['color'],\n css: ['color'],\n themeGet: colorGetter,\n});\n\nexport const color = compose(colorStyled);\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAGA,qBAAqB,OAAe;AAClC,SAAO,CAAC,UAAiD,GAAG,GAAG,MAAM,OAAO,KAAK,EAAE,KAAgB;AACrG;AAEA,YAAY,OAAO,CAAC;AAEpB,MAAM,cAAc,MAAM;AAAA,EACxB,MAAM,CAAC,OAAO;AAAA,EACd,KAAK,CAAC,OAAO;AAAA,EACb,UAAU;AACZ,CAAC;AAEM,MAAM,QAAQ,QAAQ,WAAW;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/th.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/th.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }:
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport type { Theme } from '@elliemae/pui-theme';\nimport type { PropsWithTheme } from './ds-styled';\n\nexport const hexToRgba = (hex: string, alpha: string) => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n if (result) {\n return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;\n }\n return ``;\n};\n\ntype ThemeStringGetter = ({ theme }: PropsWithTheme) => string;\n\ntype ThGetter = (value: string, dfault?: string) => ThemeStringGetter;\n\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 zIndex: ThGetter;\n};\n\nconst colorGetter: ThGetter =\n (value, dfault = '') =>\n ({ theme }) => {\n const colorValues = value.split('-');\n\n if (colorValues.length === 1) return colorValues[0];\n\n if (colorValues.length > 3) return dfault;\n\n const [colorType, colorValue, alpha] = colorValues as [\n keyof Theme['colors'],\n keyof Theme['colors'][keyof Theme['colors']],\n string,\n ];\n\n const themeColor = theme.colors && theme.colors[colorType][colorValue];\n\n if (!themeColor) return dfault;\n\n if (alpha) {\n const alphaFloatingNumber = `0.${alpha.slice(1)}`;\n\n return hexToRgba(themeColor, alphaFloatingNumber);\n }\n\n return themeColor;\n };\n\nconst genericGetter =\n (property: keyof Theme) =>\n (value: string, dfault = ''): ThemeStringGetter =>\n ({ theme }) => {\n const parts = value.split('-');\n let result = theme[property];\n parts.forEach((part) => {\n if (result) result = result[part as keyof typeof result];\n });\n return (result as unknown as string) ?? dfault;\n };\n\nexport const th: ThConstructor = (property): ThGetter => {\n switch (property) {\n case 'colors' as keyof Theme:\n return colorGetter;\n default:\n return genericGetter(property);\n }\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');\nth.zIndex = th('zIndex');\n"],
|
|
5
|
+
"mappings": "AAAA;ACIO,MAAM,YAAY,CAAC,KAAa,UAAkB;AACvD,QAAM,SAAS,4CAA4C,KAAK,GAAG;AAEnE,MAAI,QAAQ;AACV,WAAO,QAAQ,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM,SAAS,OAAO,IAAI,EAAE,MAAM;AAAA,EACrG;AACA,SAAO;AACT;AAmBA,MAAM,cACJ,CAAC,OAAO,SAAS,OACjB,CAAC,EAAE,YAAY;AACb,QAAM,cAAc,MAAM,MAAM,GAAG;AAEnC,MAAI,YAAY,WAAW;AAAG,WAAO,YAAY;AAEjD,MAAI,YAAY,SAAS;AAAG,WAAO;AAEnC,QAAM,CAAC,WAAW,YAAY,SAAS;AAMvC,QAAM,aAAa,MAAM,UAAU,MAAM,OAAO,WAAW;AAE3D,MAAI,CAAC;AAAY,WAAO;AAExB,MAAI,OAAO;AACT,UAAM,sBAAsB,KAAK,MAAM,MAAM,CAAC;AAE9C,WAAO,UAAU,YAAY,mBAAmB;AAAA,EAClD;AAEA,SAAO;AACT;AAEF,MAAM,gBACJ,CAAC,aACD,CAAC,OAAe,SAAS,OACzB,CAAC,EAAE,YAAY;AACb,QAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,MAAI,SAAS,MAAM;AACnB,QAAM,QAAQ,CAAC,SAAS;AACtB,QAAI;AAAQ,eAAS,OAAO;AAAA,EAC9B,CAAC;AACD,SAAQ,UAAgC;AAC1C;AAEK,MAAM,KAAoB,CAAC,aAAuB;AACvD,UAAQ;AAAA,SACD;AACH,aAAO;AAAA;AAEP,aAAO,cAAc,QAAQ;AAAA;AAEnC;AAEA,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,WAAW,GAAG,WAAW;AAC5B,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,gBAAgB,GAAG,gBAAgB;AACtC,GAAG,OAAO,GAAG,OAAO;AACpB,GAAG,QAAQ,GAAG,QAAQ;AACtB,GAAG,aAAa,GAAG,aAAa;AAChC,GAAG,QAAQ,GAAG,OAAO;AACrB,GAAG,SAAS,GAAG,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|