@auth0/quantum-product 2.5.4 → 2.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/esm/foundations/token-tables.js +32 -10
  2. package/esm/illustrations/components/developers.js +131 -0
  3. package/esm/illustrations/components/index.js +1 -0
  4. package/esm/quantum-provider/quantum-provider.js +2 -2
  5. package/foundations/token-tables.d.ts +14 -8
  6. package/foundations/token-tables.js +32 -10
  7. package/illustrations/components/developers.d.ts +3 -0
  8. package/illustrations/components/developers.js +157 -0
  9. package/illustrations/components/index.d.ts +1 -0
  10. package/illustrations/components/index.js +3 -1
  11. package/package.json +1 -1
  12. package/quantum-provider/quantum-provider.js +2 -2
package/esm/foundations/token-tables.js CHANGED
@@ -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
  };
package/esm/illustrations/components/developers.js ADDED
@@ -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
+ })({});
package/esm/illustrations/components/index.js CHANGED
@@ -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';
package/esm/quantum-provider/quantum-provider.js CHANGED
@@ -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 !important' });
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 !important';
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) {
package/foundations/token-tables.d.ts CHANGED
@@ -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: any;
8
- }) => React.JSX.Element;
9
- export declare const TypographyGlobalTokens: ({ variant }: {
10
- variant: any;
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 {};
package/foundations/token-tables.js CHANGED
@@ -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;
package/illustrations/components/developers.d.ts ADDED
@@ -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>;
package/illustrations/components/developers.js ADDED
@@ -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
+ })({});
package/illustrations/components/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export { IllustrationDevelopers } from './developers';
1
2
  export { IllustrationExperiencedUser } from './experienced-user';
2
3
  export { IllustrationNewAuth0UserA } from './new-auth0-user-a';
3
4
  export { IllustrationNoContent } from './no-content';
package/illustrations/components/index.js CHANGED
@@ -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,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.5.4",
3
+ "version": "2.5.5",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/quantum-provider/quantum-provider.js CHANGED
@@ -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 !important' });
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 !important';
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) {