@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
261 lines (260 loc) • 7.45 kB
JavaScript
import * as O from "react";
import { P as r } from "./index-Sy88PpwE.js";
import { F as j, G as B, H as C, K as c } from "./identifier-PWESmBq6.js";
import { i as S } from "./index-8G2jvqZ8.js";
import { m as w } from "./memoTheme-DAFDflPY.js";
import { c as P } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { jsx as W } from "react/jsx-runtime";
import { u as M, s as R, c as N } from "./DefaultPropsProvider-DqazQPtr.js";
function D(e) {
return B("MuiTypography", e);
}
const L = j("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]), U = {
primary: !0,
secondary: !0,
error: !0,
info: !0,
success: !0,
warning: !0,
textPrimary: !0,
textSecondary: !0,
textDisabled: !0
}, A = S(), E = (e) => {
const {
align: o,
gutterBottom: t,
noWrap: a,
paragraph: s,
variant: p,
classes: i
} = e, n = {
root: ["root", p, e.align !== "inherit" && `align${c(o)}`, t && "gutterBottom", a && "noWrap", s && "paragraph"]
};
return N(n, D, i);
}, V = R("span", {
name: "MuiTypography",
slot: "Root",
overridesResolver: (e, o) => {
const {
ownerState: t
} = e;
return [o.root, t.variant && o[t.variant], t.align !== "inherit" && o[`align${c(t.align)}`], t.noWrap && o.noWrap, t.gutterBottom && o.gutterBottom, t.paragraph && o.paragraph];
}
})(w(({
theme: e
}) => {
var o;
return {
margin: 0,
variants: [{
props: {
variant: "inherit"
},
style: {
// Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
font: "inherit",
lineHeight: "inherit",
letterSpacing: "inherit"
}
}, ...Object.entries(e.typography).filter(([t, a]) => t !== "inherit" && a && typeof a == "object").map(([t, a]) => ({
props: {
variant: t
},
style: a
})), ...Object.entries(e.palette).filter(P()).map(([t]) => ({
props: {
color: t
},
style: {
color: (e.vars || e).palette[t].main
}
})), ...Object.entries(((o = e.palette) == null ? void 0 : o.text) || {}).filter(([, t]) => typeof t == "string").map(([t]) => ({
props: {
color: `text${c(t)}`
},
style: {
color: (e.vars || e).palette.text[t]
}
})), {
props: ({
ownerState: t
}) => t.align !== "inherit",
style: {
textAlign: "var(--Typography-textAlign)"
}
}, {
props: ({
ownerState: t
}) => t.noWrap,
style: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}
}, {
props: ({
ownerState: t
}) => t.gutterBottom,
style: {
marginBottom: "0.35em"
}
}, {
props: ({
ownerState: t
}) => t.paragraph,
style: {
marginBottom: 16
}
}]
};
})), b = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
subtitle1: "h6",
subtitle2: "h6",
body1: "p",
body2: "p",
inherit: "p"
}, $ = /* @__PURE__ */ O.forwardRef(function(o, t) {
const {
color: a,
...s
} = M({
props: o,
name: "MuiTypography"
}), p = !U[a], i = A({
...s,
...p && {
color: a
}
}), {
align: n = "inherit",
className: g,
component: h,
gutterBottom: d = !1,
noWrap: x = !1,
paragraph: y = !1,
variant: l = "body1",
variantMapping: m = b,
...u
} = i, f = {
...i,
align: n,
color: a,
className: g,
component: h,
gutterBottom: d,
noWrap: x,
paragraph: y,
variant: l,
variantMapping: m
}, v = h || (y ? "p" : m[l] || b[l]) || "span", T = E(f);
return /* @__PURE__ */ W(V, {
as: v,
ref: t,
className: C(T.root, g),
...u,
ownerState: f,
style: {
...n !== "inherit" && {
"--Typography-textAlign": n
},
...u.style
}
});
});
process.env.NODE_ENV !== "production" && ($.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Set the text-align on the component.
* @default 'inherit'
*/
align: r.oneOf(["center", "inherit", "justify", "left", "right"]),
/**
* The content of the component.
*/
children: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
*/
color: r.oneOfType([r.oneOf(["primary", "secondary", "success", "error", "info", "warning", "textPrimary", "textSecondary", "textDisabled"]), r.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: r.elementType,
/**
* If `true`, the text will have a bottom margin.
* @default false
*/
gutterBottom: r.bool,
/**
* If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
*
* Note that text overflow can only happen with block or inline-block level elements
* (the element needs to have a width in order to overflow).
* @default false
*/
noWrap: r.bool,
/**
* If `true`, the element will be a paragraph element.
* @default false
* @deprecated Use the `component` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
paragraph: r.bool,
/**
* @ignore
*/
style: r.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
/**
* Applies the theme typography styles.
* @default 'body1'
*/
variant: r.oneOfType([r.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), r.string]),
/**
* The component maps the variant prop to a range of different HTML element types.
* For instance, subtitle1 to `<h6>`.
* If you wish to change that mapping, you can provide your own.
* Alternatively, you can use the `component` prop.
* @default {
* h1: 'h1',
* h2: 'h2',
* h3: 'h3',
* h4: 'h4',
* h5: 'h5',
* h6: 'h6',
* subtitle1: 'h6',
* subtitle2: 'h6',
* body1: 'p',
* body2: 'p',
* inherit: 'p',
* }
*/
variantMapping: r.object
});
export {
$ as T,
D as g,
L as t
};