@loopr-ai/craft 0.5.2 → 0.7.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 (40) hide show
  1. package/dist/{ButtonBase-85c9347b.js → ButtonBase-c303b1df.js} +3 -3
  2. package/dist/Form.interfaces-c9b49688.js +6 -0
  3. package/dist/{createSvgIcon-70f9f72b.js → Grow-d188a215.js} +3944 -4020
  4. package/dist/TextField-b13f5aff.js +5931 -0
  5. package/dist/{TransitionGroupContext-fe9a562f.js → TransitionGroupContext-7cd3ef83.js} +3 -3
  6. package/dist/Typography-c0106ed0.js +178 -0
  7. package/dist/{ZoomControllers-7fb8d495.js → ZoomControllers-2e737c18.js} +678 -681
  8. package/dist/components/cell/AvatarGroup/index.js +3 -3
  9. package/dist/components/cell/Button/index.js +3 -3
  10. package/dist/components/cell/Chip/index.js +5 -5
  11. package/dist/components/cell/ProgressBar/index.js +3 -3
  12. package/dist/components/cell/Search/index.js +27 -5949
  13. package/dist/components/cell/Typography/index.d.ts +2 -1
  14. package/dist/components/cell/Typography/index.js +16 -188
  15. package/dist/components/organ/Form/FieldInput.d.ts +27 -0
  16. package/dist/components/organ/Form/FieldInput.js +440 -0
  17. package/dist/components/organ/Form/Form.interfaces.d.ts +55 -0
  18. package/dist/components/organ/Form/Form.interfaces.js +1 -0
  19. package/dist/components/organ/Form/Form.styles.d.ts +5 -0
  20. package/dist/components/organ/Form/Form.styles.js +10 -0
  21. package/dist/components/organ/Form/Form.utils.d.ts +2 -0
  22. package/dist/components/organ/Form/Form.utils.js +27 -0
  23. package/dist/components/organ/Form/index.d.ts +28 -0
  24. package/dist/components/organ/Form/index.js +130 -0
  25. package/dist/components/organ/ZoomControlWithDrag/ZoomControllers.js +1 -1
  26. package/dist/components/organ/ZoomControlWithDrag/index.js +1 -1
  27. package/dist/{createSvgIcon-58aa3adf.js → createSvgIcon-5180e4db.js} +2 -2
  28. package/dist/createSvgIcon-78477fc1.js +81 -0
  29. package/dist/{createTheme-a4db2989.js → createTheme-54078d82.js} +3 -3
  30. package/dist/dividerClasses-68f129df.js +10 -0
  31. package/dist/{exactProp-d79ccada.js → exactProp-893ad662.js} +1 -1
  32. package/dist/{extendSxProp-db8b9da5.js → extendSxProp-8c660b3a.js} +1 -1
  33. package/dist/global/theme.d.ts +32 -11
  34. package/dist/global/theme.js +39 -23
  35. package/dist/main.d.ts +5 -3
  36. package/dist/main.js +20 -16
  37. package/dist/providers/CraftThemeProvider.js +2 -2
  38. package/dist/{styled-126c6a62.js → styled-2bc0b59e.js} +12 -12
  39. package/dist/{useTheme-573c40a2.js → useTheme-e2efed29.js} +1 -1
  40. package/package.json +1 -1
@@ -1,12 +1,13 @@
1
1
  import { TypographyProps as MuiTypographyProps } from "@mui/material/Typography";
2
2
  import { CustomColors } from "../../../global/colors";
3
3
  import { CraftFC } from "../../../global/interfaces";
4
+ import { fontCustomizations } from "../../../global/theme";
4
5
  interface TypographyProps extends MuiTypographyProps {
5
6
  /**
6
7
  * The type of typography to render.
7
8
  * @default "bodyText"
8
9
  */
9
- type?: "headingLarge" | "headingMedium" | "headingSmall" | "bodyText" | "smallText" | "boldText" | "subtitleNormal" | "subtitleSmall" | "helperText";
10
+ type?: keyof typeof fontCustomizations;
10
11
  textColor?: CustomColors;
11
12
  }
