@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
255 lines (254 loc) • 8.12 kB
JavaScript
import * as h from "react";
import { jsxs as b, jsx as I } from "react/jsx-runtime";
import { P as e } from "./index-B9vkf41S.js";
import { G as w, F as C, H as N } from "./generateUtilityClasses-B_xKAflz.js";
import { m as O } from "./memoTheme-C-PaH-Cy.js";
import { u as T, s as R, c as E } from "./DefaultPropsProvider-BrmlvPWg.js";
import { c as z } from "./capitalize-BHEX83JQ.js";
function j(o) {
return w("MuiSvgIcon", o);
}
const _ = C("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]), V = (o) => {
const {
color: r,
fontSize: n,
classes: i
} = o, t = {
root: ["root", r !== "inherit" && `color${z(r)}`, `fontSize${z(n)}`]
};
return E(t, j, i);
}, $ = R("svg", {
name: "MuiSvgIcon",
slot: "Root",
overridesResolver: (o, r) => {
const {
ownerState: n
} = o;
return [r.root, n.color !== "inherit" && r[`color${z(n.color)}`], r[`fontSize${z(n.fontSize)}`]];
}
})(O(({
theme: o
}) => {
var r, n, i, t, l, S, a, g, p, m, c, d, y, f;
return {
userSelect: "none",
width: "1em",
height: "1em",
display: "inline-block",
flexShrink: 0,
transition: (t = (r = o.transitions) == null ? void 0 : r.create) == null ? void 0 : t.call(r, "fill", {
duration: (i = (n = (o.vars ?? o).transitions) == null ? void 0 : n.duration) == null ? void 0 : i.shorter
}),
variants: [
{
props: (s) => !s.hasSvgAsChild,
style: {
// the <svg> will define the property that has `currentColor`
// for example heroicons uses fill="none" and stroke="currentColor"
fill: "currentColor"
}
},
{
props: {
fontSize: "inherit"
},
style: {
fontSize: "inherit"
}
},
{
props: {
fontSize: "small"
},
style: {
fontSize: ((S = (l = o.typography) == null ? void 0 : l.pxToRem) == null ? void 0 : S.call(l, 20)) || "1.25rem"
}
},
{
props: {
fontSize: "medium"
},
style: {
fontSize: ((g = (a = o.typography) == null ? void 0 : a.pxToRem) == null ? void 0 : g.call(a, 24)) || "1.5rem"
}
},
{
props: {
fontSize: "large"
},
style: {
fontSize: ((m = (p = o.typography) == null ? void 0 : p.pxToRem) == null ? void 0 : m.call(p, 35)) || "2.1875rem"
}
},
// TODO v5 deprecate color prop, v6 remove for sx
...Object.entries((o.vars ?? o).palette).filter(([, s]) => s && s.main).map(([s]) => {
var u, v;
return {
props: {
color: s
},
style: {
color: (v = (u = (o.vars ?? o).palette) == null ? void 0 : u[s]) == null ? void 0 : v.main
}
};
}),
{
props: {
color: "action"
},
style: {
color: (d = (c = (o.vars ?? o).palette) == null ? void 0 : c.action) == null ? void 0 : d.active
}
},
{
props: {
color: "disabled"
},
style: {
color: (f = (y = (o.vars ?? o).palette) == null ? void 0 : y.action) == null ? void 0 : f.disabled
}
},
{
props: {
color: "inherit"
},
style: {
color: void 0
}
}
]
};
})), x = /* @__PURE__ */ h.forwardRef(function(r, n) {
const i = T({
props: r,
name: "MuiSvgIcon"
}), {
children: t,
className: l,
color: S = "inherit",
component: a = "svg",
fontSize: g = "medium",
htmlColor: p,
inheritViewBox: m = !1,
titleAccess: c,
viewBox: d = "0 0 24 24",
...y
} = i, f = /* @__PURE__ */ h.isValidElement(t) && t.type === "svg", s = {
...i,
color: S,
component: a,
fontSize: g,
instanceFontSize: r.fontSize,
inheritViewBox: m,
viewBox: d,
hasSvgAsChild: f
}, u = {};
m || (u.viewBox = d);
const v = V(s);
return /* @__PURE__ */ b($, {
as: a,
className: N(v.root, l),
focusable: "false",
color: p,
"aria-hidden": c ? void 0 : !0,
role: c ? "img" : void 0,
ref: n,
...u,
...y,
...f && t.props,
ownerState: s,
children: [f ? t.props.children : t, c ? /* @__PURE__ */ I("title", {
children: c
}) : null]
});
});
process.env.NODE_ENV !== "production" && (x.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Node passed into the SVG element.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.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).
* You can use the `htmlColor` prop to apply a color attribute to the SVG element.
* @default 'inherit'
*/
color: e.oneOfType([e.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
* @default 'medium'
*/
fontSize: e.oneOfType([e.oneOf(["inherit", "large", "medium", "small"]), e.string]),
/**
* Applies a color attribute to the SVG element.
*/
htmlColor: e.string,
/**
* If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
* prop will be ignored.
* Useful when you want to reference a custom `component` and have `SvgIcon` pass that
* `component`'s viewBox to the root node.
* @default false
*/
inheritViewBox: e.bool,
/**
* The shape-rendering attribute. The behavior of the different options is described on the
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
* If you are having issues with blurry icons you should investigate this prop.
*/
shapeRendering: e.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* Provides a human-readable title for the element that contains it.
* https://www.w3.org/TR/SVG-access/#Equivalent
*/
titleAccess: e.string,
/**
* Allows you to redefine what the coordinates without units mean inside an SVG element.
* For example, if the SVG element is 500 (width) by 200 (height),
* and you pass viewBox="0 0 50 20",
* this means that the coordinates inside the SVG will go from the top left corner (0,0)
* to bottom right (50,20) and each unit will be worth 10px.
* @default '0 0 24 24'
*/
viewBox: e.string
});
x.muiName = "SvgIcon";
function k(o, r) {
function n(i, t) {
return /* @__PURE__ */ I(x, {
"data-testid": process.env.NODE_ENV !== "production" ? `${r}Icon` : void 0,
ref: t,
...i,
children: o
});
}
return process.env.NODE_ENV !== "production" && (n.displayName = `${r}Icon`), n.muiName = x.muiName, /* @__PURE__ */ h.memo(/* @__PURE__ */ h.forwardRef(n));
}
export {
x as S,
k as c,
j as g,
_ as s
};