@okta/odyssey-react-mui 1.1.1 → 1.2.0

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 (110) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/Autocomplete.js +12 -1
  3. package/dist/Autocomplete.js.map +1 -1
  4. package/dist/OdysseyCacheProvider.js +4 -1
  5. package/dist/OdysseyCacheProvider.js.map +1 -1
  6. package/dist/OdysseyProvider.js +5 -1
  7. package/dist/OdysseyProvider.js.map +1 -1
  8. package/dist/OdysseyThemeProvider.js +5 -1
  9. package/dist/OdysseyThemeProvider.js.map +1 -1
  10. package/dist/OdysseyTranslationProvider.js +1 -1
  11. package/dist/OdysseyTranslationProvider.js.map +1 -1
  12. package/dist/PasswordField.js +11 -3
  13. package/dist/PasswordField.js.map +1 -1
  14. package/dist/Select.js +34 -33
  15. package/dist/Select.js.map +1 -1
  16. package/dist/Typography.js +0 -22
  17. package/dist/Typography.js.map +1 -1
  18. package/dist/createShadowDom.js +26 -0
  19. package/dist/createShadowDom.js.map +1 -0
  20. package/dist/{OdysseyI18n.js → i18n.js} +3 -2
  21. package/dist/i18n.js.map +1 -0
  22. package/dist/index.js +1 -0
  23. package/dist/index.js.map +1 -1
  24. package/dist/labs/datePickerTheme.js +4 -2
  25. package/dist/labs/datePickerTheme.js.map +1 -1
  26. package/dist/properties/ts/odyssey-react-mui.js +2 -0
  27. package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
  28. package/dist/src/Autocomplete.d.ts +23 -3
  29. package/dist/src/Autocomplete.d.ts.map +1 -1
  30. package/dist/src/OdysseyCacheProvider.d.ts +6 -1
  31. package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
  32. package/dist/src/OdysseyProvider.d.ts +1 -1
  33. package/dist/src/OdysseyProvider.d.ts.map +1 -1
  34. package/dist/src/OdysseyThemeProvider.d.ts +2 -1
  35. package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
  36. package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
  37. package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
  38. package/dist/src/PasswordField.d.ts +8 -0
  39. package/dist/src/PasswordField.d.ts.map +1 -1
  40. package/dist/src/Select.d.ts +1 -54
  41. package/dist/src/Select.d.ts.map +1 -1
  42. package/dist/src/Typography.d.ts +11 -15
  43. package/dist/src/Typography.d.ts.map +1 -1
  44. package/dist/src/createShadowDom.d.ts +16 -0
  45. package/dist/src/createShadowDom.d.ts.map +1 -0
  46. package/dist/src/{OdysseyI18n.d.ts → i18n.d.ts} +5 -2
  47. package/dist/src/i18n.d.ts.map +1 -0
  48. package/dist/src/index.d.ts +1 -0
  49. package/dist/src/index.d.ts.map +1 -1
  50. package/dist/src/properties/ts/odyssey-react-mui.d.ts +2 -0
  51. package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  52. package/dist/src/theme/components.d.ts +4 -1
  53. package/dist/src/theme/components.d.ts.map +1 -1
  54. package/dist/src/theme/createOdysseyMuiTheme.d.ts +23 -0
  55. package/dist/src/theme/createOdysseyMuiTheme.d.ts.map +1 -0
  56. package/dist/src/theme/mixins.d.ts +3 -1
  57. package/dist/src/theme/mixins.d.ts.map +1 -1
  58. package/dist/src/theme/palette.d.ts +3 -1
  59. package/dist/src/theme/palette.d.ts.map +1 -1
  60. package/dist/src/theme/shape.d.ts +3 -1
  61. package/dist/src/theme/shape.d.ts.map +1 -1
  62. package/dist/src/theme/spacing.d.ts +3 -1
  63. package/dist/src/theme/spacing.d.ts.map +1 -1
  64. package/dist/src/theme/theme.d.ts +1 -8
  65. package/dist/src/theme/theme.d.ts.map +1 -1
  66. package/dist/src/theme/typography.d.ts +3 -1
  67. package/dist/src/theme/typography.d.ts.map +1 -1
  68. package/dist/theme/components.js +80 -63
  69. package/dist/theme/components.js.map +1 -1
  70. package/dist/theme/createOdysseyMuiTheme.js +51 -0
  71. package/dist/theme/createOdysseyMuiTheme.js.map +1 -0
  72. package/dist/theme/mixins.js +4 -1
  73. package/dist/theme/mixins.js.map +1 -1
  74. package/dist/theme/palette.js +4 -1
  75. package/dist/theme/palette.js.map +1 -1
  76. package/dist/theme/shape.js +4 -1
  77. package/dist/theme/shape.js.map +1 -1
  78. package/dist/theme/spacing.js +4 -1
  79. package/dist/theme/spacing.js.map +1 -1
  80. package/dist/theme/theme.js +1 -20
  81. package/dist/theme/theme.js.map +1 -1
  82. package/dist/theme/typography.js +4 -1
  83. package/dist/theme/typography.js.map +1 -1
  84. package/dist/tsconfig.production.tsbuildinfo +1 -1
  85. package/package.json +4 -4
  86. package/src/Autocomplete.tsx +44 -3
  87. package/src/OdysseyCacheProvider.tsx +9 -1
  88. package/src/OdysseyProvider.tsx +9 -2
  89. package/src/OdysseyThemeProvider.tsx +8 -2
  90. package/src/OdysseyTranslationProvider.test.tsx +2 -2
  91. package/src/OdysseyTranslationProvider.tsx +1 -1
  92. package/src/PasswordField.tsx +24 -8
  93. package/src/Select.tsx +147 -152
  94. package/src/Typography.tsx +0 -26
  95. package/src/createShadowDom.ts +46 -0
  96. package/src/{OdysseyI18n.ts → i18n.ts} +2 -2
  97. package/src/index.ts +1 -0
  98. package/src/labs/datePickerTheme.tsx +2 -2
  99. package/src/properties/odyssey-react-mui.properties +2 -0
  100. package/src/properties/ts/odyssey-react-mui.ts +1 -1
  101. package/src/theme/components.tsx +26 -9
  102. package/src/theme/createOdysseyMuiTheme.ts +47 -0
  103. package/src/theme/mixins.ts +5 -1
  104. package/src/theme/palette.ts +5 -3
  105. package/src/theme/shape.ts +5 -1
  106. package/src/theme/spacing.ts +5 -3
  107. package/src/theme/theme.ts +1 -26
  108. package/src/theme/typography.ts +5 -3
  109. package/dist/OdysseyI18n.js.map +0 -1
  110. package/dist/src/OdysseyI18n.d.ts.map +0 -1
