@auth0/quantum-product 1.11.1 → 2.0.0

package/esm/icon-button/icon-button-overrides.js

@@ -1,8 +1,19 @@
+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 { createComponentOverrides } from '../theme/create-component-overrides';
 import { iconButtonClasses } from '@mui/material/IconButton';
 export var createMuiIconButtonOverrides = createComponentOverrides(function (_a) {
-    var _b;
-    var typography = _a.typography, tokens = _a.tokens;
+    var _b, _c, _d, _e;
+    var mixins = _a.mixins, typography = _a.typography, tokens = _a.tokens;
     return {
         defaultProps: {},
         styleOverrides: {
@@ -12,6 +23,9 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
                     backgroundColor: tokens.color_bg_button_disabled,
                     borderColor: tokens.color_border_disabled,
                 },
+                _b["&:focus,&.Mui-focusVisible"] = {
+                    outlineOffset: 2,
+                },
                 _b),
         },
         variants: [
@@ -66,17 +80,21 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
             },
             {
                 props: { color: 'danger' },
-                style: {
-                    color: tokens.color_fg_link_danger,
-                    '&:hover,&.Mui-hover': {
-                        color: tokens.color_fg_link_danger_hover,
-                        backgroundColor: tokens.color_bg_link_danger_hover,
-                    },
-                    '&:active,&.Mui-active': {
-                        color: tokens.color_fg_link_danger_pressed,
-                        backgroundColor: tokens.color_bg_link_danger_pressed,
-                    },
-                },
+                style: (_c = {
+                        color: tokens.color_fg_link_danger,
+                        '&:hover,&.Mui-hover': {
+                            color: tokens.color_fg_link_danger_hover,
+                            backgroundColor: tokens.color_bg_link_danger_hover,
+                        },
+                        '&:active,&.Mui-active': {
+                            color: tokens.color_fg_link_danger_pressed,
+                            backgroundColor: tokens.color_bg_link_danger_pressed,
+                        }
+                    },
+                    _c["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
+                        color: tokens.color_border_focus_state_danger,
+                    })),
+                    _c),
             },
             {
                 props: { variant: 'contained', color: 'primary' },
@@ -95,18 +113,22 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
             },
             {
                 props: { variant: 'contained', color: 'danger' },
-                style: {
-                    backgroundColor: tokens.color_bg_button_danger,
-                    color: tokens.color_fg_on_button_danger,
-                    '&:hover,&.Mui-hover': {
-                        color: tokens.color_fg_on_button_danger,
-                        backgroundColor: tokens.color_bg_button_danger_hover,
-                    },
-                    '&:active,&.Mui-active': {
+                style: (_d = {
+                        backgroundColor: tokens.color_bg_button_danger,
                         color: tokens.color_fg_on_button_danger,
-                        backgroundColor: tokens.color_bg_button_danger_pressed,
-                    },
-                },
+                        '&:hover,&.Mui-hover': {
+                            color: tokens.color_fg_on_button_danger,
+                            backgroundColor: tokens.color_bg_button_danger_hover,
+                        },
+                        '&:active,&.Mui-active': {
+                            color: tokens.color_fg_on_button_danger,
+                            backgroundColor: tokens.color_bg_button_danger_pressed,
+                        }
+                    },
+                    _d["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
+                        color: tokens.color_border_focus_state_danger,
+                    })),
+                    _d),
             },
             {
                 props: { variant: 'contained', color: 'default' },
@@ -162,6 +184,14 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
                     },
                 },
             },
