@auth0/quantum-product 1.5.1

package/esm/expansion-panel/expansion-panel-summary.js

@@ -0,0 +1,50 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import AccordionSummary, { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+import { styled } from '../styled';
+import { ChevronDownIcon } from '../icon';
+var ExpansionPanelSummaryComponentName = 'QuantumExpansionPanelSummary';
+export var ExpansionPanelSummary = styled(AccordionSummary, {
+    name: ExpansionPanelSummaryComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_b = {
+            padding: 0,
+            minHeight: 'unset',
+            borderRadius: 4
+        },
+        _b["&.".concat(accordionSummaryClasses.expanded)] = {
+            minHeight: 'unset',
+        },
+        _b["& .".concat(accordionSummaryClasses.expandIconWrapper)] = {
+            fontSize: theme.typography.pxToRem(16),
+            color: theme.tokens.color_fg_default,
+        },
+        _b["& .".concat(accordionSummaryClasses.content)] = (_c = {
+                margin: 0
+            },
+            _c["&.".concat(accordionSummaryClasses.expanded)] = {
+                margin: 0,
+            },
+            _c),
+        _b['&:focus-visible'] = __assign({}, theme.mixins.focusRing()),
+        _b["&.".concat(accordionSummaryClasses.focusVisible)] = {
+            backgroundColor: 'transparent',
+        },
+        _b);
+});
+ExpansionPanelSummary.defaultProps = {
+    expandIcon: React.createElement(ChevronDownIcon, null),
+};

package/esm/expansion-panel/expansion-panel.js

@@ -0,0 +1,22 @@
+import Accordion, { accordionClasses } from '@mui/material/Accordion';
+import { styled } from '../styled';
+var expansionPanelComponentName = 'QuantumExpansionPanel';
+export var ExpansionPanel = styled(Accordion, { name: expansionPanelComponentName, slot: 'Root' })(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return _b = {
+            margin: 0,
+            padding: theme.spacing(4),
+            border: "1px solid ".concat(theme.tokens.color_border_default),
+            boxShadow: 'none',
+            position: 'relative',
+            backgroundImage: 'none'
+        },
+        _b["&.".concat(accordionClasses.expanded)] = {
+            margin: 0,
+        },
+        _b["&.".concat(accordionClasses.rounded)] = {
+            borderRadius: 6,
+        },
+        _b;
+});

package/esm/expansion-panel/index.js

@@ -0,0 +1,4 @@
+export { ExpansionPanel } from './expansion-panel';
+export { ExpansionPanelDetails } from './expansion-panel-details';
+export { ExpansionPanelHeader } from './expansion-panel-header';
+export { ExpansionPanelSummary } from './expansion-panel-summary';

package/esm/field-set/field-set-classes.js

@@ -0,0 +1,12 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var fieldSetComponentName = 'QuantumFieldSet';
+export function getFieldSetUtilityClass(slot) {
+    return generateUtilityClass(fieldSetComponentName, slot);
+}
+export var fieldSetClasses = generateUtilityClasses(fieldSetComponentName, [
+    'root',
+    'labelContent',
+    'labelText',
+    'descriptionText',
+    'contentWrapper',
+]);

package/esm/field-set/field-set.js

