@astral/ui 4.36.1 → 4.37.1

package/components/Accordion/styles.d.ts

@@ -25,6 +25,7 @@ export declare const Summary: import("../styled").StyledComponent<import("../Typ
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Alert/styles.d.ts

@@ -42,6 +42,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -55,6 +56,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/AutoSaveIndicator/styles.d.ts

@@ -13,6 +13,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -31,6 +32,7 @@ export declare const IndicatorTypography: import("../styled").StyledComponent<im
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AutocompleteRenderInputParams } from './types';
-export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material/Autocomplete/Autocomplete").AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<import("../TextField").TextFieldProps, "label" | "success" | "error" | "placeholder" | "required" | "inputRef" | "helperText" | "inputProps"> & {
+export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<import("../TextField").TextFieldProps, "label" | "success" | "error" | "placeholder" | "required" | "inputRef" | "helperText" | "inputProps"> & {
     renderInput?: ((props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").TextFieldProps>, "color" | "select" | "margin" | "variant" | "multiline" | "SelectProps"> & {
         success?: boolean | undefined;
         startAdornment?: import("react").ReactNode;

package/components/Autocomplete/Autocomplete.js

@@ -1,29 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ListItemIcon from '@mui/material/ListItemIcon';
 import MuiPopper from '@mui/material/Popper';
-import { useCallback } from 'react';
+import { useCallback, useRef, } from 'react';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { DownOutlineMd } from '../../icons/DownOutlineMd';
 import { Checkbox } from '../Checkbox';
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
 import { Loader } from '../Loader';
 import { OverflowTypography } from '../OverflowTypography';
-import { Tag } from '../Tag';
+import { TagsList } from '../TagsList';
 import { TextField } from '../TextField';
 import { classNames } from '../utils/classNames';
-import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, } from './constants';
+import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, INPUT_MIN_WIDTH, } from './constants';
 import { StyledAutocomplete, StyledMenuItem } from './styles';
 import { useLogic } from './useLogic';
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, ...restProps } = props;
+    const inputBaseRef = useRef(null);
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading, value, onChange, ...restProps } = props;
     const renderInput = useCallback((inputParams) => {
+        const createStartAdornment = () => {
+            if (!multiple || !Array.isArray(value)) {
+                return null;
+            }
+            const tagsListElement = (_jsx(TagsList, { data: value, getOptionLabel: (option) => getOptionLabel?.(option) ??
+                    option.toString(), inputContainerRef: inputBaseRef, reservedWidth: INPUT_MIN_WIDTH, onChange: (tagValues) => {
+                    if (!onChange) {
+                        return;
+                    }
+                    const syntheticEvent = {
+                        type: 'change',
+                        target: { value: tagValues },
+                        currentTarget: { value: tagValues },
+                    };
+                    const reason = 'removeOption';
+                    onChange(syntheticEvent, tagValues, reason);
+                } }));
+            return tagsListElement;
+        };
         const generalInputParams = {
             ...inputParams,
             inputProps: {
                 ...inputParams.inputProps,
                 className: classNames(inputParams?.inputProps?.className, inputProps?.className),
             },
+            InputProps: {
+                ...inputParams.InputProps,
+                ref: (element) => {
+                    inputBaseRef.current = element;
+                    const orig = inputParams.InputProps?.ref;
+                    if (typeof orig === 'function') {
+                        orig(element);
+                    }
+                    else if (orig) {
+                        orig.current = element;
+                    }
+                },
+                // Если есть externalRenderTags, используем renderTags(mui использует inputParams.InputProps?.startAdornment)
+                startAdornment: externalRenderTags
+                    ? inputParams.InputProps?.startAdornment
+                    : createStartAdornment(),
+            },
             inputRef,
             required,
             placeholder: isValueEmpty ? placeholder : '',
@@ -40,7 +77,9 @@ const AutocompleteInner = (props, ref) => {
         return _jsx(TextField, { ...generalInputParams });
     }, [
         isValueEmpty,
+        value,
         externalRenderInput,
+        externalRenderTags,
         inputRef,
         required,
         placeholder,
@@ -50,6 +89,9 @@ const AutocompleteInner = (props, ref) => {
         helperText,
         size,
         hideHelperText,
+        multiple,
+        getOptionLabel,
+        onChange,
     ]);
     const renderOption = useCallback((optionProps, option, optionState, ownerState) => {
         if (externalRenderOption) {
@@ -59,26 +101,22 @@ const AutocompleteInner = (props, ref) => {
         const { key, ...restOptionProps } = optionProps;
         return (_jsxs(StyledMenuItem, { selected: isSelected, ...restOptionProps, children: [multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { role: "menuitemcheckbox", checked: isSelected }) })), _jsx(OverflowTypography, { rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, ...overflowOption, children: optionProps.key })] }, key));
     }, [multiple, overflowOption, externalRenderOption]);
-    const renderTags = useCallback((tags, getTagProps, ownerSate) => {
-        if (externalRenderTags) {
-            return externalRenderTags(tags, getTagProps, ownerSate);
-        }
-        return tags.map((tag, index) => {
-            const title = getOptionLabel?.(tag) || '';
-            const { key, ...tagProps } = getTagProps({ index });
-            return (_jsx(Tag, { variant: "light", color: "grey", label: title, ...tagProps }, key));
-        });
-    }, [getOptionLabel, externalRenderTags]);
     const renderPopper = useCallback((popperProps) => {
         if (!isPopperVisible) {
             return null;
         }
         return _jsx(MuiPopper, { ...popperProps });
     }, [isPopperVisible]);
+    const renderTags = useCallback((tags, getTagProps, ownerState) => {
+        if (externalRenderTags) {
+            return externalRenderTags(tags, getTagProps, ownerState);
+        }
+        return null;
+    }, [externalRenderTags]);
     return (_jsx(StyledAutocomplete, { ...restProps, ref: ref, size: size, clearText: clearText, closeText: !loading ? closeText : '', openText: !loading ? openText : '', loadingText: loadingText, multiple: multiple, disableCloseOnSelect: multiple, clearIcon: _jsx(CrossOutlineMd, {}), loading: loading, popupIcon: loading ? _jsx(Loader, { color: "primary", size: "small" }) : _jsx(DownOutlineMd, {}), forcePopupIcon: true, slotProps: {
             popper: {
                 component: renderPopper,
             },
-        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, ...autocompleteProps }));
+        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, onChange: onChange, ...autocompleteProps }));
 };
 export const Autocomplete = forwardRefWithGeneric(AutocompleteInner);

