@okta/odyssey-react-mui 0.23.0 → 0.24.0

package/dist/src/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,KAAK,cAQA,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAWH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AAEzC,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,eAAO,MAAM,qBAAqB,kBAAmB,oBAAoB,yCAUxE,CAAC"}

package/dist/src/theme/typography.d.ts

@@ -10,5 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import type { ThemeOptions } from "@mui/material";
-export declare const typography: ThemeOptions["typography"];
+import { DesignTokensOverride } from ".";
+export declare const typography: (odysseyTokens: DesignTokensOverride) => ThemeOptions["typography"];
 //# sourceMappingURL=typography.d.ts.map

package/dist/src/theme/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/theme/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAkFjD,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/theme/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AAEzC,eAAO,MAAM,UAAU,kBACN,oBAAoB,KAClC,YAAY,CAAC,YAAY,CAoF3B,CAAC"}

package/dist/theme/components.js

@@ -8,8 +8,7 @@
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */
-import { buttonClasses } from "@mui/material/Button";
+ */import { buttonClasses } from "@mui/material/Button";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
 import { dividerClasses } from "@mui/material/Divider";
@@ -82,7 +81,8 @@ export const components = {
           ownerState,
           theme
         } = _ref2;
-        return { ...(ownerState.variant === "banner" && {
+        return {
+          ...(ownerState.variant === "banner" && {
             padding: 0,
             marginInlineEnd: 0,
             top: "50%",
@@ -233,7 +233,8 @@ export const components = {
           theme,
           ownerState
         } = _ref10;
-        return { ...(ownerState.readOnly === true && {
+        return {
+          ...(ownerState.readOnly === true && {
             backgroundColor: theme.palette.grey[50],
             [`&:not(:hover)`]: {
               borderColor: "transparent"
@@ -548,14 +549,14 @@ export const components = {
             backgroundColor: "transparent",
             borderColor: theme.palette.grey[900]
           },
-          ".Mui-error:hover > &": {
+          ".Mui-error:not(.Mui-valid):hover > &": {
             borderColor: theme.palette.error.dark,
             "&.Mui-checked": {
               backgroundColor: theme.palette.error.dark,
               borderColor: theme.palette.error.dark
             }
           },
-          ".Mui-error > &": {
+          ".Mui-error:not(.Mui-valid) > &": {
             borderColor: theme.palette.error.main,
             "&.Mui-checked": {
               backgroundColor: theme.palette.error.main,
@@ -574,7 +575,7 @@ export const components = {
           "&.Mui-disabled": {
             backgroundColor: theme.palette.grey[50],
             borderColor: theme.palette.grey[300],
-            ".Mui-error > &": {
+            ".Mui-error:not(.Mui-valid) > &": {
               backgroundColor: theme.palette.grey[50],
               borderColor: theme.palette.grey[300]
             },
@@ -702,7 +703,8 @@ export const components = {
           theme,
           ownerState
         } = _ref25;
-        return { ...(ownerState.color !== "inherit" && {
+        return {
+          ...(ownerState.color !== "inherit" && {
             color: theme.palette.primary.dark
           })
         };
@@ -711,7 +713,8 @@ export const components = {
         let {
           ownerState
         } = _ref26;
-        return { ...(ownerState.variant === "indeterminate" && {
+        return {
+          ...(ownerState.variant === "indeterminate" && {
             strokeDasharray: "160%, 360%"
           })
         };
@@ -1128,7 +1131,6 @@ export const components = {
           ownerState
         } = _ref34;
         return {
-          gap: theme.spacing(2),
           marginInlineStart: 0,
           marginInlineEnd: 0,
           ...(ownerState.labelPlacement === "start" && {
@@ -1160,7 +1162,20 @@ export const components = {
             color: theme.palette.error.dark
           }
         };
-      }
+      },
+      label: _ref35 => {
+        let {
+          theme
+        } = _ref35;
+        return {
+          "&:not(:first-child)": {
+            marginInlineStart: theme.spacing(2)
+          }
+        };
+      },
+      asterisk: () => ({
+        display: "none"
+      })
     }
   },
   MuiFormHelperText: {
@@ -1168,10 +1183,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: _ref35 => {
+      root: _ref36 => {
         let {
           theme
-        } = _ref35;
+        } = _ref36;
         return {
           fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
@@ -1191,10 +1206,10 @@ export const components = {
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: _ref36 => {
+      root: _ref37 => {
         let {
           theme
-        } = _ref36;
+        } = _ref37;
         return {
           color: theme.palette.text.primary,
           lineHeight: theme.typography.ui.lineHeight,
@@ -1210,18 +1225,18 @@ export const components = {
   },
   MuiIconButton: {
     styleOverrides: {
-      edgeEnd: _ref37 => {
+      edgeEnd: _ref38 => {
         let {
           theme
-        } = _ref37;
+        } = _ref38;
         return {
           marginInlineEnd: theme.spacing(1)
         };
       },
-      root: _ref38 => {
+      root: _ref39 => {
         let {
           theme
-        } = _ref38;
+        } = _ref39;
         return {
           padding: theme.spacing(1),
           fontSize: theme.typography.body1.fontSize,
@@ -1263,11 +1278,11 @@ export const components = {
   },
   MuiInputAdornment: {
     styleOverrides: {
-      root: _ref39 => {
+      root: _ref40 => {
         let {
           theme,
           ownerState
-        } = _ref39;
+        } = _ref40;
         return {
           display: "flex",
           minWidth: "1.25em",
@@ -1295,12 +1310,13 @@ export const components = {
       required: true
     },
     styleOverrides: {
-      root: _ref40 => {
+      root: _ref41 => {
         let {
           ownerState,
           theme
-        } = _ref40;
-        return { ...theme.typography.body1,
+        } = _ref41;
+        return {
+          ...theme.typography.body1,
           flex: "1",
           width: "auto",
           color: theme.palette.text.primary,
@@ -1349,10 +1365,10 @@ export const components = {
           }
         };
       },
-      input: _ref41 => {
+      input: _ref42 => {
         let {
           theme
-        } = _ref41;
+        } = _ref42;
         return {
           boxSizing: "border-box",
           height: "auto",
@@ -1382,10 +1398,10 @@ export const components = {
       shrink: false
     },
     styleOverrides: {
-      root: _ref42 => {
+      root: _ref43 => {
         let {
           ownerState
-        } = _ref42;
+        } = _ref43;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -1410,10 +1426,10 @@ export const components = {
   },
   MuiLink: {
     styleOverrides: {
-      root: _ref43 => {
+      root: _ref44 => {
         let {
           theme
-        } = _ref43;
+        } = _ref44;
         return {
           color: theme.palette.primary.main,
           textDecoration: "underline",
@@ -1457,10 +1473,10 @@ export const components = {
       props: {
         variant: "monochrome"
       },
-      style: _ref44 => {
+      style: _ref45 => {
         let {
           theme
-        } = _ref44;
+        } = _ref45;
         return {
           color: theme.palette.text.primary,
           textDecoration: "underline",
@@ -1489,10 +1505,10 @@ export const components = {
   },
   MuiListSubheader: {
     styleOverrides: {
-      root: _ref45 => {
+      root: _ref46 => {
         let {
           theme
-        } = _ref45;
+        } = _ref46;
         return {
           paddingBlock: theme.spacing(2),
           paddingInline: theme.spacing(4),
@@ -1507,11 +1523,11 @@ export const components = {
   },
   MuiMenuItem: {
     styleOverrides: {
-      root: _ref46 => {
+      root: _ref47 => {
         let {
           theme,
           ownerState
-        } = _ref46;
+        } = _ref47;
         return {
           gap: theme.spacing(2),
           minHeight: "unset",
@@ -1577,10 +1593,10 @@ export const components = {
           backgroundColor: "transparent"
         }
       },
-      icon: _ref47 => {
+      icon: _ref48 => {
         let {
           theme
-        } = _ref47;
+        } = _ref48;
         return {
           insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
@@ -1590,10 +1606,10 @@ export const components = {
   },
   MuiPopover: {
     styleOverrides: {
-      paper: _ref48 => {
+      paper: _ref49 => {
         let {
           theme
-        } = _ref48;
+        } = _ref49;
         return {
           marginBlockStart: theme.spacing(1),
           borderWidth: theme.mixins.borderWidth,
@@ -1610,10 +1626,10 @@ export const components = {
       checkedIcon: _jsx(_Fragment, {})
     },
     styleOverrides: {
-      root: _ref49 => {
+      root: _ref50 => {
         let {
           theme
-        } = _ref49;
+        } = _ref50;
         return {
           width: `${theme.typography.ui.lineHeight}em`,
           height: `${theme.typography.ui.lineHeight}em`,
@@ -1701,10 +1717,10 @@ export const components = {
       IconComponent: ChevronDownIcon
     },
     styleOverrides: {
-      select: _ref50 => {
+      select: _ref51 => {
         let {
           theme
-        } = _ref50;
+        } = _ref51;
         return {
           paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
           paddingInline: theme.spacing(3),
@@ -1720,11 +1736,12 @@ export const components = {
           }
         };
       },
-      icon: _ref51 => {
+      icon: _ref52 => {
         let {
           theme
-        } = _ref51;
+        } = _ref52;
         return {
+          right: "unset",
           insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
         };
@@ -1737,11 +1754,11 @@ export const components = {
       color: "inherit"
     },
     styleOverrides: {
-      root: _ref52 => {
+      root: _ref53 => {
         let {
           theme,
           ownerState
-        } = _ref52;
+        } = _ref53;
         return {
           fontSize: `${theme.typography.ui.lineHeight}rem`,
           ...(ownerState.fontSize === "small" && {
@@ -1759,11 +1776,11 @@ export const components = {
       iconPosition: "start"
     },
     styleOverrides: {
-      root: _ref53 => {
+      root: _ref54 => {
         let {
           theme,
           ownerState
-        } = _ref53;
+        } = _ref54;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           minWidth: "unset",
@@ -1824,11 +1841,11 @@ export const components = {
   },
   MuiTable: {
     styleOverrides: {
-      root: _ref54 => {
+      root: _ref55 => {
         let {
           theme,
           ownerState
-        } = _ref54;
+        } = _ref55;
         return {
           display: "table",
           width: "auto",
@@ -1860,12 +1877,13 @@ export const components = {
   },
   MuiTableCell: {
     styleOverrides: {
-      root: _ref55 => {
+      root: _ref56 => {
         let {
           theme,
           ownerState
-        } = _ref55;
-        return { ...theme.typography.body1,
+        } = _ref56;
+        return {
+          ...theme.typography.body1,
           maxWidth: theme.mixins.maxWidth,
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
           textAlign: "start",
@@ -1943,10 +1961,10 @@ export const components = {
       component: "figure"
     },
     styleOverrides: {
-      root: _ref56 => {
+      root: _ref57 => {
         let {
           theme
-        } = _ref56;
+        } = _ref57;
         return {
           width: "unset",
           maxWidth: "100%",
@@ -1963,10 +1981,10 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: _ref57 => {
+      root: _ref58 => {
         let {
           theme
-        } = _ref57;
+        } = _ref58;
         return {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
@@ -1987,10 +2005,10 @@ export const components = {
       IconComponent: ArrowDownIcon
     },
     styleOverrides: {
-      root: _ref58 => {
+      root: _ref59 => {
         let {
           theme
-        } = _ref58;
+        } = _ref59;
         return {
           cursor: "pointer",
           display: "inline-flex",
@@ -2019,11 +2037,11 @@ export const components = {
           }
         };
       },
-      icon: _ref59 => {
+      icon: _ref60 => {
         let {
           theme,
           ownerState
-        } = _ref59;
+        } = _ref60;
         return {
           fontSize: "inherit",
           marginInlineEnd: 0,
@@ -2052,19 +2070,19 @@ export const components = {
   },
   MuiTabs: {
     styleOverrides: {
-      root: _ref60 => {
+      root: _ref61 => {
         let {
           theme
-        } = _ref60;
+        } = _ref61;
         return {
           minHeight: "unset",
           marginBottom: theme.spacing(5)
         };
       },
-      flexContainer: _ref61 => {
+      flexContainer: _ref62 => {
         let {
           theme
-        } = _ref61;
+        } = _ref62;
         return {
           gap: theme.spacing(5),
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
@@ -2080,11 +2098,11 @@ export const components = {
       placement: "top"
     },
     styleOverrides: {
-      tooltip: _ref62 => {
+      tooltip: _ref63 => {
         let {
           theme,
           ownerState
-        } = _ref62;
+        } = _ref63;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           paddingBlock: theme.spacing(2),
@@ -2144,10 +2162,10 @@ export const components = {
           }
         };
       },
-      arrow: _ref63 => {
+      arrow: _ref64 => {
         let {
           theme
-        } = _ref63;
+        } = _ref64;
         return {
           color: theme.palette.grey[900],
           "&::before": {
@@ -2186,10 +2204,10 @@ export const components = {
       }
     },
     styleOverrides: {
-      paragraph: _ref64 => {
+      paragraph: _ref65 => {
         let {
           theme
-        } = _ref64;
+        } = _ref65;
         return {
           marginBottom: theme.spacing(4)
         };