@auth0/quantum-product 1.5.18 → 1.5.19

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 (8) hide show
  1. package/README.md +1 -0
  2. package/esm/foundations/token-tables.js +11 -60
  3. package/esm/logo/logo.js +9 -16
  4. package/foundations/token-tables.d.ts +5 -5
  5. package/foundations/token-tables.js +13 -64
  6. package/logo/logo.d.ts +3 -3
  7. package/logo/logo.js +9 -16
  8. package/package.json +18 -13
package/README.md CHANGED
@@ -15,6 +15,7 @@ Note: The below repos are private for now. The source code will be made public a
15
15
  | [@auth0/quantum-product](https://github.com/auth0/quantum-product/tree/main/packages/quantum-product) | Main Component Library |
16
16
  | [@auth0/quantum-lab](https://github.com/auth0/quantum-product/tree/main/packages/quantum-lab) | Expiremental Component Library |
17
17
  | [@auth0/quantum-tokens](https://github.com/auth0/quantum-product/tree/main/packages/quantum-tokens) | Design Tokens |
18
+ | [@auth0/quantum-assets](https://github.com/auth0/quantum-product/tree/main/packages/quantum-assets) | Brand icons, svgs and images |
18
19
  | [@auth0/quantum-codemods](https://github.com/auth0/quantum-product/tree/main/packages/quantum-codemods) | Codemods to help with migrations |
19
20
  | [@a0/quantum-fonts](https://github.com/auth0/quantum-assets/tree/main/packages/quantum-fonts) | Extended Inter font (slashed-zero) |
20
21
 
package/esm/foundations/token-tables.js CHANGED
@@ -23,10 +23,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
23
23
  }
24
24
  return to.concat(ar || Array.prototype.slice.call(from));
25
25
  };
26
- import { Avatar, AvatarBlock, Code, DataTable, TitleBlock } from '@auth0/quantum-product';
26
+ import { Avatar, AvatarBlock, Code, DataTable } from '@auth0/quantum-product';
27
27
  import * as React from 'react';
28
28
  // eslint-disable-next-line @typescript-eslint/no-var-requires
29
29
  var tokensJSON = require('../../../quantum-tokens/old/json/tokens.json');
30
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
31
+ var tokensTypeJSON = require('../../../quantum-tokens/json/okta/light.json');
30
32
  function transformJsonToken(jsonToken) {
31
33
  return {
32
34
  id: jsonToken.path.join('_'),
@@ -67,63 +69,12 @@ export var ThemeTokens = function (_a) {
67
69
  transformJsonToken(tokensJSON.theme[mode].color.divider)
68
70
  ], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns }));
69
71
  };
70
- export var FontFamilyTokens = function () {
71
- return (React.createElement(DataTable, { items: [
72
- transformJsonToken(tokensJSON.typography.font_family),
73
- transformJsonToken(tokensJSON.typography.font_family_heading),
74
- transformJsonToken(tokensJSON.typography.font_family_monospace),
75
- ], columns: [
76
- {
77
- field: 'id',
78
- title: 'Token',
79
- render: function (_a) {
80
- var item = _a.item;
81
- return (React.createElement(TitleBlock, { title: React.createElement(Code, null, item.id), description: item.value.join(', '), descriptionTypographyProps: { variant: 'code2' } }));
82
- },
83
- },
84
- { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
85
- var item = _a.item;
86
- return React.createElement(Code, { noWrap: true }, item.cssVariable);
87
- } },
88
- { field: 'jsonPath', title: 'JSON Path', render: function (_a) {
89
- var item = _a.item;
90
- return React.createElement(Code, { noWrap: true }, item.jsonPath);
91
- } },
92
- ] }));
93
- };
94
72
  var transformJsonTextVariantTokenGroup = function (shade) {
95
73
  return Object.values(shade).map(function (variant) { return transformJsonToken(variant); });
96
74
  };
97
- export var TypographyVariantsTokens = function () {
98
- return (React.createElement(DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.headings)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.subtitles)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.body)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.forms)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.caption)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.code)), false), columns: [
99
- {
100
- field: 'id',
101
- title: 'Token',
102
- render: function (_a) {
103
- var item = _a.item;
104
- return React.createElement(Code, null, item.id);
105
- },
106
- },
107
- {
108
- title: 'Value',
109
- render: function (_a) {
110
- var item = _a.item;
111
- return React.createElement("pre", null, JSON.stringify(item.value, null, 2));
112
- },
113
- },
114
- { field: 'jsonPath', title: 'JSON Path', render: function (_a) {
115
- var item = _a.item;
116
- return React.createElement(Code, { noWrap: true }, item.jsonPath);
117
- } },
118
- ] }));
119
- };
120
- var transformTypographySubGroup = function (keyPrefix) {
121
- return Object.keys(tokensJSON.typography)
122
- .filter(function (key) { return key.startsWith(keyPrefix); })
123
- .map(function (key) { return transformJsonToken(tokensJSON.typography[key]); });
124
- };
125
- export var FontSizeTokens = function () {
126
- return (React.createElement(DataTable, { items: transformTypographySubGroup('font_size'), columns: [
75
+ export var TypographyTokens = function (_a) {
76
+ var variant = _a.variant;
77
+ return (React.createElement(DataTable, { items: __spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensTypeJSON.type[variant])), false), columns: [
127
78
  {
128
79
  field: 'id',
129
80
  title: 'Token',
@@ -136,7 +87,7 @@ export var FontSizeTokens = function () {
136
87
  title: 'Value',
137
88
  render: function (_a) {
138
89
  var item = _a.item;
139
- return React.createElement(Code, null, item.value);
90
+ return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
140
91
  },
141
92
  },
142
93
  { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
@@ -149,9 +100,9 @@ export var FontSizeTokens = function () {
149
100
  } },
150
101
  ] }));
151
102
  };
152
- export var SimpleFontValueTokens = function (_a) {
153
- var prefix = _a.prefix;
154
- return (React.createElement(DataTable, { items: transformTypographySubGroup(prefix), columns: [
103
+ 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: [
155
106
  {
156
107
  field: 'id',
157
108
  title: 'Token',
@@ -164,7 +115,7 @@ export var SimpleFontValueTokens = function (_a) {
164
115
  title: 'Value',
165
116
  render: function (_a) {
166
117
  var item = _a.item;
167
- return React.createElement(Code, null, item.value);
118
+ return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
168
119
  },
169
120
  },
170
121
  { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
package/esm/logo/logo.js CHANGED
@@ -37,12 +37,11 @@ export var Root = styled('div', {
37
37
  white: theme.tokens.color_fg_inverse_static,
38
38
  light: theme.tokens.color_fg_default,
39
39
  default: theme.tokens.color_fg_brand_primary,
40
- }[ownerState.color || 'default'], display: 'inline-block', width: theme.typography.pxToRem(29), height: theme.typography.pxToRem(32) }, (ownerState.size === 'xsmall' && {
41
- width: theme.typography.pxToRem(17),
40
+ decorative: theme.tokens.color_fg_decorative,
41
+ }[ownerState.color || 'default'], display: 'inline-block', width: 'auto', height: theme.typography.pxToRem(36) }, (ownerState.size === 'xsmall' && {
42
42
  height: theme.typography.pxToRem(19),
43
43
  })), (ownerState.size === 'small' && {
44
- width: theme.typography.pxToRem(25),
45
- height: theme.typography.pxToRem(27),
44
+ height: theme.typography.pxToRem(30),
46
45
  }));
47
46
  });
48
47
  var StyledSvg = styled('svg', {
@@ -50,22 +49,18 @@ var StyledSvg = styled('svg', {
50
49
  slot: 'Svg',
51
50
  })(function (_a) {
52
51
  var theme = _a.theme, ownerState = _a.ownerState;
53
- return __assign(__assign({ display: 'block', width: theme.typography.pxToRem(29), height: theme.typography.pxToRem(32) }, (ownerState.size === 'xsmall' && {
54
- width: theme.typography.pxToRem(17),
52
+ return __assign(__assign({ display: 'block', width: 'auto', height: theme.typography.pxToRem(36) }, (ownerState.size === 'xsmall' && {
55
53
  height: theme.typography.pxToRem(19),
56
54
  })), (ownerState.size === 'small' && {
57
- width: theme.typography.pxToRem(25),
58
- height: theme.typography.pxToRem(27),
55
+ height: theme.typography.pxToRem(30),
59
56
  }));
60
57
  });
61
58
  var LogoImage = styled(Image)(function (_a) {
62
59
  var theme = _a.theme, ownerState = _a.ownerState;
63
- return (__assign(__assign({ display: 'block', width: theme.typography.pxToRem(29), height: theme.typography.pxToRem(32) }, (ownerState.size === 'xsmall' && {
64
- width: theme.typography.pxToRem(17),
60
+ return (__assign(__assign({ display: 'block', width: 'auto', height: theme.typography.pxToRem(36) }, (ownerState.size === 'xsmall' && {
65
61
  height: theme.typography.pxToRem(19),
66
62
  })), (ownerState.size === 'small' && {
67
- width: theme.typography.pxToRem(25),
68
- height: theme.typography.pxToRem(27),
63
+ height: theme.typography.pxToRem(30),
69
64
  })));
70
65
  });
71
66
  var useUtilityClasses = function (_a) {
@@ -83,8 +78,6 @@ export var Logo = React.forwardRef(function (inProps, ref) {
83
78
  });
84
79
  var classes = useUtilityClasses(props);
85
80
  var size = props.size, color = props.color, className = props.className, iconSrc = props.iconSrc, rootProps = __rest(props, ["size", "color", "className", "iconSrc"]);
86
- return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), ownerState: { size: size, color: color } }, rootProps), iconSrc ? (React.createElement(LogoImage, { src: iconSrc, ownerState: { size: size }, fit: "contain", alt: "Logo" })) : (React.createElement(StyledSvg, { className: classes.svg, ownerState: { size: size }, viewBox: "0 0 29 32" },
87
- React.createElement("g", { transform: "translate(-100.000000, -88.000000)", fill: "currentColor" },
88
- React.createElement("g", { transform: "translate(100.000000, 88.000000)" },
89
- React.createElement("path", { d: "M22.9616476,25.864 L19.715652,15.9851429 L28.2126476,9.88133333 L17.7094918,9.88133333 L14.4633035,0.00285714286 L14.4623403,0.00019047619 L24.9670372,0.00019047619 L28.2139961,9.88038095 L28.2141888,9.88019048 L28.2168857,9.87866667 C30.1024528,15.6104762 28.160442,22.1297143 22.9616476,25.864 L22.9616476,25.864 L22.9616476,25.864 Z M5.96418875,25.864 L5.96149178,25.8659048 L14.4606065,31.9712381 L22.9616476,25.8641905 L14.4633035,19.7586667 L5.96418875,25.864 L5.96418875,25.864 L5.96418875,25.864 Z M0.711069704,9.87885714 L0.711069704,9.87885714 C-1.27389999,15.9209524 1.03027533,22.3232381 5.96245499,25.8651429 L5.96322555,25.8620952 L9.2096065,15.9838095 L0.714537237,9.88114286 L11.2151888,9.88114286 L14.4615697,0.00266666667 L14.4623403,0 L3.95706538,0 L0.711069704,9.87885714 L0.711069704,9.87885714 L0.711069704,9.87885714 Z" })))))));
81
+ return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), ownerState: { size: size, color: color } }, rootProps), iconSrc ? (React.createElement(LogoImage, { src: iconSrc, ownerState: { size: size }, fit: "contain", alt: "Logo" })) : (React.createElement(StyledSvg, { fill: "currentColor", viewBox: "0 0 53 64", className: classes.svg, ownerState: { size: size } },
82
+ React.createElement("path", { d: "M3.372 27.782c10.475-1.728 18.686-10.4 20.407-20.892l.577-5.043c.143-.802-.4-1.918-1.412-1.838C15.03.628 7.56 3.243 3.406 4.943A5.488 5.488 0 000 10.027v16.451c0 .973.874 1.717 1.834 1.563l1.538-.252v-.006zM28.831 6.89c1.726 10.492 9.938 19.164 20.407 20.893l1.537.252c.96.16 1.835-.584 1.835-1.563v-16.45a5.488 5.488 0 00-3.406-5.084C45.044 3.232 37.58.622 29.666.004c-1.018-.08-1.538 1.048-1.418 1.837l.577 5.043.006.006zM49.23 32.39C34.915 35.219 28.27 44.75 28.27 62.79c0 .905.897 1.535 1.651 1.031 6.584-4.447 21.07-16.056 22.562-30.577.057-1.826-2.223-.968-3.252-.853zM3.377 32.39c14.315 2.828 20.961 12.359 20.961 30.4 0 .905-.897 1.535-1.651 1.031C16.103 59.374 1.617 47.765.125 33.244c-.057-1.826 2.223-.968 3.252-.853z" })))));
90
83
  });
package/foundations/token-tables.d.ts CHANGED
@@ -3,9 +3,9 @@ export declare const ColorTokens: () => JSX.Element;
3
3
  export declare const ThemeTokens: ({ mode }: {
4
4
  mode: 'light' | 'dark';
5
5
  }) => JSX.Element;
6
- export declare const FontFamilyTokens: () => JSX.Element;
7
- export declare const TypographyVariantsTokens: () => JSX.Element;
8
- export declare const FontSizeTokens: () => JSX.Element;
9
- export declare const SimpleFontValueTokens: ({ prefix }: {
10
- prefix: string;
6
+ export declare const TypographyTokens: ({ variant }: {
7
+ variant: any;
8
+ }) => JSX.Element;
9
+ export declare const TypographyGlobalTokens: ({ variant }: {
10
+ variant: any;
11
11
  }) => JSX.Element;
package/foundations/token-tables.js CHANGED
@@ -48,11 +48,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
48
48
  return to.concat(ar || Array.prototype.slice.call(from));
49
49
  };
50
50
  Object.defineProperty(exports, "__esModule", { value: true });
51
- exports.SimpleFontValueTokens = exports.FontSizeTokens = exports.TypographyVariantsTokens = exports.FontFamilyTokens = exports.ThemeTokens = exports.ColorTokens = void 0;
51
+ exports.TypographyGlobalTokens = exports.TypographyTokens = exports.ThemeTokens = exports.ColorTokens = void 0;
52
52
  var quantum_product_1 = require("@auth0/quantum-product");
53
53
  var React = __importStar(require("react"));
54
54
  // eslint-disable-next-line @typescript-eslint/no-var-requires
55
55
  var tokensJSON = require('../../../quantum-tokens/old/json/tokens.json');
56
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
57
+ var tokensTypeJSON = require('../../../quantum-tokens/json/okta/light.json');
56
58
  function transformJsonToken(jsonToken) {
57
59
  return {
58
60
  id: jsonToken.path.join('_'),
@@ -95,65 +97,12 @@ var ThemeTokens = function (_a) {
95
97
  ], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns }));
96
98
  };
97
99
  exports.ThemeTokens = ThemeTokens;
98
- var FontFamilyTokens = function () {
99
- return (React.createElement(quantum_product_1.DataTable, { items: [
100
- transformJsonToken(tokensJSON.typography.font_family),
101
- transformJsonToken(tokensJSON.typography.font_family_heading),
102
- transformJsonToken(tokensJSON.typography.font_family_monospace),
103
- ], columns: [
104
- {
105
- field: 'id',
106
- title: 'Token',
107
- render: function (_a) {
108
- var item = _a.item;
109
- return (React.createElement(quantum_product_1.TitleBlock, { title: React.createElement(quantum_product_1.Code, null, item.id), description: item.value.join(', '), descriptionTypographyProps: { variant: 'code2' } }));
110
- },
111
- },
112
- { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
113
- var item = _a.item;
114
- return React.createElement(quantum_product_1.Code, { noWrap: true }, item.cssVariable);
115
- } },
116
- { field: 'jsonPath', title: 'JSON Path', render: function (_a) {
117
- var item = _a.item;
118
- return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
119
- } },
120
- ] }));
121
- };
122
- exports.FontFamilyTokens = FontFamilyTokens;
123
100
  var transformJsonTextVariantTokenGroup = function (shade) {
124
101
  return Object.values(shade).map(function (variant) { return transformJsonToken(variant); });
125
102
  };
126
- var TypographyVariantsTokens = function () {
127
- return (React.createElement(quantum_product_1.DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.headings)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.subtitles)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.body)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.forms)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.caption)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.code)), false), columns: [
128
- {
129
- field: 'id',
130
- title: 'Token',
131
- render: function (_a) {
132
- var item = _a.item;
133
- return React.createElement(quantum_product_1.Code, null, item.id);
134
- },
135
- },
136
- {
137
- title: 'Value',
138
- render: function (_a) {
139
- var item = _a.item;
140
- return React.createElement("pre", null, JSON.stringify(item.value, null, 2));
141
- },
142
- },
143
- { field: 'jsonPath', title: 'JSON Path', render: function (_a) {
144
- var item = _a.item;
145
- return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
146
- } },
147
- ] }));
148
- };
149
- exports.TypographyVariantsTokens = TypographyVariantsTokens;
150
- var transformTypographySubGroup = function (keyPrefix) {
151
- return Object.keys(tokensJSON.typography)
152
- .filter(function (key) { return key.startsWith(keyPrefix); })
153
- .map(function (key) { return transformJsonToken(tokensJSON.typography[key]); });
154
- };
155
- var FontSizeTokens = function () {
156
- return (React.createElement(quantum_product_1.DataTable, { items: transformTypographySubGroup('font_size'), columns: [
103
+ 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: [
157
106
  {
158
107
  field: 'id',
159
108
  title: 'Token',
@@ -166,7 +115,7 @@ var FontSizeTokens = function () {
166
115
  title: 'Value',
167
116
  render: function (_a) {
168
117
  var item = _a.item;
169
- return React.createElement(quantum_product_1.Code, null, item.value);
118
+ return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
170
119
  },
171
120
  },
172
121
  { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
@@ -179,10 +128,10 @@ var FontSizeTokens = function () {
179
128
  } },
180
129
  ] }));
181
130
  };
182
- exports.FontSizeTokens = FontSizeTokens;
183
- var SimpleFontValueTokens = function (_a) {
184
- var prefix = _a.prefix;
185
- return (React.createElement(quantum_product_1.DataTable, { items: transformTypographySubGroup(prefix), columns: [
131
+ exports.TypographyTokens = TypographyTokens;
132
+ 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: [
186
135
  {
187
136
  field: 'id',
188
137
  title: 'Token',
@@ -195,7 +144,7 @@ var SimpleFontValueTokens = function (_a) {
195
144
  title: 'Value',
196
145
  render: function (_a) {
197
146
  var item = _a.item;
198
- return React.createElement(quantum_product_1.Code, null, item.value);
147
+ return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
199
148
  },
200
149
  },
201
150
  { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
@@ -208,4 +157,4 @@ var SimpleFontValueTokens = function (_a) {
208
157
  } },
209
158
  ] }));
210
159
  };
211
- exports.SimpleFontValueTokens = SimpleFontValueTokens;
160
+ exports.TypographyGlobalTokens = TypographyGlobalTokens;
package/logo/logo.d.ts CHANGED
@@ -2,14 +2,14 @@ import * as React from 'react';
2
2
  import { IStyledComponentProps, IStyledOwnerStateProps } from '../styled';
3
3
  import { LogoClasses } from './logo-classes';
4
4
  export declare type LogoSize = 'xsmall' | 'small' | 'medium';
5
- export declare type LogoColor = 'default' | 'dark' | 'light' | 'white';
5
+ export declare type LogoColor = 'default' | 'dark' | 'light' | 'white' | 'decorative';
6
6
  export declare const Root: import("styled-components").StyledComponent<"div", import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme> & IStyledOwnerStateProps<{
7
7
  size?: LogoSize | undefined;
8
8
  color: LogoColor;
9
9
  }>, never>;
10
10
  export declare type ILogoProps = IStyledComponentProps<{
11
11
  props: {
12
- color?: 'default' | 'dark' | 'light' | 'white';
12
+ color?: 'default' | 'dark' | 'light' | 'white' | 'decorative';
13
13
  size?: 'xsmall' | 'small' | 'medium';
14
14
  classes?: Partial<LogoClasses>;
15
15
  /** allows loading external logos */
@@ -18,7 +18,7 @@ export declare type ILogoProps = IStyledComponentProps<{
18
18
  defaultComponent: 'div';
19
19
  }>;
20
20
  export declare const Logo: React.ForwardRefExoticComponent<{
21
- color?: "light" | "dark" | "default" | "white" | undefined;
21
+ color?: "light" | "dark" | "default" | "white" | "decorative" | undefined;
22
22
  size?: "small" | "medium" | "xsmall" | undefined;
23
23
  classes?: Partial<Record<"svg" | "root", string>> | undefined;
24
24
  /** allows loading external logos */
package/logo/logo.js CHANGED
@@ -66,12 +66,11 @@ exports.Root = (0, styled_1.styled)('div', {
66
66
  white: theme.tokens.color_fg_inverse_static,
67
67
  light: theme.tokens.color_fg_default,
68
68
  default: theme.tokens.color_fg_brand_primary,
69
- }[ownerState.color || 'default'], display: 'inline-block', width: theme.typography.pxToRem(29), height: theme.typography.pxToRem(32) }, (ownerState.size === 'xsmall' && {
70
- width: theme.typography.pxToRem(17),
69
+ decorative: theme.tokens.color_fg_decorative,
70
+ }[ownerState.color || 'default'], display: 'inline-block', width: 'auto', height: theme.typography.pxToRem(36) }, (ownerState.size === 'xsmall' && {
71
71
  height: theme.typography.pxToRem(19),
72
72
  })), (ownerState.size === 'small' && {
73
- width: theme.typography.pxToRem(25),
74
- height: theme.typography.pxToRem(27),
73
+ height: theme.typography.pxToRem(30),
75
74
  }));
76
75
  });
77
76
  var StyledSvg = (0, styled_1.styled)('svg', {
@@ -79,22 +78,18 @@ var StyledSvg = (0, styled_1.styled)('svg', {
79
78
  slot: 'Svg',
80
79
  })(function (_a) {
81
80
  var theme = _a.theme, ownerState = _a.ownerState;
82
- return __assign(__assign({ display: 'block', width: theme.typography.pxToRem(29), height: theme.typography.pxToRem(32) }, (ownerState.size === 'xsmall' && {
83
- width: theme.typography.pxToRem(17),
81
+ return __assign(__assign({ display: 'block', width: 'auto', height: theme.typography.pxToRem(36) }, (ownerState.size === 'xsmall' && {
84
82
  height: theme.typography.pxToRem(19),
85
83
  })), (ownerState.size === 'small' && {
86
- width: theme.typography.pxToRem(25),
87
- height: theme.typography.pxToRem(27),
84
+ height: theme.typography.pxToRem(30),
88
85
  }));
89
86
  });
90
87
  var LogoImage = (0, styled_1.styled)(image_1.Image)(function (_a) {
91
88
  var theme = _a.theme, ownerState = _a.ownerState;
92
- return (__assign(__assign({ display: 'block', width: theme.typography.pxToRem(29), height: theme.typography.pxToRem(32) }, (ownerState.size === 'xsmall' && {
93
- width: theme.typography.pxToRem(17),
89
+ return (__assign(__assign({ display: 'block', width: 'auto', height: theme.typography.pxToRem(36) }, (ownerState.size === 'xsmall' && {
94
90
  height: theme.typography.pxToRem(19),
95
91
  })), (ownerState.size === 'small' && {
96
- width: theme.typography.pxToRem(25),
97
- height: theme.typography.pxToRem(27),
92
+ height: theme.typography.pxToRem(30),
98
93
  })));
99
94
  });
100
95
  var useUtilityClasses = function (_a) {
@@ -112,8 +107,6 @@ exports.Logo = React.forwardRef(function (inProps, ref) {
112
107
  });
113
108
  var classes = useUtilityClasses(props);
114
109
  var size = props.size, color = props.color, className = props.className, iconSrc = props.iconSrc, rootProps = __rest(props, ["size", "color", "className", "iconSrc"]);
115
- return (React.createElement(exports.Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className), ownerState: { size: size, color: color } }, rootProps), iconSrc ? (React.createElement(LogoImage, { src: iconSrc, ownerState: { size: size }, fit: "contain", alt: "Logo" })) : (React.createElement(StyledSvg, { className: classes.svg, ownerState: { size: size }, viewBox: "0 0 29 32" },
116
- React.createElement("g", { transform: "translate(-100.000000, -88.000000)", fill: "currentColor" },
117
- React.createElement("g", { transform: "translate(100.000000, 88.000000)" },
118
- React.createElement("path", { d: "M22.9616476,25.864 L19.715652,15.9851429 L28.2126476,9.88133333 L17.7094918,9.88133333 L14.4633035,0.00285714286 L14.4623403,0.00019047619 L24.9670372,0.00019047619 L28.2139961,9.88038095 L28.2141888,9.88019048 L28.2168857,9.87866667 C30.1024528,15.6104762 28.160442,22.1297143 22.9616476,25.864 L22.9616476,25.864 L22.9616476,25.864 Z M5.96418875,25.864 L5.96149178,25.8659048 L14.4606065,31.9712381 L22.9616476,25.8641905 L14.4633035,19.7586667 L5.96418875,25.864 L5.96418875,25.864 L5.96418875,25.864 Z M0.711069704,9.87885714 L0.711069704,9.87885714 C-1.27389999,15.9209524 1.03027533,22.3232381 5.96245499,25.8651429 L5.96322555,25.8620952 L9.2096065,15.9838095 L0.714537237,9.88114286 L11.2151888,9.88114286 L14.4615697,0.00266666667 L14.4623403,0 L3.95706538,0 L0.711069704,9.87885714 L0.711069704,9.87885714 L0.711069704,9.87885714 Z" })))))));
110
+ return (React.createElement(exports.Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className), ownerState: { size: size, color: color } }, rootProps), iconSrc ? (React.createElement(LogoImage, { src: iconSrc, ownerState: { size: size }, fit: "contain", alt: "Logo" })) : (React.createElement(StyledSvg, { fill: "currentColor", viewBox: "0 0 53 64", className: classes.svg, ownerState: { size: size } },
111
+ React.createElement("path", { d: "M3.372 27.782c10.475-1.728 18.686-10.4 20.407-20.892l.577-5.043c.143-.802-.4-1.918-1.412-1.838C15.03.628 7.56 3.243 3.406 4.943A5.488 5.488 0 000 10.027v16.451c0 .973.874 1.717 1.834 1.563l1.538-.252v-.006zM28.831 6.89c1.726 10.492 9.938 19.164 20.407 20.893l1.537.252c.96.16 1.835-.584 1.835-1.563v-16.45a5.488 5.488 0 00-3.406-5.084C45.044 3.232 37.58.622 29.666.004c-1.018-.08-1.538 1.048-1.418 1.837l.577 5.043.006.006zM49.23 32.39C34.915 35.219 28.27 44.75 28.27 62.79c0 .905.897 1.535 1.651 1.031 6.584-4.447 21.07-16.056 22.562-30.577.057-1.826-2.223-.968-3.252-.853zM3.377 32.39c14.315 2.828 20.961 12.359 20.961 30.4 0 .905-.897 1.535-1.651 1.031C16.103 59.374 1.617 47.765.125 33.244c-.057-1.826 2.223-.968 3.252-.853z" })))));
119
112
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.5.18",
3
+ "version": "1.5.19",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
@@ -30,8 +30,8 @@
30
30
  "react-dom": "*"
31
31
  },
32
32
  "scripts": {
33
- "artifactory": "cd ./build && npm publish ",
34
- "build-storybook": "build-storybook",
33
+ "artifactory": "cd ./build && npm publish",
34
+ "build-storybook": "storybook build",
35
35
  "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
36
36
  "build:cjs": "tsc --project ./tsconfig.publish.json",
37
37
  "build:esm": "tsc --project ./tsconfig.publish.esm.json",
@@ -39,28 +39,33 @@
39
39
  "illustrations": "rm -rf src/illustrations/components && yarn svgr --config-file .svgr.illustration.js -d src/illustrations/components src/illustrations/svg",
40
40
  "clean": "rm -rf ./build",
41
41
  "copy:files": "node scripts/copy-files.js",
42
- "storybook": "start-storybook -p 6006",
42
+ "storybook": "storybook dev -p 6006",
43
43
  "verify": "yarn tsc --noEmit",
44
44
  "test": "jest"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@a0/quantum-fonts": "^1.0.0",
48
- "@babel/core": "^7.14.6",
48
+ "@babel/core": "^7.22.10",
49
49
  "@faker-js/faker": "^7.4.0",
50
- "@storybook/addon-a11y": "6.5.10",
51
- "@storybook/addon-actions": "6.5.10",
52
- "@storybook/addon-essentials": "6.5.10",
53
- "@storybook/addon-links": "6.5.10",
54
- "@storybook/react": "6.5.10",
55
- "@storybook/theming": "6.5.10",
50
+ "@storybook/addon-a11y": "^7.3.2",
51
+ "@storybook/addon-actions": "^7.3.2",
52
+ "@storybook/addon-essentials": "^7.3.2",
53
+ "@storybook/addon-links": "^7.3.2",
54
+ "@storybook/addon-mdx-gfm": "^7.3.2",
55
+ "@storybook/addon-themes": "^7.3.2",
56
+ "@storybook/blocks": "^7.3.2",
57
+ "@storybook/react": "7.3.2",
58
+ "@storybook/react-webpack5": "7.3.2",
59
+ "@storybook/theming": "7.3.2",
56
60
  "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
57
61
  "@svgr/cli": "^5.5.0",
58
62
  "@testing-library/react": "v12.1.5",
59
63
  "@types/md5": "^2.3.2",
60
- "@types/node": "12.12.47",
61
- "babel-loader": "^8.2.2",
64
+ "@types/node": "^18.16.19",
65
+ "babel-loader": "^9.1.3",
62
66
  "chromatic": "^6.5.4",
63
67
  "figma-js": "^1.15.0",
68
+ "storybook": "7.3.2",
64
69
  "storybook-addon-designs": "^6.3.1",
65
70
  "storybook-addon-themes": "^6.1.0",
66
71
  "styled-components": "^5.3.3"