package/components/Autocomplete/constants.d.ts

@@ -1,2 +1,8 @@
 export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export declare const INPUT_MIN_WIDTH = 110;
 export declare const DEFAULT_PLACEHOLDER = "\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0434\u043B\u044F \u043F\u043E\u0438\u0441\u043A\u0430";
+export declare const autocompleteClassnames: {
+    root: string;
+    multiple: string;
+    emptyValue: string;
+};

package/components/Autocomplete/constants.js

@@ -1,2 +1,9 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export const INPUT_MIN_WIDTH = 110;
 export const DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';
+export const autocompleteClassnames = {
+    root: createUIKitClassname('autocomplete'),
+    multiple: createUIKitClassname('autocomplete_multiple'),
+    emptyValue: createUIKitClassname('autocomplete_empty-value'),
+};

package/components/Autocomplete/styles.js

@@ -5,6 +5,7 @@ import { inputBaseClasses } from '@mui/material/InputBase';
 import { MenuItem } from '../MenuItem';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
+import { autocompleteClassnames, INPUT_MIN_WIDTH } from './constants';
 export const StyledMenuItem = styled(MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 
@@ -23,5 +24,18 @@ export const StyledAutocomplete = styled(MuiAutocomplete) `
   
   & .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}:hover {
       background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
-    }
+  }
+
+  &:not(.${autocompleteClassnames.emptyValue}) .${inputBaseClasses.root} {
+    gap: ${({ theme }) => theme.spacing(3)};
+  }
+
+  & .${autocompleteClasses.inputRoot} .${inputBaseClasses.input} {
+    min-width: ${INPUT_MIN_WIDTH}px;
+  }
+
+  & .${autocompleteClasses.inputRoot} {
+    flex-wrap: nowrap;
+  }
+    
 `;

package/components/Autocomplete/useLogic/useLogic.d.ts

@@ -2,10 +2,11 @@ import { type AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
 import { type SyntheticEvent } from 'react';
 import { type AutocompleteProps } from '../types';
 type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
-export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
+export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
     isValueEmpty: boolean;
     isPopperVisible: boolean | undefined;
     autocompleteProps: {
+        className: string;
         isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
         autoHighlight: boolean;
         noOptionsText: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;

package/components/Autocomplete/useLogic/useLogic.js

@@ -1,6 +1,8 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { classNames } from '../../utils/classNames';
+import { autocompleteClassnames } from '../constants';
 import { checkIsInputEmpty } from './utils';
-export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
     const [innerInputValue, setInnerInputValue] = useState('');
     const isValueEmpty = checkIsInputEmpty(value);
     const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
@@ -21,10 +23,17 @@ export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToVal
             setInnerInputValue(currentValue);
         }
     };
+    const classnames = useMemo(() => {
+        return classNames(className, autocompleteClassnames.root, {
+            [autocompleteClassnames.multiple]: multiple,
+            [autocompleteClassnames.emptyValue]: isValueEmpty,
+        });
+    }, [multiple, isValueEmpty]);
     return {
         isValueEmpty,
         isPopperVisible,
         autocompleteProps: {
+            className: classnames,
             isOptionEqualToValue,
             autoHighlight: freeSolo ? false : autoHighlight,
             noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,

package/components/BottomDrawer/styles.d.ts

@@ -17,6 +17,7 @@ export declare const HeaderTitle: import("../styled").StyledComponent<import("@m
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement>, {}, {}>;
 export declare const Body: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/components/Chip/styles.d.ts

@@ -21,6 +21,7 @@ export declare const AdornmentWrapper: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/CodeField/styles.d.ts

@@ -23,6 +23,7 @@ export declare const FieldLabel: import("../styled").StyledComponent<import("../
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/CollapsibleTypography/CollapsibleTypography.d.ts

@@ -29,6 +29,7 @@ export declare const CollapsibleTypography: import("react").ForwardRefExoticComp
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/components/CollapsibleTypography/styles.d.ts

@@ -14,6 +14,7 @@ export declare const Wrapper: import("../styled").StyledComponent<import("../Typ
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & CollapsibleTypographyWrapperProps, {}, {}>;

package/components/ConfirmAction/styles.d.ts

@@ -9,6 +9,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/CopyTypography/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Wrapper: import("../styled").StyledComponent<import("../Typ
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/CopyTypography/useLogic/useLogic.d.ts

@@ -15,6 +15,7 @@ export declare const useLogic: ({ children, copyPosition, copyText, isShowCopyTe
         colorIntensity?: import("../..").Intensity | undefined;
         component?: import("../../Typography/types").ComponentProp | undefined;
         isUpperCase?: boolean | undefined;
+        withoutCalt?: boolean | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;

package/components/DashboardSidebarPopover/styles.d.ts

@@ -9,6 +9,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGridPagination/styles.d.ts

@@ -9,6 +9,7 @@ export declare const Range: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGridPaginationContainer/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Range: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DatePicker/DateCalendar/DateCalendarHead/styles.d.ts

@@ -8,6 +8,7 @@ export declare const HeadText: import("../../../styled").StyledComponent<import(
     colorIntensity?: import("../../../Typography").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Description/Value/styles.d.ts

@@ -15,6 +15,7 @@ export declare const StyledTypography: import("../../styled").StyledComponent<im
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyledTypographyProps, {}, {}>;
@@ -24,6 +25,7 @@ export declare const StyledCopyTypography: import("../../styled").StyledComponen
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     copyText?: string | undefined;
     copyPosition?: "left" | "right" | undefined;

package/components/DescriptionList/styles.d.ts

@@ -43,6 +43,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Fieldset/styles.d.ts

@@ -11,6 +11,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -20,6 +21,7 @@ export declare const Description: import("../styled").StyledComponent<import("..
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Filename/styles.d.ts

@@ -13,6 +13,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/FlowButton/styles.d.ts

@@ -14,6 +14,7 @@ export declare const TargetTextWrapper: import("../styled").StyledComponent<impo
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/JsonViewer/NodeValue/styles.d.ts

@@ -341,6 +341,7 @@ export declare const Value: import("../../styled").StyledComponent<import("../..
     colorIntensity?: import("../..").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {
@@ -354,6 +355,7 @@ export declare const CopyWrapper: import("../../styled").StyledComponent<import(
     colorIntensity?: import("../..").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     copyText?: string | undefined;
     copyPosition?: "left" | "right" | undefined;
@@ -1037,6 +1039,7 @@ export declare const GuidValue: import("../../styled").StyledComponent<import(".
     colorIntensity?: import("../..").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & {

package/components/LegacyNotification/NotificationTemplate/styles.d.ts

@@ -28,6 +28,7 @@ export declare const Content: import("../../styled").StyledComponent<import("../
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -50,6 +51,7 @@ export declare const Title: import("../../styled").StyledComponent<import("../..
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/MaskField/MaskField.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { IMaskMixin } from 'react-imask';
-import { TextField } from '../TextField';
+import { StyledTextField } from './styles';
 const MaskedTextField = IMaskMixin(({ ...props }) => {
     const textFieldProps = props;
-    return _jsx(TextField, { ...textFieldProps });
+    return _jsx(StyledTextField, { ...textFieldProps });
 });
 export const MaskField = forwardRef(({ onChange, onAccept, ...props }, ref) => {
     const maskFieldProps = { unmask: true, ...props };

package/components/MaskField/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<Omit<import("../TextField").TextFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/MaskField/styles.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { TextField } from '../TextField';
+export const StyledTextField = styled(TextField) `
+  font-feature-settings: "calt" 0;
+`;

package/components/MenuGroup/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Label: import("../styled").StyledComponent<import("../Typog
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/MenuOrganization/OrganizationButton/styles.d.ts

@@ -24,6 +24,7 @@ export declare const StyledTypography: import("../../styled/styled").StyledCompo
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/MenuOrganization/OrganizationGroup/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Label: import("../../styled").StyledComponent<import("../..
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/MenuOrganization/styles.d.ts

@@ -22,6 +22,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/MinimalisticPagination/styles.d.ts

@@ -5,6 +5,7 @@ export declare const PageItem: import("../styled").StyledComponent<import("../Ty
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/NavMenu/Item/ItemButton/styles.d.ts

@@ -632,6 +632,7 @@ export declare const NavMenuItemButtonText: import("../../../styled").StyledComp
     colorIntensity?: import("../../..").Intensity | undefined;
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {

package/components/NotFoundPage/styles.d.ts

@@ -9,6 +9,7 @@ export declare const Header: import("../styled").StyledComponent<import("../Typo
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -18,6 +19,7 @@ export declare const Subheader: import("../styled").StyledComponent<import("../T
     colorIntensity?: import("../Typography").Intensity | undefined;
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Notification/NotificationTemplate/styles.d.ts

@@ -20,6 +20,7 @@ export declare const Content: import("../../styled").StyledComponent<import("../
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -46,6 +47,7 @@ export declare const Title: import("../../styled").StyledComponent<import("../..
     colorIntensity?: import("../../Typography").Intensity | undefined;
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;