@auth0/quantum-product 2.5.4 → 2.5.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/esm/foundations/token-tables.js +32 -10
- package/esm/illustrations/components/developers.js +131 -0
- package/esm/illustrations/components/index.js +1 -0
- package/esm/promo-banner/promo-banner-classes.js +1 -0
- package/esm/promo-banner/promo-banner.js +25 -2
- package/esm/quantum-provider/quantum-provider.js +2 -2
- package/foundations/token-tables.d.ts +14 -8
- package/foundations/token-tables.js +32 -10
- package/illustrations/components/developers.d.ts +3 -0
- package/illustrations/components/developers.js +157 -0
- package/illustrations/components/index.d.ts +1 -0
- package/illustrations/components/index.js +3 -1
- package/package.json +1 -1
- package/promo-banner/promo-banner-classes.d.ts +1 -1
- package/promo-banner/promo-banner-classes.js +1 -0
- package/promo-banner/promo-banner.d.ts +1 -0
- package/promo-banner/promo-banner.js +25 -2
- package/quantum-provider/quantum-provider.js +2 -2
|
@@ -1,3 +1,25 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
1
23
|
var __read = (this && this.__read) || function (o, n) {
|
|
2
24
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
25
|
if (!m) return o;
|
|
@@ -61,20 +83,20 @@ var colorDataTableColumns = [
|
|
|
61
83
|
];
|
|
62
84
|
var colorEntries = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.color.purple)), false), __read(transformJsonColorShadeToken(tokensJSON.color.neutral)), false), __read(transformJsonColorShadeToken(tokensJSON.color.blue)), false), __read(transformJsonColorShadeToken(tokensJSON.color.green)), false), __read(transformJsonColorShadeToken(tokensJSON.color.magenta)), false), __read(transformJsonColorShadeToken(tokensJSON.color.red)), false), __read(transformJsonColorShadeToken(tokensJSON.color.yellow)), false), __read(transformJsonColorShadeToken(tokensJSON.color.common)), false), __read(transformJsonColorShadeToken(tokensJSON.color.text)), false);
|
|
63
85
|
export var ColorTokens = function () {
|
|
64
|
-
return React.createElement(DataTable, { items: colorEntries, columns: colorDataTableColumns });
|
|
86
|
+
return React.createElement(DataTable, { className: "sb-unstyled", items: colorEntries, columns: colorDataTableColumns });
|
|
65
87
|
};
|
|
66
88
|
export var ThemeTokens = function (_a) {
|
|
67
|
-
var _b = _a.mode, mode = _b === void 0 ? 'light' : _b;
|
|
68
|
-
return (React.createElement(DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.text)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.background)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.border)), false), [
|
|
89
|
+
var _b = _a.mode, mode = _b === void 0 ? 'light' : _b, stylingOptions = __rest(_a, ["mode"]);
|
|
90
|
+
return (React.createElement(DataTable, __assign({}, stylingOptions, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.text)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.background)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.border)), false), [
|
|
69
91
|
transformJsonToken(tokensJSON.theme[mode].color.divider)
|
|
70
|
-
], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns }));
|
|
92
|
+
], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns })));
|
|
71
93
|
};
|
|
72
94
|
var transformJsonTextVariantTokenGroup = function (shade) {
|
|
73
95
|
return Object.values(shade).map(function (variant) { return transformJsonToken(variant); });
|
|
74
96
|
};
|
|
75
97
|
export var TypographyTokens = function (_a) {
|
|
76
|
-
var variant = _a.variant;
|
|
77
|
-
return (React.createElement(DataTable, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type[variant])), false), columns: [
|
|
98
|
+
var variant = _a.variant, stylingOptions = __rest(_a, ["variant"]);
|
|
99
|
+
return (React.createElement(DataTable, __assign({}, stylingOptions, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type[variant])), false), columns: [
|
|
78
100
|
{
|
|
79
101
|
field: 'id',
|
|
80
102
|
title: 'Token',
|
|
@@ -98,11 +120,11 @@ export var TypographyTokens = function (_a) {
|
|
|
98
120
|
var item = _a.item;
|
|
99
121
|
return React.createElement(Code, { noWrap: true }, item.jsonPath);
|
|
100
122
|
} },
|
|
101
|
-
] }));
|
|
123
|
+
] })));
|
|
102
124
|
};
|
|
103
125
|
export var TypographyGlobalTokens = function (_a) {
|
|
104
|
-
var variant = _a.variant;
|
|
105
|
-
return (React.createElement(DataTable, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type.global[variant])), false), columns: [
|
|
126
|
+
var variant = _a.variant, stylingOptions = __rest(_a, ["variant"]);
|
|
127
|
+
return (React.createElement(DataTable, __assign({}, stylingOptions, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type.global[variant])), false), columns: [
|
|
106
128
|
{
|
|
107
129
|
field: 'id',
|
|
108
130
|
title: 'Token',
|
|
@@ -126,5 +148,5 @@ export var TypographyGlobalTokens = function (_a) {
|
|
|
126
148
|
var item = _a.item;
|
|
127
149
|
return React.createElement(Code, { noWrap: true }, item.jsonPath);
|
|
128
150
|
} },
|
|
129
|
-
] }));
|
|
151
|
+
] })));
|
|
130
152
|
};
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
/*
|
|
24
|
+
This file is generated with the "illustrations" script.
|
|
25
|
+
To update this output make changes to `scripts/svgr/illustration-icon-template.js
|
|
26
|
+
*/
|
|
27
|
+
import * as React from 'react';
|
|
28
|
+
import { illustrationComponentName } from '../common';
|
|
29
|
+
import { styled } from '../../styled';
|
|
30
|
+
export var IllustrationDevelopers = styled(function (_a) {
|
|
31
|
+
var props = __rest(_a, []);
|
|
32
|
+
return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 250 250", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
33
|
+
React.createElement("g", { clipPath: "url(#developers_svg__clip0_3554_5806)" },
|
|
34
|
+
React.createElement("path", { d: "M25.37 29.726v5.019a2.54 2.54 0 002.541 2.541h194.137a2.54 2.54 0 002.542-2.541v-5.019a2.54 2.54 0 00-2.542-2.541H27.911a2.54 2.54 0 00-2.541 2.541z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
35
|
+
React.createElement("path", { d: "M25.98 36.5l21.607 17.995c.305.25.675.388 1.072.388h152.928c.397 0 .776-.139 1.081-.397l21.321-18.004c1.192-1.007.481-2.948-1.081-2.948l-195.866.01c-1.562 0-2.273 1.959-1.063 2.957z", fill: "url(#developers_svg__paint0_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
36
|
+
React.createElement("path", { d: "M183.435 68.598s5.767-9.889.222-22.005c0 0-1.839-4.62-6.756-9.5 0 0-1.229-1.387-3.974-3.55h-79.48c5.295 5.148 13.927 13.91 24.952 26.33", fill: "#fff" }),
|
|
37
|
+
React.createElement("path", { d: "M183.435 68.598s5.767-9.889.222-22.005c0 0-1.839-4.62-6.756-9.5 0 0-1.229-1.387-3.974-3.55h-79.48c5.295 5.148 13.927 13.91 24.952 26.33", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
38
|
+
React.createElement("path", { d: "M65.72 42.277v-8.734h19.168v8.734", fill: "#BBC2CD" }),
|
|
39
|
+
React.createElement("path", { d: "M65.72 42.277v-8.734h19.168v8.734M48.345 54.855V33.497", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
40
|
+
React.createElement("path", { d: "M75.304 45.946c5.293 0 9.584-1.643 9.584-3.669s-4.29-3.669-9.584-3.669c-5.293 0-9.584 1.643-9.584 3.669s4.291 3.67 9.584 3.67z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
41
|
+
React.createElement("path", { d: "M75.304 44.624c3.578 0 6.479-.943 6.479-2.107 0-1.163-2.901-2.107-6.479-2.107-3.578 0-6.479.944-6.479 2.107 0 1.164 2.9 2.107 6.479 2.107z", fill: "url(#developers_svg__paint1_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
42
|
+
React.createElement("path", { d: "M81.783 42.508v55.748a2.238 2.238 0 002.236 2.236h54.177v12.948H84.028c-8.373 0-15.194-6.811-15.194-15.193V42.508", fill: "url(#developers_svg__paint2_linear_3554_5806)" }),
|
|
43
|
+
React.createElement("path", { d: "M81.783 42.508v55.748a2.238 2.238 0 002.236 2.236h54.177v12.948H84.028c-8.373 0-15.194-6.811-15.194-15.193V42.508", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
44
|
+
React.createElement("path", { d: "M33.567 219.197v-4.64a2.702 2.702 0 012.699-2.699H218.23c1.488 0 3.799 1.183 3.799 2.671v4.64a2.702 2.702 0 01-2.699 2.698l-183.065.028a2.695 2.695 0 01-2.699-2.698z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
45
|
+
React.createElement("path", { d: "M34.02 212.921l18.013-15.628a3.842 3.842 0 012.44-.869h147.271c.286 0 .564.102.785.278l19.03 16.219c.896.74.369 2.191-.786 2.191H34.796c-1.155 0-1.672-1.461-.776-2.191z", fill: "url(#developers_svg__paint3_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
46
|
+
React.createElement("path", { d: "M175.478 84.929s9.695-4.02 7.985-19.408c-1.71-15.388-12.079-24.159-12.079-24.159", fill: "#fff" }),
|
|
47
|
+
React.createElement("path", { d: "M175.478 84.929s9.695-4.02 7.985-19.408c-1.71-15.388-12.079-24.159-12.079-24.159", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
48
|
+
React.createElement("path", { d: "M164.267 47.23s15.73 17.607 13.142 31.34c-2.578 13.734-11.728 17.634-17.254 17.375-9.51-.452-7.819-4.066-24.418-9.038-4.149-1.239-16.663-.527-17.837-10.564-.822-7.033 5.749-10 5.749-10", fill: "#fff" }),
|
|
49
|
+
React.createElement("path", { d: "M164.267 47.23s15.73 17.607 13.142 31.34c-2.578 13.734-11.728 17.634-17.254 17.375-9.51-.452-7.819-4.066-24.418-9.038-4.149-1.239-16.663-.527-17.837-10.564-.822-7.033 5.749-10 5.749-10", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
50
|
+
React.createElement("path", { d: "M149.702 67.545s1.904 1.626 7.264 3.641l-7.264-3.641z", fill: "#fff" }),
|
|
51
|
+
React.createElement("path", { d: "M149.702 67.545s1.904 1.626 7.264 3.641M130.164 78.265s-6.848-.813-8.262 4.843", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
52
|
+
React.createElement("path", { d: "M99.99 119.586v7.32c0 15.277-12.385 27.661-27.662 27.661s-27.661-12.384-27.661-27.661v-7.699", fill: "url(#developers_svg__paint4_linear_3554_5806)" }),
|
|
53
|
+
React.createElement("path", { d: "M99.99 119.586v7.32c0 15.277-12.385 27.661-27.662 27.661s-27.661-12.384-27.661-27.661v-7.699", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
54
|
+
React.createElement("path", { d: "M81.505 152.968l49.011 48.392a5.847 5.847 0 008.262 0c2.283-2.283 5.065-5.315 5.065-5.315l-54.195-51.459", fill: "url(#developers_svg__paint5_linear_3554_5806)" }),
|
|
55
|
+
React.createElement("path", { d: "M81.505 152.968l49.011 48.392a5.847 5.847 0 008.262 0c2.283-2.283 5.065-5.315 5.065-5.315l-54.195-51.459", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
56
|
+
React.createElement("path", { d: "M83.493 144.9l51.699 51.515a5.844 5.844 0 008.263 0 5.841 5.841 0 000-8.262l-50.406-50.221-.01-.01a27.551 27.551 0 006.95-18.336c0-15.277-12.384-27.661-27.66-27.661-15.278 0-27.662 12.384-27.662 27.661 0 15.277 12.384 27.662 27.661 27.662a27.45 27.45 0 0011.165-2.348z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
57
|
+
React.createElement("path", { d: "M83.493 144.9l-2.006 8.059", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
58
|
+
React.createElement("path", { d: "M171.467 191.35s3.946-15.304 11.109-20.045c5.046-3.346 12.162-1.017 12.116 6.598-.046 7.625-4.676 19.418-5.536 29.362-.305 3.595-.554 7.468-.98 7.837h-17.06l.351-23.752zM126.643 215.112c1.082-4.067 3.845-8.688 5.906-12.459 1.858-3.401 1.516-7.597-2.154-11.016-6.783-6.312-20.101 3.808-20.101 3.808-7.957 6.395-13.216 13.188-16.811 19.667h33.16z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
59
|
+
React.createElement("path", { d: "M180.552 215.112c.832-10.61-2.385-21.969-14.907-26.941-10.749-3.484-12.69-6.284-16.664-3.909-15.323 10.203 6.22 23.539 9.529 25.304-1.821.971-3.984 3.355-5 5.555h27.042v-.009z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
60
|
+
React.createElement("path", { d: "M108.335 197.062c1.127.573 1.867 1.322 2.985 2.31 6.091 5.388 10.758 1.673 13.438-1.367 2.015-2.292 1.811-5.897-1.34-8.374M161.347 186.655s1.312 5.139-.324 7.44c-1.635 2.302-3.835 2.523-6.46 2.043 0 0-3.281-.472-3.077-4.603.175-3.678.24-5.508-.684-8.05", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
61
|
+
React.createElement("path", { d: "M158.519 209.557s4.519 2.523 8.142 2.69l-8.142-2.69z", fill: "#fff" }),
|
|
62
|
+
React.createElement("path", { d: "M158.519 209.557s4.519 2.523 8.142 2.69M192.086 192.275s-7.449-2.634-6.082-8.947c1.378-6.312 8.568-3.299 8.568-3.299", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
63
|
+
React.createElement("path", { d: "M83.492 144.9l51.7 51.515a5.842 5.842 0 008.262-8.262l-50.405-50.221-.01-.01a27.551 27.551 0 006.95-18.336c0-15.277-12.384-27.661-27.66-27.661-15.278 0-27.662 12.384-27.662 27.661 0 15.277 12.384 27.662 27.661 27.662 3.974 0 7.745-.832 11.164-2.348z", fill: "url(#developers_svg__paint6_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
64
|
+
React.createElement("path", { d: "M76.821 138.417c10.506-2.48 17.012-13.008 14.531-23.514-2.48-10.506-13.008-17.012-23.515-14.531-10.506 2.48-17.012 13.008-14.53 23.514 2.48 10.506 13.008 17.012 23.514 14.531z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
65
|
+
React.createElement("path", { d: "M72.328 129.826c-8.355 0-15.582-4.537-19.482-11.284 3.9-6.747 11.127-11.284 19.482-11.284 8.355 0 15.61 4.537 19.51 11.284-3.9 6.747-11.155 11.284-19.51 11.284z", fill: "url(#developers_svg__paint7_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
66
|
+
React.createElement("path", { d: "M74.344 127.53a9.241 9.241 0 10-4.248-17.988 9.242 9.242 0 104.248 17.988z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
67
|
+
React.createElement("path", { d: "M72.217 112.119v12.726M65.859 118.477h12.726M53.456 196.526v18.558M202.021 196.461v18.623M202.049 54.855V33.543", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
68
|
+
React.createElement("path", { d: "M190.681 152.368h-54.112a4.792 4.792 0 01-4.796-4.797V74.217a4.792 4.792 0 014.796-4.796h54.112a4.792 4.792 0 014.797 4.796v73.354a4.799 4.799 0 01-4.797 4.797z", fill: "url(#developers_svg__paint8_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
69
|
+
React.createElement("path", { d: "M131.773 79.504h63.705v-6.608a3.477 3.477 0 00-3.475-3.475h-56.746a3.477 3.477 0 00-3.475 3.475v6.608h-.009z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
70
|
+
React.createElement("path", { d: "M178.247 74.855a3.623 3.623 0 10-7.21-.714 3.623 3.623 0 007.21.714z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
71
|
+
React.createElement("path", { d: "M185.43 75.332a3.623 3.623 0 10-7.051-1.665 3.623 3.623 0 007.051 1.665z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
72
|
+
React.createElement("path", { d: "M192.761 74.791a3.622 3.622 0 10-7.221-.597 3.623 3.623 0 007.221.597zM183.306 72.434h-2.865v4.14h2.865v-4.14z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
73
|
+
React.createElement("path", { d: "M174.647 72.535v3.919M172.687 74.495h3.919", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
74
|
+
React.createElement("path", { d: "M118.409 59.883a101.128 101.128 0 003.53 4.325c8.521 9.898 10.444 21.22 11.063 24.852.693 4.039 4.51 11.469 14.029 7.135 8.096-4.335 6.118-13.346 4.612-20.01-1.294-5.738-2.421-11.21-4.002-17.882-1.58-6.664-1.146-9.094-1.146-9.094", fill: "#fff" }),
|
|
75
|
+
React.createElement("path", { d: "M118.409 59.883a101.128 101.128 0 003.53 4.325c8.521 9.898 10.444 21.22 11.063 24.852.693 4.039 4.51 11.469 14.029 7.135 8.096-4.335 6.118-13.346 4.612-20.01-1.294-5.738-2.421-11.21-4.002-17.882-1.58-6.664-1.146-9.094-1.146-9.094", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
76
|
+
React.createElement("path", { d: "M131.634 82.775s8.198-7.606 13.124-1.561c6.885 8.447-7.801 14.74-7.801 14.74", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
77
|
+
React.createElement("path", { d: "M167.567 163.735V126.49h-7.884v37.245h-1.229l1.349 15.961h7.643l1.341-15.961h-1.22z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
78
|
+
React.createElement("path", { d: "M165.783 140.667h-4.316a8.007 8.007 0 01-8.004-8.003V91.509h20.333v41.155a8.014 8.014 0 01-8.013 8.003z", fill: "url(#developers_svg__paint9_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
79
|
+
React.createElement("path", { d: "M157.743 133.893a.825.825 0 01-.823-.823V98.099c0-.453.37-.823.823-.823h.341c.453 0 .823.37.823.823v34.981c0 .453-.37.822-.823.822h-.341v-.009z", fill: "#fff" }),
|
|
80
|
+
React.createElement("path", { d: "M158.084 97.461c.352 0 .638.287.638.638v34.981a.638.638 0 01-.638.637h-.342a.638.638 0 01-.637-.637V98.099c0-.352.286-.638.637-.638h.342zm0-.37h-.342a1.01 1.01 0 00-1.007 1.008v34.981a1.01 1.01 0 001.007 1.007h.342a1.01 1.01 0 001.008-1.007V98.099a1.016 1.016 0 00-1.008-1.008z", fill: "#000" }),
|
|
81
|
+
React.createElement("path", { d: "M163.371 133.893a.825.825 0 01-.823-.823V98.099c0-.453.37-.823.823-.823h.342c.452 0 .822.37.822.823v34.981c0 .453-.37.822-.822.822h-.342v-.009z", fill: "#fff" }),
|
|
82
|
+
React.createElement("path", { d: "M163.713 97.461c.351 0 .637.287.637.638v34.981a.638.638 0 01-.637.637h-.342a.639.639 0 01-.638-.637V98.099a.64.64 0 01.638-.638h.342zm0-.37h-.342a1.01 1.01 0 00-1.008 1.008v34.981a1.01 1.01 0 001.008 1.007h.342a1.01 1.01 0 001.007-1.007V98.099a1.01 1.01 0 00-1.007-1.008z", fill: "#000" }),
|
|
83
|
+
React.createElement("path", { d: "M169.008 133.893a.824.824 0 01-.822-.823V98.099c0-.453.369-.823.822-.823h.342c.453 0 .823.37.823.823v34.981c0 .453-.37.822-.823.822h-.342v-.009z", fill: "#fff" }),
|
|
84
|
+
React.createElement("path", { d: "M169.35 97.461c.352 0 .638.287.638.638v34.981a.638.638 0 01-.638.637h-.342a.638.638 0 01-.637-.637V98.099c0-.352.286-.638.637-.638h.342zm0-.37h-.342a1.01 1.01 0 00-1.007 1.008v34.981a1.01 1.01 0 001.007 1.007h.342a1.01 1.01 0 001.008-1.007V98.099a1.016 1.016 0 00-1.008-1.008z", fill: "#000" }),
|
|
85
|
+
React.createElement("path", { d: "M163.62 93.866c5.615 0 10.167-1.072 10.167-2.394s-4.552-2.393-10.167-2.393c-5.614 0-10.166 1.071-10.166 2.393 0 1.322 4.552 2.394 10.166 2.394z", fill: "url(#developers_svg__paint10_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
86
|
+
React.createElement("path", { d: "M131.773 96.98h-7.718v20.324h7.718V96.981z", fill: "#000", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
87
|
+
React.createElement("path", { d: "M124.046 98.718h-7.67v16.848h7.67V98.718z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
88
|
+
React.createElement("path", { d: "M201.901 130.215h-28.114v-13.078h28.114a1.838 1.838 0 100-3.678h-6.414v-13.087h6.414c8.225 0 14.926 6.691 14.926 14.926 0 8.225-6.701 14.917-14.926 14.917z", fill: "url(#developers_svg__paint11_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
89
|
+
React.createElement("path", { d: "M173.794 131.695h7.671v-15.554h-7.671v15.554z", fill: "#000", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" })),
|
|
90
|
+
React.createElement("defs", null,
|
|
91
|
+
React.createElement("linearGradient", { id: "developers_svg__paint0_linear_3554_5806", x1: 60.495, y1: 59.916, x2: 251.62, y2: 4.147, gradientUnits: "userSpaceOnUse" },
|
|
92
|
+
React.createElement("stop", { stopColor: "#3885FF" }),
|
|
93
|
+
React.createElement("stop", { offset: 1, stopColor: "#635DFF" })),
|
|
94
|
+
React.createElement("linearGradient", { id: "developers_svg__paint1_linear_3554_5806", x1: 68.831, y1: 42.522, x2: 81.784, y2: 42.522, gradientUnits: "userSpaceOnUse" },
|
|
95
|
+
React.createElement("stop", { stopColor: "#2BC8A0" }),
|
|
96
|
+
React.createElement("stop", { offset: 1, stopColor: "#47C7E9" })),
|
|
97
|
+
React.createElement("linearGradient", { id: "developers_svg__paint2_linear_3554_5806", x1: 51.605, y1: 49.401, x2: 114.048, y2: 112.851, gradientUnits: "userSpaceOnUse" },
|
|
98
|
+
React.createElement("stop", { stopColor: "#1BC99F" }),
|
|
99
|
+
React.createElement("stop", { offset: 1, stopColor: "#3EC6EB" })),
|
|
100
|
+
React.createElement("linearGradient", { id: "developers_svg__paint3_linear_3554_5806", x1: 71.384, y1: 205.767, x2: 228.765, y2: 205.767, gradientUnits: "userSpaceOnUse" },
|
|
101
|
+
React.createElement("stop", { stopColor: "#3885FF" }),
|
|
102
|
+
React.createElement("stop", { offset: 1, stopColor: "#635DFF" })),
|
|
103
|
+
React.createElement("linearGradient", { id: "developers_svg__paint4_linear_3554_5806", x1: 72.236, y1: 131.864, x2: 161.369, y2: 175.172, gradientUnits: "userSpaceOnUse" },
|
|
104
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
105
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
106
|
+
React.createElement("linearGradient", { id: "developers_svg__paint5_linear_3554_5806", x1: 63.234, y1: 150.393, x2: 152.366, y2: 193.701, gradientUnits: "userSpaceOnUse" },
|
|
107
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
108
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
109
|
+
React.createElement("linearGradient", { id: "developers_svg__paint6_linear_3554_5806", x1: 44.669, y1: 145.03, x2: 145.161, y2: 145.03, gradientUnits: "userSpaceOnUse" },
|
|
110
|
+
React.createElement("stop", { offset: 0.044, stopColor: "#FF4F40" }),
|
|
111
|
+
React.createElement("stop", { offset: 1, stopColor: "#FC44DD" })),
|
|
112
|
+
React.createElement("linearGradient", { id: "developers_svg__paint7_linear_3554_5806", x1: 52.843, y1: 118.539, x2: 91.844, y2: 118.539, gradientUnits: "userSpaceOnUse" },
|
|
113
|
+
React.createElement("stop", { offset: 0.044, stopColor: "#FF4F40" }),
|
|
114
|
+
React.createElement("stop", { offset: 1, stopColor: "#FC44DD" })),
|
|
115
|
+
React.createElement("linearGradient", { id: "developers_svg__paint8_linear_3554_5806", x1: 133.134, y1: 152.525, x2: 206.152, y2: 52.817, gradientUnits: "userSpaceOnUse" },
|
|
116
|
+
React.createElement("stop", { stopColor: "#E9ECEE" }),
|
|
117
|
+
React.createElement("stop", { offset: 1, stopColor: "#fff" })),
|
|
118
|
+
React.createElement("linearGradient", { id: "developers_svg__paint9_linear_3554_5806", x1: 150.86, y1: 138.39, x2: 175.032, y2: 90.383, gradientUnits: "userSpaceOnUse" },
|
|
119
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
120
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
121
|
+
React.createElement("linearGradient", { id: "developers_svg__paint10_linear_3554_5806", x1: 142.198, y1: 134.029, x2: 166.37, y2: 86.021, gradientUnits: "userSpaceOnUse" },
|
|
122
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
123
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
124
|
+
React.createElement("linearGradient", { id: "developers_svg__paint11_linear_3554_5806", x1: 237.526, y1: 93.233, x2: 174.579, y2: 131.001, gradientUnits: "userSpaceOnUse" },
|
|
125
|
+
React.createElement("stop", { stopColor: "#1BC99F" }),
|
|
126
|
+
React.createElement("stop", { offset: 1, stopColor: "#3EC6EB" })),
|
|
127
|
+
React.createElement("clipPath", { id: "developers_svg__clip0_3554_5806" },
|
|
128
|
+
React.createElement("path", { fill: "#fff", transform: "translate(25.185 27)", d: "M0 0h199.581v195.08H0z" })))));
|
|
129
|
+
}, {
|
|
130
|
+
name: illustrationComponentName,
|
|
131
|
+
})({});
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
This file is generated. Any changes made to this file will be lost.
|
|
3
3
|
To update this output make changes to `scripts/svgr/illustration-index-template.js`
|
|
4
4
|
*/
|
|
5
|
+
export { IllustrationDevelopers } from './developers';
|
|
5
6
|
export { IllustrationExperiencedUser } from './experienced-user';
|
|
6
7
|
export { IllustrationNewAuth0UserA } from './new-auth0-user-a';
|
|
7
8
|
export { IllustrationNoContent } from './no-content';
|
|
@@ -133,6 +133,28 @@ var ImageContainer = styled('div', { name: promoBannerComponentName, slot: 'Imag
|
|
|
133
133
|
display: 'flex',
|
|
134
134
|
}, _b), imagePositionClass);
|
|
135
135
|
});
|
|
136
|
+
var DemoComponentContainer = styled('div', { name: promoBannerComponentName, slot: 'DemoComponentContainer' })(function (_a) {
|
|
137
|
+
var _b;
|
|
138
|
+
var theme = _a.theme, ownerState = _a.ownerState;
|
|
139
|
+
var imageContainerPositionTop = {
|
|
140
|
+
alignSelf: 'flex-start',
|
|
141
|
+
paddingTop: 0,
|
|
142
|
+
paddingBottom: theme.spacing(2),
|
|
143
|
+
};
|
|
144
|
+
var imageContainerPositionCenter = {
|
|
145
|
+
alignSelf: 'center',
|
|
146
|
+
paddingTop: 0,
|
|
147
|
+
paddingBottom: 0,
|
|
148
|
+
};
|
|
149
|
+
var imagePositionClass = ownerState.imagePosition === 'top'
|
|
150
|
+
? imageContainerPositionTop
|
|
151
|
+
: ownerState.imagePosition === 'center'
|
|
152
|
+
? imageContainerPositionCenter
|
|
153
|
+
: {};
|
|
154
|
+
return __assign((_b = { flex: 5, paddingRight: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: 0, alignSelf: 'flex-start', display: 'none' }, _b[theme.breakpoints.up('md')] = {
|
|
155
|
+
display: 'flex',
|
|
156
|
+
}, _b), imagePositionClass);
|
|
157
|
+
});
|
|
136
158
|
var Img = styled(Image, { name: promoBannerComponentName, slot: 'Image' })(function (_a) {
|
|
137
159
|
var ownerState = _a.ownerState;
|
|
138
160
|
var imageFullWidthClass = {
|
|
@@ -154,7 +176,7 @@ var Content = styled(RowLayout, { name: promoBannerComponentName, slot: 'Content
|
|
|
154
176
|
_b;
|
|
155
177
|
});
|
|
156
178
|
export var PromoBanner = React.forwardRef(function (props, ref) {
|
|
157
|
-
var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes"]);
|
|
179
|
+
var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, demoComponent = props.demoComponent, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes", "demoComponent"]);
|
|
158
180
|
var classes = useMergedClasses(promoBannerClasses, getPromoBannerUtilityClass, propClasses);
|
|
159
181
|
return (React.createElement(Root, __assign({ ref: ref, sx: sx, elevation: color === 'default' ? 0 : 5, ownerState: { color: color }, forwardedAs: "section", className: clsx(classes.root, className) }, rootProps),
|
|
160
182
|
React.createElement(Content, { className: classes.content },
|
|
@@ -163,5 +185,6 @@ export var PromoBanner = React.forwardRef(function (props, ref) {
|
|
|
163
185
|
React.createElement(StackLayout, { gutter: 1, className: classes.actions },
|
|
164
186
|
React.createElement(StackLayoutItem, null, action && (React.createElement(PrimaryActionButton, __assign({ variant: "contained", size: "medium", color: "primary", className: clsx(classes.action, classes.primaryAction), ownerState: { color: color } }, action)))),
|
|
165
187
|
React.createElement(StackLayoutItem, null, actionSecondary && (React.createElement(SecondaryActionButton, __assign({ className: clsx(classes.action, classes.secondaryAction), color: color === 'default' ? 'primary' : undefined, ownerState: { color: color }, variant: "link", size: "medium" }, actionSecondary)))))),
|
|
166
|
-
React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image))))
|
|
188
|
+
!demoComponent && (React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))),
|
|
189
|
+
!image && !!demoComponent && (React.createElement(DemoComponentContainer, { className: classes.demoComponentContainer, ownerState: { imagePosition: imagePosition } }, demoComponent))));
|
|
167
190
|
});
|
|
@@ -65,11 +65,11 @@ var computeValidColorMode = function (colorMode) {
|
|
|
65
65
|
var adjustTypography = function (typography) {
|
|
66
66
|
return __assign(__assign({}, typography), { fontFamily: typography.fontFamily === 'inherit'
|
|
67
67
|
? 'inherit'
|
|
68
|
-
: 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif
|
|
68
|
+
: 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif' });
|
|
69
69
|
};
|
|
70
70
|
var updateTypography = function (typography) {
|
|
71
71
|
var updatedTypography = __assign({}, typography);
|
|
72
|
-
var defaultFontFamily = 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif
|
|
72
|
+
var defaultFontFamily = 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif';
|
|
73
73
|
typography.fontFamily = defaultFontFamily;
|
|
74
74
|
var propertyAdjustments = {
|
|
75
75
|
fontFamily: function (value) {
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
+
import { SxProps } from '@auth0/quantum-product';
|
|
1
2
|
import * as React from 'react';
|
|
3
|
+
interface StyleProps {
|
|
4
|
+
sx?: SxProps;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
2
7
|
export declare const ColorTokens: () => React.JSX.Element;
|
|
3
|
-
export declare const ThemeTokens: ({ mode }: {
|
|
8
|
+
export declare const ThemeTokens: ({ mode, ...stylingOptions }: {
|
|
4
9
|
mode: 'light' | 'dark';
|
|
5
|
-
}) => React.JSX.Element;
|
|
6
|
-
export declare const TypographyTokens: ({ variant }: {
|
|
7
|
-
variant:
|
|
8
|
-
}) => React.JSX.Element;
|
|
9
|
-
export declare const TypographyGlobalTokens: ({ variant }: {
|
|
10
|
-
variant:
|
|
11
|
-
}) => React.JSX.Element;
|
|
10
|
+
} & StyleProps) => React.JSX.Element;
|
|
11
|
+
export declare const TypographyTokens: ({ variant, ...stylingOptions }: {
|
|
12
|
+
variant: string;
|
|
13
|
+
} & StyleProps) => React.JSX.Element;
|
|
14
|
+
export declare const TypographyGlobalTokens: ({ variant, ...stylingOptions }: {
|
|
15
|
+
variant: string;
|
|
16
|
+
} & StyleProps) => React.JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -22,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
33
|
__setModuleDefault(result, mod);
|
|
23
34
|
return result;
|
|
24
35
|
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
46
|
+
};
|
|
25
47
|
var __read = (this && this.__read) || function (o, n) {
|
|
26
48
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
27
49
|
if (!m) return o;
|
|
@@ -87,22 +109,22 @@ var colorDataTableColumns = [
|
|
|
87
109
|
];
|
|
88
110
|
var colorEntries = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.color.purple)), false), __read(transformJsonColorShadeToken(tokensJSON.color.neutral)), false), __read(transformJsonColorShadeToken(tokensJSON.color.blue)), false), __read(transformJsonColorShadeToken(tokensJSON.color.green)), false), __read(transformJsonColorShadeToken(tokensJSON.color.magenta)), false), __read(transformJsonColorShadeToken(tokensJSON.color.red)), false), __read(transformJsonColorShadeToken(tokensJSON.color.yellow)), false), __read(transformJsonColorShadeToken(tokensJSON.color.common)), false), __read(transformJsonColorShadeToken(tokensJSON.color.text)), false);
|
|
89
111
|
var ColorTokens = function () {
|
|
90
|
-
return React.createElement(quantum_product_1.DataTable, { items: colorEntries, columns: colorDataTableColumns });
|
|
112
|
+
return React.createElement(quantum_product_1.DataTable, { className: "sb-unstyled", items: colorEntries, columns: colorDataTableColumns });
|
|
91
113
|
};
|
|
92
114
|
exports.ColorTokens = ColorTokens;
|
|
93
115
|
var ThemeTokens = function (_a) {
|
|
94
|
-
var _b = _a.mode, mode = _b === void 0 ? 'light' : _b;
|
|
95
|
-
return (React.createElement(quantum_product_1.DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.text)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.background)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.border)), false), [
|
|
116
|
+
var _b = _a.mode, mode = _b === void 0 ? 'light' : _b, stylingOptions = __rest(_a, ["mode"]);
|
|
117
|
+
return (React.createElement(quantum_product_1.DataTable, __assign({}, stylingOptions, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.text)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.background)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.border)), false), [
|
|
96
118
|
transformJsonToken(tokensJSON.theme[mode].color.divider)
|
|
97
|
-
], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns }));
|
|
119
|
+
], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns })));
|
|
98
120
|
};
|
|
99
121
|
exports.ThemeTokens = ThemeTokens;
|
|
100
122
|
var transformJsonTextVariantTokenGroup = function (shade) {
|
|
101
123
|
return Object.values(shade).map(function (variant) { return transformJsonToken(variant); });
|
|
102
124
|
};
|
|
103
125
|
var TypographyTokens = function (_a) {
|
|
104
|
-
var variant = _a.variant;
|
|
105
|
-
return (React.createElement(quantum_product_1.DataTable, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type[variant])), false), columns: [
|
|
126
|
+
var variant = _a.variant, stylingOptions = __rest(_a, ["variant"]);
|
|
127
|
+
return (React.createElement(quantum_product_1.DataTable, __assign({}, stylingOptions, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type[variant])), false), columns: [
|
|
106
128
|
{
|
|
107
129
|
field: 'id',
|
|
108
130
|
title: 'Token',
|
|
@@ -126,12 +148,12 @@ var TypographyTokens = function (_a) {
|
|
|
126
148
|
var item = _a.item;
|
|
127
149
|
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
|
|
128
150
|
} },
|
|
129
|
-
] }));
|
|
151
|
+
] })));
|
|
130
152
|
};
|
|
131
153
|
exports.TypographyTokens = TypographyTokens;
|
|
132
154
|
var TypographyGlobalTokens = function (_a) {
|
|
133
|
-
var variant = _a.variant;
|
|
134
|
-
return (React.createElement(quantum_product_1.DataTable, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type.global[variant])), false), columns: [
|
|
155
|
+
var variant = _a.variant, stylingOptions = __rest(_a, ["variant"]);
|
|
156
|
+
return (React.createElement(quantum_product_1.DataTable, __assign({}, stylingOptions, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type.global[variant])), false), columns: [
|
|
135
157
|
{
|
|
136
158
|
field: 'id',
|
|
137
159
|
title: 'Token',
|
|
@@ -155,6 +177,6 @@ var TypographyGlobalTokens = function (_a) {
|
|
|
155
177
|
var item = _a.item;
|
|
156
178
|
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
|
|
157
179
|
} },
|
|
158
|
-
] }));
|
|
180
|
+
] })));
|
|
159
181
|
};
|
|
160
182
|
exports.TypographyGlobalTokens = TypographyGlobalTokens;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IIllustrationProps } from '../common';
|
|
3
|
+
export declare const IllustrationDevelopers: import("styled-components").StyledComponent<({ ...props }: IIllustrationProps) => React.JSX.Element, import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
46
|
+
};
|
|
47
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
|
+
exports.IllustrationDevelopers = void 0;
|
|
49
|
+
/*
|
|
50
|
+
This file is generated with the "illustrations" script.
|
|
51
|
+
To update this output make changes to `scripts/svgr/illustration-icon-template.js
|
|
52
|
+
*/
|
|
53
|
+
var React = __importStar(require("react"));
|
|
54
|
+
var common_1 = require("../common");
|
|
55
|
+
var styled_1 = require("../../styled");
|
|
56
|
+
exports.IllustrationDevelopers = (0, styled_1.styled)(function (_a) {
|
|
57
|
+
var props = __rest(_a, []);
|
|
58
|
+
return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 250 250", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
59
|
+
React.createElement("g", { clipPath: "url(#developers_svg__clip0_3554_5806)" },
|
|
60
|
+
React.createElement("path", { d: "M25.37 29.726v5.019a2.54 2.54 0 002.541 2.541h194.137a2.54 2.54 0 002.542-2.541v-5.019a2.54 2.54 0 00-2.542-2.541H27.911a2.54 2.54 0 00-2.541 2.541z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
61
|
+
React.createElement("path", { d: "M25.98 36.5l21.607 17.995c.305.25.675.388 1.072.388h152.928c.397 0 .776-.139 1.081-.397l21.321-18.004c1.192-1.007.481-2.948-1.081-2.948l-195.866.01c-1.562 0-2.273 1.959-1.063 2.957z", fill: "url(#developers_svg__paint0_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
62
|
+
React.createElement("path", { d: "M183.435 68.598s5.767-9.889.222-22.005c0 0-1.839-4.62-6.756-9.5 0 0-1.229-1.387-3.974-3.55h-79.48c5.295 5.148 13.927 13.91 24.952 26.33", fill: "#fff" }),
|
|
63
|
+
React.createElement("path", { d: "M183.435 68.598s5.767-9.889.222-22.005c0 0-1.839-4.62-6.756-9.5 0 0-1.229-1.387-3.974-3.55h-79.48c5.295 5.148 13.927 13.91 24.952 26.33", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
64
|
+
React.createElement("path", { d: "M65.72 42.277v-8.734h19.168v8.734", fill: "#BBC2CD" }),
|
|
65
|
+
React.createElement("path", { d: "M65.72 42.277v-8.734h19.168v8.734M48.345 54.855V33.497", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
66
|
+
React.createElement("path", { d: "M75.304 45.946c5.293 0 9.584-1.643 9.584-3.669s-4.29-3.669-9.584-3.669c-5.293 0-9.584 1.643-9.584 3.669s4.291 3.67 9.584 3.67z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
67
|
+
React.createElement("path", { d: "M75.304 44.624c3.578 0 6.479-.943 6.479-2.107 0-1.163-2.901-2.107-6.479-2.107-3.578 0-6.479.944-6.479 2.107 0 1.164 2.9 2.107 6.479 2.107z", fill: "url(#developers_svg__paint1_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
68
|
+
React.createElement("path", { d: "M81.783 42.508v55.748a2.238 2.238 0 002.236 2.236h54.177v12.948H84.028c-8.373 0-15.194-6.811-15.194-15.193V42.508", fill: "url(#developers_svg__paint2_linear_3554_5806)" }),
|
|
69
|
+
React.createElement("path", { d: "M81.783 42.508v55.748a2.238 2.238 0 002.236 2.236h54.177v12.948H84.028c-8.373 0-15.194-6.811-15.194-15.193V42.508", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
70
|
+
React.createElement("path", { d: "M33.567 219.197v-4.64a2.702 2.702 0 012.699-2.699H218.23c1.488 0 3.799 1.183 3.799 2.671v4.64a2.702 2.702 0 01-2.699 2.698l-183.065.028a2.695 2.695 0 01-2.699-2.698z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
71
|
+
React.createElement("path", { d: "M34.02 212.921l18.013-15.628a3.842 3.842 0 012.44-.869h147.271c.286 0 .564.102.785.278l19.03 16.219c.896.74.369 2.191-.786 2.191H34.796c-1.155 0-1.672-1.461-.776-2.191z", fill: "url(#developers_svg__paint3_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
72
|
+
React.createElement("path", { d: "M175.478 84.929s9.695-4.02 7.985-19.408c-1.71-15.388-12.079-24.159-12.079-24.159", fill: "#fff" }),
|
|
73
|
+
React.createElement("path", { d: "M175.478 84.929s9.695-4.02 7.985-19.408c-1.71-15.388-12.079-24.159-12.079-24.159", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
74
|
+
React.createElement("path", { d: "M164.267 47.23s15.73 17.607 13.142 31.34c-2.578 13.734-11.728 17.634-17.254 17.375-9.51-.452-7.819-4.066-24.418-9.038-4.149-1.239-16.663-.527-17.837-10.564-.822-7.033 5.749-10 5.749-10", fill: "#fff" }),
|
|
75
|
+
React.createElement("path", { d: "M164.267 47.23s15.73 17.607 13.142 31.34c-2.578 13.734-11.728 17.634-17.254 17.375-9.51-.452-7.819-4.066-24.418-9.038-4.149-1.239-16.663-.527-17.837-10.564-.822-7.033 5.749-10 5.749-10", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
76
|
+
React.createElement("path", { d: "M149.702 67.545s1.904 1.626 7.264 3.641l-7.264-3.641z", fill: "#fff" }),
|
|
77
|
+
React.createElement("path", { d: "M149.702 67.545s1.904 1.626 7.264 3.641M130.164 78.265s-6.848-.813-8.262 4.843", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
78
|
+
React.createElement("path", { d: "M99.99 119.586v7.32c0 15.277-12.385 27.661-27.662 27.661s-27.661-12.384-27.661-27.661v-7.699", fill: "url(#developers_svg__paint4_linear_3554_5806)" }),
|
|
79
|
+
React.createElement("path", { d: "M99.99 119.586v7.32c0 15.277-12.385 27.661-27.662 27.661s-27.661-12.384-27.661-27.661v-7.699", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
80
|
+
React.createElement("path", { d: "M81.505 152.968l49.011 48.392a5.847 5.847 0 008.262 0c2.283-2.283 5.065-5.315 5.065-5.315l-54.195-51.459", fill: "url(#developers_svg__paint5_linear_3554_5806)" }),
|
|
81
|
+
React.createElement("path", { d: "M81.505 152.968l49.011 48.392a5.847 5.847 0 008.262 0c2.283-2.283 5.065-5.315 5.065-5.315l-54.195-51.459", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
82
|
+
React.createElement("path", { d: "M83.493 144.9l51.699 51.515a5.844 5.844 0 008.263 0 5.841 5.841 0 000-8.262l-50.406-50.221-.01-.01a27.551 27.551 0 006.95-18.336c0-15.277-12.384-27.661-27.66-27.661-15.278 0-27.662 12.384-27.662 27.661 0 15.277 12.384 27.662 27.661 27.662a27.45 27.45 0 0011.165-2.348z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
83
|
+
React.createElement("path", { d: "M83.493 144.9l-2.006 8.059", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
84
|
+
React.createElement("path", { d: "M171.467 191.35s3.946-15.304 11.109-20.045c5.046-3.346 12.162-1.017 12.116 6.598-.046 7.625-4.676 19.418-5.536 29.362-.305 3.595-.554 7.468-.98 7.837h-17.06l.351-23.752zM126.643 215.112c1.082-4.067 3.845-8.688 5.906-12.459 1.858-3.401 1.516-7.597-2.154-11.016-6.783-6.312-20.101 3.808-20.101 3.808-7.957 6.395-13.216 13.188-16.811 19.667h33.16z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
85
|
+
React.createElement("path", { d: "M180.552 215.112c.832-10.61-2.385-21.969-14.907-26.941-10.749-3.484-12.69-6.284-16.664-3.909-15.323 10.203 6.22 23.539 9.529 25.304-1.821.971-3.984 3.355-5 5.555h27.042v-.009z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
86
|
+
React.createElement("path", { d: "M108.335 197.062c1.127.573 1.867 1.322 2.985 2.31 6.091 5.388 10.758 1.673 13.438-1.367 2.015-2.292 1.811-5.897-1.34-8.374M161.347 186.655s1.312 5.139-.324 7.44c-1.635 2.302-3.835 2.523-6.46 2.043 0 0-3.281-.472-3.077-4.603.175-3.678.24-5.508-.684-8.05", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
87
|
+
React.createElement("path", { d: "M158.519 209.557s4.519 2.523 8.142 2.69l-8.142-2.69z", fill: "#fff" }),
|
|
88
|
+
React.createElement("path", { d: "M158.519 209.557s4.519 2.523 8.142 2.69M192.086 192.275s-7.449-2.634-6.082-8.947c1.378-6.312 8.568-3.299 8.568-3.299", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
89
|
+
React.createElement("path", { d: "M83.492 144.9l51.7 51.515a5.842 5.842 0 008.262-8.262l-50.405-50.221-.01-.01a27.551 27.551 0 006.95-18.336c0-15.277-12.384-27.661-27.66-27.661-15.278 0-27.662 12.384-27.662 27.661 0 15.277 12.384 27.662 27.661 27.662 3.974 0 7.745-.832 11.164-2.348z", fill: "url(#developers_svg__paint6_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
90
|
+
React.createElement("path", { d: "M76.821 138.417c10.506-2.48 17.012-13.008 14.531-23.514-2.48-10.506-13.008-17.012-23.515-14.531-10.506 2.48-17.012 13.008-14.53 23.514 2.48 10.506 13.008 17.012 23.514 14.531z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
91
|
+
React.createElement("path", { d: "M72.328 129.826c-8.355 0-15.582-4.537-19.482-11.284 3.9-6.747 11.127-11.284 19.482-11.284 8.355 0 15.61 4.537 19.51 11.284-3.9 6.747-11.155 11.284-19.51 11.284z", fill: "url(#developers_svg__paint7_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
92
|
+
React.createElement("path", { d: "M74.344 127.53a9.241 9.241 0 10-4.248-17.988 9.242 9.242 0 104.248 17.988z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
93
|
+
React.createElement("path", { d: "M72.217 112.119v12.726M65.859 118.477h12.726M53.456 196.526v18.558M202.021 196.461v18.623M202.049 54.855V33.543", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
94
|
+
React.createElement("path", { d: "M190.681 152.368h-54.112a4.792 4.792 0 01-4.796-4.797V74.217a4.792 4.792 0 014.796-4.796h54.112a4.792 4.792 0 014.797 4.796v73.354a4.799 4.799 0 01-4.797 4.797z", fill: "url(#developers_svg__paint8_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
95
|
+
React.createElement("path", { d: "M131.773 79.504h63.705v-6.608a3.477 3.477 0 00-3.475-3.475h-56.746a3.477 3.477 0 00-3.475 3.475v6.608h-.009z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
96
|
+
React.createElement("path", { d: "M178.247 74.855a3.623 3.623 0 10-7.21-.714 3.623 3.623 0 007.21.714z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
97
|
+
React.createElement("path", { d: "M185.43 75.332a3.623 3.623 0 10-7.051-1.665 3.623 3.623 0 007.051 1.665z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
98
|
+
React.createElement("path", { d: "M192.761 74.791a3.622 3.622 0 10-7.221-.597 3.623 3.623 0 007.221.597zM183.306 72.434h-2.865v4.14h2.865v-4.14z", fill: "#fff", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
99
|
+
React.createElement("path", { d: "M174.647 72.535v3.919M172.687 74.495h3.919", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
100
|
+
React.createElement("path", { d: "M118.409 59.883a101.128 101.128 0 003.53 4.325c8.521 9.898 10.444 21.22 11.063 24.852.693 4.039 4.51 11.469 14.029 7.135 8.096-4.335 6.118-13.346 4.612-20.01-1.294-5.738-2.421-11.21-4.002-17.882-1.58-6.664-1.146-9.094-1.146-9.094", fill: "#fff" }),
|
|
101
|
+
React.createElement("path", { d: "M118.409 59.883a101.128 101.128 0 003.53 4.325c8.521 9.898 10.444 21.22 11.063 24.852.693 4.039 4.51 11.469 14.029 7.135 8.096-4.335 6.118-13.346 4.612-20.01-1.294-5.738-2.421-11.21-4.002-17.882-1.58-6.664-1.146-9.094-1.146-9.094", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
102
|
+
React.createElement("path", { d: "M131.634 82.775s8.198-7.606 13.124-1.561c6.885 8.447-7.801 14.74-7.801 14.74", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
103
|
+
React.createElement("path", { d: "M167.567 163.735V126.49h-7.884v37.245h-1.229l1.349 15.961h7.643l1.341-15.961h-1.22z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
104
|
+
React.createElement("path", { d: "M165.783 140.667h-4.316a8.007 8.007 0 01-8.004-8.003V91.509h20.333v41.155a8.014 8.014 0 01-8.013 8.003z", fill: "url(#developers_svg__paint9_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
105
|
+
React.createElement("path", { d: "M157.743 133.893a.825.825 0 01-.823-.823V98.099c0-.453.37-.823.823-.823h.341c.453 0 .823.37.823.823v34.981c0 .453-.37.822-.823.822h-.341v-.009z", fill: "#fff" }),
|
|
106
|
+
React.createElement("path", { d: "M158.084 97.461c.352 0 .638.287.638.638v34.981a.638.638 0 01-.638.637h-.342a.638.638 0 01-.637-.637V98.099c0-.352.286-.638.637-.638h.342zm0-.37h-.342a1.01 1.01 0 00-1.007 1.008v34.981a1.01 1.01 0 001.007 1.007h.342a1.01 1.01 0 001.008-1.007V98.099a1.016 1.016 0 00-1.008-1.008z", fill: "#000" }),
|
|
107
|
+
React.createElement("path", { d: "M163.371 133.893a.825.825 0 01-.823-.823V98.099c0-.453.37-.823.823-.823h.342c.452 0 .822.37.822.823v34.981c0 .453-.37.822-.822.822h-.342v-.009z", fill: "#fff" }),
|
|
108
|
+
React.createElement("path", { d: "M163.713 97.461c.351 0 .637.287.637.638v34.981a.638.638 0 01-.637.637h-.342a.639.639 0 01-.638-.637V98.099a.64.64 0 01.638-.638h.342zm0-.37h-.342a1.01 1.01 0 00-1.008 1.008v34.981a1.01 1.01 0 001.008 1.007h.342a1.01 1.01 0 001.007-1.007V98.099a1.01 1.01 0 00-1.007-1.008z", fill: "#000" }),
|
|
109
|
+
React.createElement("path", { d: "M169.008 133.893a.824.824 0 01-.822-.823V98.099c0-.453.369-.823.822-.823h.342c.453 0 .823.37.823.823v34.981c0 .453-.37.822-.823.822h-.342v-.009z", fill: "#fff" }),
|
|
110
|
+
React.createElement("path", { d: "M169.35 97.461c.352 0 .638.287.638.638v34.981a.638.638 0 01-.638.637h-.342a.638.638 0 01-.637-.637V98.099c0-.352.286-.638.637-.638h.342zm0-.37h-.342a1.01 1.01 0 00-1.007 1.008v34.981a1.01 1.01 0 001.007 1.007h.342a1.01 1.01 0 001.008-1.007V98.099a1.016 1.016 0 00-1.008-1.008z", fill: "#000" }),
|
|
111
|
+
React.createElement("path", { d: "M163.62 93.866c5.615 0 10.167-1.072 10.167-2.394s-4.552-2.393-10.167-2.393c-5.614 0-10.166 1.071-10.166 2.393 0 1.322 4.552 2.394 10.166 2.394z", fill: "url(#developers_svg__paint10_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
112
|
+
React.createElement("path", { d: "M131.773 96.98h-7.718v20.324h7.718V96.981z", fill: "#000", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
113
|
+
React.createElement("path", { d: "M124.046 98.718h-7.67v16.848h7.67V98.718z", fill: "#BDC4CF", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10 }),
|
|
114
|
+
React.createElement("path", { d: "M201.901 130.215h-28.114v-13.078h28.114a1.838 1.838 0 100-3.678h-6.414v-13.087h6.414c8.225 0 14.926 6.691 14.926 14.926 0 8.225-6.701 14.917-14.926 14.917z", fill: "url(#developers_svg__paint11_linear_3554_5806)", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" }),
|
|
115
|
+
React.createElement("path", { d: "M173.794 131.695h7.671v-15.554h-7.671v15.554z", fill: "#000", stroke: "#000", strokeWidth: 0.4, strokeMiterlimit: 10, strokeLinejoin: "round" })),
|
|
116
|
+
React.createElement("defs", null,
|
|
117
|
+
React.createElement("linearGradient", { id: "developers_svg__paint0_linear_3554_5806", x1: 60.495, y1: 59.916, x2: 251.62, y2: 4.147, gradientUnits: "userSpaceOnUse" },
|
|
118
|
+
React.createElement("stop", { stopColor: "#3885FF" }),
|
|
119
|
+
React.createElement("stop", { offset: 1, stopColor: "#635DFF" })),
|
|
120
|
+
React.createElement("linearGradient", { id: "developers_svg__paint1_linear_3554_5806", x1: 68.831, y1: 42.522, x2: 81.784, y2: 42.522, gradientUnits: "userSpaceOnUse" },
|
|
121
|
+
React.createElement("stop", { stopColor: "#2BC8A0" }),
|
|
122
|
+
React.createElement("stop", { offset: 1, stopColor: "#47C7E9" })),
|
|
123
|
+
React.createElement("linearGradient", { id: "developers_svg__paint2_linear_3554_5806", x1: 51.605, y1: 49.401, x2: 114.048, y2: 112.851, gradientUnits: "userSpaceOnUse" },
|
|
124
|
+
React.createElement("stop", { stopColor: "#1BC99F" }),
|
|
125
|
+
React.createElement("stop", { offset: 1, stopColor: "#3EC6EB" })),
|
|
126
|
+
React.createElement("linearGradient", { id: "developers_svg__paint3_linear_3554_5806", x1: 71.384, y1: 205.767, x2: 228.765, y2: 205.767, gradientUnits: "userSpaceOnUse" },
|
|
127
|
+
React.createElement("stop", { stopColor: "#3885FF" }),
|
|
128
|
+
React.createElement("stop", { offset: 1, stopColor: "#635DFF" })),
|
|
129
|
+
React.createElement("linearGradient", { id: "developers_svg__paint4_linear_3554_5806", x1: 72.236, y1: 131.864, x2: 161.369, y2: 175.172, gradientUnits: "userSpaceOnUse" },
|
|
130
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
131
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
132
|
+
React.createElement("linearGradient", { id: "developers_svg__paint5_linear_3554_5806", x1: 63.234, y1: 150.393, x2: 152.366, y2: 193.701, gradientUnits: "userSpaceOnUse" },
|
|
133
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
134
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
135
|
+
React.createElement("linearGradient", { id: "developers_svg__paint6_linear_3554_5806", x1: 44.669, y1: 145.03, x2: 145.161, y2: 145.03, gradientUnits: "userSpaceOnUse" },
|
|
136
|
+
React.createElement("stop", { offset: 0.044, stopColor: "#FF4F40" }),
|
|
137
|
+
React.createElement("stop", { offset: 1, stopColor: "#FC44DD" })),
|
|
138
|
+
React.createElement("linearGradient", { id: "developers_svg__paint7_linear_3554_5806", x1: 52.843, y1: 118.539, x2: 91.844, y2: 118.539, gradientUnits: "userSpaceOnUse" },
|
|
139
|
+
React.createElement("stop", { offset: 0.044, stopColor: "#FF4F40" }),
|
|
140
|
+
React.createElement("stop", { offset: 1, stopColor: "#FC44DD" })),
|
|
141
|
+
React.createElement("linearGradient", { id: "developers_svg__paint8_linear_3554_5806", x1: 133.134, y1: 152.525, x2: 206.152, y2: 52.817, gradientUnits: "userSpaceOnUse" },
|
|
142
|
+
React.createElement("stop", { stopColor: "#E9ECEE" }),
|
|
143
|
+
React.createElement("stop", { offset: 1, stopColor: "#fff" })),
|
|
144
|
+
React.createElement("linearGradient", { id: "developers_svg__paint9_linear_3554_5806", x1: 150.86, y1: 138.39, x2: 175.032, y2: 90.383, gradientUnits: "userSpaceOnUse" },
|
|
145
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
146
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
147
|
+
React.createElement("linearGradient", { id: "developers_svg__paint10_linear_3554_5806", x1: 142.198, y1: 134.029, x2: 166.37, y2: 86.021, gradientUnits: "userSpaceOnUse" },
|
|
148
|
+
React.createElement("stop", { stopColor: "#F4D" }),
|
|
149
|
+
React.createElement("stop", { offset: 1, stopColor: "#EBCA40" })),
|
|
150
|
+
React.createElement("linearGradient", { id: "developers_svg__paint11_linear_3554_5806", x1: 237.526, y1: 93.233, x2: 174.579, y2: 131.001, gradientUnits: "userSpaceOnUse" },
|
|
151
|
+
React.createElement("stop", { stopColor: "#1BC99F" }),
|
|
152
|
+
React.createElement("stop", { offset: 1, stopColor: "#3EC6EB" })),
|
|
153
|
+
React.createElement("clipPath", { id: "developers_svg__clip0_3554_5806" },
|
|
154
|
+
React.createElement("path", { fill: "#fff", transform: "translate(25.185 27)", d: "M0 0h199.581v195.08H0z" })))));
|
|
155
|
+
}, {
|
|
156
|
+
name: common_1.illustrationComponentName,
|
|
157
|
+
})({});
|
|
@@ -4,7 +4,9 @@ This file is generated. Any changes made to this file will be lost.
|
|
|
4
4
|
To update this output make changes to `scripts/svgr/illustration-index-template.js`
|
|
5
5
|
*/
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.IllustrationUsers = exports.IllustrationStreamsLogs = exports.IllustrationSingleSignOn = exports.IllustrationRoles = exports.IllustrationNotifications = exports.IllustrationNoContent = exports.IllustrationNewAuth0UserA = exports.IllustrationExperiencedUser = void 0;
|
|
7
|
+
exports.IllustrationUsers = exports.IllustrationStreamsLogs = exports.IllustrationSingleSignOn = exports.IllustrationRoles = exports.IllustrationNotifications = exports.IllustrationNoContent = exports.IllustrationNewAuth0UserA = exports.IllustrationExperiencedUser = exports.IllustrationDevelopers = void 0;
|
|
8
|
+
var developers_1 = require("./developers");
|
|
9
|
+
Object.defineProperty(exports, "IllustrationDevelopers", { enumerable: true, get: function () { return developers_1.IllustrationDevelopers; } });
|
|
8
10
|
var experienced_user_1 = require("./experienced-user");
|
|
9
11
|
Object.defineProperty(exports, "IllustrationExperiencedUser", { enumerable: true, get: function () { return experienced_user_1.IllustrationExperiencedUser; } });
|
|
10
12
|
var new_auth0_user_a_1 = require("./new-auth0-user-a");
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const promoBannerComponentName: "QuantumPromoBanner";
|
|
2
2
|
export declare function getPromoBannerUtilityClass(slot: string): string;
|
|
3
|
-
export declare const promoBannerClasses: Record<"title" | "image" | "action" | "content" | "root" | "secondaryAction" | "actions" | "description" | "primaryAction" | "imageContainer", string>;
|
|
3
|
+
export declare const promoBannerClasses: Record<"title" | "image" | "action" | "content" | "root" | "secondaryAction" | "actions" | "description" | "primaryAction" | "imageContainer" | "demoComponentContainer", string>;
|
|
4
4
|
export type PromoBannerClasses = typeof promoBannerClasses;
|
|
5
5
|
export type PromoBannerClassKey = keyof PromoBannerClasses;
|
|
@@ -17,5 +17,6 @@ export interface IPromoBannerProps extends Omit<IPaperProps, 'title'> {
|
|
|
17
17
|
imageFullWidth?: boolean;
|
|
18
18
|
image?: Pick<IImageProps, 'src' | 'alt'>;
|
|
19
19
|
classes?: Partial<PromoBannerClasses>;
|
|
20
|
+
demoComponent?: React.ReactNode;
|
|
20
21
|
}
|
|
21
22
|
export declare const PromoBanner: React.ForwardRefExoticComponent<Omit<IPromoBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -162,6 +162,28 @@ var ImageContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.
|
|
|
162
162
|
display: 'flex',
|
|
163
163
|
}, _b), imagePositionClass);
|
|
164
164
|
});
|
|
165
|
+
var DemoComponentContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.promoBannerComponentName, slot: 'DemoComponentContainer' })(function (_a) {
|
|
166
|
+
var _b;
|
|
167
|
+
var theme = _a.theme, ownerState = _a.ownerState;
|
|
168
|
+
var imageContainerPositionTop = {
|
|
169
|
+
alignSelf: 'flex-start',
|
|
170
|
+
paddingTop: 0,
|
|
171
|
+
paddingBottom: theme.spacing(2),
|
|
172
|
+
};
|
|
173
|
+
var imageContainerPositionCenter = {
|
|
174
|
+
alignSelf: 'center',
|
|
175
|
+
paddingTop: 0,
|
|
176
|
+
paddingBottom: 0,
|
|
177
|
+
};
|
|
178
|
+
var imagePositionClass = ownerState.imagePosition === 'top'
|
|
179
|
+
? imageContainerPositionTop
|
|
180
|
+
: ownerState.imagePosition === 'center'
|
|
181
|
+
? imageContainerPositionCenter
|
|
182
|
+
: {};
|
|
183
|
+
return __assign((_b = { flex: 5, paddingRight: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: 0, alignSelf: 'flex-start', display: 'none' }, _b[theme.breakpoints.up('md')] = {
|
|
184
|
+
display: 'flex',
|
|
185
|
+
}, _b), imagePositionClass);
|
|
186
|
+
});
|
|
165
187
|
var Img = (0, styled_1.styled)(image_1.Image, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'Image' })(function (_a) {
|
|
166
188
|
var ownerState = _a.ownerState;
|
|
167
189
|
var imageFullWidthClass = {
|
|
@@ -183,7 +205,7 @@ var Content = (0, styled_1.styled)(row_layout_1.RowLayout, { name: promo_banner_
|
|
|
183
205
|
_b;
|
|
184
206
|
});
|
|
185
207
|
exports.PromoBanner = React.forwardRef(function (props, ref) {
|
|
186
|
-
var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes"]);
|
|
208
|
+
var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, demoComponent = props.demoComponent, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes", "demoComponent"]);
|
|
187
209
|
var classes = (0, classes_1.useMergedClasses)(promo_banner_classes_1.promoBannerClasses, promo_banner_classes_1.getPromoBannerUtilityClass, propClasses);
|
|
188
210
|
return (React.createElement(Root, __assign({ ref: ref, sx: sx, elevation: color === 'default' ? 0 : 5, ownerState: { color: color }, forwardedAs: "section", className: (0, clsx_1.default)(classes.root, className) }, rootProps),
|
|
189
211
|
React.createElement(Content, { className: classes.content },
|
|
@@ -192,5 +214,6 @@ exports.PromoBanner = React.forwardRef(function (props, ref) {
|
|
|
192
214
|
React.createElement(stack_layout_1.StackLayout, { gutter: 1, className: classes.actions },
|
|
193
215
|
React.createElement(stack_layout_1.StackLayoutItem, null, action && (React.createElement(PrimaryActionButton, __assign({ variant: "contained", size: "medium", color: "primary", className: (0, clsx_1.default)(classes.action, classes.primaryAction), ownerState: { color: color } }, action)))),
|
|
194
216
|
React.createElement(stack_layout_1.StackLayoutItem, null, actionSecondary && (React.createElement(SecondaryActionButton, __assign({ className: (0, clsx_1.default)(classes.action, classes.secondaryAction), color: color === 'default' ? 'primary' : undefined, ownerState: { color: color }, variant: "link", size: "medium" }, actionSecondary)))))),
|
|
195
|
-
React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image))))
|
|
217
|
+
!demoComponent && (React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))),
|
|
218
|
+
!image && !!demoComponent && (React.createElement(DemoComponentContainer, { className: classes.demoComponentContainer, ownerState: { imagePosition: imagePosition } }, demoComponent))));
|
|
196
219
|
});
|
|
@@ -92,11 +92,11 @@ var computeValidColorMode = function (colorMode) {
|
|
|
92
92
|
var adjustTypography = function (typography) {
|
|
93
93
|
return __assign(__assign({}, typography), { fontFamily: typography.fontFamily === 'inherit'
|
|
94
94
|
? 'inherit'
|
|
95
|
-
: 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif
|
|
95
|
+
: 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif' });
|
|
96
96
|
};
|
|
97
97
|
var updateTypography = function (typography) {
|
|
98
98
|
var updatedTypography = __assign({}, typography);
|
|
99
|
-
var defaultFontFamily = 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif
|
|
99
|
+
var defaultFontFamily = 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif';
|
|
100
100
|
typography.fontFamily = defaultFontFamily;
|
|
101
101
|
var propertyAdjustments = {
|
|
102
102
|
fontFamily: function (value) {
|