12
13
  /**
@@ -1,193 +1,21 @@
1
- import { jsx as f } from "react/jsx-runtime";
2
- import { getColorToHex as W } from "../../../global/colors.js";
3
- import { fontCustomizations as M } from "../../../global/theme.js";
4
- import { g as O, c as b, a as p, _ as j, P as t } from "../../../createTheme-a4db2989.js";
5
- import * as P from "react";
6
- import { g as N, s as R, a as _, c as U, b as $ } from "../../../styled-126c6a62.js";
7
- import { e as z } from "../../../extendSxProp-db8b9da5.js";
8
- function D(r) {
9
- return O("MuiTypography", r);
10
- }
11
- N("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
12
- const E = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"], L = (r) => {
13
- const {
14
- align: o,
15
- gutterBottom: a,
16
- noWrap: e,
17
- paragraph: i,
18
- variant: n,
19
- classes: h
20
- } = r, s = {
21
- root: ["root", n, r.align !== "inherit" && `align${b(o)}`, a && "gutterBottom", e && "noWrap", i && "paragraph"]
22
- };
23
- return $(s, D, h);
24
- }, V = R("span", {
25
- name: "MuiTypography",
26
- slot: "Root",
27
- overridesResolver: (r, o) => {
28
- const {
29
- ownerState: a
30
- } = r;
31
- return [o.root, a.variant && o[a.variant], a.align !== "inherit" && o[`align${b(a.align)}`], a.noWrap && o.noWrap, a.gutterBottom && o.gutterBottom, a.paragraph && o.paragraph];
32
- }
33
- })(({
34
- theme: r,
35
- ownerState: o
36
- }) => p({
37
- margin: 0
38
- }, o.variant === "inherit" && {
39
- // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
40
- font: "inherit"
41
- }, o.variant !== "inherit" && r.typography[o.variant], o.align !== "inherit" && {
42
- textAlign: o.align
43
- }, o.noWrap && {
44
- overflow: "hidden",
45
- textOverflow: "ellipsis",
46
- whiteSpace: "nowrap"
47
- }, o.gutterBottom && {
48
- marginBottom: "0.35em"
49
- }, o.paragraph && {
50
- marginBottom: 16
51
- })), u = {
52
- h1: "h1",
53
- h2: "h2",
54
- h3: "h3",
55
- h4: "h4",
56
- h5: "h5",
57
- h6: "h6",
58
- subtitle1: "h6",
59
- subtitle2: "h6",
60
- body1: "p",
61
- body2: "p",
62
- inherit: "p"
63
- }, k = {
64
- primary: "primary.main",
65
- textPrimary: "text.primary",
66
- secondary: "secondary.main",
67
- textSecondary: "text.secondary",
68
- error: "error.main"
69
- }, A = (r) => k[r] || r, d = /* @__PURE__ */ P.forwardRef(function(o, a) {
70
- const e = _({
71
- props: o,
72
- name: "MuiTypography"
73
- }), i = A(e.color), n = z(p({}, e, {
74
- color: i
75
- })), {
76
- align: h = "inherit",
77
- className: s,
78
- component: c,
79
- gutterBottom: v = !1,
80
- noWrap: T = !1,
81
- paragraph: g = !1,
82
- variant: l = "body1",
83
- variantMapping: m = u
84
- } = n, x = j(n, E), y = p({}, n, {
85
- align: h,
86
- color: i,
87
- className: s,
88
- component: c,
89
- gutterBottom: v,
90
- noWrap: T,
91
- paragraph: g,
92
- variant: l,
93
- variantMapping: m
94
- }), B = c || (g ? "p" : m[l] || u[l]) || "span", C = L(y);
95
- return /* @__PURE__ */ f(V, p({
96
- as: B,
97
- ref: a,
98
- ownerState: y,
99
- className: U(C.root, s)
100
- }, x));
101
- });
102
- process.env.NODE_ENV !== "production" && (d.propTypes = {
103
- // ----------------------------- Warning --------------------------------
104
- // | These PropTypes are generated from the TypeScript type definitions |
105
- // | To update them edit the d.ts file and run "yarn proptypes" |
106
- // ----------------------------------------------------------------------
107
- /**
108
- * Set the text-align on the component.
109
- * @default 'inherit'
110
- */
111
- align: t.oneOf(["center", "inherit", "justify", "left", "right"]),
112
- /**
113
- * The content of the component.
114
- */
115
- children: t.node,
116
- /**
117
- * Override or extend the styles applied to the component.
118
- */
119
- classes: t.object,
120
- /**
121
- * @ignore
122
- */
123
- className: t.string,
124
- /**
125
- * The component used for the root node.
126
- * Either a string to use a HTML element or a component.
127
- */
128
- component: t.elementType,
129
- /**
130
- * If `true`, the text will have a bottom margin.
131
- * @default false
132
- */
133
- gutterBottom: t.bool,
134
- /**
135
- * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
136
- *
137
- * Note that text overflow can only happen with block or inline-block level elements
138
- * (the element needs to have a width in order to overflow).
139
- * @default false
140
- */
141
- noWrap: t.bool,
142
- /**
143
- * If `true`, the element will be a paragraph element.
144
- * @default false
145
- */
146
- paragraph: t.bool,
147
- /**
148
- * The system prop that allows defining system overrides as well as additional CSS styles.
149
- */
150
- sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
151
- /**
152
- * Applies the theme typography styles.
153
- * @default 'body1'
154
- */
155
- variant: t.oneOfType([t.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), t.string]),
156
- /**
157
- * The component maps the variant prop to a range of different HTML element types.
158
- * For instance, subtitle1 to `<h6>`.
159
- * If you wish to change that mapping, you can provide your own.
160
- * Alternatively, you can use the `component` prop.
161
- * @default {
162
- * h1: 'h1',
163
- * h2: 'h2',
164
- * h3: 'h3',
165
- * h4: 'h4',
166
- * h5: 'h5',
167
- * h6: 'h6',
168
- * subtitle1: 'h6',
169
- * subtitle2: 'h6',
170
- * body1: 'p',
171
- * body2: 'p',
172
- * inherit: 'p',
173
- * }
174
- */
175
- variantMapping: t.object
176
- });
177
- const H = d, K = ({
178
- type: r = "bodyText",
179
- textColor: o = "black",
180
- children: a,
181
- sx: e,
182
- ...i
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { getColorToHex as e } from "../../../global/colors.js";
3
+ import { fontCustomizations as i } from "../../../global/theme.js";
4
+ import { M as f } from "../../../Typography-c0106ed0.js";
5
+ const c = ({
6
+ type: o = "bodyText",
7
+ textColor: r = "black",
8
+ children: t,
9
+ sx: m,
10
+ ...p
183
11
  }) => {
184
- const n = {
185
- ...M[r],
186
- color: W(o),
187
- ...e
12
+ const s = {
13
+ ...i[o],
14
+ color: e(r),
15
+ ...m
188
16
  };
189
- return /* @__PURE__ */ f(H, { sx: n, ...i, children: a });
17
+ return /* @__PURE__ */ a(f, { sx: s, ...p, children: t });
190
18
  };
191
19
  export {
192
- K as default
20
+ c as default
193
21
  };
@@ -0,0 +1,27 @@
1
+ import { CraftFC } from "../../../global/interfaces";
2
+ import { SelectField } from "./Form.interfaces";
3
+ export interface FormInputProps extends SelectField {
4
+ value: string;
5
+ handleChange: (name: string, value: string) => void;
6
+ error?: boolean;
7
+ }
8
+ /**
9
+ * Form input field
10
+ * @param name - Field name
11
+ * @param label - Field label
12
+ * @param type - Field type
13
+ * @param value - Field value
14
+ * @param handleChange - Function to handle field change
15
+ * @param placeholder - Field placeholder
16
+ * @param required - Field required
17
+ * @param disabled - Field disabled
18
+ * @param beforeField - Field before
19
+ * @param afterField - Field after
20
+ * @param options - Field options
21
+ * @param optionsResponseHandler - Field options response handler
22
+ * @param api_endpoint - Field API endpoint
23
+ * @param error - Field error
24
+ * @param helperText - Field helper text
25
+ */
26
+ declare const FormInput: CraftFC<FormInputProps>;
27
+ export default FormInput;
@@ -0,0 +1,440 @@
1
+ import { jsx as c, jsxs as W, Fragment as q } from "react/jsx-runtime";
2
+ import * as x from "react";
3
+ import { useState as H, useCallback as J, useEffect as K } from "react";
4
+ import { u as Q, F as X, L, T as Y } from "../../../TextField-b13f5aff.js";
5
+ import { g as S, a as v, _ as B, P as t, c as N, e as M } from "../../../createTheme-54078d82.js";
6
+ import { g as T, s as U, a as z, c as P, b as _, r as Z } from "../../../styled-2bc0b59e.js";
7
+ import { M as ee } from "../../../Typography-c0106ed0.js";
8
+ import { B as te } from "../../../ButtonBase-c303b1df.js";
9
+ import { d as A } from "../../../dividerClasses-68f129df.js";
10
+ import { a as oe, u as se } from "../../../TransitionGroupContext-7cd3ef83.js";
11
+ function ne(e) {
12
+ return S("MuiInputAdornment", e);
13
+ }
14
+ const ae = T("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]), j = ae;
15
+ var R;
16
+ const re = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], ie = (e, o) => {
17
+ const {
18
+ ownerState: s
19
+ } = e;
20
+ return [o.root, o[`position${N(s.position)}`], s.disablePointerEvents === !0 && o.disablePointerEvents, o[s.variant]];
21
+ }, le = (e) => {
22
+ const {
23
+ classes: o,
24
+ disablePointerEvents: s,
25
+ hiddenLabel: a,
26
+ position: r,
27
+ size: d,
28
+ variant: l
29
+ } = e, m = {
30
+ root: ["root", s && "disablePointerEvents", r && `position${N(r)}`, l, a && "hiddenLabel", d && `size${N(d)}`]
31
+ };
32
+ return _(m, ne, o);
33
+ }, ce = U("div", {
34
+ name: "MuiInputAdornment",
35
+ slot: "Root",
36
+ overridesResolver: ie
37
+ })(({
38
+ theme: e,
39
+ ownerState: o
40
+ }) => v({
41
+ display: "flex",
42
+ height: "0.01em",
43
+ // Fix IE11 flexbox alignment. To remove at some point.
44
+ maxHeight: "2em",
45
+ alignItems: "center",
46
+ whiteSpace: "nowrap",
47
+ color: (e.vars || e).palette.action.active
48
+ }, o.variant === "filled" && {
49
+ // Styles applied to the root element if `variant="filled"`.
50
+ [`&.${j.positionStart}&:not(.${j.hiddenLabel})`]: {
51
+ marginTop: 16
52
+ }
53
+ }, o.position === "start" && {
54
+ // Styles applied to the root element if `position="start"`.
55
+ marginRight: 8
56
+ }, o.position === "end" && {
57
+ // Styles applied to the root element if `position="end"`.
58
+ marginLeft: 8
59
+ }, o.disablePointerEvents === !0 && {
60
+ // Styles applied to the root element if `disablePointerEvents={true}`.
61
+ pointerEvents: "none"
62
+ })), D = /* @__PURE__ */ x.forwardRef(function(o, s) {
63
+ const a = z({
64
+ props: o,
65
+ name: "MuiInputAdornment"
66
+ }), {
67
+ children: r,
68
+ className: d,
69
+ component: l = "div",
70
+ disablePointerEvents: m = !1,
71
+ disableTypography: u = !1,
72
+ position: C,
73
+ variant: f
74
+ } = a, p = B(a, re), i = Q() || {};
75
+ let g = f;
76
+ f && i.variant && process.env.NODE_ENV !== "production" && f === i.variant && console.error("MUI: The `InputAdornment` variant infers the variant prop you do not have to provide one."), i && !g && (g = i.variant);
77
+ const y = v({}, a, {
78
+ hiddenLabel: i.hiddenLabel,
79
+ size: i.size,
80
+ disablePointerEvents: m,
81
+ position: C,
82
+ variant: g
83
+ }), b = le(y);
84
+ return /* @__PURE__ */ c(X.Provider, {
85
+ value: null,
86
+ children: /* @__PURE__ */ c(ce, v({
87
+ as: l,
88
+ ownerState: y,
89
+ className: P(b.root, d),
90
+ ref: s
91
+ }, p, {
92
+ children: typeof r == "string" && !u ? /* @__PURE__ */ c(ee, {
93
+ color: "text.secondary",
94
+ children: r
95
+ }) : /* @__PURE__ */ W(x.Fragment, {
96
+ children: [C === "start" ? (
97
+ /* notranslate needed while Google Translate will not fix zero-width space issue */
98
+ R || (R = /* @__PURE__ */ c("span", {
99
+ className: "notranslate",
100
+ children: "​"
101
+ }))
102
+ ) : null, r]
103
+ })
104
+ }))
105
+ });
106
+ });
107
+ process.env.NODE_ENV !== "production" && (D.propTypes = {
108
+ // ----------------------------- Warning --------------------------------
109
+ // | These PropTypes are generated from the TypeScript type definitions |
110
+ // | To update them edit the d.ts file and run "yarn proptypes" |
111
+ // ----------------------------------------------------------------------
112
+ /**
113
+ * The content of the component, normally an `IconButton` or string.
114
+ */
115
+ children: t.node,
116
+ /**
117
+ * Override or extend the styles applied to the component.
118
+ */
119
+ classes: t.object,
120
+ /**
121
+ * @ignore
122
+ */
123
+ className: t.string,
124
+ /**
125
+ * The component used for the root node.
126
+ * Either a string to use a HTML element or a component.
127
+ */
128
+ component: t.elementType,
129
+ /**
130
+ * Disable pointer events on the root.
131
+ * This allows for the content of the adornment to focus the `input` on click.
132
+ * @default false
133
+ */
134
+ disablePointerEvents: t.bool,
135
+ /**
136
+ * If children is a string then disable wrapping in a Typography component.
137
+ * @default false
138
+ */
139
+ disableTypography: t.bool,
140
+ /**
141
+ * The position this adornment should appear relative to the `Input`.
142
+ */
143
+ position: t.oneOf(["end", "start"]).isRequired,
144
+ /**
145
+ * The system prop that allows defining system overrides as well as additional CSS styles.
146
+ */
147
+ sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
148
+ /**
149
+ * The variant to use.
150
+ * Note: If you are using the `TextField` component or the `FormControl` component
151
+ * you do not have to set this manually.
152
+ */
153
+ variant: t.oneOf(["filled", "outlined", "standard"])
154
+ });
155
+ const k = D, de = T("MuiListItemIcon", ["root", "alignItemsFlexStart"]), V = de, pe = T("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), w = pe;
156
+ function ue(e) {
157
+ return S("MuiMenuItem", e);
158
+ }
159
+ const me = T("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), O = me, fe = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], be = (e, o) => {
160
+ const {
161
+ ownerState: s
162
+ } = e;
163
+ return [o.root, s.dense && o.dense, s.divider && o.divider, !s.disableGutters && o.gutters];
164
+ }, ve = (e) => {
165
+ const {
166
+ disabled: o,
167
+ dense: s,
168
+ divider: a,
169
+ disableGutters: r,
170
+ selected: d,
171
+ classes: l
172
+ } = e, u = _({
173
+ root: ["root", s && "dense", o && "disabled", !r && "gutters", a && "divider", d && "selected"]
174
+ }, ue, l);
175
+ return v({}, l, u);
176
+ }, ge = U(te, {
177
+ shouldForwardProp: (e) => Z(e) || e === "classes",
178
+ name: "MuiMenuItem",
179
+ slot: "Root",
180
+ overridesResolver: be
181
+ })(({
182
+ theme: e,
183
+ ownerState: o
184
+ }) => v({}, e.typography.body1, {
185
+ display: "flex",
186
+ justifyContent: "flex-start",
187
+ alignItems: "center",
188
+ position: "relative",
189
+ textDecoration: "none",
190
+ minHeight: 48,
191
+ paddingTop: 6,
192
+ paddingBottom: 6,
193
+ boxSizing: "border-box",
194
+ whiteSpace: "nowrap"
195
+ }, !o.disableGutters && {
196
+ paddingLeft: 16,
197
+ paddingRight: 16
198
+ }, o.divider && {
199
+ borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
200
+ backgroundClip: "padding-box"
201
+ }, {
202
+ "&:hover": {
203
+ textDecoration: "none",
204
+ backgroundColor: (e.vars || e).palette.action.hover,
205
+ // Reset on touch devices, it doesn't add specificity
206
+ "@media (hover: none)": {
207
+ backgroundColor: "transparent"
208
+ }
209
+ },
210
+ [`&.${O.selected}`]: {
211
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : M(e.palette.primary.main, e.palette.action.selectedOpacity),
212
+ [`&.${O.focusVisible}`]: {
213
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : M(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
214
+ }
215
+ },
216
+ [`&.${O.selected}:hover`]: {
217
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : M(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
218
+ // Reset on touch devices, it doesn't add specificity
219
+ "@media (hover: none)": {
220
+ backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : M(e.palette.primary.main, e.palette.action.selectedOpacity)
221
+ }
222
+ },
223
+ [`&.${O.focusVisible}`]: {
224
+ backgroundColor: (e.vars || e).palette.action.focus
225
+ },
226
+ [`&.${O.disabled}`]: {
227
+ opacity: (e.vars || e).palette.action.disabledOpacity
228
+ },
229
+ [`& + .${A.root}`]: {
230
+ marginTop: e.spacing(1),
231
+ marginBottom: e.spacing(1)
232
+ },
233
+ [`& + .${A.inset}`]: {
234
+ marginLeft: 52
235
+ },
236
+ [`& .${w.root}`]: {
237
+ marginTop: 0,
238
+ marginBottom: 0
239
+ },
240
+ [`& .${w.inset}`]: {
241
+ paddingLeft: 36
242
+ },
243
+ [`& .${V.root}`]: {
244
+ minWidth: 36
245
+ }
246
+ }, !o.dense && {
247
+ [e.breakpoints.up("sm")]: {
248
+ minHeight: "auto"
249
+ }
250
+ }, o.dense && v({
251
+ minHeight: 32,
252
+ // https://m2.material.io/components/menus#specs > Dense
253
+ paddingTop: 4,
254
+ paddingBottom: 4
255
+ }, e.typography.body2, {
256
+ [`& .${V.root} svg`]: {
257
+ fontSize: "1.25rem"
258
+ }
259
+ }))), G = /* @__PURE__ */ x.forwardRef(function(o, s) {
260
+ const a = z({
261
+ props: o,
262
+ name: "MuiMenuItem"
263
+ }), {
264
+ autoFocus: r = !1,
265
+ component: d = "li",
266
+ dense: l = !1,
267
+ divider: m = !1,
268
+ disableGutters: u = !1,
269
+ focusVisibleClassName: C,
270
+ role: f = "menuitem",
271
+ tabIndex: p,
272
+ className: i
273
+ } = a, g = B(a, fe), y = x.useContext(L), b = x.useMemo(() => ({
274
+ dense: l || y.dense || !1,
275
+ disableGutters: u
276
+ }), [y.dense, l, u]), $ = x.useRef(null);
277
+ oe(() => {
278
+ r && ($.current ? $.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
279
+ }, [r]);
280
+ const E = v({}, a, {
281
+ dense: b.dense,
282
+ divider: m,
283
+ disableGutters: u
284
+ }), h = ve(a), n = se($, s);
285
+ let I;
286
+ return a.disabled || (I = p !== void 0 ? p : -1), /* @__PURE__ */ c(L.Provider, {
287
+ value: b,
288
+ children: /* @__PURE__ */ c(ge, v({
289
+ ref: n,
290
+ role: f,
291
+ tabIndex: I,
292
+ component: d,
293
+ focusVisibleClassName: P(h.focusVisible, C),
294
+ className: P(h.root, i)
295
+ }, g, {
296
+ ownerState: E,
297
+ classes: h
298
+ }))
299
+ });
300
+ });
301
+ process.env.NODE_ENV !== "production" && (G.propTypes = {
302
+ // ----------------------------- Warning --------------------------------
303
+ // | These PropTypes are generated from the TypeScript type definitions |
304
+ // | To update them edit the d.ts file and run "yarn proptypes" |
305
+ // ----------------------------------------------------------------------
306
+ /**
307
+ * If `true`, the list item is focused during the first mount.
308
+ * Focus will also be triggered if the value changes from false to true.
309
+ * @default false
310
+ */
311
+ autoFocus: t.bool,
312
+ /**
313
+ * The content of the component.
314
+ */
315
+ children: t.node,
316
+ /**
317
+ * Override or extend the styles applied to the component.
318
+ */
319
+ classes: t.object,
320
+ /**
321
+ * @ignore
322
+ */
323
+ className: t.string,
324
+ /**
325
+ * The component used for the root node.
326
+ * Either a string to use a HTML element or a component.
327
+ */
328
+ component: t.elementType,
329
+ /**
330
+ * If `true`, compact vertical padding designed for keyboard and mouse input is used.
331
+ * The prop defaults to the value inherited from the parent Menu component.
332
+ * @default false
333
+ */
334
+ dense: t.bool,
335
+ /**
336
+ * @ignore
337
+ */
338
+ disabled: t.bool,
339
+ /**
340
+ * If `true`, the left and right padding is removed.
341
+ * @default false
342
+ */
343
+ disableGutters: t.bool,
344
+ /**
345
+ * If `true`, a 1px light border is added to the bottom of the menu item.
346
+ * @default false
347
+ */
348
+ divider: t.bool,
349
+ /**
350
+ * This prop can help identify which element has keyboard focus.
351
+ * The class name will be applied when the element gains the focus through keyboard interaction.
352
+ * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
353
+ * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
354
+ * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
355
+ * if needed.
356
+ */
357
+ focusVisibleClassName: t.string,
358
+ /**
359
+ * @ignore
360
+ */
361
+ role: t.string,
362
+ /**
363
+ * If `true`, the component is selected.
364
+ * @default false
365
+ */
366
+ selected: t.bool,
367
+ /**
368
+ * The system prop that allows defining system overrides as well as additional CSS styles.
369
+ */
370
+ sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
371
+ /**
372
+ * @default 0
373
+ */
374
+ tabIndex: t.number
375
+ });
376
+ const ye = G, Pe = ({
377
+ name: e,
378
+ label: o,
379
+ type: s,
380
+ value: a,
381
+ handleChange: r,
382
+ placeholder: d,
383
+ required: l,
384
+ disabled: m,
385
+ beforeField: u,
386
+ afterField: C,
387
+ options: f,
388
+ optionsResponseHandler: p,
389
+ api_endpoint: i,
390
+ error: g,
391
+ helperText: y
392
+ }) => {
393
+ const [b, $] = H([]);
394
+ function E(n) {
395
+ r(e, n.target.value);
396
+ }
397
+ const h = J(async () => {
398
+ var n;
399
+ return s !== "select" ? [] : f || (i && p ? (n = (await (await fetch(i)).json())[p.key]) == null ? void 0 : n.map((F) => ({
400
+ name: F[p.name],
401
+ value: F[p.value]
402
+ })) : []);
403
+ }, [s, p, i]);
404
+ return K(() => {
405
+ h().then((n) => $(n));
406
+ }, []), s !== "custom" ? /* @__PURE__ */ c(
407
+ Y,
408
+ {
409
+ label: o,
410
+ name: e,
411
+ type: s,
412
+ select: s === "select",
413
+ value: a,
414
+ onChange: E,
415
+ placeholder: d,
416
+ required: l,
417
+ disabled: m,
418
+ error: g,
419
+ helperText: y,
420
+ InputProps: {
421
+ startAdornment: /* @__PURE__ */ c(k, { position: "start", children: u }),
422
+ endAdornment: /* @__PURE__ */ c(k, { position: "end", children: C })
423
+ },
424
+ children: s === "select" && (b == null ? void 0 : b.map((n) => {
425
+ const I = typeof n == "object";
426
+ return /* @__PURE__ */ c(
427
+ ye,
428
+ {
429
+ value: I ? n.value : n,
430
+ children: I ? n.name : n
431
+ },
432
+ I ? n.name : n
433
+ );
434
+ }))
435
+ }
436
+ ) : /* @__PURE__ */ c(q, {});
437
+ };
438
+ export {
439
+ Pe as default
440
+ };