@@ -0,0 +1,69 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useFormLayoutContext } from '../form';
+import { RowLayout } from '../row-layout';
+import { styled } from '../styled';
+import { fieldSetClasses, fieldSetComponentName, getFieldSetUtilityClass } from './field-set-classes';
+import { Text } from '../text';
+import clsx from '../utils/clsx';
+import { useMergedClasses } from '../styles/classes';
+var Root = styled('fieldset', {
+    name: fieldSetComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var _b, _c;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return __assign({ display: 'grid', gridTemplateColumns: 'minmax(0,1fr)', gridGap: theme.spacing(3), alignItems: 'flex-start', border: 'none' }, (ownerState.layout === 'two-column' && (_b = {},
+        _b[theme.breakpoints.up('md')] = (_c = {
+                gridGap: theme.spacing(5),
+                gridTemplateColumns: '2fr minmax(0,3fr)'
+            },
+            _c["& .".concat(fieldSetClasses.labelContent, ":empty")] = {
+                display: 'grid',
+            },
+            _c),
+        _b)));
+});
+var LabelContent = styled(RowLayout, {
+    name: fieldSetComponentName,
+    slot: 'LabelContent',
+})({
+    '&:empty': {
+        display: 'none',
+    },
+});
+export var FieldSet = React.forwardRef(function (props, ref) {
+    var label = props.label, propLayout = props.layout, description = props.description, children = props.children, _a = props.margin, margin = _a === void 0 ? 'default' : _a, className = props.className, rootProps = __rest(props, ["label", "layout", "description", "children", "margin", "className"]);
+    var layoutContext = useFormLayoutContext().layout;
+    var classes = useMergedClasses(fieldSetClasses, getFieldSetUtilityClass, props.classes);
+    var layout = propLayout || layoutContext;
+    var ownerState = {
+        layout: layout,
+    };
+    return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, className) }, rootProps),
+        React.createElement(LabelContent, { gutter: 0.5, className: classes.labelContent },
+            !!label && (React.createElement(Text, { variant: "subtitle1", color: "textPrimary", component: "legend", className: classes.labelText }, label)),
+            !!description && (React.createElement(Text, { variant: "body2", color: "textSecondary", className: classes.descriptionText }, description))),
+        React.createElement(RowLayout, { gutter: margin === 'dense' ? 2 : 3, className: classes.contentWrapper }, children)));
+});

package/esm/field-set/index.js

@@ -0,0 +1,2 @@
+export { FieldSet } from './field-set';
+export { fieldSetClasses } from './field-set-classes';

package/esm/form/form-actions/form-actions-classes.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var formActionsComponentName = 'QuantumFormActions';
+export function getFormActionsUtilityClass(slot) {
+    return generateUtilityClass(formActionsComponentName, slot);
+}
+export var formActionsClasses = generateUtilityClasses(formActionsComponentName, ['root', 'actions']);

package/esm/form/form-actions/form-actions.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useFormLayoutContext } from '../form-layout';
+import { styled } from '../../styled';
+import clsx from '../../utils/clsx';
+import { formActionsClasses, formActionsComponentName, getFormActionsUtilityClass, } from './form-actions-classes';
+import { useMergedClasses } from '../../styles/classes';
+var Root = styled('div', { name: formActionsComponentName, slot: 'Root' })(function (_a) {
+    var _b, _c;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return __assign({ display: 'grid', gridTemplateColumns: '1fr' }, (ownerState.layout === 'two-column' && (_b = {},
+        _b[theme.breakpoints.up('md')] = (_c = {
+                gridGap: theme.spacing(5),
+                gridTemplateColumns: '2fr 3fr'
+            },
+            _c["& .".concat(formActionsClasses.actions)] = {
+                gridColumnStart: 2,
+            },
+            _c),
+        _b)));
+});
+var Actions = styled('div', { name: formActionsComponentName, slot: 'Actions' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return __assign({ display: 'flex', alignItems: 'center' }, (!ownerState.disableSpacing && {
+        gap: theme.spacing(2),
+    }));
+});
+export var FormActions = React.forwardRef(function (props, ref) {
+    var layoutProp = props.layout, _a = props.disableSpacing, disableSpacing = _a === void 0 ? false : _a, children = props.children, className = props.className, rootProps = __rest(props, ["layout", "disableSpacing", "children", "className"]);
+    var layoutContext = useFormLayoutContext().layout;
+    var classes = useMergedClasses(formActionsClasses, getFormActionsUtilityClass, props.classes);
+    var layout = layoutProp || layoutContext;
+    var ownerState = {
+        layout: layout,
+        disableSpacing: disableSpacing,
+    };
+    return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState }, rootProps, { className: clsx(classes.root, className) }),
+        React.createElement(Actions, { ownerState: ownerState, className: classes.actions }, children)));
+});

package/esm/form/form-actions/index.js

@@ -0,0 +1,2 @@
+export { FormActions } from './form-actions';
+export { formActionsClasses } from './form-actions-classes';

package/esm/form/form-control/form-control-overrides.js