+            {
+                props: { variant: 'outlined', color: 'danger' },
+                style: (_e = {},
+                    _e["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
+                        color: tokens.color_border_focus_state_danger,
+                    })),
+                    _e),
+            },
             {
                 props: { variant: 'link', color: 'default' },
                 style: {

package/esm/input/outlined-input-overrides.js

@@ -1,18 +1,7 @@
-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 { outlinedInputClasses } from '@mui/material/OutlinedInput';
 export var createMuiOutlinedInputOverrides = function (_a) {
     var _b, _c, _d, _e;
-    var spacing = _a.spacing, transitions = _a.transitions, mixins = _a.mixins, tokens = _a.tokens;
+    var spacing = _a.spacing, transitions = _a.transitions, tokens = _a.tokens;
     return {
         defaultProps: {
             color: 'primary',
@@ -37,13 +26,19 @@ export var createMuiOutlinedInputOverrides = function (_a) {
                 _b["&:hover .".concat(outlinedInputClasses.notchedOutline)] = {
                     borderColor: tokens.color_border_input_hover,
                 },
-                _b["&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = __assign({ borderWidth: 2, borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
-                _b["&.".concat(outlinedInputClasses.focused, ":hover .").concat(outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
+                _b["&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = {
+                    borderWidth: 2,
+                    borderColor: tokens.color_border_focus,
+                },
+                _b["&.".concat(outlinedInputClasses.focused, ":hover .").concat(outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_focus,
+                },
                 _b["&.".concat(outlinedInputClasses.error, " .").concat(outlinedInputClasses.notchedOutline)] = {
                     borderColor: tokens.color_border_state_danger,
-                    borderWidth: 2,
                 },
-                _b["&.".concat(outlinedInputClasses.error, "&.").concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_state_danger }, mixins.focusRing({ color: tokens.color_border_focus_state_danger })),
+                _b["&.".concat(outlinedInputClasses.error, "&.").concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_focus_state_danger,
+                },
                 _b),
             notchedOutline: {
                 top: 0,

package/esm/radio/radio-overrides.js

@@ -24,7 +24,7 @@ export var createMuiRadioOverrides = function (_a) {
                     duration: transitions.duration.short,
                 }),
                 color: tokens.color_border_input,
-                '&:focus-within svg': __assign({ borderRadius: '50%' }, mixins.focusRing()),
+                '&:focus-within svg': __assign({ borderRadius: '50%', outlineOffset: 2 }, mixins.focusRing()),
                 // switch base is overriding this. Resetting it here.
                 '&&': {
                     padding: 0,

package/esm/switch/switch-overrides.js

@@ -1,3 +1,14 @@
+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 { switchClasses } from '@mui/material/Switch';
 var SWITCH_DIMENSIONS = {
     heightPx: 24,
@@ -19,7 +30,7 @@ export var createMuiSwitchOverrides = function (_a) {
                 padding: 0,
                 overflow: 'visible',
                 '&:focus-within,&.Mui-focused': (_b = {},
-                    _b["& .".concat(switchClasses.track)] = mixins.focusRing(),
+                    _b["& .".concat(switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
                     _b),
             },
             colorPrimary: (_c = {

package/esm/tabs/tab/tab-override.js

@@ -1,18 +1,7 @@
-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 { tabClasses } from '@mui/material/Tab';
 export var createMuiTabOverrides = function (_a) {
     var _b, _c;
-    var tokens = _a.tokens, spacing = _a.spacing, breakpoints = _a.breakpoints, typography = _a.typography, mixins = _a.mixins;
+    var tokens = _a.tokens, spacing = _a.spacing, breakpoints = _a.breakpoints, typography = _a.typography;
     return {
         variants: [
             {
@@ -45,7 +34,9 @@ export var createMuiTabOverrides = function (_a) {
                 _c['&:hover'] = {
                     color: tokens.color_fg_selected,
                 },
-                _c['&:focus-visible'] = __assign({}, mixins.focusRing({ type: 'inset' })),
+                _c['&:focus-visible'] = {
+                    boxShadow: "0 0 0 2px ".concat(tokens.color_border_focus, " inset"),
+                },
                 _c.color = tokens.color_fg_link_subtle,
                 _c.fontWeight = typography.fontWeightRegular,
                 _c),

package/esm/theme/create-mixins.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { alpha, getContrastRatio } from '../styles/color-manipulator';
+import { getContrastRatio } from '../styles/color-manipulator';
 import { shadeMap } from './colors';
 export var createMixins = function (_a) {
     var palette = _a.palette, tokens = _a.tokens, _b = _a.overrides, overrides = _b === void 0 ? {} : _b;
@@ -37,10 +37,9 @@ export var createMixins = function (_a) {
     };
     var focusRing = function (options) {
         if (options === void 0) { options = {}; }
-        var _a = options.color, color = _a === void 0 ? tokens.color_border_focus_bold : _a, _b = options.type, type = _b === void 0 ? 'default' : _b, _c = options.opacity, opacity = _c === void 0 ? palette.mode === 'light' ? 0.25 : 0.5 : _c;
-        var shadow = "".concat(opacity === 1 ? color : alpha(color, opacity), " 0px 0px 0px 0.25em");
+        var _a = options.color, color = _a === void 0 ? tokens.color_border_focus : _a;
         return {
-            boxShadow: type === 'default' ? shadow : "inset ".concat(shadow),
+            outline: "2px solid ".concat(color),
         };
     };
     var borderAsBoxShadow = function (color, width) {
@@ -58,7 +57,7 @@ export var createMixins = function (_a) {
             },
             hover: hoverStyles,
             active: hoverStyles,
-            focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static, opacity: 1 })),
+            focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static })),
         };
     };
     var getColorModeValue = function (_a) {

package/expansion-panel/expansion-panel-details.d.ts

@@ -1,3 +1,3 @@
 import AccordionDetails, { AccordionDetailsProps } from '@mui/material/AccordionDetails';
-export declare type IExpansionPanelDetailsProps = AccordionDetailsProps;
+export type IExpansionPanelDetailsProps = AccordionDetailsProps;
 export declare const ExpansionPanelDetails: import("styled-components").StyledComponent<typeof AccordionDetails, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;

package/expansion-panel/expansion-panel-header.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ICardHeaderProps } from '../card';
-export declare type IExpansionPanelHeaderProps = ICardHeaderProps;
+export type IExpansionPanelHeaderProps = ICardHeaderProps;
 export declare const ExpansionPanelHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<import("../card").ICardContextValue> & {
     action?: import("react").ReactNode;
     avatar?: import("react").ReactNode;

package/expansion-panel/expansion-panel-summary.d.ts

@@ -1,3 +1,3 @@
 import { AccordionSummaryProps } from '@mui/material/AccordionSummary';
-export declare type IExpansionPanelSummaryProps = AccordionSummaryProps;
+export type IExpansionPanelSummaryProps = AccordionSummaryProps;
 export declare const ExpansionPanelSummary: import("styled-components").StyledComponent<import("@mui/material").ExtendButtonBase<import("@mui/material/AccordionSummary").AccordionSummaryTypeMap<{}, "div">>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;

package/expansion-panel/expansion-panel.d.ts

@@ -1,3 +1,3 @@
 import { AccordionProps } from '@mui/material/Accordion';
-export declare type IExpansionPanelProps = AccordionProps;
+export type IExpansionPanelProps = AccordionProps;
 export declare const ExpansionPanel: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Accordion").AccordionTypeMap<{}, "div">>, import("..").ITheme, import("@mui/system").MUIStyledCommonProps<import("..").ITheme>, never>;

package/field-set/field-set-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const fieldSetComponentName: "QuantumFieldSet";
 export declare function getFieldSetUtilityClass(slot: string): string;
 export declare const fieldSetClasses: Record<"root" | "availabilityLabel" | "labelContent" | "labelText" | "descriptionText" | "contentWrapper", string>;
-export declare type FieldSetClasses = typeof fieldSetClasses;
-export declare type FieldSetClassKey = keyof FieldSetClasses;
+export type FieldSetClasses = typeof fieldSetClasses;
+export type FieldSetClassKey = keyof FieldSetClasses;

package/field-set/field-set.d.ts

@@ -3,8 +3,8 @@ import { IFormLayoutProps } from '../form';
 import { ILabelProps } from '../label';
 import { IStyledComponentProps } from '../styled';
 import { FieldSetClasses } from './field-set-classes';
-export declare type IFieldSetOwnerState = Pick<IFieldSetProps, 'layout'>;
-export declare type IFieldSetProps = IStyledComponentProps<{
+export type IFieldSetOwnerState = Pick<IFieldSetProps, 'layout'>;
+export type IFieldSetProps = IStyledComponentProps<{
     props: Pick<IFormLayoutProps, 'layout'> & Pick<ILabelProps, 'productReleaseStage'> & {
         label?: React.ReactNode;
         description?: React.ReactNode;

package/floating-panel/floating-panel.d.ts

@@ -12,7 +12,7 @@ export interface IFloatingPanelOwnerState {
     onClose?: (() => void) | undefined;
     open: boolean;
 }
-export declare type IFloatingPanelProps = IStyledComponentProps<{
+export type IFloatingPanelProps = IStyledComponentProps<{
     props: IFloatingPanelOwnerState;
     children: React.ReactNode;
     defaultComponent: 'div';

package/form/form-actions/form-actions-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const formActionsComponentName: "QuantumFormActions";
 export declare function getFormActionsUtilityClass(slot: string): string;
 export declare const formActionsClasses: Record<"root" | "actions", string>;
-export declare type FormActionsClasses = typeof formActionsClasses;
-export declare type FormActionsClassKey = keyof FormActionsClasses;
+export type FormActionsClasses = typeof formActionsClasses;
+export type FormActionsClassKey = keyof FormActionsClasses;

package/form/form-actions/form-actions.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { IFormLayoutProps } from '../form-layout';
 import { IStyledComponentProps } from '../../styled';
 import { FormActionsClasses } from './form-actions-classes';
-export declare type IFormActionsOwnerState = Pick<IFormActionsProps, 'layout' | 'disableSpacing'>;
-export declare type IFormActionsProps = IStyledComponentProps<{
+export type IFormActionsOwnerState = Pick<IFormActionsProps, 'layout' | 'disableSpacing'>;
+export type IFormActionsProps = IStyledComponentProps<{
     props: Pick<IFormLayoutProps, 'layout'> & {
         disableSpacing?: boolean;
         classes?: Partial<FormActionsClasses>;

package/form/form-control-label/form-control-label-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const formControlLabelComponentName: "QuantumFormControlLabel";
 export declare function getFormControlLabelUtilityClass(slot: string): string;
 export declare const formControlLabelClasses: Record<"label" | "container" | "root" | "decoration" | "helperText" | "labelContainer" | "controlLabel", string>;
-export declare type FormControlLabelClasses = typeof formControlLabelClasses;
-export declare type FormControlLabelClassKey = keyof FormControlLabelClasses;
+export type FormControlLabelClasses = typeof formControlLabelClasses;
+export type FormControlLabelClassKey = keyof FormControlLabelClasses;

package/form/form-control-label/form-control-label.d.ts

@@ -11,5 +11,5 @@ export interface IFormControlLabelProps extends Omit<FormControlLabelProps, 'lab
     decoration?: React.ReactNode;
     classes?: Partial<FormControlLabelClasses>;
 }
-export declare type IFormControlLabelOwnerState = Pick<IFormControlLabelProps, 'noWrap' | 'height'>;
-export declare const FormControlLabel: React.ForwardRefExoticComponent<Pick<IFormControlLabelProps, "form" | "label" | "slot" | "style" | "title" | "color" | "disabled" | "hidden" | "height" | "translate" | "className" | "classes" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "componentsProps" | "slotProps" | "value" | "name" | "disableTypography" | "noWrap" | "required" | "htmlFor" | "decoration" | "inputRef" | "checked" | "helperText" | "control" | "labelPlacement" | "HelperTextProps"> & React.RefAttributes<HTMLLabelElement>>;
+export type IFormControlLabelOwnerState = Pick<IFormControlLabelProps, 'noWrap' | 'height'>;
+export declare const FormControlLabel: React.ForwardRefExoticComponent<Omit<IFormControlLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/form/form-field/form-field-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const formFieldComponentName: "QuantumFormField";
 export declare function getFormFieldUtilityClass(slot: string): string;
 export declare const formFieldClasses: Record<"label" | "error" | "root" | "helperText", string>;
-export declare type FormFieldClasses = typeof formFieldClasses;
-export declare type FormFieldClassKey = keyof FormFieldClasses;
+export type FormFieldClasses = typeof formFieldClasses;
+export type FormFieldClassKey = keyof FormFieldClasses;

package/form/form-field/form-field.d.ts

@@ -8,7 +8,7 @@ export interface IFormControlRenderProps {
     helperTextId?: string;
     errorTextId?: string;
 }
-export declare type FormControlRenderer = (props: IFormControlRenderProps) => React.ReactNode;
+export type FormControlRenderer = (props: IFormControlRenderProps) => React.ReactNode;
 export interface IFormFieldProps extends Omit<IFormControlProps, 'onChange' | 'defaultValue' | 'color' | 'error' | 'children'> {
     name?: string;
     /** Props applied to the [`FormHelperText`](/api/form-helper-text/) element. */
@@ -29,4 +29,4 @@ export interface IFormFieldProps extends Omit<IFormControlProps, 'onChange' | 'd
     children?: React.ReactNode | FormControlRenderer;
     classes?: Partial<FormFieldClasses>;
 }
-export declare const FormField: React.ForwardRefExoticComponent<Pick<IFormFieldProps, "label" | "slot" | "style" | "title" | "error" | "disabled" | "hidden" | "size" | "translate" | "margin" | "className" | "classes" | "children" | "sx" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "fullWidth" | "component" | "focused" | "hiddenLabel" | "required" | "readOnly" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "ErrorHelperTextProps"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FormField: React.ForwardRefExoticComponent<Omit<IFormFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/form/form-helper-text/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
-export declare type IFormHelperTextProps = Omit<FormHelperTextProps, 'variant'>;
+export type IFormHelperTextProps = Omit<FormHelperTextProps, 'variant'>;
 export declare const FormHelperText: import("react").ComponentType<FormHelperTextProps<"p", {}>>;

package/form/form-layout/form-layout-context.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type FormLayoutType = 'inline' | 'two-column';
+type FormLayoutType = 'inline' | 'two-column';
 export interface IFormLayoutContextValue {
     /** @default "two-column" */
     layout: FormLayoutType;

package/foundations/token-tables.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-export declare const ColorTokens: () => JSX.Element;
+import * as React from 'react';
+export declare const ColorTokens: () => React.JSX.Element;
 export declare const ThemeTokens: ({ mode }: {
     mode: 'light' | 'dark';
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const TypographyTokens: ({ variant }: {
     variant: any;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const TypographyGlobalTokens: ({ variant }: {
     variant: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/gallery-layout/gallery-layout-item/gallery-layout-item.d.ts

@@ -1,5 +1,5 @@
 import { IStyledComponentProps } from '../../styled';
-export declare type IGalleryLayoutItemProps = IStyledComponentProps<{
+export type IGalleryLayoutItemProps = IStyledComponentProps<{
     props: {};
     defaultComponent: 'li';
 }>;

package/gallery-layout/gallery-layout.d.ts

@@ -7,9 +7,9 @@ export declare const gallerylayoutSizes: {
     medium: string;
     large: string;
 };
-export declare type GalleryLayoutSize = keyof typeof gallerylayoutSizes;
+export type GalleryLayoutSize = keyof typeof gallerylayoutSizes;
 export declare const getValueForGalleryLayoutSize: (size: GalleryLayoutSize | null) => string | null;
-export declare type IGalleryLayoutProps = IStyledComponentProps<{
+export type IGalleryLayoutProps = IStyledComponentProps<{
     props: ILayoutComponentProps & {
         size?: ResponsiveStyleValue<GalleryLayoutSize>;
     };