@@ -70,10 +70,6 @@ export type TypographyProps = {
70
70
  * The text content of the component.
71
71
  */
72
72
  children: ReactNode;
73
- /**
74
- * Additional classes to add to the component.
75
- */
76
- classes?: object;
77
73
  /**
78
74
  * The color of the text.
79
75
  */
@@ -93,7 +89,6 @@ const Typography = ({
93
89
  ariaLabel,
94
90
  ariaLabelledBy,
95
91
  children,
96
- classes,
97
92
  color,
98
93
  component: componentProp,
99
94
  testId,
@@ -118,7 +113,6 @@ const Typography = ({
118
113
  aria-label={ariaLabel}
119
114
  aria-labelledby={ariaLabelledBy}
120
115
  children={children}
121
- classes={classes}
122
116
  color={color}
123
117
  component={component}
124
118
  data-se={testId}
@@ -135,7 +129,6 @@ const Heading1 = ({
135
129
  ariaLabel,
136
130
  ariaLabelledBy,
137
131
  children,
138
- classes,
139
132
  color,
140
133
  component,
141
134
  testId,
@@ -145,7 +138,6 @@ const Heading1 = ({
145
138
  ariaLabel={ariaLabel}
146
139
  ariaLabelledBy={ariaLabelledBy}
147
140
  children={children}
148
- classes={classes}
149
141
  color={color}
150
142
  component={component}
151
143
  data-se={testId}
@@ -161,7 +153,6 @@ const Heading2 = ({
161
153
  ariaLabel,
162
154
  ariaLabelledBy,
163
155
  children,
164
- classes,
165
156
  color,
166
157
  component,
167
158
  testId,
@@ -171,7 +162,6 @@ const Heading2 = ({
171
162
  ariaLabel={ariaLabel}
172
163
  ariaLabelledBy={ariaLabelledBy}
173
164
  children={children}
174
- classes={classes}
175
165
  color={color}
176
166
  component={component}
177
167
  data-se={testId}
@@ -187,7 +177,6 @@ const Heading3 = ({
187
177
  ariaLabel,
188
178
  ariaLabelledBy,
189
179
  children,
190
- classes,
191
180
  color,
192
181
  component,
193
182
  testId,
@@ -197,7 +186,6 @@ const Heading3 = ({
197
186
  ariaLabel={ariaLabel}
198
187
  ariaLabelledBy={ariaLabelledBy}
199
188
  children={children}
200
- classes={classes}
201
189
  color={color}
202
190
  component={component}
203
191
  data-se={testId}
@@ -213,7 +201,6 @@ const Heading4 = ({
213
201
  ariaLabel,
214
202
  ariaLabelledBy,
215
203
  children,
216
- classes,
217
204
  color,
218
205
  component,
219
206
  testId,
@@ -223,7 +210,6 @@ const Heading4 = ({
223
210
  ariaLabel={ariaLabel}
224
211
  ariaLabelledBy={ariaLabelledBy}
225
212
  children={children}
226
- classes={classes}
227
213
  color={color}
228
214
  component={component}
229
215
  data-se={testId}
@@ -239,7 +225,6 @@ const Heading5 = ({
239
225
  ariaLabel,
240
226
  ariaLabelledBy,
241
227
  children,
242
- classes,
243
228
  color,
244
229
  component,
245
230
  testId,
@@ -249,7 +234,6 @@ const Heading5 = ({
249
234
  ariaLabel={ariaLabel}
250
235
  ariaLabelledBy={ariaLabelledBy}
251
236
  children={children}
252
- classes={classes}
253
237
  color={color}
254
238
  component={component}
255
239
  data-se={testId}
@@ -265,7 +249,6 @@ const Heading6 = ({
265
249
  ariaLabel,
266
250
  ariaLabelledBy,
267
251
  children,
268
- classes,
269
252
  color,
270
253
  component,
271
254
  testId,
@@ -275,7 +258,6 @@ const Heading6 = ({
275
258
  ariaLabel={ariaLabel}
276
259
  ariaLabelledBy={ariaLabelledBy}
277
260
  children={children}
278
- classes={classes}
279
261
  color={color}
280
262
  component={component}
281
263
  data-se={testId}
@@ -291,7 +273,6 @@ const Paragraph = ({
291
273
  ariaLabel,
292
274
  ariaLabelledBy,
293
275
  children,
294
- classes,
295
276
  color,
296
277
  component,
297
278
  testId,
@@ -301,7 +282,6 @@ const Paragraph = ({
301
282
  ariaLabel={ariaLabel}
302
283
  ariaLabelledBy={ariaLabelledBy}
303
284
  children={children}
304
- classes={classes}
305
285
  color={color}
306
286
  component={component}
307
287
  data-se={testId}
@@ -317,7 +297,6 @@ const Subordinate = ({
317
297
  ariaLabel,
318
298
  ariaLabelledBy,
319
299
  children,
320
- classes,
321
300
  color,
322
301
  component,
323
302
  testId,
@@ -327,7 +306,6 @@ const Subordinate = ({
327
306
  ariaLabel={ariaLabel}
328
307
  ariaLabelledBy={ariaLabelledBy}
329
308
  children={children}
330
- classes={classes}
331
309
  color={color}
332
310
  component={component}
333
311
  data-se={testId}
@@ -343,7 +321,6 @@ const Support = ({
343
321
  ariaLabel,
344
322
  ariaLabelledBy,
345
323
  children,
346
- classes,
347
324
  color,
348
325
  component,
349
326
  testId,
@@ -353,7 +330,6 @@ const Support = ({
353
330
  ariaLabel={ariaLabel}
354
331
  ariaLabelledBy={ariaLabelledBy}
355
332
  children={children}
356
- classes={classes}
357
333
  color={color}
358
334
  component={component}
359
335
  data-se={testId}
@@ -369,7 +345,6 @@ const Legend = ({
369
345
  ariaLabel,
370
346
  ariaLabelledBy,
371
347
  children,
372
- classes,
373
348
  color,
374
349
  component,
375
350
  testId,
@@ -379,7 +354,6 @@ const Legend = ({
379
354
  ariaLabel={ariaLabel}
380
355
  ariaLabelledBy={ariaLabelledBy}
381
356
  children={children}
382
- classes={classes}
383
357
  color={color}
384
358
  component={component}
385
359
  data-se={testId}
@@ -0,0 +1,46 @@
1
+ /*!
2
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
+ *
5
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
+ * Unless required by applicable law or agreed to in writing, software
7
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
+ *
10
+ * See the License for the specific language governing permissions and limitations under the License.
11
+ */
12
+
13
+ export const createShadowDom = (containerElement: HTMLElement) => {
14
+ const shadowContainer = containerElement.attachShadow({ mode: "open" });
15
+ const emotionRootElement = document.createElement("style");
16
+ const shadowRootElement = document.createElement("div");
17
+
18
+ shadowContainer.appendChild(emotionRootElement);
19
+ shadowContainer.appendChild(shadowRootElement);
20
+
21
+ return {
22
+ emotionRootElement,
23
+ shadowRootElement,
24
+ };
25
+ };
26
+
27
+ // --DOCS--
28
+
29
+ // const {
30
+ // emotionRootElement,
31
+ // shadowRootElement,
32
+ // } = (
33
+ // createShadowDom(
34
+ // document.querySelector('#root') as HTMLElement
35
+ // )
36
+ // )
37
+
38
+ // ReactDOM
39
+ // .createRoot(
40
+ // shadowRootElement
41
+ // )
42
+ // .render(
43
+ // <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>
44
+ // <App />
45
+ // </OdysseyProvider>
46
+ // )
@@ -103,5 +103,5 @@ Object.entries(resources).forEach(([locale, property]) => {
103
103
  i18n.addResourceBundle(locale, defaultNS, property);
104
104
  });
105
105
 
106
- // eslint-disable-next-line import/no-default-export
107
- export default i18n;
106
+ export const odysseyTranslate = i18n.t.bind(i18n);
107
+ export { i18n };
package/src/index.ts CHANGED
@@ -74,6 +74,7 @@ export * from "./MenuItem";
74
74
  export * from "./NativeSelect";
75
75
  export * from "./NullElement";
76
76
  export * from "./OdysseyCacheProvider";
77
+ export { odysseyTranslate } from "./i18n";
77
78
  export * from "./OdysseyProvider";
78
79
  export * from "./OdysseyThemeProvider";
79
80
  export * from "./OdysseyTranslationProvider";
@@ -19,11 +19,11 @@ import {
19
19
  } from "../icons.generated";
20
20
  import { createOdysseyMuiTheme } from "../theme";
21
21
  import { ThemeOptions } from "@mui/material";
22
- import * as Tokens from "@okta/odyssey-design-tokens";
22
+ import * as odysseyTokens from "@okta/odyssey-design-tokens";
23
23
 
24
24
  const popupSpacingValue = 5;
25
25
 
26
- const odysseyTheme = createOdysseyMuiTheme(Tokens);
26
+ const odysseyTheme = createOdysseyMuiTheme({ odysseyTokens });
27
27
 
28
28
  type ThemeStyles = ({
29
29
  theme,
@@ -1,6 +1,8 @@
1
1
  fielderror.screenreader.text = Error
2
2
  fieldlabel.optional.text = Optional
3
3
  fieldlabel.required.text = Required
4
+ passwordfield.icon.label.show = Show password
5
+ passwordfield.icon.label.hide = Hide password
4
6
  severity.error = error
5
7
  severity.info = info
6
8
  severity.success = success
@@ -1 +1 @@
1
- export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
1
+ export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
@@ -51,9 +51,13 @@ import {
51
51
  import { DesignTokens } from "./theme";
52
52
  import { CSSProperties } from "react";
53
53
 
54
- export const components = (
55
- odysseyTokens: DesignTokens
56
- ): ThemeOptions["components"] => {
54
+ export const components = ({
55
+ odysseyTokens,
56
+ shadowRootElement,
57
+ }: {
58
+ odysseyTokens: DesignTokens;
59
+ shadowRootElement?: HTMLDivElement;
60
+ }): ThemeOptions["components"] => {
57
61
  return {
58
62
  MuiAlert: {
59
63
  defaultProps: {
@@ -1601,6 +1605,14 @@ export const components = (
1601
1605
  },
1602
1606
  },
1603
1607
  },
1608
+ MuiListItemIcon: {
1609
+ styleOverrides: {
1610
+ root: {
1611
+ minWidth: "unset",
1612
+ color: "inherit",
1613
+ },
1614
+ },
1615
+ },
1604
1616
  MuiListSubheader: {
1605
1617
  styleOverrides: {
1606
1618
  root: {
@@ -1694,12 +1706,9 @@ export const components = (
1694
1706
  }),
1695
1707
  },
1696
1708
  },
1697
- MuiListItemIcon: {
1698
- styleOverrides: {
1699
- root: {
1700
- minWidth: "unset",
1701
- color: "inherit",
1702
- },
1709
+ MuiModal: {
1710
+ defaultProps: {
1711
+ container: shadowRootElement,
1703
1712
  },
1704
1713
  },
1705
1714
  MuiNativeSelect: {
@@ -1720,6 +1729,9 @@ export const components = (
1720
1729
  },
1721
1730
  },
1722
1731
  MuiPopover: {
1732
+ defaultProps: {
1733
+ container: shadowRootElement,
1734
+ },
1723
1735
  styleOverrides: {
1724
1736
  paper: {
1725
1737
  marginBlockStart: odysseyTokens.Spacing1,
@@ -1729,6 +1741,11 @@ export const components = (
1729
1741
  },
1730
1742
  },
1731
1743
  },
1744
+ MuiPopper: {
1745
+ defaultProps: {
1746
+ container: shadowRootElement,
1747
+ },
1748
+ },
1732
1749
  MuiRadio: {
1733
1750
  defaultProps: {
1734
1751
  size: "small",
@@ -0,0 +1,47 @@
1
+ /*!
2
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
+ *
5
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
+ * Unless required by applicable law or agreed to in writing, software
7
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
+ *
10
+ * See the License for the specific language governing permissions and limitations under the License.
11
+ */
12
+
13
+ import { createTheme } from "@mui/material/styles";
14
+ import * as Tokens from "@okta/odyssey-design-tokens";
15
+
16
+ import { components } from "./components";
17
+ import { mixins } from "./mixins";
18
+ import { palette } from "./palette";
19
+ import { shape } from "./shape";
20
+ import { spacing } from "./spacing";
21
+ import { typography } from "./typography";
22
+ import "./components.types";
23
+ import "./mixins.types";
24
+ import "./palette.types";
25
+ import "./typography.types";
26
+
27
+ export type DesignTokens = typeof Tokens;
28
+ export type DesignTokensOverride = Partial<typeof Tokens>;
29
+
30
+ export const createOdysseyMuiTheme = ({
31
+ odysseyTokens,
32
+ shadowRootElement,
33
+ }: {
34
+ odysseyTokens: DesignTokens;
35
+ shadowRootElement?: HTMLDivElement;
36
+ }) =>
37
+ createTheme({
38
+ components: components({
39
+ odysseyTokens,
40
+ shadowRootElement,
41
+ }),
42
+ mixins: mixins({ odysseyTokens }),
43
+ palette: palette({ odysseyTokens }),
44
+ shape: shape({ odysseyTokens }),
45
+ spacing: spacing({ odysseyTokens }),
46
+ typography: typography({ odysseyTokens }),
47
+ });
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const mixins = (odysseyTokens: DesignTokens): ThemeOptions["mixins"] => {
17
+ export const mixins = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["mixins"] => {
18
22
  return {
19
23
  maxWidth: odysseyTokens.TypographyLineLengthMax,
20
24
  borderRadius: odysseyTokens.BorderRadiusMain,
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const palette = (
18
- odysseyTokens: DesignTokens
19
- ): ThemeOptions["palette"] => {
17
+ export const palette = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["palette"] => {
20
22
  return {
21
23
  mode: "light",
22
24
  common: {
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const shape = (odysseyTokens: DesignTokens): ThemeOptions["shape"] => {
17
+ export const shape = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["shape"] => {
18
22
  // Strip units from BorderRadiusBase to accommodate MUI's typing
19
23
  const NumericalBorderRadiusBase =
20
24
  typeof odysseyTokens.BorderRadiusMain === "string"
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import type { DesignTokens } from "./theme";
16
16
 
17
- export const spacing = (
18
- odysseyTokens: DesignTokens
19
- ): ThemeOptions["spacing"] => {
17
+ export const spacing = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["spacing"] => {
20
22
  return [
21
23
  odysseyTokens.Spacing0,
22
24
  odysseyTokens.Spacing1,
@@ -10,29 +10,4 @@
10
10
  * See the License for the specific language governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- import { createTheme } from "@mui/material/styles";
14
- import * as Tokens from "@okta/odyssey-design-tokens";
15
-
16
- import { components } from "./components";
17
- import { mixins } from "./mixins";
18
- import { palette } from "./palette";
19
- import { shape } from "./shape";
20
- import { spacing } from "./spacing";
21
- import { typography } from "./typography";
22
- import "./components.types";
23
- import "./mixins.types";
24
- import "./palette.types";
25
- import "./typography.types";
26
-
27
- export type DesignTokens = typeof Tokens;
28
- export type DesignTokensOverride = Partial<typeof Tokens>;
29
-
30
- export const createOdysseyMuiTheme = (odysseyTokens: DesignTokens) =>
31
- createTheme({
32
- components: components(odysseyTokens),
33
- mixins: mixins(odysseyTokens),
34
- palette: palette(odysseyTokens),
35
- shape: shape(odysseyTokens),
36
- spacing: spacing(odysseyTokens),
37
- typography: typography(odysseyTokens),
38
- });
13
+ export * from "./createOdysseyMuiTheme";
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const typography = (
18
- odysseyTokens: DesignTokens
19
- ): ThemeOptions["typography"] => {
17
+ export const typography = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["typography"] => {
20
22
  return {
21
23
  htmlFontSize: 16,
22
24
  fontFamily: odysseyTokens.TypographyFamilyBody,
@@ -1 +0,0 @@
1
- {"version":3,"file":"OdysseyI18n.js","names":["i18n","initReactI18next","translation","cs","da","de","el","en","es","fi","fr","hu","id","it","ja","ko","ms","nb","nlNL","okPL","okSK","pl","ptBR","ro","ru","sv","th","tr","uk","vi","zhCN","znTW","supportedLanguages","defaultLNG","defaultNS","resources","nl_NL","ok_PL","ok_SK","pt_BR","zh_CN","zh_TW","use","init","ns","fallbackLng","supportedLngs","load","keySeparator","interpolation","escapeValue","skipOnVariables","react","useSuspense","bindI18nStore","Object","entries","forEach","_ref","locale","property","addResourceBundle"],"sources":["../src/OdysseyI18n.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\n\nimport { translation as cs } from \"./properties/ts/odyssey-react-mui_cs\";\nimport { translation as da } from \"./properties/ts/odyssey-react-mui_da\";\nimport { translation as de } from \"./properties/ts/odyssey-react-mui_de\";\nimport { translation as el } from \"./properties/ts/odyssey-react-mui_el\";\nimport { translation as en } from \"./properties/ts/odyssey-react-mui\";\nimport { translation as es } from \"./properties/ts/odyssey-react-mui_es\";\nimport { translation as fi } from \"./properties/ts/odyssey-react-mui_fi\";\nimport { translation as fr } from \"./properties/ts/odyssey-react-mui_fr\";\nimport { translation as hu } from \"./properties/ts/odyssey-react-mui_hu\";\nimport { translation as id } from \"./properties/ts/odyssey-react-mui_id\";\nimport { translation as it } from \"./properties/ts/odyssey-react-mui_it\";\nimport { translation as ja } from \"./properties/ts/odyssey-react-mui_ja\";\nimport { translation as ko } from \"./properties/ts/odyssey-react-mui_ko\";\nimport { translation as ms } from \"./properties/ts/odyssey-react-mui_ms\";\nimport { translation as nb } from \"./properties/ts/odyssey-react-mui_nb\";\nimport { translation as nlNL } from \"./properties/ts/odyssey-react-mui_nl_NL\";\nimport { translation as okPL } from \"./properties/ts/odyssey-react-mui_ok_PL\";\nimport { translation as okSK } from \"./properties/ts/odyssey-react-mui_ok_SK\";\nimport { translation as pl } from \"./properties/ts/odyssey-react-mui_pl\";\nimport { translation as ptBR } from \"./properties/ts/odyssey-react-mui_pt_BR\";\nimport { translation as ro } from \"./properties/ts/odyssey-react-mui_ro\";\nimport { translation as ru } from \"./properties/ts/odyssey-react-mui_ru\";\nimport { translation as sv } from \"./properties/ts/odyssey-react-mui_sv\";\nimport { translation as th } from \"./properties/ts/odyssey-react-mui_th\";\nimport { translation as tr } from \"./properties/ts/odyssey-react-mui_tr\";\nimport { translation as uk } from \"./properties/ts/odyssey-react-mui_uk\";\nimport { translation as vi } from \"./properties/ts/odyssey-react-mui_vi\";\nimport { translation as zhCN } from \"./properties/ts/odyssey-react-mui_zh_CN\";\nimport { translation as znTW } from \"./properties/ts/odyssey-react-mui_zh_TW\";\n\nimport {\n SupportedLanguages,\n supportedLanguages,\n} from \"./OdysseyTranslationProvider.types\";\n\nexport const defaultLNG: SupportedLanguages = \"en\";\nexport const defaultNS = \"translations\";\nexport const resources = {\n cs,\n da,\n de,\n el,\n en,\n es,\n fi,\n fr,\n hu,\n id,\n it,\n ja,\n ko,\n ms,\n nb,\n nl_NL: nlNL,\n ok_PL: okPL,\n ok_SK: okSK,\n pl,\n pt_BR: ptBR,\n ro,\n ru,\n sv,\n th,\n tr,\n uk,\n vi,\n zh_CN: zhCN,\n zh_TW: znTW,\n};\n\ni18n.use(initReactI18next).init({\n defaultNS,\n ns: [defaultNS],\n fallbackLng: defaultLNG,\n supportedLngs: supportedLanguages,\n load: \"currentOnly\",\n keySeparator: false,\n interpolation: {\n escapeValue: false, // react already safe from xss\n skipOnVariables: false, // to handle translations that use nesting\n },\n react: {\n useSuspense: false,\n bindI18nStore: \"added\",\n },\n});\n\nObject.entries(resources).forEach(([locale, property]) => {\n i18n.addResourceBundle(locale, defaultNS, property);\n});\n\n// eslint-disable-next-line import/no-default-export\nexport default i18n;\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"OdysseyI18n.d.ts","sourceRoot":"","sources":["../../src/OdysseyI18n.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AAiC3B,OAAO,EACL,kBAAkB,EAEnB,MAAM,oCAAoC,CAAC;AAE5C,eAAO,MAAM,UAAU,EAAE,kBAAyB,CAAC;AACnD,eAAO,MAAM,SAAS,iBAAiB,CAAC;AACxC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAC;AAwBF,eAAe,IAAI,CAAC"}