@sproutsocial/seeds-react-mixins 4.2.4 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +25 -7
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +6 -3
- package/dist/index.d.ts +6 -3
- package/dist/index.js +28 -7
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
2
|
import { css } from "styled-components";
|
|
3
|
-
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
4
3
|
var svgToDataURL = (svgStr) => {
|
|
5
4
|
const encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
|
|
6
5
|
const header = "data:image/svg+xml,";
|
|
@@ -18,11 +17,12 @@ var visuallyHidden = css`
|
|
|
18
17
|
border: 0;
|
|
19
18
|
`;
|
|
20
19
|
var focusRing = css`
|
|
21
|
-
box-shadow: 0 0 0 1px
|
|
20
|
+
box-shadow: 0 0 0 1px
|
|
21
|
+
${({ theme }) => theme.colors.button.primary.background.base},
|
|
22
22
|
0 0px 0px 4px
|
|
23
23
|
color-mix(
|
|
24
24
|
in srgb,
|
|
25
|
-
${theme.colors.button.primary.background.base},
|
|
25
|
+
${({ theme }) => theme.colors.button.primary.background.base},
|
|
26
26
|
transparent 70%
|
|
27
27
|
);
|
|
28
28
|
outline: none;
|
|
@@ -32,20 +32,38 @@ var focusRing = css`
|
|
|
32
32
|
}
|
|
33
33
|
`;
|
|
34
34
|
var pill = css`
|
|
35
|
-
min-width: ${theme.space[600]};
|
|
36
|
-
min-height: ${theme.space[600]};
|
|
37
|
-
padding: ${theme.space[300]};
|
|
38
|
-
border-radius: ${theme.radii.pill};
|
|
35
|
+
min-width: ${({ theme }) => theme.space[600]};
|
|
36
|
+
min-height: ${({ theme }) => theme.space[600]};
|
|
37
|
+
padding: ${({ theme }) => theme.space[300]};
|
|
38
|
+
border-radius: ${({ theme }) => theme.radii.pill};
|
|
39
39
|
`;
|
|
40
40
|
var disabled = css`
|
|
41
41
|
opacity: 0.4;
|
|
42
42
|
pointer-events: none;
|
|
43
43
|
`;
|
|
44
|
+
var container = css`
|
|
45
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
46
|
+
border: ${({ theme }) => theme.borders[500]}
|
|
47
|
+
${({ theme }) => theme.colors.container.border.base};
|
|
48
|
+
border-radius: ${({ theme }) => theme.radii.outer};
|
|
49
|
+
`;
|
|
50
|
+
var divider = css`
|
|
51
|
+
border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
|
|
52
|
+
${({ theme }) => theme.colors.container.border.base};
|
|
53
|
+
`;
|
|
54
|
+
var truncate = css`
|
|
55
|
+
text-overflow: ellipsis;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
`;
|
|
44
59
|
export {
|
|
60
|
+
container,
|
|
45
61
|
disabled,
|
|
62
|
+
divider,
|
|
46
63
|
focusRing,
|
|
47
64
|
pill,
|
|
48
65
|
svgToDataURL,
|
|
66
|
+
truncate,
|
|
49
67
|
visuallyHidden
|
|
50
68
|
};
|
|
51
69
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import { css } from \"styled-components\";\
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px\n ${({ theme }) => theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${({ theme }) => theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${({ theme }) => theme.space[600]};\n min-height: ${({ theme }) => theme.space[600]};\n padding: ${({ theme }) => theme.space[300]};\n border-radius: ${({ theme }) => theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n\nexport const container = css`\n background: ${({ theme }) => theme.colors.container.background.base};\n border: ${({ theme }) => theme.borders[500]}\n ${({ theme }) => theme.colors.container.border.base};\n border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const divider = css`\n border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport const truncate = css`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,eAAe,CAAC,WAAmB;AAC9C,QAAM,UAAU,mBAAmB,MAAM,EACtC,QAAQ,MAAM,KAAK,EACnB,QAAQ,MAAM,KAAK;AAEtB,QAAM,SAAS;AACf,QAAM,UAAU,SAAS;AAEzB,SAAO;AACT;AAEO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,YAAY;AAAA;AAAA,QAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,UAIxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU7D,IAAM,OAAO;AAAA,eACL,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,aAClC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,mBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA;AAG3C,IAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,IAAM,YAAY;AAAA,gBACT,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,YACzD,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,MACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA;AAG5C,IAAM,UAAU;AAAA,mBACJ,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAGhD,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -2,8 +2,11 @@ import * as styled_components from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
declare const svgToDataURL: (svgStr: string) => string;
|
|
4
4
|
declare const visuallyHidden: styled_components.FlattenSimpleInterpolation;
|
|
5
|
-
declare const focusRing: styled_components.
|
|
6
|
-
declare const pill: styled_components.
|
|
5
|
+
declare const focusRing: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
6
|
+
declare const pill: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
7
7
|
declare const disabled: styled_components.FlattenSimpleInterpolation;
|
|
8
|
+
declare const container: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
9
|
+
declare const divider: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
10
|
+
declare const truncate: styled_components.FlattenSimpleInterpolation;
|
|
8
11
|
|
|
9
|
-
export { disabled, focusRing, pill, svgToDataURL, visuallyHidden };
|
|
12
|
+
export { container, disabled, divider, focusRing, pill, svgToDataURL, truncate, visuallyHidden };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,11 @@ import * as styled_components from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
declare const svgToDataURL: (svgStr: string) => string;
|
|
4
4
|
declare const visuallyHidden: styled_components.FlattenSimpleInterpolation;
|
|
5
|
-
declare const focusRing: styled_components.
|
|
6
|
-
declare const pill: styled_components.
|
|
5
|
+
declare const focusRing: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
6
|
+
declare const pill: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
7
7
|
declare const disabled: styled_components.FlattenSimpleInterpolation;
|
|
8
|
+
declare const container: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
9
|
+
declare const divider: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
|
|
10
|
+
declare const truncate: styled_components.FlattenSimpleInterpolation;
|
|
8
11
|
|
|
9
|
-
export { disabled, focusRing, pill, svgToDataURL, visuallyHidden };
|
|
12
|
+
export { container, disabled, divider, focusRing, pill, svgToDataURL, truncate, visuallyHidden };
|
package/dist/index.js
CHANGED
|
@@ -20,15 +20,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
+
container: () => container,
|
|
23
24
|
disabled: () => disabled,
|
|
25
|
+
divider: () => divider,
|
|
24
26
|
focusRing: () => focusRing,
|
|
25
27
|
pill: () => pill,
|
|
26
28
|
svgToDataURL: () => svgToDataURL,
|
|
29
|
+
truncate: () => truncate,
|
|
27
30
|
visuallyHidden: () => visuallyHidden
|
|
28
31
|
});
|
|
29
32
|
module.exports = __toCommonJS(index_exports);
|
|
30
33
|
var import_styled_components = require("styled-components");
|
|
31
|
-
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
32
34
|
var svgToDataURL = (svgStr) => {
|
|
33
35
|
const encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
|
|
34
36
|
const header = "data:image/svg+xml,";
|
|
@@ -46,11 +48,12 @@ var visuallyHidden = import_styled_components.css`
|
|
|
46
48
|
border: 0;
|
|
47
49
|
`;
|
|
48
50
|
var focusRing = import_styled_components.css`
|
|
49
|
-
box-shadow: 0 0 0 1px
|
|
51
|
+
box-shadow: 0 0 0 1px
|
|
52
|
+
${({ theme }) => theme.colors.button.primary.background.base},
|
|
50
53
|
0 0px 0px 4px
|
|
51
54
|
color-mix(
|
|
52
55
|
in srgb,
|
|
53
|
-
${
|
|
56
|
+
${({ theme }) => theme.colors.button.primary.background.base},
|
|
54
57
|
transparent 70%
|
|
55
58
|
);
|
|
56
59
|
outline: none;
|
|
@@ -60,21 +63,39 @@ var focusRing = import_styled_components.css`
|
|
|
60
63
|
}
|
|
61
64
|
`;
|
|
62
65
|
var pill = import_styled_components.css`
|
|
63
|
-
min-width: ${
|
|
64
|
-
min-height: ${
|
|
65
|
-
padding: ${
|
|
66
|
-
border-radius: ${
|
|
66
|
+
min-width: ${({ theme }) => theme.space[600]};
|
|
67
|
+
min-height: ${({ theme }) => theme.space[600]};
|
|
68
|
+
padding: ${({ theme }) => theme.space[300]};
|
|
69
|
+
border-radius: ${({ theme }) => theme.radii.pill};
|
|
67
70
|
`;
|
|
68
71
|
var disabled = import_styled_components.css`
|
|
69
72
|
opacity: 0.4;
|
|
70
73
|
pointer-events: none;
|
|
71
74
|
`;
|
|
75
|
+
var container = import_styled_components.css`
|
|
76
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
77
|
+
border: ${({ theme }) => theme.borders[500]}
|
|
78
|
+
${({ theme }) => theme.colors.container.border.base};
|
|
79
|
+
border-radius: ${({ theme }) => theme.radii.outer};
|
|
80
|
+
`;
|
|
81
|
+
var divider = import_styled_components.css`
|
|
82
|
+
border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
|
|
83
|
+
${({ theme }) => theme.colors.container.border.base};
|
|
84
|
+
`;
|
|
85
|
+
var truncate = import_styled_components.css`
|
|
86
|
+
text-overflow: ellipsis;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
white-space: nowrap;
|
|
89
|
+
`;
|
|
72
90
|
// Annotate the CommonJS export names for ESM import in node:
|
|
73
91
|
0 && (module.exports = {
|
|
92
|
+
container,
|
|
74
93
|
disabled,
|
|
94
|
+
divider,
|
|
75
95
|
focusRing,
|
|
76
96
|
pill,
|
|
77
97
|
svgToDataURL,
|
|
98
|
+
truncate,
|
|
78
99
|
visuallyHidden
|
|
79
100
|
});
|
|
80
101
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { css } from \"styled-components\";\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px\n ${({ theme }) => theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${({ theme }) => theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${({ theme }) => theme.space[600]};\n min-height: ${({ theme }) => theme.space[600]};\n padding: ${({ theme }) => theme.space[300]};\n border-radius: ${({ theme }) => theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n\nexport const container = css`\n background: ${({ theme }) => theme.colors.container.background.base};\n border: ${({ theme }) => theme.borders[500]}\n ${({ theme }) => theme.colors.container.border.base};\n border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const divider = css`\n border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport const truncate = css`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAoB;AAEb,IAAM,eAAe,CAAC,WAAmB;AAC9C,QAAM,UAAU,mBAAmB,MAAM,EACtC,QAAQ,MAAM,KAAK,EACnB,QAAQ,MAAM,KAAK;AAEtB,QAAM,SAAS;AACf,QAAM,UAAU,SAAS;AAEzB,SAAO;AACT;AAEO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,YAAY;AAAA;AAAA,QAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,UAIxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU7D,IAAM,OAAO;AAAA,eACL,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,aAClC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,mBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA;AAG3C,IAAM,WAAW;AAAA;AAAA;AAAA;AAKjB,IAAM,YAAY;AAAA,gBACT,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,YACzD,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,MACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA;AAG5C,IAAM,UAAU;AAAA,mBACJ,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAGhD,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-mixins",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.1",
|
|
4
4
|
"description": "Seeds mixins",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"typecheck": "tsc --noEmit"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "^3.
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^3.6.0"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@sproutsocial/eslint-config-seeds": "*",
|