@@ -0,0 +1,16 @@
+export var createMuiFormControlOverrides = function () {
+    return {
+        defaultProps: {
+            fullWidth: true,
+            variant: 'outlined',
+        },
+        styleOverrides: {
+            root: {
+                maxWidth: 400,
+            },
+            fullWidth: {
+                maxWidth: '100%',
+            },
+        },
+    };
+};

package/esm/form/form-control/index.js

@@ -0,0 +1,2 @@
+import MuiFormControl from '@mui/material/FormControl';
+export var FormControl = MuiFormControl;

package/esm/form/form-control-label/form-control-label-classes.js

@@ -0,0 +1,14 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var formControlLabelComponentName = 'QuantumFormControlLabel';
+export function getFormControlLabelUtilityClass(slot) {
+    return generateUtilityClass(formControlLabelComponentName, slot);
+}
+export var formControlLabelClasses = generateUtilityClasses(formControlLabelComponentName, [
+    'root',
+    'label',
+    'container',
+    'labelContainer',
+    'controlLabel',
+    'decoration',
+    'helperText',
+]);

package/esm/form/form-control-label/form-control-label.js

@@ -0,0 +1,110 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+// import { DefaultComponentProps } from "@mui/material/OverridableComponent";
+import MuiFormControlLabel from '@mui/material/FormControlLabel';
+import { FormHelperText } from '../form-helper-text';
+import { styled } from '../../styled';
+import { formControlLabelClasses, formControlLabelComponentName, getFormControlLabelUtilityClass, } from './form-control-label-classes';
+import clsx from '../../utils/clsx';
+import { useMergedClasses } from '../../styles/classes';
+var Root = styled(MuiFormControlLabel, {
+    name: formControlLabelComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var _b;
+    var _c;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (_b = {
+            paddingLeft: theme.spacing(1),
+            paddingTop: theme.spacing(1),
+            paddingBottom: theme.spacing(1),
+            alignItems: 'flex-start',
+            width: ownerState.noWrap ? '100%' : undefined
+        },
+        _b["& .".concat(formControlLabelClasses.label)] = {
+            lineHeight: theme.typography.pxToRem((_c = ownerState.height) !== null && _c !== void 0 ? _c : 18),
+            minWidth: ownerState.noWrap ? 0 : undefined, // prevents overflow of parent flex container
+        },
+        _b);
+});
+var Container = styled('div', {
+    name: formControlLabelComponentName,
+    slot: 'Container',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
+var LabelContainer = styled('span', {
+    name: formControlLabelComponentName,
+    slot: 'LabelContainer',
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return ({
+        display: 'flex',
+        alignItems: 'flex-start',
+        minHeight: theme.typography.pxToRem((_b = ownerState.height) !== null && _b !== void 0 ? _b : 18),
+    });
+});
+var SpanLabel = styled('span', {
+    name: formControlLabelComponentName,
+    slot: 'SpanLabel',
+})({
+    flex: 1,
+});
+var Decoration = styled('span', {
+    name: formControlLabelComponentName,
+    slot: 'Decoration',
+})({
+    marginLeft: 8,
+    flexShrink: 0,
+});
+var HelperText = styled(FormHelperText, {
+    name: formControlLabelComponentName,
+    slot: 'HelperText',
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign(__assign({}, (ownerState.noWrap && {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+    })), { marginTop: theme.spacing(0.5), lineHeight: theme.typography.pxToRem((_b = ownerState.height) !== null && _b !== void 0 ? _b : 18) }));
+});
+export var FormControlLabel = React.forwardRef(function (props, ref) {
+    var label = props.label, noWrap = props.noWrap, className = props.className, helperText = props.helperText, _a = props.HelperTextProps, HelperTextProps = _a === void 0 ? {} : _a, decoration = props.decoration, height = props.height, rootProps = __rest(props, ["label", "noWrap", "className", "helperText", "HelperTextProps", "decoration", "height"]);
+    var classes = useMergedClasses(formControlLabelClasses, getFormControlLabelUtilityClass, props.classes);
+    var ownerState = {
+        noWrap: noWrap,
+        height: height,
+    };
+    var controlLabel = (React.createElement(Container, { className: classes.container },
+        React.createElement(LabelContainer, { ownerState: ownerState, className: classes.labelContainer },
+            React.createElement(SpanLabel, { className: classes.controlLabel }, label),
+            !!decoration && React.createElement(Decoration, { className: classes.decoration }, decoration)),
+        !!helperText && (React.createElement(HelperText, __assign({ ownerState: ownerState, className: classes.helperText }, HelperTextProps), helperText))));
+    return (React.createElement(Root, __assign({ label: controlLabel, ownerState: ownerState, className: clsx(className, classes.root, classes.label) }, rootProps, { ref: ref })));
+});

package/esm/form/form-control-label/form-control-overrides.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export var createMuiFormControlLabelOverrides = function (_a) {
+    var spacing = _a.spacing, typography = _a.typography;
+    return {
+        styleOverrides: {
+            root: {
+                marginLeft: spacing(-1),
+            },
+            label: __assign({}, typography.label),
+        },
+    };
+};

package/esm/form/form-control-label/index.js

@@ -0,0 +1,2 @@
+export { FormControlLabel } from './form-control-label';
+export { formControlLabelClasses } from './form-control-label-classes';

package/esm/form/form-field/form-field-classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var formFieldComponentName = 'QuantumFormField';
+export function getFormFieldUtilityClass(slot) {
+    return generateUtilityClass(formFieldComponentName, slot);
+}
+export var formFieldClasses = generateUtilityClasses(formFieldComponentName, [
+    'root',
+    'label',
+    'error',
+    'helperText',
+]);

package/esm/form/form-field/form-field.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { InputLabel } from '../../input';
+import { FormControl } from '../form-control';
+import { FormHelperText } from '../form-helper-text';
+import clsx from '../../utils/clsx';
+import { useId } from '../../utils/use-id';
+import { useMergedClasses } from '../../styles/classes';
+import { formFieldClasses, getFormFieldUtilityClass } from './form-field-classes';
+var isFormControlRenderer = function (children) { return typeof children === 'function'; };
+export var FormField = React.forwardRef(function (props, ref) {
+    var idProp = props.id, children = props.children, helperText = props.helperText, error = props.error, label = props.label, hiddenLabel = props.hiddenLabel, disabled = props.disabled, readOnly = props.readOnly, InputLabelProps = props.InputLabelProps, FormHelperTextProps = props.FormHelperTextProps, ErrorHelperTextProps = props.ErrorHelperTextProps, 
+    // remove to avoid forwarding to the root
+    className = props.className, sx = props.sx, propClasses = props.classes, rootProps = __rest(props, ["id", "children", "helperText", "error", "label", "hiddenLabel", "disabled", "readOnly", "InputLabelProps", "FormHelperTextProps", "ErrorHelperTextProps", "className", "sx", "classes"]);
+    var classes = useMergedClasses(formFieldClasses, getFormFieldUtilityClass, propClasses);
+    var id = useId(idProp);
+    var controlId = "".concat(id, "-control");
+    var helperTextId = helperText ? "".concat(id, "-helperText") : undefined;
+    var errorTextId = error ? "".concat(id, "-feedback") : undefined;
+    return (React.createElement(FormControl, __assign({ className: clsx(classes.root, className), disabled: readOnly || disabled, error: !!error }, rootProps, { sx: sx, ref: ref }),
+        label && !hiddenLabel && (React.createElement(InputLabel, __assign({ className: classes.label, htmlFor: controlId }, InputLabelProps), label)),
+        isFormControlRenderer(children)
+            ? children({ controlId: controlId, helperTextId: helperTextId, errorTextId: errorTextId })
+            : React.Children.map(children, function (child) {
+                if (!child) {
+                    return null;
+                }
+                if (!React.isValidElement(child)) {
+                    return child;
+                }
+                return React.cloneElement(child, {
+                    id: controlId,
+                    readOnly: readOnly || disabled,
+                    'aria-label': hiddenLabel ? label : '',
+                    'aria-describedby': clsx(helperTextId, errorTextId),
+                });
+            }),
+        !!error && (React.createElement(FormHelperText, __assign({ className: classes.error, "aria-live": "polite", error: true, id: errorTextId }, ErrorHelperTextProps), error)),
+        !!helperText && (React.createElement(FormHelperText, __assign({ className: classes.helperText, error: false, id: helperTextId }, FormHelperTextProps), helperText))));
+});

package/esm/form/form-field/index.js

@@ -0,0 +1,2 @@
+export { FormField } from './form-field';
+export { formFieldClasses } from './form-field-classes';

package/esm/form/form-group/index.js

@@ -0,0 +1 @@
+export { default as FormGroup } from '@mui/material/FormGroup';

package/esm/form/form-helper-text/form-helper-text-overrides.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { formHelperTextClasses } from '@mui/material/FormHelperText';
+export var createMuiFormHelperTextOverrides = function (_a) {
+    var _b;
+    var spacing = _a.spacing, typography = _a.typography, tokens = _a.tokens;
+    return {
+        defaultProps: {
+            variant: 'outlined',
+        },
+        styleOverrides: {
+            root: __assign(__assign({ marginTop: spacing(1) }, typography.body2), (_b = { '&:empty': {
+                        marginTop: 0,
+                    } }, _b["&.".concat(formHelperTextClasses.error)] = {
+                color: tokens.color_fg_state_danger,
+            }, _b)),
+            contained: {
+                marginLeft: 0,
+                marginRight: 0,
+            },
+            sizeSmall: {
+                marginTop: spacing(1),
+            },
+        },
+    };
+};

package/esm/form/form-helper-text/index.js

@@ -0,0 +1,2 @@
+import MuiFormHelperText from '@mui/material/FormHelperText';
+export var FormHelperText = MuiFormHelperText;

package/esm/form/form-label/form-label-overrides.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { formLabelClasses } from '@mui/material/FormLabel';
+export var createMuiFormLabelOverrides = function (_a) {
+    var _b;
+    var spacing = _a.spacing, typography = _a.typography, tokens = _a.tokens;
+    return {
+        styleOverrides: {
+            root: __assign(__assign({}, typography.subtitle2), (_b = { color: tokens.color_fg_bold, marginBottom: spacing(1) }, _b["&.".concat(formLabelClasses.error)] = {
+                color: tokens.color_fg_state_danger,
+            }, _b["&.".concat(formLabelClasses.focused, "&:not(.").concat(formLabelClasses.error, "), &.").concat(formLabelClasses.disabled)] = {
+                color: tokens.color_fg_bold,
+            }, _b)),
+            asterisk: {
+                color: tokens.color_fg_state_danger,
+            },
+        },
+    };
+};

package/esm/form/form-label/index.js

@@ -0,0 +1 @@
+export { default as FormLabel } from '@mui/material/FormLabel';

package/esm/form/form-layout/form-layout-context.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export var FormLayoutContext = React.createContext({
+    layout: 'two-column',
+});
+export var useFormLayoutContext = function () { return React.useContext(FormLayoutContext); };

package/esm/form/form-layout/form-layout.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { RowLayout } from '../../row-layout';
+import { FormLayoutContext } from './form-layout-context';
+export var FormLayout = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.layout, layout = _b === void 0 ? 'two-column' : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? true : _c, rootProps = __rest(_a, ["children", "layout", "fullWidth"]);
+    var ctx = React.useMemo(function () { return ({ layout: layout, fullWidth: fullWidth }); }, [layout, fullWidth]);
+    var isFullWidth = fullWidth || layout === 'two-column';
+    return (React.createElement(FormLayoutContext.Provider, { value: ctx },
+        React.createElement(RowLayout, __assign({ ref: ref, sx: { width: { md: isFullWidth ? '100%' : '60%' } }, gutter: 5 }, rootProps), children)));
+});

package/esm/form/form-layout/index.js

@@ -0,0 +1,2 @@
+export { FormLayout } from './form-layout';
+export { FormLayoutContext, useFormLayoutContext } from './form-layout-context';

package/esm/form/form.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { FormLayout } from './form-layout';
+export var Form = React.forwardRef(function (props, ref) {
+    var onSubmit = props.onSubmit, children = props.children, rootProps = __rest(props, ["onSubmit", "children"]);
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(e);
+        }
+    };
+    return (React.createElement(FormLayout, __assign({ ref: ref }, { noValidate: true }, rootProps, { as: "form", onSubmit: onSubmit ? handleSubmit : undefined }), children));
+});